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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huyooo/ai-chat-frontend-vue",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "AI Chat Frontend - Vue components with adapter pattern",
   "type": "module",
   "main": "./dist/index.js",
@@ -31,8 +31,8 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@huyooo/ai-chat-bridge-electron": "^0.2.13",
-    "@huyooo/ai-chat-shared": "^0.2.13",
+    "@huyooo/ai-chat-bridge-electron": "^0.2.14",
+    "@huyooo/ai-chat-shared": "^0.2.14",
     "@iconify/vue": "^4.1.2",
     "vscode-uri": "^3.1.0",
     "marked": "^12.0.0",

package/src/components/ChatPanel.vue

@@ -19,7 +19,10 @@
     <SettingsPanel
       v-model:visible="settingsPanelVisible"
       v-model:config="autoRunConfig"
+      :all-tools="allTools"
+      :enabled-tools="enabledTools"
       @save="handleSaveSettings"
+      @update:enabled-tools="handleUpdateEnabledTools"
     />
 
     <!-- 顶部标题栏 -->
@@ -28,7 +31,7 @@
       :sessions="sessions"
       :current-session-id="currentSessionId"
       :show-close="!!onClose"
-      @new-session="createNewSession"
+      @new-session="handleNewSession"
       @switch-session="switchSession"
       @delete-session="deleteSession"
       @hide-session="hideSession"
@@ -61,6 +64,7 @@
             :adapter="props.adapter"
             :auto-run-config="autoRunConfig"
             :on-save-config="saveAutoRunConfig"
+            :on-cancel-tool-call="handleCancelToolCall"
             @copy="copyMessage(msg.id)"
             @regenerate="regenerateMessage(index)"
             @send="(text) => handleResend(index, text)"
@@ -105,7 +109,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, provide, toRef, type Component } from 'vue';
 import { useChat } from '../composables/useChat';
-import type { ChatAdapter } from '../adapter';
+import type { ChatAdapter, ImageData } from '../adapter';
 import type { ModelOption, ChatMode } from '../types';
 import type { AutoRunConfig } from '@huyooo/ai-chat-bridge-electron/renderer';
 import { Icon } from '@iconify/vue';
@@ -137,8 +141,8 @@ interface Props {
   className?: string;
   /** 欢迎页配置 */
   welcomeConfig?: Partial<WelcomeConfig>;
-  /** 自定义工具结果渲染器 - 根据工具名称选择渲染组件 */
-  toolRenderers?: Record<string, Component>;
+  /** 自定义 Part 渲染器 - 根据 part.type 选择渲染组件（如 weather, stock 等） */
+  partRenderers?: Record<string, Component>;
   /** 
    * 执行步骤折叠模式
    * - 'open': 始终展开
@@ -156,7 +160,7 @@ const props = withDefaults(defineProps<Props>(), {
   onClose: undefined,
   className: '',
   welcomeConfig: undefined,
-  toolRenderers: () => ({}),
+  partRenderers: () => ({}),
   stepsExpandedType: 'auto',
 });
 
@@ -184,6 +188,9 @@ const {
   model,
   webSearch,
   thinking,
+  // 工具管理
+  allTools,
+  enabledTools,
   loadSessions,
   switchSession,
   createNewSession,
@@ -204,15 +211,24 @@ const {
   setWorkingDirectory,
   autoRunConfig,
   saveAutoRunConfig,
+  saveEnabledTools,
 } = chat;
 
+function handleCancelToolCall() {
+  cancelRequest()
+}
+
 // 消息容器引用
 const messagesRef = ref<HTMLDivElement | null>(null);
 
 // 是否应该自动滚动（用户在底部附近时才自动滚动）
 const shouldAutoScroll = ref(true);
 // 距离底部多少像素内算"在底部"
-const SCROLL_THRESHOLD = 100;
+const SCROLL_THRESHOLD = 25;
+// 上次滚动位置（用于检测滚动方向）
+let lastScrollTop = 0;
+// 是否正在程序化滚动（用于区分用户手动滚动）
+let isProgrammaticScroll = false;
 
 // ChatInput 引用
 const chatInputRef = ref<InstanceType<typeof ChatInput> | null>(null);
@@ -291,8 +307,8 @@ provide('chatInputState', {
   setThinking,
 });
 
-// Provide 自定义工具渲染器（用于 ToolResultPart 组件）
-provide('toolRenderers', props.toolRenderers);
+// Provide 自定义 Part 渲染器（用于 PartsRenderer）
+provide('partRenderers', props.partRenderers);
 
 // 初始化
 onMounted(() => {
@@ -308,17 +324,45 @@ function isNearBottom(): boolean {
   return scrollHeight - scrollTop - clientHeight < SCROLL_THRESHOLD;
 }
 
-// 处理滚动事件
+// 处理滚动事件（优化：检测滚动方向，区分程序化滚动）
 function handleScroll() {
-  shouldAutoScroll.value = isNearBottom();
+  if (!messagesRef.value) return;
+  
+  // 忽略程序化滚动触发的事件
+  if (isProgrammaticScroll) return;
+  
+  const { scrollTop } = messagesRef.value;
+  const isScrollingUp = scrollTop < lastScrollTop;
+  lastScrollTop = scrollTop;
+  
+  // 用户向上滚动时，立即停止自动滚动
+  if (isScrollingUp) {
+    shouldAutoScroll.value = false;
+    return;
+  }
+  
+  // 用户向下滚动到底部附近时，恢复自动滚动
+  if (isNearBottom()) {
+    shouldAutoScroll.value = true;
+  }
 }
 
 // 滚动到底部
 async function scrollToBottom(force = false) {
   await nextTick();
   if (messagesRef.value && (force || shouldAutoScroll.value)) {
+    // 标记为程序化滚动，避免触发 handleScroll 逻辑
+    isProgrammaticScroll = true;
     messagesRef.value.scrollTop = messagesRef.value.scrollHeight;
-    shouldAutoScroll.value = true;
+    lastScrollTop = messagesRef.value.scrollTop;
+    // 强制滚动时才恢复自动滚动
+    if (force) {
+      shouldAutoScroll.value = true;
+    }
+    // 延迟重置标志，确保 scroll 事件已处理
+    requestAnimationFrame(() => {
+      isProgrammaticScroll = false;
+    });
   }
 }
 
@@ -340,8 +384,10 @@ watch(isLoading, (loading, prevLoading) => {
 });
 
 // 发送消息
-function handleSend(text: string) {
-  sendMessage(text);
+function handleSend(text: string, images?: ImageData[]) {
+  // 将 ImageData[] 转换为 string[] (data URL)
+  const imageUrls = images?.map(img => `data:${img.mimeType};base64,${img.base64}`)
+  sendMessage(text, imageUrls);
 }
 
 // 快捷操作
@@ -360,6 +406,15 @@ function handleAtContext() {
   console.log('@ 上下文');
 }
 
+// 创建新会话（重置输入框状态）
+async function handleNewSession() {
+  await createNewSession();
+  // 重置输入框状态
+  nextTick(() => {
+    chatInputRef.value?.clear();
+  });
+}
+
 // 关闭
 function handleClose() {
   if (props.onClose) {
@@ -438,6 +493,10 @@ async function handleSaveSettings(config: AutoRunConfig) {
   }
 }
 
+function handleUpdateEnabledTools(tools: string[] | undefined) {
+  saveEnabledTools(tools);
+}
+
 // 模式变更现在在 ToolCallPart 中处理，不再需要此函数
 
 // 暴露给外部的方法
@@ -487,6 +546,9 @@ defineExpose({
   overflow-y: auto;
   padding: 12px;
   scroll-behavior: smooth;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 /* 滚动到底部按钮 */

package/src/components/common/SettingsPanel.vue

@@ -45,6 +45,47 @@
                 />
               </div>
             </div>
+
+            <!-- 工具管理 -->
+            <div class="setting-section">
+              <div class="setting-section-header">
+                <div class="setting-info">
+                  <div class="setting-label">工具管理</div>
+                  <div class="setting-description">控制哪些工具可以被 AI 使用</div>
+                </div>
+                <button
+                  class="disable-all-btn"
+                  @click="isAllToolsDisabled ? handleEnableAllTools() : handleDisableAllTools()"
+                  :disabled="!allTools || allTools.length === 0"
+                >
+                  {{ isAllToolsDisabled ? '启用所有工具' : '禁用所有工具' }}
+                </button>
+              </div>
+              <div class="tools-list">
+                <template v-if="allTools && allTools.length > 0">
+                  <div
+                    v-for="tool in allTools"
+                    :key="tool.name"
+                    class="tool-item"
+                  >
+                    <div class="tool-info">
+                      <div class="tool-name">{{ tool.name }}</div>
+                      <div class="tool-description">{{ tool.description }}</div>
+                    </div>
+                    <ToggleSwitch
+                      :checked="isToolEnabled(tool.name)"
+                      @change="(checked) => handleToolToggle(tool.name, checked)"
+                    />
+                  </div>
+                </template>
+                <div v-else class="no-tools">
+                  <div>暂无可用工具</div>
+                  <div style="font-size: 12px; color: var(--chat-text-muted, #888); margin-top: 8px;">
+                    工具需要在创建 Electron Bridge 时通过 <code>tools</code> 参数注入
+                  </div>
+                </div>
+              </div>
+            </div>
           </template>
 
           <!-- 索引与文档设置 -->
@@ -69,8 +110,15 @@ import IndexingSettings from './IndexingSettings.vue'
 const visible = defineModel<boolean>('visible', { required: true })
 const config = defineModel<AutoRunConfig>('config', { required: true })
 
+// Props：工具相关
+const props = defineProps<{
+  allTools?: Array<{ name: string; description: string }>
+  enabledTools?: string[] | undefined
+}>()
+
 const emit = defineEmits<{
   save: [config: AutoRunConfig]
+  'update:enabledTools': [tools: string[] | undefined]
 }>()
 
 // 设置分类
@@ -102,6 +150,52 @@ function updateConfig<K extends keyof AutoRunConfig>(key: K, value: AutoRunConfi
 function handleModeChange(value: string) {
   updateConfig('mode', value as AutoRunMode)
 }
+
+/** 判断工具是否启用 */
+function isToolEnabled(toolName: string): boolean {
+  // undefined 表示全部启用
+  if (props.enabledTools === undefined) return true
+  return props.enabledTools.includes(toolName)
+}
+
+/** 处理工具开关切换 */
+function handleToolToggle(toolName: string, checked: boolean) {
+  const allToolNames = (props.allTools ?? []).map((t) => t.name)
+  let newEnabledTools: string[] | undefined
+
+  // undefined 表示“全部启用”，因此第一次“禁用某个工具”需要从全量集合扣掉该工具
+  if (props.enabledTools === undefined) {
+    if (checked) return
+    newEnabledTools = allToolNames.filter((n) => n !== toolName)
+    emit('update:enabledTools', newEnabledTools)
+    return
+  }
+
+  const set = new Set(props.enabledTools)
+  if (checked) set.add(toolName)
+  else set.delete(toolName)
+
+  // 如果所有工具都启用，回到 undefined（更符合默认语义）
+  if (allToolNames.length > 0 && set.size === allToolNames.length) {
+    newEnabledTools = undefined
+  } else {
+    newEnabledTools = Array.from(set)
+  }
+
+  emit('update:enabledTools', newEnabledTools)
+}
+
+/** 一键禁用所有工具 */
+function handleDisableAllTools() {
+  emit('update:enabledTools', [])
+}
+
+/** 一键启用所有工具（恢复默认：undefined 表示全部启用） */
+function handleEnableAllTools() {
+  emit('update:enabledTools', undefined)
+}
+
+const isAllToolsDisabled = computed(() => props.enabledTools !== undefined && props.enabledTools.length === 0)
 </script>
 
 <style scoped>
@@ -290,4 +384,79 @@ function handleModeChange(value: string) {
 .setting-control {
   flex-shrink: 0;
 }
+
+.setting-section {
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid var(--chat-border, #333);
+}
+
+.setting-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.disable-all-btn {
+  padding: 6px 12px;
+  background: transparent;
+  border: 1px solid var(--chat-border, #333);
+  border-radius: 6px;
+  color: var(--chat-text, #fff);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.disable-all-btn:hover:not(:disabled) {
+  background: var(--chat-muted, #2a2a2a);
+  border-color: var(--chat-text-muted, #888);
+}
+
+.disable-all-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tools-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.tool-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  background: var(--chat-muted, #2a2a2a);
+  border: 1px solid var(--chat-border, #333);
+  border-radius: 8px;
+}
+
+.tool-info {
+  flex: 1;
+  margin-right: 16px;
+}
+
+.tool-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--chat-text, #fff);
+  margin-bottom: 4px;
+}
+
+.tool-description {
+  font-size: 12px;
+  color: var(--chat-text-muted, #888);
+  line-height: 1.4;
+}
+
+.no-tools {
+  padding: 24px;
+  text-align: center;
+  color: var(--chat-text-muted, #888);
+  font-size: 14px;
+}
 </style>

package/src/components/input/ChatInput.vue

@@ -43,6 +43,7 @@
           :placeholder="placeholder"
           rows="1"
           class="input-field chat-scrollbar"
+          :readonly="voiceIsRecording"
           spellcheck="false"
           autocorrect="off"
           autocomplete="off"
@@ -69,7 +70,7 @@
           <!-- 模型选择（使用后端返回的分组数据） -->
           <DropdownSelector
             :value="model"
-            :grouped-options="groupedModelOptions"
+            :options="modelOptions"
             :container-ref="containerRef"
             @select="selectModel"
           />
@@ -77,8 +78,9 @@
 
         <!-- 右侧：功能按钮 -->
         <div class="input-right">
-          <!-- 深度思考 -->
+          <!-- 深度思考（ask 模式隐藏，仅支持的模型显示） -->
           <button
+            v-if="mode !== 'ask' && currentModelSupportsThinking"
             :class="['toggle-btn', { active: thinkingEnabled }]"
             title="深度思考"
             @click="$emit('update:thinking', !thinkingEnabled)"
@@ -86,8 +88,9 @@
             <Icon icon="lucide:sparkles" width="18" />
           </button>
 
-          <!-- 联网搜索 -->
+          <!-- 联网搜索（ask 模式隐藏） -->
           <button
+            v-if="mode !== 'ask'"
             :class="['toggle-btn', { active: webSearchEnabled }]"
             title="联网搜索"
             @click="$emit('update:webSearch', !webSearchEnabled)"
@@ -131,7 +134,7 @@
             :class="{ connecting: voiceInput.status.value === 'connecting', recording: voiceIsRecording }"
             :title="voiceInput.status.value === 'connecting' ? '正在连接，点击取消' : voiceIsRecording ? '点击停止' : '点击录音'"
             @click.prevent="toggleVoiceInput"
-            :disabled="isLoading"
+            :disabled="isLoading || !props.adapter"
           >
             <Icon v-if="voiceInput.status.value === 'connecting'" icon="lucide:loader-2" width="18" class="spin" />
             <Icon v-else-if="voiceIsRecording" icon="streamline-flex:button-pause-circle-remix" width="18" />
@@ -141,7 +144,7 @@
           <button
             class="send-btn"
             :class="{ loading: isLoading }"
-            :disabled="(!inputText.trim() && !imageUpload.hasImages.value) || voiceIsRecording || voiceInput.status.value === 'connecting'"
+            :disabled="(!inputText.trim() && !imageUpload.hasImages.value && !isLoading) || voiceIsRecording || voiceInput.status.value === 'connecting'"
             :title="
               isLoading
                 ? '停止'
@@ -156,7 +159,7 @@
             @click="handleSendOrCancel"
           >
             <Icon v-if="isLoading" icon="streamline-flex:button-pause-circle-remix" width="18" />
-            <Icon v-else icon="streamline-flex:mail-send-email-message-circle-remix" width="18" />
+            <Icon v-else icon="uil:message" width="18" />
           </button>
         </div>
       </div>
@@ -171,7 +174,7 @@ import { Icon } from '@iconify/vue';
 import type { ChatMode, ModelOption } from '../../types';
 import AtFilePicker from './AtFilePicker.vue';
 import ImagePreviewModal from './ImagePreviewModal.vue';
-import DropdownSelector, { type GroupedOptions } from './DropdownSelector.vue';
+import DropdownSelector, { type GroupedOptions, type DropdownOption } from './DropdownSelector.vue';
 import type { ChatAdapter, ImageData } from '../../adapter';
 import { useImageUpload } from '../../composables/useImageUpload';
 import { useVoiceToTextInput } from '../../composables/useVoiceToTextInput';
@@ -182,12 +185,14 @@ const props = withDefaults(
     variant?: 'input' | 'message';
     /** 受控值（用于历史消息编辑） */
     value?: string;
+    /** 图片数据（用于历史消息编辑） */
+    images?: string[];
     isLoading?: boolean;
     /** 由宿主显式传入（@ 面板需要） */
     adapter?: ChatAdapter;
     mode?: ChatMode;
     model?: string;
-    /** 模型列表 */
+    /** 模型列表（tooltip 由后端下发，前端仅透传渲染） */
     models?: ModelOption[];
     webSearchEnabled?: boolean;
     thinkingEnabled?: boolean;
@@ -195,6 +200,7 @@ const props = withDefaults(
   {
     variant: 'input',
     value: '',
+    images: () => [],
     isLoading: false,
     adapter: undefined,
     mode: 'agent',
@@ -326,37 +332,39 @@ watch(
   }
 );
 
+// 同步外部 images（用于历史消息编辑）
+watch(
+  () => props.images,
+  (newImages) => {
+    if (newImages.length > 0) {
+      imageUpload.initImages(newImages);
+    } else {
+      imageUpload.clearImages();
+    }
+  },
+  { immediate: true }
+);
+
 // 模式选项（用于 DropdownSelector）
 const modeOptions = computed(() => [
   { value: 'agent', label: 'Agent', icon: 'lucide:zap' },
   { value: 'ask', label: 'Ask', icon: 'lucide:message-circle' },
 ]);
 
-// 模型选项（用于 DropdownSelector，支持分组显示和搜索）
-// 将模型列表转换为分组格式（完全使用后端返回的 group 字段）
-const groupedModelOptions = computed(() => {
-  const groups: Record<string, Array<{ value: string; label: string; icon?: string }>> = {};
-  
-  props.models.forEach((m) => {
-    // 完全使用后端返回的 group 字段
-    const groupName = m.group;
-    
-    if (!groups[groupName]) {
-      groups[groupName] = [];
-    }
-    
-    groups[groupName].push({
-      value: m.modelId,
-      label: m.displayName,
-    });
-  });
-  
-  // 对每个分组内的选项进行排序
-  Object.keys(groups).forEach(groupName => {
-    groups[groupName].sort((a, b) => a.label.localeCompare(b.label));
-  });
-  
-  return groups;
+// 模型选项（用于 DropdownSelector）
+// 模型选项：tooltip/能力由后端（ai-chat-core）统一提供，前端只负责渲染
+const modelOptions = computed<DropdownOption[]>(() =>
+  props.models.map((m) => ({
+    value: m.modelId,
+    label: m.displayName,
+    tooltip: m.tooltip,
+  }))
+);
+
+// 当前模型是否支持深度思考
+const currentModelSupportsThinking = computed(() => {
+  const currentModel = props.models.find(m => m.modelId === props.model);
+  return currentModel?.supportsThinking ?? false;
 });
 
 // 选择模式
@@ -494,6 +502,14 @@ defineExpose({
   clear: () => {
     inputText.value = '';
     imageUpload.clearImages();
+    // 重置语音输入状态
+    if (voiceInput.status.value !== 'idle') {
+      voiceInput.cancel();
+    }
+    // 重置 @ 选择器
+    atPickerVisible.value = false;
+    replaceRange.value = null;
+    // 重置输入框高度
     if (inputRef.value) {
       inputRef.value.style.height = 'auto';
     }
@@ -512,7 +528,6 @@ defineExpose({
 
 .chat-input.message-variant {
   padding: 0;
-  margin-bottom: 16px;
 }
 
 .input-container {