@huyooo/ai-chat-frontend-react 0.2.12 → 0.2.14

package/dist/style.css

@@ -3,6 +3,9 @@
  * 仅包含 CSS 变量和 ChatPanel 基础布局
  */
 
+/* 导入 Markdown / Mermaid 等共享渲染样式（与 vue 版本保持一致） */
+@import "@huyooo/ai-chat-shared/styles";
+
 /**
  * 主题协议（跨项目统一）：
  * - 使用 document.documentElement 的 data-theme = light | dark
@@ -25,6 +28,7 @@
   --chat-muted-hover: #e6e5e0;
   --chat-border: #26251e1a;
   --chat-text: #26251eeb;
+  --chat-text-strong: #26251e;
   --chat-text-muted: #26251e99;
   /* 主色：light/dark 保持一致（蓝） */
   --chat-primary: #54a9ff;
@@ -41,6 +45,36 @@
   --chat-fab-bg: #ffffff;
   --chat-fab-bg-hover: var(--chat-input-bg);
   --chat-fab-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
+
+  /* 代码高亮 - GitHub Light 风格 */
+  --chat-hljs-keyword: #cf222e;
+  --chat-hljs-built-in: #953800;
+  --chat-hljs-type: #953800;
+  --chat-hljs-function: #8250df;
+  --chat-hljs-string: #0a3069;
+  --chat-hljs-number: #0550ae;
+  --chat-hljs-literal: #0550ae;
+  --chat-hljs-comment: #6e7781;
+  --chat-hljs-variable: #953800;
+  --chat-hljs-attr: #0550ae;
+  --chat-hljs-property: #116329;
+  --chat-hljs-operator: #cf222e;
+  --chat-hljs-punctuation: #24292f;
+  --chat-hljs-params: #24292f;
+  --chat-hljs-regexp: #116329;
+  --chat-hljs-selector: #116329;
+  --chat-hljs-tag: #116329;
+  --chat-hljs-name: #116329;
+  --chat-hljs-deletion: #82071e;
+  --chat-hljs-deletion-bg: rgba(255, 129, 130, 0.15);
+  --chat-hljs-addition: #116329;
+  --chat-hljs-addition-bg: rgba(46, 160, 67, 0.15);
+  --chat-hljs-meta: #6e7781;
+  --chat-hljs-link: #0a3069;
+  --chat-hljs-symbol: #0550ae;
+  --chat-hljs-subst: #24292f;
+  --chat-hljs-section: #0550ae;
+  --chat-hljs-bullet: #953800;
 }
 
 /* 默认跟随系统暗色 */
@@ -56,6 +90,7 @@
     --chat-muted-hover: #3c3c3c;
     --chat-border: #333;
     --chat-text: #ccc;
+    --chat-text-strong: #fff;
     --chat-text-muted: #888;
     /* 主色：light/dark 保持一致（蓝） */
     --chat-primary: #54a9ff;
@@ -71,6 +106,36 @@
     --chat-fab-bg: var(--chat-muted);
     --chat-fab-bg-hover: var(--chat-muted-hover);
     --chat-fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+    /* 代码高亮 - GitHub Dark 风格 */
+    --chat-hljs-keyword: #ff7b72;
+    --chat-hljs-built-in: #ffa657;
+    --chat-hljs-type: #ffa657;
+    --chat-hljs-function: #d2a8ff;
+    --chat-hljs-string: #a5d6ff;
+    --chat-hljs-number: #79c0ff;
+    --chat-hljs-literal: #79c0ff;
+    --chat-hljs-comment: #8b949e;
+    --chat-hljs-variable: #ffa657;
+    --chat-hljs-attr: #79c0ff;
+    --chat-hljs-property: #7ee787;
+    --chat-hljs-operator: #ff7b72;
+    --chat-hljs-punctuation: #e6edf3;
+    --chat-hljs-params: #e6edf3;
+    --chat-hljs-regexp: #7ee787;
+    --chat-hljs-selector: #7ee787;
+    --chat-hljs-tag: #7ee787;
+    --chat-hljs-name: #7ee787;
+    --chat-hljs-deletion: #ffa198;
+    --chat-hljs-deletion-bg: rgba(248, 81, 73, 0.15);
+    --chat-hljs-addition: #7ee787;
+    --chat-hljs-addition-bg: rgba(46, 160, 67, 0.15);
+    --chat-hljs-meta: #8b949e;
+    --chat-hljs-link: #a5d6ff;
+    --chat-hljs-symbol: #79c0ff;
+    --chat-hljs-subst: #e6edf3;
+    --chat-hljs-section: #79c0ff;
+    --chat-hljs-bullet: #ffa657;
   }
 }
 
@@ -86,6 +151,7 @@
   --chat-muted-hover: #e6e5e0;
   --chat-border: #26251e1a;
   --chat-text: #26251eeb;
+  --chat-text-strong: #26251e;
   --chat-text-muted: #26251e99;
   --chat-primary: #54a9ff;
   --chat-primary-hover: #2f90ff;
@@ -99,6 +165,36 @@
   --chat-fab-bg: #ffffff;
   --chat-fab-bg-hover: var(--chat-input-bg);
   --chat-fab-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
+
+  /* 代码高亮 - GitHub Light 风格 */
+  --chat-hljs-keyword: #cf222e;
+  --chat-hljs-built-in: #953800;
+  --chat-hljs-type: #953800;
+  --chat-hljs-function: #8250df;
+  --chat-hljs-string: #0a3069;
+  --chat-hljs-number: #0550ae;
+  --chat-hljs-literal: #0550ae;
+  --chat-hljs-comment: #6e7781;
+  --chat-hljs-variable: #953800;
+  --chat-hljs-attr: #0550ae;
+  --chat-hljs-property: #116329;
+  --chat-hljs-operator: #cf222e;
+  --chat-hljs-punctuation: #24292f;
+  --chat-hljs-params: #24292f;
+  --chat-hljs-regexp: #116329;
+  --chat-hljs-selector: #116329;
+  --chat-hljs-tag: #116329;
+  --chat-hljs-name: #116329;
+  --chat-hljs-deletion: #82071e;
+  --chat-hljs-deletion-bg: rgba(255, 129, 130, 0.15);
+  --chat-hljs-addition: #116329;
+  --chat-hljs-addition-bg: rgba(46, 160, 67, 0.15);
+  --chat-hljs-meta: #6e7781;
+  --chat-hljs-link: #0a3069;
+  --chat-hljs-symbol: #0550ae;
+  --chat-hljs-subst: #24292f;
+  --chat-hljs-section: #0550ae;
+  --chat-hljs-bullet: #953800;
 }
 
 :root[data-theme="dark"] {
@@ -112,6 +208,7 @@
   --chat-muted-hover: #3c3c3c;
   --chat-border: #333;
   --chat-text: #ccc;
+  --chat-text-strong: #fff;
   --chat-text-muted: #888;
   /* 主色：light/dark 保持一致（蓝） */
   --chat-primary: #54a9ff;
@@ -126,6 +223,36 @@
   --chat-fab-bg: var(--chat-muted);
   --chat-fab-bg-hover: var(--chat-muted-hover);
   --chat-fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  /* 代码高亮 - GitHub Dark 风格 */
+  --chat-hljs-keyword: #ff7b72;
+  --chat-hljs-built-in: #ffa657;
+  --chat-hljs-type: #ffa657;
+  --chat-hljs-function: #d2a8ff;
+  --chat-hljs-string: #a5d6ff;
+  --chat-hljs-number: #79c0ff;
+  --chat-hljs-literal: #79c0ff;
+  --chat-hljs-comment: #8b949e;
+  --chat-hljs-variable: #ffa657;
+  --chat-hljs-attr: #79c0ff;
+  --chat-hljs-property: #7ee787;
+  --chat-hljs-operator: #ff7b72;
+  --chat-hljs-punctuation: #e6edf3;
+  --chat-hljs-params: #e6edf3;
+  --chat-hljs-regexp: #7ee787;
+  --chat-hljs-selector: #7ee787;
+  --chat-hljs-tag: #7ee787;
+  --chat-hljs-name: #7ee787;
+  --chat-hljs-deletion: #ffa198;
+  --chat-hljs-deletion-bg: rgba(248, 81, 73, 0.15);
+  --chat-hljs-addition: #7ee787;
+  --chat-hljs-addition-bg: rgba(46, 160, 67, 0.15);
+  --chat-hljs-meta: #8b949e;
+  --chat-hljs-link: #a5d6ff;
+  --chat-hljs-symbol: #79c0ff;
+  --chat-hljs-subst: #e6edf3;
+  --chat-hljs-section: #79c0ff;
+  --chat-hljs-bullet: #ffa657;
 }
 
 /* 统一滚动条样式 - 任何需要自定义滚动条的元素添加此类 */
@@ -170,6 +297,9 @@
   overflow-y: auto;
   padding: 12px;
   scroll-behavior: smooth;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 /* 滚动到底部按钮 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huyooo/ai-chat-frontend-react",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "AI Chat Frontend - React components with adapter pattern",
   "type": "module",
   "main": "./dist/index.js",
@@ -32,8 +32,8 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@huyooo/ai-chat-bridge-electron": "^0.2.12",
-    "@huyooo/ai-chat-shared": "^0.2.12",
+    "@huyooo/ai-chat-bridge-electron": "^0.2.14",
+    "@huyooo/ai-chat-shared": "^0.2.14",
     "@iconify/react": "^5.0.2"
   },
   "devDependencies": {

package/src/components/ChatPanel.tsx

@@ -6,16 +6,16 @@
 import { useEffect, useRef, useCallback, useMemo, useState, forwardRef, useImperativeHandle, type ComponentType } from 'react'
 import { Icon } from '@iconify/react'
 import { useChat, type ToolCompleteEvent } from '../hooks/useChat'
+import type { ImageData } from '../adapter'
 import type { ChatAdapter, ModelOption, ChatMode } from '@huyooo/ai-chat-bridge-electron/renderer'
 import type { AutoRunConfig } from '@huyooo/ai-chat-bridge-electron/renderer'
-import type { ToolRendererProps } from '@huyooo/ai-chat-shared'
 import { ChatHeader } from './header/ChatHeader'
 import { WelcomeMessage } from './message/WelcomeMessage'
 import type { WelcomeConfig } from './message/welcome-types'
 import { MessageBubble } from './message/MessageBubble'
 import { ChatInput, type ChatInputHandle } from './input/ChatInput'
 import { ChatInputProvider } from '../context/ChatInputContext'
-import { RenderersProvider } from '../context/RenderersContext'
+import { PartRenderersProvider, type PartRenderers } from '../context/RenderersContext'
 import { ConfirmDialog } from './common/ConfirmDialog'
 import { Toast } from './common/Toast'
 // ToolApprovalDialog 已移除，工具批准现在内嵌在 ToolCallPart 中
@@ -54,8 +54,8 @@ interface ChatPanelProps {
   className?: string
   /** 欢迎页配置 */
   welcomeConfig?: Partial<WelcomeConfig>
-  /** 自定义工具结果渲染器 - 根据工具名称选择渲染组件 */
-  toolRenderers?: Record<string, ComponentType<ToolRendererProps>>
+  /** 自定义 Part 渲染器 - 根据 part.type 选择渲染组件（如 weather, stock 等） */
+  partRenderers?: PartRenderers
   /** 
    * 执行步骤折叠模式
    * - 'open': 始终展开
@@ -75,7 +75,7 @@ export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
   onToolComplete,
   className = '',
   welcomeConfig,
-  toolRenderers = {},
+  partRenderers = {},
   stepsExpandedType = 'auto',
 }, ref) => {
   const messagesRef = useRef<HTMLDivElement>(null)
@@ -83,7 +83,12 @@ export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
 
   // 是否应该自动滚动（用户在底部附近时才自动滚动）
   const [shouldAutoScroll, setShouldAutoScroll] = useState(true)
-  const SCROLL_THRESHOLD = 100
+  // 距离底部多少像素内算"在底部"
+  const SCROLL_THRESHOLD = 25
+  // 上次滚动位置（用于检测滚动方向）
+  const lastScrollTopRef = useRef(0)
+  // 是否正在程序化滚动（用于区分用户手动滚动）
+  const isProgrammaticScrollRef = useRef(false)
 
   // 设置面板状态
   const [settingsPanelVisible, setSettingsPanelVisible] = useState(false)
@@ -159,6 +164,7 @@ export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
     cancelRequest,
     copyMessage,
     regenerateMessage,
+    resendFromIndex,
     setMode,
     setModel,
     setWebSearch,
@@ -166,6 +172,10 @@ export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
     setWorkingDirectory,
     autoRunConfig,
     saveAutoRunConfig,
+    // 工具管理
+    allTools,
+    enabledTools,
+    saveEnabledTools,
   } = useChat({
     adapter,
     defaultModel,
@@ -173,6 +183,10 @@ export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
     onToolComplete,
   })
 
+  const handleCancelToolCall = useCallback((_toolCallId: string) => {
+    cancelRequest()
+  }, [cancelRequest])
+
   // 暴露给外部的方法
   useImperativeHandle(ref, () => ({
     setInputText: (text: string) => {
@@ -213,16 +227,44 @@ export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
     return scrollHeight - scrollTop - clientHeight < SCROLL_THRESHOLD
   }, [])
 
-  // 处理滚动事件
+  // 处理滚动事件（优化：检测滚动方向，区分程序化滚动）
   const handleScroll = useCallback(() => {
-    setShouldAutoScroll(isNearBottom())
+    if (!messagesRef.current) return
+    
+    // 忽略程序化滚动触发的事件
+    if (isProgrammaticScrollRef.current) return
+    
+    const { scrollTop } = messagesRef.current
+    const isScrollingUp = scrollTop < lastScrollTopRef.current
+    lastScrollTopRef.current = scrollTop
+    
+    // 用户向上滚动时，立即停止自动滚动
+    if (isScrollingUp) {
+      setShouldAutoScroll(false)
+      return
+    }
+    
+    // 用户向下滚动到底部附近时，恢复自动滚动
+    if (isNearBottom()) {
+      setShouldAutoScroll(true)
+    }
   }, [isNearBottom])
 
   // 滚动到底部
   const scrollToBottom = useCallback((force = false) => {
     if (messagesRef.current && (force || shouldAutoScroll)) {
+      // 标记为程序化滚动，避免触发 handleScroll 逻辑
+      isProgrammaticScrollRef.current = true
       messagesRef.current.scrollTop = messagesRef.current.scrollHeight
-      setShouldAutoScroll(true)
+      lastScrollTopRef.current = messagesRef.current.scrollTop
+      // 强制滚动时才恢复自动滚动
+      if (force) {
+        setShouldAutoScroll(true)
+      }
+      // 延迟重置标志，确保 scroll 事件已处理
+      requestAnimationFrame(() => {
+        isProgrammaticScrollRef.current = false
+      })
     }
   }, [shouldAutoScroll])
 
@@ -242,8 +284,10 @@ export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
   }, [isLoading, scrollToBottom])
 
   // 发送消息
-  const handleSend = useCallback((text: string) => {
-    sendMessage(text)
+  const handleSend = useCallback((text: string, images?: ImageData[]) => {
+    // 将 ImageData[] 转换为 string[] (data URL)
+    const imageUrls = images?.map(img => `data:${img.mimeType};base64,${img.base64}`)
+    sendMessage(text, imageUrls)
   }, [sendMessage])
 
   // @ 上下文
@@ -262,14 +306,20 @@ export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
 
   // 重新发送（编辑后）
   const handleResend = useCallback(
-    (_index: number, text: string) => {
-      // 删除当前消息及后续消息，然后重新发送
-      // 这里简化处理，实际需要更完善的逻辑
-      sendMessage(text)
+    (index: number, text: string) => {
+      // 与 Vue 版一致：使用分叉重发（以当前索引为锚点，删除后续并继续生成）
+      resendFromIndex(index, text)
     },
-    [sendMessage]
+    [resendFromIndex]
   )
 
+  // 创建新会话（重置输入框状态）
+  const handleNewSession = useCallback(async () => {
+    await createNewSession()
+    // 重置输入框状态
+    inputRef.current?.clear()
+  }, [createNewSession])
+
   // 关闭
   const handleClose = useCallback(() => {
     onClose?.()
@@ -290,6 +340,15 @@ export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
     }
   }, [saveAutoRunConfig, showToast])
 
+  const handleUpdateEnabledTools = useCallback(async (tools: string[] | undefined) => {
+    try {
+      await saveEnabledTools(tools)
+    } catch (error) {
+      console.error('保存工具开关失败:', error)
+      showToast('保存工具开关失败', 'error')
+    }
+  }, [saveEnabledTools, showToast])
+
   // 模式变更现在在 ToolCallPart 中处理，不再需要此函数
 
   // 清空所有对话
@@ -369,7 +428,7 @@ export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
 
   return (
     <ChatInputProvider value={inputContextValue}>
-      <RenderersProvider blockRenderers={{}} toolRenderers={toolRenderers}>
+      <PartRenderersProvider partRenderers={partRenderers}>
         <div className={`chat-panel ${className}`.trim()}>
           {/* 确认弹窗 */}
           <ConfirmDialog
@@ -399,6 +458,9 @@ export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
         <SettingsPanel
           visible={settingsPanelVisible}
           config={autoRunConfig}
+          allTools={allTools}
+          enabledTools={enabledTools}
+          onUpdateEnabledTools={handleUpdateEnabledTools}
           onChange={handleSaveSettings}
           onClose={() => setSettingsPanelVisible(false)}
         />
@@ -409,7 +471,7 @@ export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
             sessions={sessions}
             currentSessionId={currentSessionId}
             showClose={!!onClose}
-            onNewSession={createNewSession}
+            onNewSession={handleNewSession}
             onSwitchSession={switchSession}
             onDeleteSession={deleteSession}
             onHideSession={hideSession}
@@ -442,6 +504,7 @@ export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
                   timestamp={msg.timestamp}
                   stepsExpandedType={stepsExpandedType}
                   adapter={adapter}
+                  onCancelToolCall={handleCancelToolCall}
                   autoRunConfig={autoRunConfig}
                   onSaveConfig={saveAutoRunConfig}
                   onCopy={() => copyMessage(msg.id)}
@@ -481,7 +544,7 @@ export const ChatPanel = forwardRef<ChatPanelHandle, ChatPanelProps>(({
           onAtContext={handleAtContext}
         />
         </div>
-      </RenderersProvider>
+      </PartRenderersProvider>
     </ChatInputProvider>
   )
 })

package/src/components/common/SettingsPanel.css

@@ -254,3 +254,84 @@
 .toggle-switch input:focus + .toggle-slider {
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
 }
+
+/* 工具管理 */
+.setting-section-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 0 8px;
+  border-bottom: 1px solid var(--chat-border, #333);
+}
+
+.disable-all-btn {
+  flex-shrink: 0;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 8px;
+  border: 1px solid var(--chat-border, #333);
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--chat-text, #fff);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.disable-all-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.disable-all-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tools-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.tool-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--chat-border, #333);
+}
+
+.tool-item:last-child {
+  border-bottom: none;
+}
+
+.tool-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.tool-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--chat-text, #fff);
+  margin-bottom: 4px;
+  word-break: break-all;
+}
+
+.tool-description {
+  font-size: 13px;
+  color: var(--chat-text-muted, #888);
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.no-tools {
+  padding: 16px 0;
+  color: var(--chat-text, #fff);
+}
+
+.no-tools-hint {
+  font-size: 12px;
+  color: var(--chat-text-muted, #888);
+  margin-top: 8px;
+}

package/src/components/common/SettingsPanel.tsx

@@ -14,6 +14,12 @@ import './SettingsPanel.css'
 interface SettingsPanelProps {
   visible: boolean
   config: AutoRunConfig
+  /** 所有可用工具列表（用于工具管理） */
+  allTools?: Array<{ name: string; description: string }>
+  /** 启用的工具名称列表（undefined 表示全部启用） */
+  enabledTools?: string[] | undefined
+  /** 更新工具开关（持久化由上层处理） */
+  onUpdateEnabledTools?: (tools: string[] | undefined) => void
   onClose: () => void
   onChange: (config: AutoRunConfig) => void
 }
@@ -23,7 +29,7 @@ const sections = [
   { id: 'indexing', label: '索引与文档', icon: 'lucide:database' },
 ] as const
 
-export function SettingsPanel({ visible, config, onClose, onChange }: SettingsPanelProps) {
+export function SettingsPanel({ visible, config, allTools, enabledTools, onUpdateEnabledTools, onClose, onChange }: SettingsPanelProps) {
   const [currentSection, setCurrentSection] = useState<string>('agent')
 
   const currentSectionLabel = useMemo(
@@ -54,6 +60,54 @@ export function SettingsPanel({ visible, config, onClose, onChange }: SettingsPa
     }
   }, [onClose])
 
+  const allToolNames = useMemo(() => (allTools ?? []).map((t) => t.name), [allTools])
+
+  /** 判断工具是否启用 */
+  const isToolEnabled = useCallback((toolName: string): boolean => {
+    // undefined 表示全部启用
+    if (enabledTools === undefined) return true
+    return enabledTools.includes(toolName)
+  }, [enabledTools])
+
+  /** 处理工具开关切换 */
+  const handleToolToggle = useCallback((toolName: string, checked: boolean) => {
+    if (!onUpdateEnabledTools) return
+
+    // undefined = 全部启用
+    if (enabledTools === undefined) {
+      if (checked) return
+      onUpdateEnabledTools(allToolNames.filter((n) => n !== toolName))
+      return
+    }
+
+    const set = new Set(enabledTools)
+    if (checked) set.add(toolName)
+    else set.delete(toolName)
+
+    // 如果全部启用，回到 undefined（更符合默认语义）
+    if (allToolNames.length > 0 && set.size === allToolNames.length) {
+      onUpdateEnabledTools(undefined)
+      return
+    }
+
+    onUpdateEnabledTools(Array.from(set))
+  }, [enabledTools, allToolNames, onUpdateEnabledTools])
+
+  /** 一键禁用所有工具 */
+  const handleDisableAllTools = useCallback(() => {
+    onUpdateEnabledTools?.([])
+  }, [onUpdateEnabledTools])
+
+  const isAllToolsDisabled = useMemo(
+    () => enabledTools !== undefined && enabledTools.length === 0,
+    [enabledTools]
+  )
+
+  const handleEnableAllTools = useCallback(() => {
+    // 恢复默认：undefined 表示全部启用
+    onUpdateEnabledTools?.(undefined)
+  }, [onUpdateEnabledTools])
+
   if (!visible) return null
 
   return (
@@ -105,6 +159,47 @@ export function SettingsPanel({ visible, config, onClose, onChange }: SettingsPa
                     />
                   </div>
                 </div>
+
+                {/* 工具管理 */}
+                <div className="setting-section">
+                  <div className="setting-section-header">
+                    <div className="setting-info">
+                      <div className="setting-label">工具管理</div>
+                      <div className="setting-description">控制哪些工具可以被 AI 使用</div>
+                    </div>
+                    <button
+                      className="disable-all-btn"
+                      onClick={isAllToolsDisabled ? handleEnableAllTools : handleDisableAllTools}
+                      disabled={!allTools?.length}
+                    >
+                      {isAllToolsDisabled ? '启用所有工具' : '禁用所有工具'}
+                    </button>
+                  </div>
+
+                  <div className="tools-list">
+                    {allTools && allTools.length > 0 ? (
+                      allTools.map((tool) => (
+                        <div key={tool.name} className="tool-item">
+                          <div className="tool-info">
+                            <div className="tool-name">{tool.name}</div>
+                            <div className="tool-description">{tool.description}</div>
+                          </div>
+                          <ToggleSwitch
+                            checked={isToolEnabled(tool.name)}
+                            onChange={(checked) => handleToolToggle(tool.name, checked)}
+                          />
+                        </div>
+                      ))
+                    ) : (
+                      <div className="no-tools">
+                        <div>暂无可用工具</div>
+                        <div className="no-tools-hint">
+                          工具需要在创建 Electron Bridge 时通过 <code>tools</code> 参数注入
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
               </>
             )}
 

package/src/components/input/ChatInput.css

@@ -8,7 +8,6 @@
 
 .chat-input.message-variant {
   padding: 0;
-  margin-bottom: 16px;
 }
 
 .input-container {