@huyooo/ai-chat-frontend-vue 0.2.13 → 0.2.14

package/src/components/input/DropdownSelector.vue

@@ -16,9 +16,37 @@
       <template v-else-if="groupedOptions && Object.keys(groupedOptions).length > 0">
         <template v-for="(groupItems, groupName) in groupedOptions" :key="groupName">
           <div class="group-title">{{ groupName }}</div>
-          <button
+          <div
             v-for="opt in groupItems"
             :key="opt.value"
+            class="dropdown-item-wrapper"
+            @mouseenter="(e) => handleItemHover(e, opt)"
+            @mouseleave="hoveredOption = null"
+          >
+            <button
+              :class="['dropdown-item', { active: value === opt.value }]"
+              @click="selectOption(opt.value)"
+            >
+              <Icon v-if="opt.icon" :icon="opt.icon" width="14" />
+              <span class="option-label">{{ opt.label }}</span>
+              <span class="option-right">
+                <Icon v-if="value === opt.value" icon="lucide:check" width="14" class="check-icon" />
+              </span>
+            </button>
+          </div>
+        </template>
+      </template>
+
+      <!-- 扁平列表模式：无分组数据时使用 -->
+      <template v-else>
+        <div
+          v-for="opt in sortedOptions"
+          :key="opt.value"
+          class="dropdown-item-wrapper"
+          @mouseenter="(e) => handleItemHover(e, opt)"
+          @mouseleave="hoveredOption = null"
+        >
+          <button
             :class="['dropdown-item', { active: value === opt.value }]"
             @click="selectOption(opt.value)"
           >
@@ -28,30 +56,46 @@
               <Icon v-if="value === opt.value" icon="lucide:check" width="14" class="check-icon" />
             </span>
           </button>
-        </template>
+        </div>
       </template>
+    </div>
 
-      <!-- 扁平列表模式：无分组数据时使用 -->
-      <template v-else>
-        <button
-          v-for="opt in sortedOptions"
-          :key="opt.value"
-          :class="['dropdown-item', { active: value === opt.value }]"
-          @click="selectOption(opt.value)"
-        >
-          <Icon v-if="opt.icon" :icon="opt.icon" width="14" />
-          <span class="option-label">{{ opt.label }}</span>
-          <span class="option-right">
-            <Icon v-if="value === opt.value" icon="lucide:check" width="14" class="check-icon" />
-          </span>
-        </button>
-      </template>
+    <!-- Hover 提示：不使用 Teleport，放在 dropdown-menu 外侧 + fixed 定位，避免被 overflow 裁剪 -->
+    <div
+      v-if="hoveredOption?.tooltip"
+      ref="tooltipRef"
+      class="ai-chat-model-tooltip"
+      :style="{
+        position: 'fixed',
+        top: `${tooltipPosition.top}px`,
+        left: `${tooltipPosition.left}px`,
+        zIndex: 10000,
+      }"
+    >
+      <div v-if="hoveredOption.tooltip.features && hoveredOption.tooltip.features.length > 0" class="ai-chat-model-tooltip__section">
+        <div class="ai-chat-model-tooltip__title">可用功能</div>
+        <div class="ai-chat-model-tooltip__features">
+          <div v-for="feature in hoveredOption.tooltip.features" :key="feature" class="ai-chat-model-tooltip__feature">
+            <Icon icon="lucide:check" width="12" class="ai-chat-model-tooltip__check" />
+            <span>{{ feature }}</span>
+          </div>
+        </div>
+      </div>
+      <div v-if="hoveredOption.tooltip.cost && hoveredOption.tooltip.cost.length > 0" class="ai-chat-model-tooltip__section">
+        <div class="ai-chat-model-tooltip__title">开销</div>
+        <div class="ai-chat-model-tooltip__cost">
+          <div v-for="(line, i) in hoveredOption.tooltip.cost" :key="i">{{ line }}</div>
+        </div>
+      </div>
+      <div v-if="hoveredOption.tooltip.description" class="ai-chat-model-tooltip__section">
+        <div class="ai-chat-model-tooltip__description">{{ hoveredOption.tooltip.description }}</div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
 import { Icon } from '@iconify/vue';
 
 /** 下拉选项 */
@@ -61,6 +105,15 @@ export interface DropdownOption {
   icon?: string;
   /** 分组名称（由后端决定，前端只负责渲染，必填） */
   group?: string;  // 在 DropdownOption 中保持可选，因为不是所有选项都需要分组
+  /** 模型特性信息（用于 hover 提示） */
+  tooltip?: {
+    /** 可用功能列表 */
+    features?: string[];
+    /** 开销信息（数组，分行显示） */
+    cost?: string[];
+    /** 其他描述信息 */
+    description?: string;
+  };
 }
 
 /** 分组后的选项（由后端提供） */
@@ -100,6 +153,9 @@ const emit = defineEmits<{
 const selectorRef = ref<HTMLDivElement | null>(null);
 const menuOpen = ref(false);
 const dropdownDirection = ref<'up' | 'down'>('up');
+const hoveredOption = ref<DropdownOption | null>(null);
+const tooltipRef = ref<HTMLDivElement | null>(null);
+const tooltipPosition = ref({ top: 0, left: 0 });
 
 // 检查是否有选项
 const hasOptions = computed(() => {
@@ -167,6 +223,46 @@ function handleClickOutside(event: MouseEvent) {
   }
 }
 
+/**
+ * 处理选项 hover 事件
+ */
+function handleItemHover(event: MouseEvent, opt: DropdownOption) {
+  hoveredOption.value = opt;
+  if (!opt.tooltip) return;
+  
+  nextTick(() => {
+    const target = event.currentTarget as HTMLElement;
+    if (!target) return;
+    
+    const rect = target.getBoundingClientRect();
+    // 提示框显示在右侧，距离 8px
+    let top = rect.top;
+    let left = rect.right + 8;
+    
+    // 检查是否会超出视口
+    if (tooltipRef.value) {
+      const tooltipRect = tooltipRef.value.getBoundingClientRect();
+      
+      // 检查右侧溢出，改为显示在左侧
+      if (left + tooltipRect.width > window.innerWidth) {
+        left = rect.left - tooltipRect.width - 8;
+      }
+      
+      // 检查底部溢出，向上调整
+      if (top + tooltipRect.height > window.innerHeight) {
+        top = window.innerHeight - tooltipRect.height - 8;
+      }
+      
+      // 检查顶部溢出
+      if (top < 8) {
+        top = 8;
+      }
+    }
+    
+    tooltipPosition.value = { top, left };
+  });
+}
+
 onMounted(() => {
   document.addEventListener('click', handleClickOutside);
 });
@@ -325,4 +421,65 @@ onUnmounted(() => {
   gap: 8px;
   margin-left: auto;
 }
+
+/* 模型特性提示框（组件内渲染，但使用 fixed 定位） */
+.ai-chat-model-tooltip {
+  /* 比之前更窄一点，避免“太宽” */
+  min-width: 160px;
+  max-width: 240px;
+  width: max-content;
+  padding: 12px;
+  background: var(--chat-dropdown-bg, #252526);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+}
+
+.ai-chat-model-tooltip__section {
+  margin-bottom: 10px;
+}
+
+.ai-chat-model-tooltip__section:last-child {
+  margin-bottom: 0;
+}
+
+.ai-chat-model-tooltip__title {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--chat-text-muted, #888);
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.ai-chat-model-tooltip__features {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ai-chat-model-tooltip__feature {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--chat-text, #ccc);
+}
+
+.ai-chat-model-tooltip__check {
+  color: #4ade80;
+  flex-shrink: 0;
+}
+
+.ai-chat-model-tooltip__cost {
+  font-size: 13px;
+  color: var(--chat-text, #ccc);
+}
+
+.ai-chat-model-tooltip__description {
+  font-size: 12px;
+  color: var(--chat-text-muted, #999);
+  line-height: 1.5;
+}
 </style>

package/src/components/message/MessageBubble.vue

@@ -6,6 +6,7 @@
         v-if="onSend && inputState"
         variant="message"
         :value="userText"
+        :images="images"
         :mode="inputState.mode.value"
         :model="inputState.model.value"
         :models="inputState.models.value"
@@ -27,7 +28,6 @@
             :key="i"
             :src="img"
             class="user-image"
-            @click="$emit('view-image', img)"
           />
         </div>
         <div v-if="formattedTime" class="message-time user-time">{{ formattedTime }}</div>
@@ -41,13 +41,19 @@
         <PartsRenderer 
           :parts="parts" 
           :expanded-type="stepsExpandedType"
+          :part-renderers="partRenderers"
           :adapter="adapter"
+          :on-cancel-tool-call="onCancelToolCall"
           :auto-run-config="autoRunConfig"
           :on-save-config="onSaveConfig"
         />
         
         <!-- 加载指示器：等待状态时显示 -->
-        <div v-if="loadingState.type === 'text'" class="loading-indicator">
+        <div 
+          v-if="loadingState.type === 'text'" 
+          class="loading-indicator"
+          :class="{ 'has-content-above': parts.length > 0 }"
+        >
           <span class="loading-text">{{ loadingState.text }}</span>
           <span class="loading-shimmer"></span>
         </div>
@@ -63,7 +69,7 @@
         <!-- 右侧：时间和按钮 -->
         <div class="action-buttons">
           <span v-if="formattedTime" class="message-time assistant-time">{{ formattedTime }}</span>
-          <button class="action-btn" title="复制" @click="$emit('copy')">
+          <button :class="['action-btn', { copied }]" title="复制" @click="$emit('copy')">
             <Icon :icon="copied ? 'lucide:check' : 'lucide:copy'" width="14" />
           </button>
           <button class="action-btn" title="重新生成" @click="$emit('regenerate')">
@@ -76,7 +82,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, type Ref } from 'vue'
+import { computed, inject, type Ref, type Component } from 'vue'
 import { Icon } from '@iconify/vue'
 import ChatInput from '../input/ChatInput.vue'
 import PartsRenderer from './PartsRenderer.vue'
@@ -100,6 +106,9 @@ interface ChatInputState {
 
 const inputState = inject<ChatInputState>('chatInputState')
 
+// 注入自定义 Part 渲染器
+const partRenderers = inject<Record<string, Component>>('partRenderers', {})
+
 const props = withDefaults(defineProps<{
   role: 'user' | 'assistant'
   /** 内容 parts 数组 - 新架构核心 */
@@ -122,6 +131,8 @@ const props = withDefaults(defineProps<{
   stepsExpandedType?: 'open' | 'close' | 'auto'
   /** 工具调用相关 - 通过 props 传递 */
   adapter?: ChatAdapter
+  /** 取消工具调用（通常会中止当前请求/流式输出） */
+  onCancelToolCall?: (toolCallId: string) => void
   autoRunConfig?: AutoRunConfig
   onSaveConfig?: (config: AutoRunConfig) => Promise<void>
 }>(), {
@@ -141,60 +152,64 @@ const userText = computed(() => {
 // 是否有内容（用于显示操作按钮）
 const hasContent = computed(() => {
   return props.parts.some(p => 
-    (p.type === 'text' && p.text) || 
-    p.type === 'tool_result' ||
+    (p.type === 'text' && (p as TextPart).text) || 
     p.type === 'thinking' ||
-    p.type === 'search'
+    p.type === 'search' ||
+    p.type === 'tool_call'
   )
 })
 
 // loading 状态：决定显示什么类型的指示器
-// cursor: 闪烁光标（文本流式输出时）
 // text: 文字提示（等待状态时）
-// none: 不显示
-const loadingState = computed<{ type: 'cursor' | 'text' | 'none'; text?: string }>(() => {
+// none: 不显示（有正在进行的活动）
+const loadingState = computed<{ type: '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]
+  // 分模式显示：ask 模式直接生成回答，agent 模式规划下一步
+  const waitingText = props.mode === 'ask' ? '正在生成回答...' : '正在规划下一步...'
   
-  // 文本流式输出 → 不需要额外指示，用户能看到文字在增加
-  if (lastPart.type === 'text') {
-    return { type: 'none' }
+  // 没有任何 parts 时，显示等待
+  if (props.parts.length === 0) {
+    return { type: 'text', text: waitingText }
   }
   
-  // 工具调用完成后 → 显示规划提示
-  if (lastPart.type === 'tool_call') {
-    const status = (lastPart as ToolCallPart).status
-    if (status === 'done' || status === 'error' || status === 'skipped') {
-      return { type: 'text', text: '正在规划下一步...' }
+  // 检查是否有正在进行的活动（如果有，不需要显示等待提示）
+  const hasActiveActivity = props.parts.some(part => {
+    // 思考正在进行
+    if (part.type === 'thinking' && (part as ThinkingPart).status === 'running') {
+      return true
     }
-    // 工具正在执行时，卡片本身有状态，不需要额外指示
-    return { type: 'none' }
-  }
-  
-  // 搜索完成后 → 显示规划提示
-  if (lastPart.type === 'search') {
-    if ((lastPart as SearchPart).status === 'done') {
-      return { type: 'text', text: '正在规划下一步...' }
+    // 搜索正在进行
+    if (part.type === 'search' && (part as SearchPart).status === 'running') {
+      return true
     }
+    // 工具调用正在进行（running 或 pending）
+    if (part.type === 'tool_call') {
+      const status = (part as ToolCallPart).status
+      if (status === 'running' || status === 'pending') {
+        return true
+      }
+    }
+    return false
+  })
+  
+  // 有正在进行的活动 → 不显示等待提示（活动本身有状态显示）
+  if (hasActiveActivity) {
     return { type: 'none' }
   }
   
-  // 思考完成后 → 显示规划提示
-  if (lastPart.type === 'thinking') {
-    if ((lastPart as ThinkingPart).status === 'done') {
-      return { type: 'text', text: '正在规划下一步...' }
-    }
+  // 检查最后一个 part 是否是正在流式输出的文本
+  const lastPart = props.parts[props.parts.length - 1]
+  if (lastPart.type === 'text') {
+    // 文本正在流式输出 → 不显示等待提示
     return { type: 'none' }
   }
   
-  return { type: 'none' }
+  // 没有任何正在进行的活动，但 loading=true → 显示等待提示
+  // 这包括：工具执行完成后、思考完成后、搜索完成后等"空窗期"
+  return { type: 'text', text: waitingText }
 })
 
 /** 获取模型显示名称 */
@@ -222,14 +237,12 @@ const formattedTime = computed(() => {
 defineEmits<{
   copy: []
   regenerate: []
-  'view-image': [url: string]
   send: [text: string]
 }>()
 </script>
 
 <style scoped>
 .message-bubble {
-  padding: 8px 0;
   animation: fadeIn 0.2s ease;
 }
 
@@ -304,7 +317,11 @@ defineEmits<{
   background: var(--chat-muted, #2a2a2a);
   border-radius: 8px;
   overflow: hidden;
-  margin: 8px 0;
+}
+
+/* 当上方有内容时，添加间距 */
+.loading-indicator.has-content-above {
+  margin-top: 8px;
 }
 
 .loading-text {
@@ -395,6 +412,10 @@ defineEmits<{
   color: var(--chat-text, #ccc);
 }
 
+.action-btn.copied {
+  color: #22c55e;
+}
+
 /* 消息时间 */
 .message-time {
   font-size: 12px;

package/src/components/message/PartsRenderer.vue

@@ -1,15 +1,20 @@
 <template>
   <div class="parts-renderer">
-    <template v-for="(part, index) in parts" :key="index">
-      <!-- 文本 -->
+    <div 
+      v-for="(part, index) in visibleParts" 
+      :key="index" 
+      class="part-item"
+      :style="{ marginTop: index > 0 ? '8px' : '0' }"
+    >
+      <!-- 文本（内部已处理代码块渲染） -->
       <TextPart 
-        v-if="part.type === 'text'" 
+        v-if="isText(part)" 
         :text="part.text" 
       />
       
       <!-- 思考 -->
       <ThinkingPart 
-        v-else-if="part.type === 'thinking'" 
+        v-else-if="isThinking(part)" 
         :text="part.text"
         :status="part.status"
         :duration="part.duration"
@@ -18,57 +23,70 @@
       
       <!-- 搜索 -->
       <SearchPart 
-        v-else-if="part.type === 'search'" 
+        v-else-if="isSearch(part)" 
         :query="part.query"
         :results="part.results"
         :status="part.status"
         :expanded-type="expandedType"
       />
       
-      <!-- 工具调用（包含执行结果） -->
+      <!-- 工具调用 -->
       <ToolCallPart 
-        v-else-if="part.type === 'tool_call'" 
+        v-else-if="isToolCall(part)" 
         :id="part.id"
         :name="part.name"
         :args="part.args"
+        :output="part.output"
         :status="part.status"
-        :result="part.result"
         :expanded-type="expandedType"
         :adapter="adapter"
+        :on-cancel-tool-call="onCancelToolCall"
         :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'" 
+        v-else-if="isImage(part)" 
         :url="part.url"
       />
       
       <!-- 错误 -->
       <ErrorPart 
-        v-else-if="part.type === 'error'" 
+        v-else-if="isError(part)" 
         :message="part.message"
         :category="part.category"
         :retryable="part.retryable"
       />
-    </template>
+      
+      <!-- 自定义类型：使用 partRenderers 渲染 -->
+      <component 
+        v-else-if="partRenderers[part.type]"
+        :is="partRenderers[part.type]"
+        v-bind="getPartProps(part)"
+      />
+      
+      <!-- 未知类型：显示 JSON（开发调试用） -->
+      <div v-else class="unknown-part">
+        <pre>{{ JSON.stringify(part, null, 2) }}</pre>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { ContentPart, StepsExpandedType } from '../../types'
+import { computed } from 'vue'
+import type { Component } from 'vue'
+import type { 
+  ContentPart, 
+  StepsExpandedType,
+  TextPart as TextPartType,
+  ThinkingPart as ThinkingPartType,
+  SearchPart as SearchPartType,
+  ToolCallPart as ToolCallPartType,
+  ImagePart as ImagePartType,
+  ErrorPart as ErrorPartType,
+} from '../../types'
 import type { ChatAdapter } from '../../adapter'
 import type { AutoRunConfig } from '@huyooo/ai-chat-bridge-electron/renderer'
 import { 
@@ -76,21 +94,60 @@ import {
   ThinkingPart, 
   SearchPart, 
   ToolCallPart, 
-  ToolResultPart, 
   ImagePart,
-  ErrorPart 
+  ErrorPart,
 } from './parts'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   parts: ContentPart[]
   expandedType?: StepsExpandedType
+  /** 自定义 Part 渲染器（key: part.type, value: 渲染组件） */
+  partRenderers?: Record<string, Component>
   // 工具调用相关
   adapter?: ChatAdapter
+  /** 取消工具调用（透传给 ToolCallPart） */
+  onCancelToolCall?: (toolCallId: string) => void
   autoRunConfig?: AutoRunConfig
   onSaveConfig?: (config: AutoRunConfig) => Promise<void>
 }>(), {
-  expandedType: 'auto'
+  expandedType: 'auto',
+  partRenderers: () => ({}),
 })
+
+/** 可见的 parts */
+const visibleParts = computed(() => props.parts)
+
+// ==================== 类型守卫函数 ====================
+
+function isText(part: ContentPart): part is TextPartType {
+  return part.type === 'text'
+}
+
+function isThinking(part: ContentPart): part is ThinkingPartType {
+  return part.type === 'thinking'
+}
+
+function isSearch(part: ContentPart): part is SearchPartType {
+  return part.type === 'search'
+}
+
+function isToolCall(part: ContentPart): part is ToolCallPartType {
+  return part.type === 'tool_call'
+}
+
+function isImage(part: ContentPart): part is ImagePartType {
+  return part.type === 'image'
+}
+
+function isError(part: ContentPart): part is ErrorPartType {
+  return part.type === 'error'
+}
+
+/** 获取 Part 的 props（去掉 type 字段） */
+function getPartProps(part: ContentPart): Record<string, unknown> {
+  const { type, ...rest } = part as Record<string, unknown>
+  return rest
+}
 </script>
 
 <style scoped>
@@ -98,4 +155,26 @@ withDefaults(defineProps<{
   display: flex;
   flex-direction: column;
 }
+
+.part-item {
+  margin-top: 8px;
+}
+
+.part-item:first-child {
+  margin-top: 0;
+}
+
+.unknown-part {
+  padding: 8px;
+  background: var(--chat-muted, #2a2a2a);
+  border-radius: 4px;
+  font-size: 12px;
+  color: var(--chat-text-muted, #999);
+}
+
+.unknown-part pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
 </style>

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

@@ -1,7 +1,10 @@
 <template>
   <div :class="['collapsible-card', { expanded: modelValue }]">
     <div class="card-header">
-      <div class="card-header-left" @click="emit('update:modelValue', !modelValue)">
+      <div 
+        :class="['card-header-left', { clickable: collapsible }]" 
+        @click="collapsible && emit('update:modelValue', !modelValue)"
+      >
         <div class="card-icon" :style="{ color: iconColor }">
           <Icon v-if="spinning" icon="lucide:loader-2" width="14" class="spinning" />
           <Icon v-else :icon="icon" width="14" />
@@ -59,7 +62,6 @@ const emit = defineEmits<{
 
 <style scoped>
 .collapsible-card {
-  margin: 8px 0;
   border-radius: 8px;
   background: var(--chat-muted, #2a2a2a);
   border: 1px solid var(--chat-border, #333);
@@ -80,6 +82,9 @@ const emit = defineEmits<{
   align-items: center;
   gap: 8px;
   flex: 1;
+}
+
+.card-header-left.clickable {
   cursor: pointer;
 }
 
@@ -128,7 +133,7 @@ const emit = defineEmits<{
 }
 
 .card-content {
-  padding: 12px;
+  padding: 0 12px 12px;
   min-width: 0;
   overflow: hidden;
 }