@huyooo/ai-chat-frontend-vue 0.2.13 → 0.2.14

package/src/components/message/parts/ToolCallPart.vue

@@ -7,65 +7,83 @@
     :spinning="status === 'running'"
   >
     <template #header-actions>
-      <CopyButton :text="commandText" title="复制" />
+      <CopyButton :text="argsText" title="复制" />
     </template>
-    <div class="tool-call-content">
-      <!-- 命令显示区域 -->
-      <div class="tool-call-command">
-        <div class="command-header">
-          <span class="command-label">执行：</span>
-          <span class="command-name">{{ commandDisplay }}</span>
+    
+    <!-- 参数内容 -->
+    <!-- ⚠️ 注意：<pre> 会原样渲染模板里的换行/缩进；因此 command/text 直接用 v-text，避免顶部出现“大空白” -->
+    <pre v-if="argsType === 'json'" class="tool-args json"><code v-html="highlightedJson"></code></pre>
+    <pre v-else class="tool-args" :class="argsType" v-text="argsText"></pre>
+
+    <!-- 输出面板（stdout/stderr） -->
+    <div v-if="hasOutput" class="output-panel">
+      <div class="output-header">
+        <div class="output-tabs">
+          <button
+            class="tab"
+            :class="{ active: activeStream === 'stdout' }"
+            type="button"
+            @click="activeStream = 'stdout'"
+          >
+            正常输出
+          </button>
+          <button
+            class="tab"
+            :class="{ active: activeStream === 'stderr' }"
+            type="button"
+            @click="activeStream = 'stderr'"
+          >
+            异常/告警输出
+          </button>
         </div>
-        <code class="command-code">{{ commandText }}</code>
-      </div>
-
-      <!-- 执行结果（如果有） -->
-      <div v-if="result !== null" class="tool-call-result">
-        <div class="result-header">
-          <span class="result-label">结果：</span>
-          <span class="result-name"></span>
+        <div class="output-actions">
+          <button class="btn btn-save" type="button" @click="saveLog">
+            <Icon icon="lucide:download" width="14" />
+            保存日志
+          </button>
+          <CopyButton :text="activeOutputText" title="复制输出" />
         </div>
-        <code class="result-content">{{ formattedResult }}</code>
       </div>
-
-      <!-- 底部操作区域 -->
-      <div class="tool-call-footer">
-        <!-- 左侧：模式选择（始终可用，切换后影响后续操作） -->
-        <div class="footer-left">
-          <DropdownSelector
-            :value="currentMode"
-            :options="modeOptions"
-            @select="handleModeChange"
-          />
-        </div>
-
-        <!-- 右侧：执行状态或按钮 -->
-        <div class="footer-right">
-          <!-- pending 状态：显示跳过/运行按钮 -->
-          <div v-if="status === 'pending'" class="action-buttons">
-            <button class="btn btn-skip" @click="handleSkip">跳过</button>
-            <button class="btn btn-run" @click="handleRun">
-              运行
-              <Icon icon="lucide:arrow-right" width="14" />
-            </button>
-          </div>
-          <!-- running 状态：显示运行中状态 + 取消按钮 -->
-          <template v-else-if="status === 'running'">
-            <div class="execution-status running">
-              <Icon icon="lucide:loader-2" width="14" class="spinning" />
-              <span>运行中</span>
-            </div>
-            <button class="btn btn-cancel" @click="handleCancel">
-              <Icon icon="lucide:x" width="14" />
-              取消
-            </button>
-          </template>
-          <!-- done/error 状态：只显示状态 -->
-          <div v-else :class="['execution-status', status]">
-            <Icon :icon="statusDisplayIcon" width="14" />
-            <span>{{ statusText }}</span>
-          </div>
-        </div>
+      <pre class="output-body chat-scrollbar"><code>{{ activeOutputText || '(无输出)' }}</code></pre>
+    </div>
+    
+    <!-- 底部操作区 -->
+    <div class="tool-footer">
+      <!-- 左侧：模式选择 -->
+      <DropdownSelector
+        :value="currentMode"
+        :options="modeOptions"
+        @select="handleModeChange"
+      />
+      
+      <!-- 右侧：状态或按钮 -->
+      <div class="tool-actions">
+        <!-- pending：跳过/运行按钮 -->
+        <template v-if="status === 'pending'">
+          <button class="btn btn-skip" @click="handleSkip">跳过</button>
+          <button class="btn btn-run" @click="handleRun">
+            运行
+            <Icon icon="lucide:arrow-right" width="14" />
+          </button>
+        </template>
+        
+        <!-- running：取消按钮 -->
+        <template v-else-if="status === 'running'">
+          <span class="status-text running">
+            <Icon icon="lucide:loader-2" width="14" class="spinning" />
+            运行中
+          </span>
+          <button class="btn btn-cancel" @click="handleCancel">
+            <Icon icon="lucide:x" width="14" />
+            取消
+          </button>
+        </template>
+        
+        <!-- 其他状态：只显示状态 -->
+        <span v-else :class="['status-text', status]">
+          <Icon :icon="statusDisplayIcon" width="14" />
+          {{ statusText }}
+        </span>
       </div>
     </div>
   </CollapsibleCard>
@@ -77,24 +95,27 @@ import { Icon } from '@iconify/vue'
 import DropdownSelector from '../../input/DropdownSelector.vue'
 import CollapsibleCard from './CollapsibleCard.vue'
 import CopyButton from '../../common/CopyButton.vue'
+import { highlightCode } from '@huyooo/ai-chat-shared'
 import type { ChatAdapter } from '../../../adapter'
 import type { AutoRunConfig, AutoRunMode } from '@huyooo/ai-chat-bridge-electron/renderer'
 import type { StepsExpandedType } from '../../../types'
 
-interface Props {
+const props = withDefaults(defineProps<{
   id: string
   name: string
   args?: Record<string, unknown>
   status: 'pending' | 'running' | 'done' | 'error' | 'cancelled' | 'skipped'
-  result: unknown | null
+  output?: {
+    stdout?: string
+    stderr?: string
+  }
   expandedType?: StepsExpandedType
-  // 通过 props 传递，不使用 inject
   adapter?: ChatAdapter
+  /** 取消工具调用（优先使用上层传入，确保能同步更新 UI 状态） */
+  onCancelToolCall?: (toolCallId: string) => void
   autoRunConfig?: AutoRunConfig
   onSaveConfig?: (config: AutoRunConfig) => Promise<void>
-}
-
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   expandedType: 'auto',
 })
 
@@ -104,25 +125,27 @@ const modeOptions = [
   { value: 'run-everything', label: '自动执行' },
 ]
 
-// 当前模式：直接从配置读取
 const currentMode = computed(() => props.autoRunConfig?.mode ?? 'run-everything')
 
-// 命令显示
-const commandDisplay = computed(() => {
+// 参数类型：'json' | 'command' | 'text'
+const argsType = computed(() => {
   if (props.name === 'execute_command' && props.args?.command) {
-    const cmd = String(props.args.command)
-    const parts = cmd.trim().split(/\s+/)
-    return parts.slice(0, 3).join(' ') + (parts.length > 3 ? '...' : '')
+    return 'command'
   }
-  return props.name
+  if (props.args && Object.keys(props.args).length > 0) {
+    return 'json'
+  }
+  return 'text'
 })
 
-const commandText = computed(() => {
+// 参数文本（格式化后的）
+const argsText = computed(() => {
   if (props.name === 'execute_command' && props.args?.command) {
     return String(props.args.command)
   }
   if (props.args && Object.keys(props.args).length > 0) {
     try {
+      // JSON 格式化：2 空格缩进
       return JSON.stringify(props.args, null, 2)
     } catch {
       return String(props.args)
@@ -131,64 +154,62 @@ const commandText = computed(() => {
   return props.name
 })
 
-// 格式化执行结果
-const formattedResult = computed(() => {
-  if (props.result === null) return ''
-  if (typeof props.result === 'string') return props.result
-  try {
-    return JSON.stringify(props.result, null, 2)
-  } catch {
-    return String(props.result)
+// JSON 高亮后的 HTML
+const highlightedJson = computed(() => {
+  if (argsType.value === 'json') {
+    return highlightCode(argsText.value, 'json')
   }
+  return ''
 })
 
-// 折叠状态
-function getInitialExpanded(): boolean {
-  if (props.expandedType === 'open') return true
-  if (props.expandedType === 'close') return false
-  return props.status === 'pending' || props.status === 'running'
-}
+const hasOutput = computed(() => {
+  return !!(props.output?.stdout || props.output?.stderr)
+})
+
+const activeStream = ref<'stdout' | 'stderr'>('stdout')
+
+const activeOutputText = computed(() => {
+  return activeStream.value === 'stdout'
+    ? (props.output?.stdout ?? '')
+    : (props.output?.stderr ?? '')
+})
 
-const expanded = ref(getInitialExpanded())
+// 折叠状态
+const expanded = ref(
+  props.expandedType === 'open' ? true :
+  props.expandedType === 'close' ? false :
+  props.status === 'pending' || props.status === 'running'
+)
 
-// auto 模式下：状态变化时自动折叠/展开
 watch(() => props.status, (newStatus) => {
   if (props.expandedType === 'auto') {
     expanded.value = newStatus === 'pending' || newStatus === 'running'
   }
 })
 
-// 状态相关计算属性
-const statusIcon = computed(() => {
-  const icons: Record<string, string> = {
-    error: 'lucide:x-circle',
-    done: 'lucide:check-circle',
-    running: 'lucide:loader-2',
-    pending: 'lucide:clock',
-    cancelled: 'lucide:ban',
-    skipped: 'lucide:skip-forward',
-  }
-  return icons[props.status] ?? 'lucide:clock'
-})
-
-const statusIconColor = computed(() => {
-  const colors: Record<string, string> = {
-    error: 'var(--chat-error, #ef4444)',
-    done: 'var(--chat-success, #22c55e)',
-    running: 'var(--chat-accent, #3b82f6)',
-    pending: 'var(--chat-text-muted, #888)',
-    cancelled: 'var(--chat-warning, #f59e0b)',
-    skipped: 'var(--chat-text-muted, #888)',
-  }
-  return colors[props.status] ?? 'var(--chat-text-muted, #888)'
-})
+// 状态相关
+const statusIcon = computed(() => ({
+  error: 'lucide:x-circle',
+  done: 'lucide:check-circle',
+  running: 'lucide:loader-2',
+  pending: 'lucide:clock',
+  cancelled: 'lucide:ban',
+  skipped: 'lucide:skip-forward',
+}[props.status] ?? 'lucide:clock'))
+
+const statusIconColor = computed(() => ({
+  error: 'var(--chat-error, #ef4444)',
+  done: 'var(--chat-success, #22c55e)',
+  running: 'var(--chat-accent, #3b82f6)',
+  pending: 'var(--chat-text-muted, #888)',
+  cancelled: 'var(--chat-warning, #f59e0b)',
+  skipped: 'var(--chat-text-muted, #888)',
+}[props.status] ?? 'var(--chat-text-muted, #888)'))
 
 const statusDisplayIcon = computed(() => {
   const icons: Record<string, string> = {
     done: 'lucide:check-circle-2',
     error: 'lucide:x-circle',
-    running: 'lucide:loader-2',
-    pending: 'lucide:clock',
     cancelled: 'lucide:ban',
     skipped: 'lucide:skip-forward',
   }
@@ -199,8 +220,6 @@ const statusText = computed(() => {
   const texts: Record<string, string> = {
     done: '成功',
     error: '错误',
-    running: '运行中',
-    pending: '等待中',
     cancelled: '已取消',
     skipped: '已跳过',
   }
@@ -208,169 +227,169 @@ const statusText = computed(() => {
 })
 
 const title = computed(() => {
-  const suffixes: Record<string, string> = {
+  const suffix = {
     pending: ' - 等待确认',
     running: ' - 执行中...',
     error: ' - 执行失败',
     done: ' - 执行完成',
     cancelled: ' - 已取消',
     skipped: ' - 已跳过',
-  }
-  return props.name + (suffixes[props.status] ?? '')
+  }[props.status] ?? ''
+  return props.name + suffix
 })
 
-/** 处理模式变化 */
+// 操作
 async function handleModeChange(value: string) {
   if (!props.onSaveConfig || !props.autoRunConfig) return
-  
-  try {
-    // 直接修改引用类型的属性
-    props.autoRunConfig.mode = value as AutoRunMode
-    // 保存到数据库
-    await props.onSaveConfig(props.autoRunConfig)
-  } catch (error) {
-    console.error('[ToolCallPart] 保存配置失败:', error)
-  }
+  props.autoRunConfig.mode = value as AutoRunMode
+  await props.onSaveConfig(props.autoRunConfig)
 }
 
-/** 跳过执行：只拒绝当前工具，AI 继续思考 */
 async function handleSkip() {
-  if (!props.adapter?.respondToolApproval) return
-  
-  try {
-    // 只拒绝工具执行，不取消整个请求
-    // AI 会收到"用户跳过了此工具"的反馈，然后可能：
-    // 1. 尝试其他工具/方法
-    // 2. 直接回复用户
-    // 3. 询问用户想要什么
-    await props.adapter.respondToolApproval(props.id, false)
-  } catch (error) {
-    console.error('[ToolCallPart] 跳过失败:', error)
-  }
+  await props.adapter?.respondToolApproval?.(props.id, false)
 }
 
-/** 运行执行 */
 async function handleRun() {
-  if (!props.adapter?.respondToolApproval) return
-  
-  try {
-    await props.adapter.respondToolApproval(props.id, true)
-  } catch (error) {
-    console.error('[ToolCallPart] 运行失败:', error)
-  }
+  await props.adapter?.respondToolApproval?.(props.id, true)
 }
 
-/** 取消执行 */
 function handleCancel() {
+  if (props.onCancelToolCall) {
+    props.onCancelToolCall(props.id)
+    return
+  }
   props.adapter?.cancel?.()
 }
 
-// 监听模式变化：从 manual 切换到 run-everything 时，自动执行 pending 的工具
+function saveLog() {
+  const stdout = props.output?.stdout ?? ''
+  const stderr = props.output?.stderr ?? ''
+  const content =
+    `# tool: ${props.name}\n` +
+    `# id: ${props.id}\n` +
+    `# time: ${new Date().toISOString()}\n\n` +
+    `===== STDOUT =====\n${stdout}\n\n` +
+    `===== STDERR =====\n${stderr}\n`
+
+  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `tool-${props.name}-${props.id}.log`
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
+// 模式切换时自动执行
 watch(currentMode, (newMode, oldMode) => {
   if (oldMode === 'manual' && newMode === 'run-everything' && props.status === 'pending') {
     handleRun()
   }
 })
-
 </script>
 
 <style scoped>
-.tool-call-content {
-  display: flex;
-  flex-direction: column;
+.tool-args {
+  margin: 0 0 12px 0;
+  padding: 0.75em 1em;
+  background: var(--chat-bg, #1e1e1e);
+  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.08));
+  border-radius: 8px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--chat-text-muted, #999);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: auto;
 }
 
-.tool-call-command {
-  margin-bottom: 12px;
+/* 让 <code> 继承父级字体（避免默认 monospace 影响 text 类型的展示） */
+.tool-args code {
+  font-family: inherit;
+  font-size: inherit;
 }
 
-.command-header,
-.result-header {
-  display: block;
-  margin-bottom: 8px;
-  padding: 0;
-  cursor: default;
-  user-select: none;
+/* JSON 格式：使用等宽字体，更好的可读性，支持横向滚动 */
+.tool-args.json {
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
   font-size: 12px;
-  line-height: 1.5;
+  line-height: 1.8;
+  white-space: pre;
+  word-break: normal;
+  overflow-x: auto;
 }
 
-.command-header:hover,
-.result-header:hover,
-.command-label:hover,
-.result-label:hover,
-.command-name:hover,
-.result-name:hover {
-  background: transparent !important;
+/* JSON 横向滚动条样式（与全局 chat-scrollbar 对齐） */
+.tool-args.json::-webkit-scrollbar {
+  height: 6px;
 }
 
-.command-code {
-  display: block;
-  padding: 10px;
-  /* 浅色主题下 rgba(0,0,0,0.3) 会显得“脏黑”，这里统一走 code token */
-  background: var(--chat-code-bg, rgba(0, 0, 0, 0.3));
-  border: 1px solid var(--chat-border, #333);
-  border-radius: 6px;
-  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
-  font-size: 13px;
-  color: var(--chat-code-text, var(--chat-text, #ccc));
-  white-space: pre-wrap;
-  word-break: break-all;
-  overflow-x: auto;
+.tool-args.json::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-.tool-call-result {
-  margin-bottom: 12px;
+.tool-args.json::-webkit-scrollbar-thumb {
+  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
+  border-radius: 3px;
 }
 
-.result-label,
-.command-label {
-  color: var(--chat-text-muted, #888);
-  font-weight: 500;
+.tool-args.json::-webkit-scrollbar-thumb:hover {
+  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
 }
 
-.result-name,
-.command-name {
-  color: var(--chat-text, #ccc);
+/* JSON 语法高亮样式（使用 CSS 变量，跟随主题） */
+.tool-args.json :deep(.hljs-attr),
+.tool-args.json :deep(.hljs-attribute) {
+  color: var(--chat-hljs-attr, #79c0ff); /* 键名 */
 }
 
-.result-content {
-  display: block;
-  padding: 10px;
-  /* 浅色主题下 rgba(0,0,0,0.3) 会显得“脏黑”，这里统一走 code token */
-  background: var(--chat-code-bg, rgba(0, 0, 0, 0.3));
-  border: 1px solid var(--chat-border, #333);
-  border-radius: 6px;
+.tool-args.json :deep(.hljs-string),
+.tool-args.json :deep(.hljs-template-variable) {
+  color: var(--chat-hljs-string, #a5d6ff); /* 字符串值 */
+}
+
+.tool-args.json :deep(.hljs-number) {
+  color: var(--chat-hljs-number, #79c0ff); /* 数字 */
+}
+
+.tool-args.json :deep(.hljs-literal),
+.tool-args.json :deep(.hljs-null) {
+  color: var(--chat-hljs-literal, #79c0ff); /* true, false, null */
+}
+
+.tool-args.json :deep(.hljs-punctuation) {
+  color: var(--chat-hljs-punctuation, #e6edf3); /* 括号、逗号等 */
+}
+
+/* 命令格式：使用等宽字体 */
+.tool-args.command {
   font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+/* 普通文本：保持默认字体 */
+.tool-args.text {
   font-size: 13px;
-  color: var(--chat-code-text, var(--chat-text, #ccc));
-  white-space: pre-wrap;
-  word-break: break-all;
-  overflow-x: auto;
+  line-height: 1.5;
 }
 
-.tool-call-footer {
+.tool-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  padding-top: 12px;
-  border-top: 1px solid var(--chat-border, #333);
-}
-
-.footer-left {
-  flex-shrink: 0;
-  position: relative;
-  z-index: 10;
 }
 
-.footer-right {
+.tool-actions {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
 }
 
-.execution-status {
+.status-text {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -378,29 +397,11 @@ watch(currentMode, (newMode, oldMode) => {
   font-weight: 500;
 }
 
-.execution-status.done {
-  color: var(--chat-success, #22c55e);
-}
-
-.execution-status.error {
-  color: #ef4444;
-}
-
-.execution-status.running {
-  color: var(--chat-accent, #3b82f6);
-}
-
-.execution-status.pending {
-  color: var(--chat-text-muted, #888);
-}
-
-.execution-status.cancelled {
-  color: var(--chat-warning, #f59e0b);
-}
-
-.execution-status.skipped {
-  color: var(--chat-text-muted, #888);
-}
+.status-text.done { color: var(--chat-success, #22c55e); }
+.status-text.error { color: var(--chat-error, #ef4444); }
+.status-text.running { color: var(--chat-accent, #3b82f6); }
+.status-text.cancelled { color: var(--chat-warning, #f59e0b); }
+.status-text.skipped { color: var(--chat-text-muted, #888); }
 
 .spinning {
   animation: spin 1s linear infinite;
@@ -411,11 +412,6 @@ watch(currentMode, (newMode, oldMode) => {
   to { transform: rotate(360deg); }
 }
 
-.action-buttons {
-  display: flex;
-  gap: 8px;
-}
-
 .btn {
   padding: 6px 12px;
   border-radius: 6px;
@@ -434,7 +430,6 @@ watch(currentMode, (newMode, oldMode) => {
   color: var(--chat-text, #ccc);
   border: 1px solid var(--chat-border, #333);
 }
-
 .btn-skip:hover {
   background: var(--chat-muted-hover, #333);
 }
@@ -443,7 +438,6 @@ watch(currentMode, (newMode, oldMode) => {
   background: var(--chat-accent, #3b82f6);
   color: #fff;
 }
-
 .btn-run:hover {
   background: var(--chat-accent-hover, #2563eb);
 }
@@ -453,10 +447,85 @@ watch(currentMode, (newMode, oldMode) => {
   color: var(--chat-text-muted, #888);
   border: 1px solid var(--chat-border, #333);
 }
-
 .btn-cancel:hover {
   background: rgba(239, 68, 68, 0.1);
   color: #ef4444;
   border-color: #ef4444;
 }
+
+.output-panel {
+  margin: 0 0 12px 0;
+  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.08));
+  border-radius: 8px;
+  background: var(--chat-bg, #1e1e1e);
+  overflow: hidden;
+}
+
+.output-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.08));
+}
+
+.output-tabs {
+  display: flex;
+  gap: 6px;
+}
+
+.tab {
+  padding: 4px 8px;
+  border-radius: 6px;
+  border: 1px solid var(--chat-border, #333);
+  background: var(--chat-muted, #2a2a2a);
+  color: var(--chat-text-muted, #999);
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.tab.active {
+  background: rgba(59, 130, 246, 0.15);
+  border-color: rgba(59, 130, 246, 0.35);
+  color: var(--chat-text, #ccc);
+}
+
+.output-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-save {
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid var(--chat-border, #333);
+  background: transparent;
+  color: var(--chat-text-muted, #888);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.btn-save:hover {
+  background: var(--chat-muted-hover, #333);
+  color: var(--chat-text, #ccc);
+}
+
+.output-body {
+  margin: 0;
+  padding: 10px 12px;
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--chat-text-muted, #999);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 260px;
+  overflow: auto;
+}
 </style>