@huyooo/ai-chat-frontend-vue 0.1.6 → 0.1.7

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

@@ -0,0 +1,460 @@
+<template>
+  <CollapsibleCard
+    v-model="expanded"
+    :icon="statusIcon"
+    :icon-color="statusIconColor"
+    :title="title"
+    :spinning="status === 'running'"
+  >
+    <template #header-actions>
+      <CopyButton :text="commandText" 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>
+        </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>
+        <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>
+      </div>
+    </div>
+  </CollapsibleCard>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { Icon } from '@iconify/vue'
+import DropdownSelector from '../../input/DropdownSelector.vue'
+import CollapsibleCard from './CollapsibleCard.vue'
+import CopyButton from '../../common/CopyButton.vue'
+import type { ChatAdapter } from '../../../adapter'
+import type { AutoRunConfig, AutoRunMode } from '@huyooo/ai-chat-bridge-electron/renderer'
+import type { StepsExpandedType } from '../../../types'
+
+interface Props {
+  id: string
+  name: string
+  args?: Record<string, unknown>
+  status: 'pending' | 'running' | 'done' | 'error' | 'cancelled' | 'skipped'
+  result: unknown | null
+  expandedType?: StepsExpandedType
+  // 通过 props 传递，不使用 inject
+  adapter?: ChatAdapter
+  autoRunConfig?: AutoRunConfig
+  onSaveConfig?: (config: AutoRunConfig) => Promise<void>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  expandedType: 'auto',
+})
+
+// 模式选项
+const modeOptions = [
+  { value: 'manual', label: '执行前询问我' },
+  { value: 'run-everything', label: '自动执行' },
+]
+
+// 当前模式：直接从配置读取
+const currentMode = computed(() => props.autoRunConfig?.mode ?? 'run-everything')
+
+// 命令显示
+const commandDisplay = 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 props.name
+})
+
+const commandText = computed(() => {
+  if (props.name === 'execute_command' && props.args?.command) {
+    return String(props.args.command)
+  }
+  if (props.args && Object.keys(props.args).length > 0) {
+    try {
+      return JSON.stringify(props.args, null, 2)
+    } catch {
+      return String(props.args)
+    }
+  }
+  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)
+  }
+})
+
+// 折叠状态
+function getInitialExpanded(): boolean {
+  if (props.expandedType === 'open') return true
+  if (props.expandedType === 'close') return false
+  return props.status === 'pending' || props.status === 'running'
+}
+
+const expanded = ref(getInitialExpanded())
+
+// 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 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',
+  }
+  return icons[props.status] ?? 'lucide:clock'
+})
+
+const statusText = computed(() => {
+  const texts: Record<string, string> = {
+    done: '成功',
+    error: '错误',
+    running: '运行中',
+    pending: '等待中',
+    cancelled: '已取消',
+    skipped: '已跳过',
+  }
+  return texts[props.status] ?? ''
+})
+
+const title = computed(() => {
+  const suffixes: Record<string, string> = {
+    pending: ' - 等待确认',
+    running: ' - 执行中...',
+    error: ' - 执行失败',
+    done: ' - 执行完成',
+    cancelled: ' - 已取消',
+    skipped: ' - 已跳过',
+  }
+  return props.name + (suffixes[props.status] ?? '')
+})
+
+/** 处理模式变化 */
+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)
+  }
+}
+
+/** 跳过执行：只拒绝当前工具，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)
+  }
+}
+
+/** 运行执行 */
+async function handleRun() {
+  if (!props.adapter?.respondToolApproval) return
+  
+  try {
+    await props.adapter.respondToolApproval(props.id, true)
+  } catch (error) {
+    console.error('[ToolCallPart] 运行失败:', error)
+  }
+}
+
+/** 取消执行 */
+function handleCancel() {
+  props.adapter?.cancel?.()
+}
+
+// 监听模式变化：从 manual 切换到 run-everything 时，自动执行 pending 的工具
+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-call-command {
+  margin-bottom: 12px;
+}
+
+.command-header,
+.result-header {
+  display: block;
+  margin-bottom: 8px;
+  padding: 0;
+  cursor: default;
+  user-select: none;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.command-header:hover,
+.result-header:hover,
+.command-label:hover,
+.result-label:hover,
+.command-name:hover,
+.result-name:hover {
+  background: transparent !important;
+}
+
+.command-code {
+  display: block;
+  padding: 10px;
+  background: 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-text, #ccc);
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow-x: auto;
+}
+
+.tool-call-result {
+  margin-bottom: 12px;
+}
+
+.result-label,
+.command-label {
+  color: var(--chat-text-muted, #888);
+  font-weight: 500;
+}
+
+.result-name,
+.command-name {
+  color: var(--chat-text, #ccc);
+}
+
+.result-content {
+  display: block;
+  padding: 10px;
+  background: 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-text, #ccc);
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow-x: auto;
+}
+
+.tool-call-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 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.execution-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  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);
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.btn {
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.2s;
+}
+
+.btn-skip {
+  background: var(--chat-muted, #2a2a2a);
+  color: var(--chat-text, #ccc);
+  border: 1px solid var(--chat-border, #333);
+}
+
+.btn-skip:hover {
+  background: var(--chat-muted-hover, #333);
+}
+
+.btn-run {
+  background: var(--chat-accent, #3b82f6);
+  color: #fff;
+}
+
+.btn-run:hover {
+  background: var(--chat-accent-hover, #2563eb);
+}
+
+.btn-cancel {
+  background: transparent;
+  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;
+}
+</style>

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

@@ -0,0 +1,78 @@
+<template>
+  <div class="tool-result-part">
+    <!-- 自定义渲染器 -->
+    <component 
+      v-if="customRenderer" 
+      :is="customRenderer" 
+      :tool-name="name"
+      :tool-args="args || {}"
+      :tool-result="result"
+      :status="status"
+    />
+    <!-- 默认渲染：可折叠的 JSON -->
+    <CollapsibleCard
+      v-else
+      v-model="expanded"
+      :icon="status === 'error' ? 'lucide:x-circle' : 'lucide:check-circle'"
+      :icon-color="status === 'error' ? 'var(--chat-error, #ef4444)' : 'var(--chat-success, #22c55e)'"
+      :title="name"
+      title-color="var(--chat-text, #ccc)"
+    >
+      <pre class="result-content">{{ formattedResult }}</pre>
+    </CollapsibleCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, inject, type Component } from 'vue'
+import CollapsibleCard from './CollapsibleCard.vue'
+import type { StepsExpandedType } from '../../../types'
+
+const props = withDefaults(defineProps<{
+  id: string
+  name: string
+  args?: Record<string, unknown>
+  result: unknown
+  status: 'done' | 'error' | 'cancelled' | 'skipped'
+  expandedType?: StepsExpandedType
+}>(), {
+  expandedType: 'auto'
+})
+
+// 注入自定义渲染器配置
+const toolRenderers = inject<Record<string, Component>>('toolRenderers', {})
+
+// 获取自定义渲染器
+const customRenderer = computed(() => toolRenderers[props.name])
+
+// 根据模式计算初始状态（工具结果完成后默认折叠，除非 mode 是 open）
+function getInitialExpanded(): boolean {
+  if (props.expandedType === 'open') return true
+  return false
+}
+
+const expanded = ref(getInitialExpanded())
+
+// 格式化结果
+const formattedResult = computed(() => {
+  if (typeof props.result === 'string') {
+    return props.result
+  }
+  return JSON.stringify(props.result, null, 2)
+})
+</script>
+
+<style scoped>
+.tool-result-part {
+  margin: 8px 0;
+}
+
+.result-content {
+  margin: 0;
+  font-size: 12px;
+  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
+  color: var(--chat-text-muted, #999);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>

package/src/components/message/parts/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Part 渲染组件导出
+ */
+export { default as TextPart } from './TextPart.vue'
+export { default as ThinkingPart } from './ThinkingPart.vue'
+export { default as SearchPart } from './SearchPart.vue'
+export { default as ToolCallPart } from './ToolCallPart.vue'
+export { default as ToolResultPart } from './ToolResultPart.vue'
+export { default as ImagePart } from './ImagePart.vue'
+export { default as ErrorPart } from './ErrorPart.vue'
+
+// 公共组件
+export { default as CollapsibleCard } from './CollapsibleCard.vue'

package/src/components/message/tool-results/DefaultToolResult.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="default-tool-result">
+    <pre class="result-content">{{ formattedResult }}</pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ToolRendererProps } from '@huyooo/ai-chat-shared'
+
+const props = defineProps<ToolRendererProps>()
+
+const formattedResult = computed(() => {
+  if (typeof props.toolResult === 'string') {
+    return props.toolResult
+  }
+  try {
+    return JSON.stringify(props.toolResult, null, 2)
+  } catch {
+    return String(props.toolResult)
+  }
+})
+</script>
+
+<style scoped>
+.default-tool-result {
+  background: var(--chat-bg, #1e1e1e);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.result-content {
+  margin: 0;
+  padding: 8px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--chat-text-muted, #999);
+  font-family: 'SF Mono', Monaco, monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: auto;
+}
+</style>