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

package/src/components/message/MessageBubble.vue

@@ -0,0 +1,411 @@
+<template>
+  <div :class="['message-bubble', role]">
+    <!-- 用户消息 - 复用 ChatInput 组件 -->
+    <template v-if="role === 'user'">
+      <ChatInput
+        v-if="onSend && inputState"
+        variant="message"
+        :value="userText"
+        :mode="inputState.mode.value"
+        :model="inputState.model.value"
+        :models="inputState.models.value"
+        :web-search-enabled="inputState.webSearch.value"
+        :thinking-enabled="inputState.thinking.value"
+        :is-loading="inputState.isLoading.value"
+        @send="(text) => $emit('send', text)"
+        @update:mode="inputState.setMode"
+        @update:model="inputState.setModel"
+        @update:webSearch="inputState.setWebSearch"
+        @update:thinking="inputState.setThinking"
+      />
+      <div v-else class="user-content">
+        <div class="user-text">{{ userText }}</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 v-if="formattedTime" class="message-time user-time">{{ formattedTime }}</div>
+      </div>
+    </template>
+
+    <!-- 助手消息 - 使用 PartsRenderer 渲染 -->
+    <template v-else>
+      <div class="assistant-content">
+        <!-- 使用新架构：PartsRenderer 渲染所有 parts -->
+        <PartsRenderer 
+          :parts="parts" 
+          :expanded-type="stepsExpandedType"
+          :adapter="adapter"
+          :auto-run-config="autoRunConfig"
+          :on-save-config="onSaveConfig"
+        />
+        
+        <!-- 加载指示器：等待状态时显示 -->
+        <div v-if="loadingState.type === 'text'" class="loading-indicator">
+          <span class="loading-text">{{ loadingState.text }}</span>
+          <span class="loading-shimmer"></span>
+        </div>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div v-if="hasContent && loading === false" class="message-actions">
+        <!-- 左侧：模型信息 -->
+        <div class="message-meta">
+          <span v-if="model" class="model-name">{{ getModelDisplayName(model) }}</span>
+          <span v-if="mode" class="mode-badge">{{ mode === 'ask' ? 'Ask' : 'Agent' }}</span>
+        </div>
+        <!-- 右侧：时间和按钮 -->
+        <div class="action-buttons">
+          <span v-if="formattedTime" class="message-time assistant-time">{{ formattedTime }}</span>
+          <button class="action-btn" title="复制" @click="$emit('copy')">
+            <Icon :icon="copied ? 'lucide:check' : 'lucide:copy'" width="14" />
+          </button>
+          <button class="action-btn" title="重新生成" @click="$emit('regenerate')">
+            <Icon icon="lucide:refresh-cw" width="14" />
+          </button>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, type Ref } from 'vue'
+import { Icon } from '@iconify/vue'
+import ChatInput from '../input/ChatInput.vue'
+import PartsRenderer from './PartsRenderer.vue'
+import type { ContentPart, TextPart, ToolCallPart, SearchPart, ThinkingPart, ChatMode, ModelOption } from '../../types'
+import type { ChatAdapter } from '../../adapter'
+import type { AutoRunConfig } from '@huyooo/ai-chat-bridge-electron/renderer'
+
+// 注入全局 input 状态
+interface ChatInputState {
+  mode: Ref<ChatMode>
+  model: Ref<string>
+  webSearch: Ref<boolean>
+  thinking: Ref<boolean>
+  models: Ref<ModelOption[]>
+  isLoading: Ref<boolean>
+  setMode: (value: ChatMode) => void
+  setModel: (value: string) => void
+  setWebSearch: (value: boolean) => void
+  setThinking: (value: boolean) => void
+}
+
+const inputState = inject<ChatInputState>('chatInputState')
+
+const props = withDefaults(defineProps<{
+  role: 'user' | 'assistant'
+  /** 内容 parts 数组 - 新架构核心 */
+  parts: ContentPart[]
+  /** 生成此消息时使用的模型 */
+  model?: string
+  /** 生成此消息时使用的模式 (ask/agent) */
+  mode?: string
+  /** 用户上传的图片 */
+  images?: string[]
+  /** 是否正在加载 */
+  loading?: boolean
+  /** 是否已复制 */
+  copied?: boolean
+  /** 消息时间戳 */
+  timestamp?: Date | string | number
+  /** 是否支持重新发送（仅用户消息） */
+  onSend?: (text: string) => void
+  /** 步骤折叠模式 */
+  stepsExpandedType?: 'open' | 'close' | 'auto'
+  /** 工具调用相关 - 通过 props 传递 */
+  adapter?: ChatAdapter
+  autoRunConfig?: AutoRunConfig
+  onSaveConfig?: (config: AutoRunConfig) => Promise<void>
+}>(), {
+  loading: false,
+  copied: false,
+  stepsExpandedType: 'auto',
+})
+
+// 提取用户消息的文本内容
+const userText = computed(() => {
+  return props.parts
+    .filter((p): p is TextPart => p.type === 'text')
+    .map(p => p.text)
+    .join('')
+})
+
+// 是否有内容（用于显示操作按钮）
+const hasContent = computed(() => {
+  return props.parts.some(p => 
+    (p.type === 'text' && p.text) || 
+    p.type === 'tool_result' ||
+    p.type === 'thinking' ||
+    p.type === 'search'
+  )
+})
+
+// loading 状态：决定显示什么类型的指示器
+// cursor: 闪烁光标（文本流式输出时）
+// text: 文字提示（等待状态时）
+// none: 不显示
+const loadingState = computed<{ type: 'cursor' | 'text' | 'none'; text?: string }>(() => {
+  if (!props.loading) {
+    return { type: 'none' }
+  }
+  
+  if (props.parts.length === 0) {
+    return { type: 'text', text: '正在思考...' }
+  }
+  
+  const lastPart = props.parts[props.parts.length - 1]
+  
+  // 文本流式输出 → 不需要额外指示，用户能看到文字在增加
+  if (lastPart.type === 'text') {
+    return { type: 'none' }
+  }
+  
+  // 工具调用完成后 → 显示规划提示
+  if (lastPart.type === 'tool_call') {
+    const status = (lastPart as ToolCallPart).status
+    if (status === 'done' || status === 'error' || status === 'skipped') {
+      return { type: 'text', text: '正在规划下一步...' }
+    }
+    // 工具正在执行时，卡片本身有状态，不需要额外指示
+    return { type: 'none' }
+  }
+  
+  // 搜索完成后 → 显示规划提示
+  if (lastPart.type === 'search') {
+    if ((lastPart as SearchPart).status === 'done') {
+      return { type: 'text', text: '正在规划下一步...' }
+    }
+    return { type: 'none' }
+  }
+  
+  // 思考完成后 → 显示规划提示
+  if (lastPart.type === 'thinking') {
+    if ((lastPart as ThinkingPart).status === 'done') {
+      return { type: 'text', text: '正在规划下一步...' }
+    }
+    return { type: 'none' }
+  }
+  
+  return { type: 'none' }
+})
+
+/** 获取模型显示名称 */
+function getModelDisplayName(modelId: string): string {
+  // 优先从注入的 models 中查找
+  const models = inputState?.models.value ?? []
+  const found = models.find((m) => m.modelId === modelId)
+  if (found) return found.displayName
+  // 后备：提取模型名称（前端不应该依赖后端包）
+  return modelId.split('/').pop() || modelId
+}
+
+// 格式化时间显示
+const formattedTime = computed(() => {
+  if (!props.timestamp) return ''
+  const date = new Date(props.timestamp)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  return `${year}-${month}-${day} ${hours}:${minutes}`
+})
+
+defineEmits<{
+  copy: []
+  regenerate: []
+  'view-image': [url: string]
+  send: [text: string]
+}>()
+</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%;
+}
+
+/* 加载提示 - 等待状态时 */
+.loading-indicator {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 10px 16px;
+  background: var(--chat-muted, #2a2a2a);
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 8px 0;
+}
+
+.loading-text {
+  font-size: 13px;
+  color: var(--chat-text-muted, #888);
+  position: relative;
+  z-index: 1;
+}
+
+.loading-shimmer {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.08) 50%,
+    transparent 100%
+  );
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+/* 操作按钮 */
+.message-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+}
+
+.message-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.model-name {
+  font-size: 11px;
+  color: var(--chat-text-muted, #888);
+  background: var(--chat-muted, #2a2a2a);
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid var(--chat-border, #333);
+}
+
+.mode-badge {
+  font-size: 10px;
+  color: var(--chat-text-muted, #888);
+  background: var(--chat-muted, #2a2a2a);
+  padding: 2px 6px;
+  border-radius: 10px;
+  border: 1px solid var(--chat-border, #333);
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.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);
+}
+
+/* 消息时间 */
+.message-time {
+  font-size: 12px;
+  color: var(--chat-text-muted, #666);
+}
+
+.user-time {
+  text-align: right;
+  margin-top: 8px;
+}
+
+.assistant-time {
+  margin-right: 8px;
+}
+</style>

package/src/components/message/PartsRenderer.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="parts-renderer">
+    <template v-for="(part, index) in parts" :key="index">
+      <!-- 文本 -->
+      <TextPart 
+        v-if="part.type === 'text'" 
+        :text="part.text" 
+      />
+      
+      <!-- 思考 -->
+      <ThinkingPart 
+        v-else-if="part.type === 'thinking'" 
+        :text="part.text"
+        :status="part.status"
+        :duration="part.duration"
+        :expanded-type="expandedType"
+      />
+      
+      <!-- 搜索 -->
+      <SearchPart 
+        v-else-if="part.type === 'search'" 
+        :query="part.query"
+        :results="part.results"
+        :status="part.status"
+        :expanded-type="expandedType"
+      />
+      
+      <!-- 工具调用（包含执行结果） -->
+      <ToolCallPart 
+        v-else-if="part.type === 'tool_call'" 
+        :id="part.id"
+        :name="part.name"
+        :args="part.args"
+        :status="part.status"
+        :result="part.result"
+        :expanded-type="expandedType"
+        :adapter="adapter"
+        :auto-run-config="autoRunConfig"
+        :on-save-config="onSaveConfig"
+      />
+      
+      <!-- 工具结果（仅在没有对应 tool_call 时显示） -->
+      <ToolResultPart 
+        v-else-if="part.type === 'tool_result'" 
+        :id="part.id"
+        :name="part.name"
+        :args="part.args"
+        :result="part.result"
+        :status="part.status"
+        :expanded-type="expandedType"
+      />
+      
+      <!-- 图片 -->
+      <ImagePart 
+        v-else-if="part.type === 'image'" 
+        :url="part.url"
+      />
+      
+      <!-- 错误 -->
+      <ErrorPart 
+        v-else-if="part.type === 'error'" 
+        :message="part.message"
+        :category="part.category"
+        :retryable="part.retryable"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ContentPart, StepsExpandedType } from '../../types'
+import type { ChatAdapter } from '../../adapter'
+import type { AutoRunConfig } from '@huyooo/ai-chat-bridge-electron/renderer'
+import { 
+  TextPart, 
+  ThinkingPart, 
+  SearchPart, 
+  ToolCallPart, 
+  ToolResultPart, 
+  ImagePart,
+  ErrorPart 
+} from './parts'
+
+withDefaults(defineProps<{
+  parts: ContentPart[]
+  expandedType?: StepsExpandedType
+  // 工具调用相关
+  adapter?: ChatAdapter
+  autoRunConfig?: AutoRunConfig
+  onSaveConfig?: (config: AutoRunConfig) => Promise<void>
+}>(), {
+  expandedType: 'auto'
+})
+</script>
+
+<style scoped>
+.parts-renderer {
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/src/components/message/ToolResultRenderer.vue

@@ -0,0 +1,27 @@
+<template>
+  <component :is="resolvedComponent" v-bind="rendererProps" />
+</template>
+
+<script setup lang="ts">
+import { computed, inject, type Component } from 'vue'
+import type { ToolRendererProps } from '@huyooo/ai-chat-shared'
+import { DefaultToolResult } from './tool-results'
+
+const props = defineProps<ToolRendererProps>()
+
+// 从上层注入的自定义工具渲染器
+const customRenderers = inject<Record<string, Component>>('toolRenderers', {})
+
+// 解析使用哪个组件
+const resolvedComponent = computed(() => 
+  customRenderers[props.toolName] || DefaultToolResult
+)
+
+// 传递给渲染器的 props
+const rendererProps = computed<ToolRendererProps>(() => ({
+  toolName: props.toolName,
+  toolArgs: props.toolArgs,
+  toolResult: props.toolResult,
+  status: props.status,
+}))
+</script>