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

package/src/components/chat/SearchResultBlock.vue

@@ -1,155 +0,0 @@
-<template>
-  <div class="search-block">
-    <div class="search-header" @click="expanded = !expanded">
-      <div class="search-icon">
-        <Loader2 v-if="searching" :size="14" class="spinning" />
-        <Globe v-else :size="14" />
-      </div>
-      <span class="search-title">
-        {{ searching ? '正在搜索...' : `找到 ${results.length} 条结果` }}
-      </span>
-      <ChevronDown
-        v-if="!searching && results.length > 0"
-        :size="14"
-        :class="['chevron', { rotated: expanded }]"
-      />
-    </div>
-
-    <!-- 搜索结果列表 -->
-    <div v-if="!searching && expanded && results.length > 0" class="search-results">
-      <a
-        v-for="(item, index) in results.slice(0, 5)"
-        :key="index"
-        :href="item.url"
-        target="_blank"
-        class="result-item"
-      >
-        <span class="result-title">{{ item.title }}</span>
-        <span class="result-url">{{ formatUrl(item.url) }}</span>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { Globe, Loader2, ChevronDown } from 'lucide-vue-next';
-import type { SearchResult } from '../../types';
-
-defineProps<{
-  results: SearchResult[];
-  searching: boolean;
-}>();
-
-const expanded = ref(true);
-
-function formatUrl(url: string): string {
-  try {
-    return new URL(url).hostname;
-  } catch {
-    return url;
-  }
-}
-</script>
-
-<style scoped>
-.search-block {
-  margin: 8px 0;
-  background: var(--chat-muted, #2d2d2d);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.search-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.search-header:hover {
-  background: var(--chat-muted-hover, #3a3a3a);
-}
-
-.search-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 50%;
-  color: var(--chat-text, #ccc);
-}
-
-.spinning {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.search-title {
-  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);
-}
-
-.search-results {
-  border-top: 1px solid var(--chat-border, #333);
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.result-item {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 8px;
-  background: var(--chat-bg, #1e1e1e);
-  border-radius: 6px;
-  text-decoration: none;
-  transition: background 0.15s;
-}
-
-.result-item: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;
-}
-
-.result-item:hover .result-title {
-  color: var(--chat-text, #fff);
-}
-
-.result-url {
-  font-size: 11px;
-  color: var(--chat-text-muted, #666);
-}
-</style>

package/src/components/chat/ThinkingBlock.vue

@@ -1,109 +0,0 @@
-<template>
-  <div :class="['thinking-block', { expanded }]">
-    <button class="thinking-header" @click="expanded = !expanded">
-      <div class="thinking-icon">
-        <Loader2 v-if="!isComplete" :size="14" class="spinning" />
-        <Lightbulb v-else :size="14" />
-      </div>
-      <span class="thinking-title">{{ isComplete ? '思考完成' : '正在思考...' }}</span>
-      <ChevronDown :size="14" :class="['chevron', { rotated: expanded }]" />
-    </button>
-
-    <div v-if="expanded && content" class="thinking-content">
-      <div class="thinking-text">{{ content }}</div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { Loader2, Lightbulb, ChevronDown } from 'lucide-vue-next';
-
-defineProps<{
-  content: string;
-  isComplete: boolean;
-}>();
-
-const expanded = ref(false);
-</script>
-
-<style scoped>
-.thinking-block {
-  margin: 8px 0;
-  background: var(--chat-muted, #2d2d2d);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.thinking-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 10px 12px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.thinking-header:hover {
-  background: var(--chat-muted-hover, #3a3a3a);
-}
-
-.thinking-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 50%;
-  color: var(--chat-text, #ccc);
-}
-
-.spinning {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.thinking-title {
-  flex: 1;
-  text-align: left;
-  font-size: 13px;
-  color: var(--chat-text, #ccc);
-  font-weight: 500;
-}
-
-.chevron {
-  color: var(--chat-text-muted, #666);
-  transition: transform 0.2s;
-}
-
-.chevron.rotated {
-  transform: rotate(180deg);
-}
-
-.thinking-content {
-  padding: 0 12px 12px;
-  border-top: 1px solid var(--chat-border, #333);
-  margin-top: 4px;
-  padding-top: 8px;
-}
-
-.thinking-text {
-  font-size: 13px;
-  color: var(--chat-text-muted, #999);
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-</style>

package/src/components/chat/ToolCallBlock.vue

@@ -1,213 +0,0 @@
-<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>