@huyooo/ai-chat-frontend-vue 0.1.2

package/src/components/chat/ToolCallBlock.vue

@@ -0,0 +1,213 @@
+<template>
+  <div :class="['tool-call-block', status]">
+    <div class="tool-header" @click="expanded = !expanded">
+      <div class="tool-icon">
+        <Loader2 v-if="status === 'running'" :size="14" class="spinning" />
+        <Check v-else-if="status === 'success'" :size="14" />
+        <X v-else-if="status === 'error'" :size="14" />
+        <component v-else :is="toolIcon" :size="14" />
+      </div>
+      <span class="tool-name">{{ displayName }}</span>
+      <ChevronDown
+        v-if="result"
+        :size="14"
+        :class="['chevron', { rotated: expanded }]"
+      />
+    </div>
+
+    <!-- 参数展示 -->
+    <div v-if="args && Object.keys(args).length > 0 && expanded" class="tool-args">
+      <div v-for="(value, key) in args" :key="key" class="arg-item">
+        <span class="arg-key">{{ key }}:</span>
+        <span class="arg-value">{{ formatValue(value) }}</span>
+      </div>
+    </div>
+
+    <!-- 结果展示 -->
+    <div v-if="result && expanded" class="tool-result">
+      <pre>{{ result }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, markRaw } from 'vue';
+import {
+  Terminal,
+  Image,
+  Video,
+  Search,
+  FileText,
+  Loader2,
+  Check,
+  X,
+  ChevronDown,
+} from 'lucide-vue-next';
+
+const props = defineProps<{
+  name: string;
+  args?: Record<string, unknown>;
+  result?: string;
+  status: 'running' | 'success' | 'error';
+}>();
+
+const expanded = ref(false);
+
+// 工具显示名称
+const displayName = computed(() => {
+  const names: Record<string, string> = {
+    execute_command: '执行命令',
+    analyze_image: '分析图片',
+    generate_image: '生成图片',
+    analyze_video: '分析视频',
+    web_search: '网络搜索',
+    read_file: '读取文件',
+    write_file: '写入文件',
+    list_directory: '列出目录',
+    create_directory: '创建目录',
+    delete_file: '删除文件',
+    move_file: '移动文件',
+    search_files: '搜索文件',
+  };
+  return names[props.name] || props.name;
+});
+
+// 工具图标
+const toolIcon = computed(() => {
+  const icons: Record<string, unknown> = {
+    execute_command: markRaw(Terminal),
+    analyze_image: markRaw(Image),
+    generate_image: markRaw(Image),
+    analyze_video: markRaw(Video),
+    web_search: markRaw(Search),
+  };
+  return icons[props.name] || markRaw(FileText);
+});
+
+// 格式化参数值
+function formatValue(value: unknown): string {
+  if (typeof value === 'string') {
+    return value.length > 50 ? value.substring(0, 50) + '...' : value;
+  }
+  return JSON.stringify(value);
+}
+</script>
+
+<style scoped>
+.tool-call-block {
+  margin: 8px 0;
+  background: var(--chat-muted, #2d2d2d);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.tool-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.tool-header:hover {
+  background: var(--chat-muted-hover, #3a3a3a);
+}
+
+.tool-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: var(--chat-muted, #3c3c3c);
+  border-radius: 4px;
+  color: var(--chat-text-muted, #888);
+}
+
+.running .tool-icon {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--chat-text, #ccc);
+}
+
+.success .tool-icon {
+  background: var(--chat-success, #22c55e20);
+  color: var(--chat-success, #22c55e);
+}
+
+.error .tool-icon {
+  background: var(--chat-destructive, #ef444420);
+  color: var(--chat-destructive, #ef4444);
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.tool-name {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--chat-text, #ccc);
+}
+
+.chevron {
+  color: var(--chat-text-muted, #666);
+  transition: transform 0.2s;
+}
+
+.chevron.rotated {
+  transform: rotate(180deg);
+}
+
+/* 参数展示 */
+.tool-args {
+  padding: 8px 12px;
+  border-top: 1px solid var(--chat-border, #333);
+}
+
+.arg-item {
+  display: flex;
+  gap: 8px;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.arg-key {
+  color: var(--chat-text-muted, #888);
+  font-weight: 500;
+}
+
+.arg-value {
+  color: var(--chat-text, #ccc);
+  font-family: 'SF Mono', Monaco, monospace;
+  word-break: break-all;
+}
+
+/* 结果展示 */
+.tool-result {
+  border-top: 1px solid var(--chat-border, #333);
+  padding: 8px 12px;
+  background: var(--chat-bg, #1e1e1e);
+}
+
+.tool-result pre {
+  margin: 0;
+  font-size: 12px;
+  color: var(--chat-text-muted, #999);
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: 'SF Mono', Monaco, monospace;
+  max-height: 200px;
+  overflow-y: auto;
+}
+</style>

package/src/components/chat/messages/ExecutionSteps.vue

@@ -0,0 +1,281 @@
+<template>
+  <div v-if="hasSteps" class="execution-steps">
+    <!-- 思考过程 -->
+    <div v-if="thinking || (loading && !hasContent && !toolCalls?.length)" class="step thinking-step">
+      <div class="step-header" @click="thinkingExpanded = !thinkingExpanded">
+        <div class="step-icon">
+          <Loader2 v-if="!thinkingComplete" :size="14" class="animate-spin" />
+          <Lightbulb v-else :size="14" />
+        </div>
+        <span class="step-title">
+          {{ thinkingComplete ? '思考完成' : '正在思考...' }}
+        </span>
+        <ChevronDown
+          v-if="thinking"
+          :size="14"
+          :class="['step-chevron', { expanded: thinkingExpanded }]"
+        />
+      </div>
+      <div v-if="thinking && thinkingExpanded" class="step-content">
+        <div class="thinking-content">{{ thinking }}</div>
+      </div>
+    </div>
+
+    <!-- 搜索过程 -->
+    <div v-if="searching || searchResults?.length" class="step search-step">
+      <div class="step-header" @click="searchExpanded = !searchExpanded">
+        <div class="step-icon">
+          <Loader2 v-if="searching" :size="14" class="animate-spin" />
+          <Globe v-else :size="14" />
+        </div>
+        <span class="step-title">
+          {{ searching ? '正在搜索...' : `找到 ${searchResults?.length || 0} 条结果` }}
+        </span>
+        <ChevronDown
+          v-if="searchResults?.length"
+          :size="14"
+          :class="['step-chevron', { expanded: searchExpanded }]"
+        />
+      </div>
+      <div v-if="searchResults?.length && searchExpanded" class="step-content">
+        <div class="search-results">
+          <a
+            v-for="(result, i) in searchResults"
+            :key="i"
+            :href="result.url"
+            target="_blank"
+            class="search-result"
+          >
+            <span class="result-title">{{ result.title }}</span>
+            <span class="result-url">{{ getDomain(result.url) }}</span>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- 工具调用 -->
+    <div v-for="(tool, i) in toolCalls" :key="i" class="step tool-step">
+      <div class="step-header" @click="toggleToolExpanded(i)">
+        <div class="step-icon">
+          <Loader2 v-if="tool.status === 'running'" :size="14" class="animate-spin" />
+          <Check v-else-if="tool.status === 'success'" :size="14" class="text-green" />
+          <X v-else :size="14" class="text-red" />
+        </div>
+        <span class="step-title">
+          {{ getToolDisplayName(tool.name) }}
+        </span>
+        <ChevronDown
+          v-if="tool.result"
+          :size="14"
+          :class="['step-chevron', { expanded: toolExpandedMap[i] }]"
+        />
+      </div>
+      <div v-if="tool.result && toolExpandedMap[i]" class="step-content">
+        <pre class="tool-result">{{ tool.result }}</pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive } from 'vue';
+import { Loader2, Lightbulb, Globe, Check, X, ChevronDown } from 'lucide-vue-next';
+import type { ToolCall, SearchResult } from '../../../types';
+
+const props = defineProps<{
+  loading?: boolean;
+  hasContent?: boolean;
+  thinking?: string;
+  thinkingComplete?: boolean;
+  searching?: boolean;
+  searchResults?: SearchResult[];
+  toolCalls?: ToolCall[];
+}>();
+
+// 展开状态
+const thinkingExpanded = ref(false);
+const searchExpanded = ref(true);
+const toolExpandedMap = reactive<Record<number, boolean>>({});
+
+// 是否有步骤显示
+const hasSteps = computed(() => {
+  return (
+    props.thinking ||
+    props.searching ||
+    props.searchResults?.length ||
+    props.toolCalls?.length ||
+    (props.loading && !props.hasContent)
+  );
+});
+
+// 切换工具展开
+function toggleToolExpanded(index: number) {
+  toolExpandedMap[index] = !toolExpandedMap[index];
+}
+
+// 获取域名
+function getDomain(url: string) {
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return url;
+  }
+}
+
+// 获取工具显示名称
+function getToolDisplayName(name: string) {
+  const nameMap: Record<string, string> = {
+    web_search: '网页搜索',
+    read_file: '读取文件',
+    write_file: '写入文件',
+    execute_command: '执行命令',
+    list_directory: '列出目录',
+    create_directory: '创建目录',
+    delete_file: '删除文件',
+    move_file: '移动文件',
+    search_files: '搜索文件',
+    analyze_image: '分析图片',
+  };
+  return nameMap[name] || name;
+}
+</script>
+
+<style scoped>
+.execution-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.step {
+  background: var(--chat-muted, #2d2d2d);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.step-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.step-header:hover {
+  background: var(--chat-muted-hover, #3a3a3a);
+}
+
+.step-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--chat-text-muted, #888);
+}
+
+.step-title {
+  flex: 1;
+  font-size: 13px;
+  color: var(--chat-text, #ccc);
+}
+
+.step-chevron {
+  color: var(--chat-text-muted, #666);
+  transition: transform 0.2s;
+}
+
+.step-chevron.expanded {
+  transform: rotate(180deg);
+}
+
+.step-content {
+  padding: 0 12px 12px;
+  border-top: 1px solid var(--chat-border, #333);
+  margin-top: 4px;
+  padding-top: 8px;
+}
+
+.thinking-content {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--chat-text-muted, #999);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.search-results {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.search-result {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  background: var(--chat-bg, #1e1e1e);
+  border-radius: 6px;
+  text-decoration: none;
+  transition: background 0.15s;
+}
+
+.search-result:hover {
+  background: var(--chat-muted-hover, #333);
+}
+
+.result-title {
+  font-size: 13px;
+  color: var(--chat-text, #ccc);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.search-result:hover .result-title {
+  color: var(--chat-text, #fff);
+}
+
+.result-url {
+  font-size: 11px;
+  color: var(--chat-text-muted, #666);
+}
+
+.tool-result {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--chat-text-muted, #999);
+  background: var(--chat-bg, #1e1e1e);
+  padding: 8px;
+  border-radius: 6px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: 'SF Mono', Monaco, monospace;
+  margin: 0;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.text-green {
+  color: var(--chat-success, #22c55e);
+}
+
+.text-red {
+  color: var(--chat-destructive, #ef4444);
+}
+</style>