fix: improve BashTool command display and enhance ToolTitle layout (#11572)

* fix: improve BashTool command display and enhance ToolTitle layout * style(ant.css): fix overflow in collapse header text * fix(i18n): translate toolPendingFallback in multiple languages --------- Co-authored-by: icarus <eurfelux@gmail.com>
2025-11-30 17:58:23 +08:00
parent 3b1155b538
commit cc676d4bef
14 changed files with 55 additions and 22 deletions
--- a/src/renderer/src/assets/styles/ant.css
+++ b/src/renderer/src/assets/styles/ant.css
@@ -215,6 +215,10 @@
  border-top: none !important;
 }

+.ant-collapse-header-text {
+  overflow-x: hidden;
+}
+
 .ant-slider .ant-slider-handle::after {
  box-shadow: 0 1px 4px 0px rgb(128 128 128 / 50%) !important;
 }
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@@ -280,6 +280,7 @@
        "denied": "Tool request was denied.",
        "timeout": "Tool request timed out before receiving approval."
      },
+      "toolPendingFallback": "Tool",
      "waiting": "Waiting for tool permission decision..."
    },
    "type": {
--- a/src/renderer/src/i18n/locales/zh-cn.json
+++ b/src/renderer/src/i18n/locales/zh-cn.json
@@ -280,6 +280,7 @@
        "denied": "工具请求已被拒绝。",
        "timeout": "工具请求在收到批准前超时。"
      },
+      "toolPendingFallback": "工具",
      "waiting": "等待工具权限决定..."
    },
    "type": {
--- a/src/renderer/src/i18n/locales/zh-tw.json
+++ b/src/renderer/src/i18n/locales/zh-tw.json
@@ -280,6 +280,7 @@
        "denied": "工具請求已被拒絕。",
        "timeout": "工具請求在收到核准前逾時。"
      },
+      "toolPendingFallback": "工具",
      "waiting": "等待工具權限決定..."
    },
    "type": {
--- a/src/renderer/src/i18n/translate/de-de.json
+++ b/src/renderer/src/i18n/translate/de-de.json
@@ -280,6 +280,7 @@
        "denied": "Tool-Anfrage wurde abgelehnt.",
        "timeout": "Tool-Anfrage ist abgelaufen, bevor eine Genehmigung eingegangen ist."
      },
+      "toolPendingFallback": "Werkzeug",
      "waiting": "Warten auf Entscheidung über Tool-Berechtigung..."
    },
    "type": {
--- a/src/renderer/src/i18n/translate/el-gr.json
+++ b/src/renderer/src/i18n/translate/el-gr.json
@@ -280,6 +280,7 @@
        "denied": "Το αίτημα για εργαλείο απορρίφθηκε.",
        "timeout": "Το αίτημα για το εργαλείο έληξε πριν λάβει έγκριση."
      },
+      "toolPendingFallback": "Εργαλείο",
      "waiting": "Αναμονή για απόφαση άδειας εργαλείου..."
    },
    "type": {
--- a/src/renderer/src/i18n/translate/es-es.json
+++ b/src/renderer/src/i18n/translate/es-es.json
@@ -280,6 +280,7 @@
        "denied": "La solicitud de herramienta fue denegada.",
        "timeout": "La solicitud de herramienta expiró antes de recibir la aprobación."
      },
+      "toolPendingFallback": "Herramienta",
      "waiting": "Esperando la decisión de permiso de la herramienta..."
    },
    "type": {
--- a/src/renderer/src/i18n/translate/fr-fr.json
+++ b/src/renderer/src/i18n/translate/fr-fr.json
@@ -280,6 +280,7 @@
        "denied": "La demande d'outil a été refusée.",
        "timeout": "La demande d'outil a expiré avant d'obtenir l'approbation."
      },
+      "toolPendingFallback": "Outil",
      "waiting": "En attente de la décision d'autorisation de l'outil..."
    },
    "type": {
--- a/src/renderer/src/i18n/translate/ja-jp.json
+++ b/src/renderer/src/i18n/translate/ja-jp.json
@@ -280,6 +280,7 @@
        "denied": "ツールリクエストは拒否されました。",
        "timeout": "ツールリクエストは承認を受ける前にタイムアウトしました。"
      },
+      "toolPendingFallback": "ツール",
      "waiting": "ツールの許可決定を待っています..."
    },
    "type": {
--- a/src/renderer/src/i18n/translate/pt-pt.json
+++ b/src/renderer/src/i18n/translate/pt-pt.json
@@ -280,6 +280,7 @@
        "denied": "Solicitação de ferramenta foi negada.",
        "timeout": "A solicitação da ferramenta expirou antes de receber aprovação."
      },
+      "toolPendingFallback": "Ferramenta",
      "waiting": "Aguardando decisão de permissão da ferramenta..."
    },
    "type": {
--- a/src/renderer/src/i18n/translate/ru-ru.json
+++ b/src/renderer/src/i18n/translate/ru-ru.json
@@ -280,6 +280,7 @@
        "denied": "Запрос на инструмент был отклонён.",
        "timeout": "Запрос на инструмент превысил время ожидания до получения подтверждения."
      },
+      "toolPendingFallback": "Инструмент",
      "waiting": "Ожидание решения о разрешении на использование инструмента..."
    },
    "type": {
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/BashTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/BashTool.tsx
@@ -5,8 +5,6 @@ import { Terminal } from 'lucide-react'
 import { ToolTitle } from './GenericTools'
 import type { BashToolInput as BashToolInputType, BashToolOutput as BashToolOutputType } from './types'

-const MAX_TAG_LENGTH = 100
-
 export function BashTool({
  input,
  output
@@ -17,12 +15,10 @@ export function BashTool({
  // 如果有输出，计算输出行数
  const outputLines = output ? output.split('\n').length : 0

-  // 处理命令字符串的截断，添加空值检查
+  // 处理命令字符串，添加空值检查
  const command = input?.command ?? ''
-  const needsTruncate = command.length > MAX_TAG_LENGTH
-  const displayCommand = needsTruncate ? `${command.slice(0, MAX_TAG_LENGTH)}...` : command

-  const tagContent = <Tag className="whitespace-pre-wrap break-all font-mono">{displayCommand}</Tag>
+  const tagContent = <Tag className="!m-0 max-w-full truncate font-mono">{command}</Tag>

  return {
    key: 'tool',
@@ -34,16 +30,12 @@ export function BashTool({
          params={input?.description}
          stats={output ? `${outputLines} ${outputLines === 1 ? 'line' : 'lines'}` : undefined}
        />
-        <div className="mt-1">
-          {needsTruncate ? (
+        <div className="mt-1 max-w-full">
          <Popover
-              content={<div className="max-w-xl whitespace-pre-wrap break-all font-mono">{command}</div>}
+            content={<div className="max-w-xl whitespace-pre-wrap break-all font-mono text-xs">{command}</div>}
            trigger="hover">
            {tagContent}
          </Popover>
-          ) : (
-            tagContent
-          )}
        </div>
      </>
    ),
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/GenericTools.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/GenericTools.tsx
@@ -18,9 +18,9 @@ export function ToolTitle({
 }) {
  return (
    <div className={`flex items-center gap-1 ${className}`}>
-      {icon}
-      {label && <span className="font-medium text-sm">{label}</span>}
-      {params && <span className="flex-shrink-0 text-muted-foreground text-xs">{params}</span>}
+      {icon && <span className="flex flex-shrink-0">{icon}</span>}
+      {label && <span className="flex-shrink-0 font-medium text-sm">{label}</span>}
+      {params && <span className="min-w-0 truncate text-muted-foreground text-xs">{params}</span>}
      {stats && <span className="flex-shrink-0 text-muted-foreground text-xs">{stats}</span>}
    </div>
  )
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/index.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/index.tsx
@@ -1,7 +1,10 @@
 import { loggerService } from '@logger'
+import { useAppSelector } from '@renderer/store'
+import { selectPendingPermission } from '@renderer/store/toolPermissions'
 import type { NormalToolResponse } from '@renderer/types'
 import type { CollapseProps } from 'antd'
-import { Collapse } from 'antd'
+import { Collapse, Spin } from 'antd'
+import { useTranslation } from 'react-i18next'

 // 导出所有类型
 export * from './types'
@@ -83,17 +86,41 @@ function ToolContent({ toolName, input, output }: { toolName: AgentToolsType; in
 // 统一的组件渲染入口
 export function MessageAgentTools({ toolResponse }: { toolResponse: NormalToolResponse }) {
  const { arguments: args, response, tool, status } = toolResponse
-  logger.info('Rendering agent tool response', {
+  logger.debug('Rendering agent tool response', {
    tool: tool,
    arguments: args,
+    status,
    response
  })

+  const pendingPermission = useAppSelector((state) =>
+    selectPendingPermission(state.toolPermissions, toolResponse.toolCallId)
+  )
+
  if (status === 'pending') {
+    if (pendingPermission) {
      return <ToolPermissionRequestCard toolResponse={toolResponse} />
    }
+    return <ToolPendingIndicator toolName={tool?.name} description={tool?.description} />
+  }

  return (
    <ToolContent toolName={tool.name as AgentToolsType} input={args as ToolInput} output={response as ToolOutput} />
  )
 }
+
+function ToolPendingIndicator({ toolName, description }: { toolName?: string; description?: string }) {
+  const { t } = useTranslation()
+  const label = toolName || t('agent.toolPermission.toolPendingFallback', 'Tool')
+  const detail = description?.trim() || t('agent.toolPermission.executing')
+
+  return (
+    <div className="flex w-full max-w-xl items-center gap-3 rounded-xl border border-default-200 bg-default-100 px-4 py-3 shadow-sm">
+      <Spin size="small" />
+      <div className="flex flex-col gap-1">
+        <span className="font-semibold text-default-700 text-sm">{label}</span>
+        <span className="text-default-500 text-xs">{detail}</span>
+      </div>
+    </div>
+  )
+}