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

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

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

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

@@ -1,272 +0,0 @@
-<template>
-  <div :class="['message-bubble', role]">
-    <!-- 用户消息 - 复用 ChatInput 组件 -->
-    <template v-if="role === 'user'">
-      <ChatInput
-        v-if="onSend"
-        variant="message"
-        :value="content"
-        :selected-images="images"
-        @send="(text) => $emit('send', text)"
-      />
-      <div v-else class="user-content">
-        <div class="user-text">{{ content }}</div>
-        <div v-if="images && images.length > 0" class="user-images">
-          <img
-            v-for="(img, i) in images"
-            :key="i"
-            :src="img"
-            class="user-image"
-            @click="$emit('view-image', img)"
-          />
-        </div>
-      </div>
-    </template>
-
-    <!-- 助手消息 -->
-    <template v-else>
-      <div class="assistant-content">
-        <!-- 执行步骤列表 -->
-        <ExecutionSteps
-          :loading="loading"
-          :has-content="!!content"
-          :thinking="thinking"
-          :thinking-complete="thinkingComplete"
-          :searching="searching"
-          :search-results="searchResults"
-          :tool-calls="toolCalls"
-        />
-
-        <!-- 文本内容 -->
-        <div v-if="content" class="assistant-text" v-html="renderedContent"></div>
-
-        <!-- 加载中 -->
-        <div v-if="loading && !content && !thinking && !toolCalls?.length" class="loading-indicator">
-          <span class="loading-dot"></span>
-          <span class="loading-dot"></span>
-          <span class="loading-dot"></span>
-        </div>
-      </div>
-
-      <!-- 操作按钮 -->
-      <div v-if="content && !loading" class="message-actions">
-        <button class="action-btn" title="复制" @click="$emit('copy')">
-          <component :is="copied ? Check : Copy" :size="14" />
-        </button>
-        <button class="action-btn" title="重新生成" @click="$emit('regenerate')">
-          <RefreshCw :size="14" />
-        </button>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { Copy, Check, RefreshCw } from 'lucide-vue-next';
-import ChatInput from '../../ChatInput.vue';
-import ExecutionSteps from './ExecutionSteps.vue';
-import type { ToolCall, SearchResult } from '../../../types';
-
-const props = defineProps<{
-  role: 'user' | 'assistant';
-  content: string;
-  images?: string[];
-  thinking?: string;
-  thinkingComplete?: boolean;
-  searchResults?: SearchResult[];
-  searching?: boolean;
-  toolCalls?: ToolCall[];
-  loading?: boolean;
-  copied?: boolean;
-  /** 是否支持重新发送（仅用户消息） */
-  onSend?: (text: string) => void;
-}>();
-
-defineEmits<{
-  copy: [];
-  regenerate: [];
-  'view-image': [url: string];
-  send: [text: string];
-}>();
-
-// Markdown 渲染
-const renderedContent = computed(() => {
-  let html = props.content;
-
-  // 代码块
-  html = html.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre class="code-block"><code>$2</code></pre>');
-
-  // 行内代码
-  html = html.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
-
-  // 粗体
-  html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
-
-  // 斜体
-  html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
-
-  // 换行
-  html = html.replace(/\n/g, '<br>');
-
-  return html;
-});
-</script>
-
-<style scoped>
-.message-bubble {
-  padding: 8px 0;
-  animation: fadeIn 0.2s ease;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* 用户消息 */
-.message-bubble.user {
-  width: 100%;
-}
-
-.user-content {
-  width: 100%;
-  background: var(--chat-muted, #2d2d2d);
-  color: var(--chat-text, #ccc);
-  padding: 12px;
-  border-radius: 12px;
-  border: 1px solid var(--chat-border, #444);
-}
-
-.user-text {
-  font-size: 14px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.user-images {
-  display: flex;
-  gap: 8px;
-  margin-top: 8px;
-  flex-wrap: wrap;
-}
-
-.user-image {
-  width: 80px;
-  height: 80px;
-  object-fit: cover;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: transform 0.15s;
-}
-
-.user-image:hover {
-  transform: scale(1.05);
-}
-
-/* 助手消息 */
-.message-bubble.assistant {
-  position: relative;
-}
-
-.assistant-content {
-  max-width: 100%;
-}
-
-.assistant-text {
-  font-size: 14px;
-  line-height: 1.7;
-  color: var(--chat-text, #ccc);
-  font-weight: 500;
-  letter-spacing: 0.01em;
-}
-
-.assistant-text :deep(.code-block) {
-  background: var(--chat-code-bg, #1f2937);
-  color: var(--chat-code-text, #e5e7eb);
-  padding: 12px;
-  border-radius: 8px;
-  margin: 8px 0;
-  overflow-x: auto;
-  font-family: 'SF Mono', Monaco, monospace;
-  font-size: 13px;
-}
-
-.assistant-text :deep(.inline-code) {
-  background: var(--chat-muted, #3c3c3c);
-  color: var(--chat-text, #e5e7eb);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: 'SF Mono', Monaco, monospace;
-  font-size: 13px;
-}
-
-/* 加载动画 */
-.loading-indicator {
-  display: flex;
-  gap: 4px;
-  padding: 8px 0;
-}
-
-.loading-dot {
-  width: 6px;
-  height: 6px;
-  background: var(--chat-text-muted, #666);
-  border-radius: 50%;
-  animation: pulse 1.4s ease-in-out infinite;
-}
-
-.loading-dot:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.loading-dot:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 0.4;
-    transform: scale(0.8);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-/* 操作按钮 */
-.message-actions {
-  display: flex;
-  gap: 4px;
-  margin-top: 8px;
-  justify-content: flex-end;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  color: var(--chat-text-muted, #666);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.action-btn:hover {
-  background: var(--chat-muted, #3c3c3c);
-  color: var(--chat-text, #ccc);
-}
-</style>

package/src/components/chat/ui/WelcomeMessage.vue

@@ -1,135 +0,0 @@
-<template>
-  <div class="welcome-message">
-    <div class="welcome-icon">
-      <Sparkles :size="48" />
-    </div>
-    <h3 class="welcome-title">AI Assistant</h3>
-    <p class="welcome-desc">我可以帮你完成各种任务，试试下面的快捷操作：</p>
-
-    <div class="quick-actions">
-      <button
-        v-for="action in quickActions"
-        :key="action.id"
-        class="quick-btn"
-        @click="$emit('quick-action', action.prompt)"
-      >
-        <component :is="action.icon" :size="14" class="quick-icon" />
-        <span>{{ action.label }}</span>
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { markRaw } from 'vue';
-import {
-  Sparkles,
-  Code,
-  FileText,
-  Search,
-  MessageCircle,
-} from 'lucide-vue-next';
-
-defineEmits<{
-  'quick-action': [prompt: string];
-}>();
-
-const quickActions = [
-  {
-    id: 'code',
-    label: '写代码',
-    prompt: '帮我写一段代码',
-    icon: markRaw(Code),
-  },
-  {
-    id: 'explain',
-    label: '解释代码',
-    prompt: '帮我解释这段代码',
-    icon: markRaw(FileText),
-  },
-  {
-    id: 'search',
-    label: '搜索信息',
-    prompt: '帮我搜索一下',
-    icon: markRaw(Search),
-  },
-  {
-    id: 'chat',
-    label: '聊聊天',
-    prompt: '我们聊聊天吧',
-    icon: markRaw(MessageCircle),
-  },
-];
-</script>
-
-<style scoped>
-.welcome-message {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 32px 20px;
-  text-align: center;
-}
-
-.welcome-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 80px;
-  height: 80px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 20px;
-  color: var(--chat-text, #ccc);
-  margin-bottom: 20px;
-}
-
-.welcome-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--chat-text, #ccc);
-  margin-bottom: 8px;
-}
-
-.welcome-desc {
-  font-size: 14px;
-  color: var(--chat-text-muted, #888);
-  margin-bottom: 24px;
-}
-
-.quick-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: center;
-  max-width: 320px;
-}
-
-.quick-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 14px;
-  background: var(--chat-muted, #2d2d2d);
-  border: 1px solid var(--chat-border, #444);
-  border-radius: 8px;
-  color: var(--chat-text, #ccc);
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.quick-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.quick-icon {
-  color: var(--chat-text-muted, #888);
-}
-
-.quick-btn:hover .quick-icon {
-  color: var(--chat-text, #fff);
-}
-</style>