+
{title}
@@ -522,13 +523,55 @@ const AISettingsModal: React.FC
= ({ open, onClose, darkMo
);
- const tabItems = [
- { key: 'providers', label:
Provider, children: isEditing ? renderProviderForm() : renderProviderList() },
- { key: 'safety', label:
安全控制, children: renderSafetySettings() },
- { key: 'context', label:
上下文, children: renderContextSettings() },
- { key: 'prompts', label:
内置提示词, children: renderBuiltinPrompts() },
+ const BUILTIN_TOOLS_INFO = [
+ { name: 'get_connections', icon: '🔗', desc: '获取所有可用的数据库连接', detail: '返回连接 ID、名称、类型 (MySQL/PostgreSQL 等) 和 Host 地址。AI 根据返回信息决定优先探索哪个连接。', params: '无参数' },
+ { name: 'get_databases', icon: '🗄️', desc: '获取指定连接下的所有数据库', detail: '传入 connectionId，返回该连接下的数据库/Schema 名称列表。', params: 'connectionId: 连接 ID' },
+ { name: 'get_tables', icon: '📋', desc: '获取指定数据库下的所有表名', detail: '传入 connectionId 和 dbName，返回表名列表。AI 用它来定位用户提到的目标表。', params: 'connectionId, dbName' },
+ { name: 'get_columns', icon: '🔍', desc: '获取指定表的字段结构', detail: '传入 connectionId、dbName 和 tableName，返回每个字段的名称、类型、是否可空、默认值和注释。AI 在生成 SQL 前必须调用此工具确认真实字段名。', params: 'connectionId, dbName, tableName' },
+ { name: 'get_table_ddl', icon: '📝', desc: '获取表的建表语句 (DDL)', detail: '传入 connectionId、dbName 和 tableName，返回完整的 CREATE TABLE 语句，包含字段定义、索引、约束等信息。', params: 'connectionId, dbName, tableName' },
+ { name: 'execute_sql', icon: '▶️', desc: '执行 SQL 查询并返回结果', detail: '传入 connectionId、dbName 和 sql，在目标数据库上执行 SQL 并返回结果（最多 50 行）。受安全级别控制，只读模式下仅允许 SELECT/SHOW/DESCRIBE。', params: 'connectionId, dbName, sql' },
];
+ const renderBuiltinTools = () => (
+
+
+ AI 助手在处理数据库相关问题时，可以自动调用以下内置工具获取真实数据，全程无需人工干预。
+
+
+ 💡 工作流程：get_connections → get_databases → get_tables → get_columns → 生成 SQL
+
+ {BUILTIN_TOOLS_INFO.map(tool => (
+
+
+
{tool.icon}
+
+
+ {tool.name}
+
+
{tool.desc}
+
+
+
+ {tool.detail}
+
+
+
+ 参数：
+
+ {tool.params}
+
+
+
+ ))}
+
+ );
+
const modalShellStyle = {
background: overlayTheme.shellBg, border: overlayTheme.shellBorder,
boxShadow: overlayTheme.shellShadow, backdropFilter: overlayTheme.shellBackdropFilter,
@@ -555,14 +598,64 @@ const AISettingsModal: React.FC
= ({ open, onClose, darkMo
open={open}
onCancel={onClose}
footer={null}
- width={540}
+ width={820}
styles={{
content: modalShellStyle,
- header: { background: 'transparent', borderBottom: 'none', paddingBottom: 4 },
- body: { paddingTop: 0, height: 520, overflowY: 'auto', overflowX: 'hidden' },
+ header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 },
+ body: { paddingTop: 8, height: 620, overflow: 'hidden' },
}}
>
-
+
+
+
设置导航
+
+ {[
+ { key: 'providers', title: '模型供应商', description: '配置大模型接口与秘钥', icon:
},
+ { key: 'safety', title: '安全控制', description: '限制 AI 操作风险级别', icon:
},
+ { key: 'context', title: '上下文', description: '配置携带的数据架构信息', icon:
},
+ { key: 'tools', title: '内置工具', description: '查看 AI 可调用的数据探针', icon:
},
+ { key: 'prompts', title: '内置提示词', description: '查看系统预设的底层要求', icon:
},
+ ].map((item) => {
+ const active = activeSection === item.key;
+ return (
+
+ );
+ })}
+
+
+
+ {activeSection === 'providers' && (isEditing ? renderProviderForm() : renderProviderList())}
+ {activeSection === 'safety' && renderSafetySettings()}
+ {activeSection === 'context' && renderContextSettings()}
+ {activeSection === 'tools' && renderBuiltinTools()}
+ {activeSection === 'prompts' && renderBuiltinPrompts()}
+
+
+
+
+ } onClick={onHistoryClick} style={{ color: mutedColor }} />
+
+
+
+
+
GoNavi AI
+
+
+ {messages.length > 0 && (
+
+ } onClick={() => exportToMarkdown(messages, sessionTitle)} style={{ color: mutedColor }} />
+
+ )}
+
+ } onClick={onClear} style={{ color: mutedColor }} />
+
+
+ } onClick={onSettingsClick} style={{ color: mutedColor }} />
+
+
+ } onClick={onClose} style={{ color: mutedColor }} />
+
+
+
+
+
+ {activeContextItems.length > 0 && (
+
setContextExpanded(!contextExpanded)}
+ style={{ background: darkMode ? 'rgba(24, 144, 255, 0.15)' : 'rgba(24, 144, 255, 0.08)', border: 'none', color: '#1890ff', borderRadius: 12, padding: '4px 10px', display: 'flex', alignItems: 'center', gap: 4, margin: 0, cursor: 'pointer', transition: 'all 0.3s' }}
+ >
+
+ 关联上下文 ({activeContextItems.length}) {contextExpanded ? '▴' : '▾'}
+
+
+ )}
+
+ {contextExpanded && activeContextItems.map((ctx, idx) => (
+
{ e.preventDefault(); removeAIContext(connectionKey, ctx.dbName, ctx.tableName); }}
+ style={{ background: darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.04)', border: 'none', color: textColor, borderRadius: 12, padding: '4px 10px', display: 'flex', alignItems: 'center', gap: 4, margin: 0 }}
+ >
+ 🗄️ {ctx.tableName}
+
+ ))}
+ {draftImages.map((b64, i) => (
+
+
+
setDraftImages(prev => prev.filter((_, idx) => idx !== i))}
+ style={{ position: 'absolute', top: 2, right: 2, background: 'rgba(0,0,0,0.5)', color: '#fff', borderRadius: '50%', width: 16, height: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', fontSize: 10 }}
+ >
+ ✕
+
+
+ ))}
+
+
+ {showSlashMenu && filteredSlashCmds.length > 0 && (
+
+ {filteredSlashCmds.map(cmd => (
+
e.currentTarget.style.background = darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.04)'}
+ onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+ onClick={() => {
+ setInput(cmd.prompt);
+ setShowSlashMenu(false);
+ setSlashFilter('');
+ textareaRef.current?.focus();
+ }}
+ >
+ {cmd.cmd}
+ {cmd.label}
+ {cmd.desc}
+
+ ))}
+
+ )}
+
{
+ const items = e.clipboardData?.items;
+ if (!items) return;
+ for (let i = 0; i < items.length; i++) {
+ if (items[i].type.indexOf('image') !== -1) {
+ e.preventDefault();
+ const blob = items[i].getAsFile();
+ if (blob) {
+ const reader = new FileReader();
+ reader.onload = (event) => {
+ if (event.target?.result) {
+ setDraftImages(prev => [...prev, event.target!.result as string]);
+ }
+ };
+ reader.readAsDataURL(blob);
+ }
+ }
+ }
+ }}
+ ref={textareaRef as any}
+ value={input}
+ onChange={(e) => {
+ const val = e.target.value;
+ setInput(val);
+ // Slash command detection
+ if (val.startsWith('/')) {
+ setSlashFilter(val.split(/\s/)[0]);
+ setShowSlashMenu(true);
+ } else {
+ setShowSlashMenu(false);
+ setSlashFilter('');
+ }
+ }}
+ onKeyDown={handleKeyDown as any}
+ placeholder="输入消息... (Enter 发送，Shift+Enter 换行，/ 快捷命令)"
+ variant="borderless"
+ autoSize={{ minRows: 1, maxRows: 8 }}
+ style={{ color: textColor, width: '100%', padding: 0, resize: 'none' }}
+ />
+
+
+
+ {activeConnName && (
+
+
+
+
+ {activeConnName}{activeContext?.dbName ? ` / ${activeContext.dbName}` : ''}
+
+
+
+ )}
+
+ {activeProvider && (
+
+
+
+
+
+ }
+ onClick={() => fileInputRef.current?.click()}
+ style={{ color: overlayTheme.mutedText, border: 'none', background: 'transparent', padding: '0 4px', height: 26 }}
+ onMouseEnter={e => e.currentTarget.style.color = textColor}
+ onMouseLeave={e => e.currentTarget.style.color = overlayTheme.mutedText}
+ />
+
+
+ }
+ onClick={handleOpenContext}
+ style={{ color: overlayTheme.mutedText, border: 'none', background: 'transparent', padding: '0 4px', height: 26 }}
+ onMouseEnter={e => e.currentTarget.style.color = textColor}
+ onMouseLeave={e => e.currentTarget.style.color = overlayTheme.mutedText}
+ />
+
+ {sending ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
关联数据库表结构上下文}
+ open={contextOpen}
+ onCancel={() => setContextOpen(false)}
+ onOk={handleAppendContext}
+ confirmLoading={appendingContext}
+ okText="同步所选表至上下文"
+ cancelText="取消"
+ centered
+ styles={{
+ content: { background: darkMode ? '#1e1e1e' : '#ffffff', border: overlayTheme.shellBorder },
+ header: { background: darkMode ? '#1e1e1e' : '#ffffff', borderBottom: overlayTheme.shellBorder },
+ body: { padding: '20px 24px' }
+ }}
+ >
+
+
+ {dbList.length > 0 && (
+
+ {filteredTables.length > 0 ? (
+
+
+ 0 &&
+ filteredTables.some(t => selectedTableKeys.includes(`${selectedDbName}::${t.name}`)) &&
+ !filteredTables.every(t => selectedTableKeys.includes(`${selectedDbName}::${t.name}`))
+ }
+ checked={filteredTables.length > 0 && filteredTables.every(t => selectedTableKeys.includes(`${selectedDbName}::${t.name}`))}
+ onChange={(e) => {
+ if (e.target.checked) {
+ const newSelected = new Set([...selectedTableKeys, ...filteredTables.map(t => `${selectedDbName}::${t.name}`)]);
+ setSelectedTableKeys(Array.from(newSelected));
+ } else {
+ const filteredKeys = filteredTables.map(t => `${selectedDbName}::${t.name}`);
+ setSelectedTableKeys(selectedTableKeys.filter(key => !filteredKeys.includes(key)));
+ }
+ }}
+ style={{ color: textColor, fontWeight: 'bold' }}
+ >
+ 全选匹配的表 ({filteredTables.length})
+
+
+
+
+
+ {filteredTables.map(t => {
+ const key = `${selectedDbName}::${t.name}`;
+ const isSelected = selectedTableKeys.includes(key);
+ return (
+
e.currentTarget.style.background = darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.03)'}
+ onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+ onClick={(e) => {
+ // If click originated from the checkbox input itself, let its onChange handle it to avoid duplicate toggle
+ if ((e.target as HTMLElement).tagName.toLowerCase() === 'input') return;
+ if (isSelected) {
+ setSelectedTableKeys(selectedTableKeys.filter(k => k !== key));
+ } else {
+ setSelectedTableKeys([...selectedTableKeys, key]);
+ }
+ }}
+ >
+ {
+ if (e.target.checked) setSelectedTableKeys([...selectedTableKeys, key]);
+ else setSelectedTableKeys(selectedTableKeys.filter(k => k !== key));
+ }}
+ style={{ color: textColor, width: '100%' }}
+ >
+ {t.name}
+
+
+ );
+ })}
+
+
+
+ 没有找到匹配 '{searchText}' 的表
+
+ )}
+
+
+
+
+
+ 你好，我是 GoNavi AI
+
+
+ {hasContext
+ ? `已自动关联 ${contextTableNames.length} 张表结构，点击下方按钮快速开始分析。`
+ : '我是你的智能数据库助手。我可以帮你生成 SQL 查询、分析表结构、解释执行逻辑以及优化数据库性能。'}
+
+
+ {quickActions.map(action => (
+
onQuickAction(action.prompt)}
+ >
+ {action.label}
+
+ ))}
+
+
+ 对话历史
+
+ } onClick={onClose} style={{ color: mutedColor }} />
+
+
+
+ {/* 新建对话按钮 */}
+
+ }
+ onClick={() => { onCreateNew(); onClose(); }}
+ style={{ borderColor: borderColor, color: textColor, background: 'transparent' }}
+ >
+ 开启新对话
+
+
+
+ {/* 列表搜索 */}
+
+ }
+ value={searchText}
+ onChange={e => setSearchText(e.target.value)}
+ variant="filled"
+ size="small"
+ style={{ background: darkMode ? 'rgba(255,255,255,0.04)' : 'transparent', color: textColor }}
+ />
+
+
+ {/* 列表容器 */}
+
+ {filteredSessions.length === 0 ? (
+
暂无匹配的对话记录
+ ) : (
+ filteredSessions.map(session => (
+
{ setAIActiveSessionId(session.id); onClose(); }}
+ style={{
+ padding: '10px 12px',
+ borderRadius: 6,
+ marginBottom: 4,
+ cursor: 'pointer',
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ background: sessionId === session.id ? (darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)') : 'transparent',
+ transition: 'background 0.2s',
+ }}
+ >
+
+
+ {session.title || '新对话'}
+
+
+ {new Date(session.updatedAt).toLocaleString(undefined, { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
+
+
+
+ }
+ onClick={(e) => {
+ e.stopPropagation();
+ deleteAISession(session.id);
+ }}
+ style={{ display: sessionId === session.id ? 'inline-flex' : undefined }}
+ />
+
+
+ ))
+ )}
+
+ {children}
+
+ );
+ }
+ }), [darkMode, overlayTheme, activeConnectionConfig, activeConnectionId, activeDbName]);
+
+ return (
+
+ {content}
+
+ );
+});
+
+interface AIMessageBubbleProps {
+ msg: AIChatMessage;
+ darkMode: boolean;
+ overlayTheme: OverlayWorkbenchTheme;
+ textColor: string;
+ onEdit: (msg: AIChatMessage) => void;
+ onRetry: (msg: AIChatMessage) => void;
+ onDelete: (id: string) => void;
+ activeConnectionId?: string;
+ activeConnectionConfig?: any;
+ activeDbName?: string;
+ allMessages?: AIChatMessage[];
+}
+
+const AIToolResultItem: React.FC<{ resultMsg: AIChatMessage, darkMode: boolean, overlayTheme: OverlayWorkbenchTheme }> = ({ resultMsg, darkMode, overlayTheme }) => {
+ const [toolExpanded, setToolExpanded] = useState(false);
+ const charCount = resultMsg.content ? resultMsg.content.length : 0;
+ return (
+
+
setToolExpanded(!toolExpanded)}
+ >
+ {toolExpanded ?
:
}
+
+
探针执行结果 ({resultMsg.tool_name || 'unknown'})
+
{charCount > 0 ? `${charCount} 个字符` : '无数据'}
+
+ {toolExpanded && (
+
+ {resultMsg.content}
+
+ )}
+
Mermaid 解析失败: ${e.message}
`;
+ }
+ });
+ } catch (e: any) {
+ if (containerRef.current) {
+ containerRef.current.innerHTML = `Mermaid 渲染异常: ${e.message}
`;
+ }
+ }
+ }
+ }, [chart, darkMode]);
+
+ return ;
+};
+
+const CodeCopyBtn = ({ text }: { text: string }) => {
+ const [copied, setCopied] = useState(false);
+ return (
+ {
+ navigator.clipboard.writeText(text);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ }}
+ style={{
+ cursor: 'pointer',
+ display: 'flex',
+ alignItems: 'center',
+ opacity: copied ? 1 : 0.6,
+ transition: 'opacity 0.2s',
+ }}
+ onMouseEnter={(e) => { e.currentTarget.style.opacity = '1'; }}
+ onMouseLeave={(e) => { e.currentTarget.style.opacity = copied ? '1' : '0.6'; }}
+ >
+ {copied ? : }
+ {copied ? '已复制' : '复制代码'}
+
+ );
+};
+
+const CodeRunBtn = ({ text, connectionId, dbName }: { text: string; connectionId?: string; dbName?: string }) => {
+ // 解析 SQL 顶部的 @context 注释，格式：-- @context connectionId=xxx dbName=yyy
+ const contextMatch = text.match(/^--\s*@context\s+connectionId=(\S+)\s+dbName=(\S+)/m);
+ const resolvedConnId = contextMatch?.[1] || connectionId;
+ const resolvedDbName = contextMatch?.[2] || dbName;
+ // 发送给查询编辑器时去掉 @context 注释行
+ const cleanSql = text.replace(/^--\s*@context\s+.*\n?/gm, '').trim();
+ const sqlDetail = (runImmediately: boolean) => ({ sql: cleanSql, runImmediately, connectionId: resolvedConnId, dbName: resolvedDbName });
+ const handleExecute = async () => {
+ try {
+ const Service = (window as any).go?.aiservice?.Service;
+ if (Service?.AICheckSQL) {
+ const result = await Service.AICheckSQL(text);
+ if (!result.allowed) {
+ message.error(`🔒 安全策略拦截：当前安全级别不允许执行 ${result.operationType} 类型的 SQL。请在 AI 设置中调整安全级别。`);
+ return;
+ }
+ if (result.requiresConfirm) {
+ const { Modal } = await import('antd');
+ Modal.confirm({
+ title: '⚠️ 安全确认',
+ content: result.warningMessage || `此 SQL 为 ${result.operationType} 操作，确定要执行吗？`,
+ okText: '确认执行',
+ cancelText: '取消',
+ okButtonProps: { danger: true },
+ onOk: () => {
+ window.dispatchEvent(new CustomEvent('gonavi:insert-sql', { detail: sqlDetail(true) }));
+ },
+ });
+ return;
+ }
+ }
+ // Safety check passed or not available, execute directly
+ window.dispatchEvent(new CustomEvent('gonavi:insert-sql', { detail: sqlDetail(true) }));
+ } catch (e) {
+ // If safety check fails, still allow manual execution
+ window.dispatchEvent(new CustomEvent('gonavi:insert-sql', { detail: sqlDetail(true) }));
+ }
+ };
+
+ return (
+
+
+ {
+ window.dispatchEvent(new CustomEvent('gonavi:insert-sql', { detail: sqlDetail(false) }));
+ }}
+ style={{
+ cursor: 'pointer', display: 'flex', alignItems: 'center',
+ opacity: 0.6, transition: 'opacity 0.2s', padding: '0 4px', color: '#10b981'
+ }}
+ onMouseEnter={(e) => { e.currentTarget.style.opacity = '1'; }}
+ onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.6'; }}
+ >
+
+ 插入
+
+
+
+ { e.currentTarget.style.opacity = '1'; }}
+ onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.6'; }}
+ >
+
+ 执行
+
+
+
+
+
{match[1]}
+
+ {isSql && }
+ {isSelectQuery && activeConnectionConfig && (
+
+ { if (!previewLoading) e.currentTarget.style.opacity = '1'; }}
+ onMouseLeave={(e) => { if (!previewLoading) e.currentTarget.style.opacity = '0.6'; }}
+ >
+ {previewLoading ? '⏳' : '👁'}
+ {previewLoading ? '执行中...' : '预览'}
+
+
+ )}
+
+
+
+
+
+
+ {displayText}
+
+
+ {!expanded && isLongCode && (
+
setExpanded(true)}
+ >
+
+ 展开全部代码
+
+
+ )}
+ {expanded && isLongCode && (
+
setExpanded(false)}
+ >
+ 收起代码
+
+ )}
+
+
+ {/* Inline SQL Preview Results */}
+ {previewError && (
+
+ ❌ {previewError}
+
+ )}
+ {previewExpanded && previewData && previewData.length > 0 && (
+
+
+ 📊 预览结果（{previewData.length} 行 × {previewCols.length} 列）
+ setPreviewExpanded(false)}>收起 ▴
+
+
+
+
+
+ {previewCols.map(col => (
+ |
+ {col}
+ |
+ ))}
+
+
+
+ {previewData.map((row, ri) => (
+
+ {previewCols.map(col => (
+ |
+ {row[col] === null ? NULL : String(row[col])}
+ |
+ ))}
+
+ ))}
+
+
+
+
+ )}
+ {!previewExpanded && previewData && previewData.length > 0 && (
+
setPreviewExpanded(true)}
+ >
+ 📊 查看结果（{previewData.length} 行）▾
+
+ )}
+
+
setExpanded(e => !e)}
+ style={{
+ display: 'flex', alignItems: 'center', gap: 6,
+ padding: '6px 10px', cursor: 'pointer',
+ background: darkMode ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.02)',
+ fontSize: 12, color: overlayTheme.mutedText, userSelect: 'none',
+ }}
+ >
+ ▶
+ 💭 思考过程
+ {isActivelyThinking && 思考中...}
+ {!isActivelyThinking && ({displayThinking.length} 字)}
+
+
+
+ {displayThinking}
+ {isTyping && }
+
+
+
+
setExpanded(!expanded)}
+ style={{
+ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+ padding: '8px 12px', cursor: 'pointer', userSelect: 'none',
+ background: darkMode ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.01)',
+ }}
+ >
+
+ {!allDone && loading ? (
+
+ ) : (
+
+ )}
+
{!allDone && loading ? '正在执行数据探针...' : `数据探针执行完毕 (${totalCalls} 项)`}
+
+
▶
+
+
+
+ {tool_calls.map((tc, idx) => {
+ const resultMsg = allMessages?.find(m => m.role === 'tool' && m.tool_call_id === tc.id);
+ const isDone = !!resultMsg;
+ const actionName = getHumanActionName(tc.function.name);
+ return (
+
+
+ {isDone
+ ?
+ : (loading ?
:
)
+ }
+
{actionName}
+
+ {resultMsg &&
}
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
{msg.content || '正在建立连接'}...
+
+
+ {/* 即使在波纹过渡态，如果有 thinking / tool_calls 也要显示出来，只是把它们压在波纹下面 */}
+
0) ? 12 : 0 }}>
+ {!isUser && msg.thinking && (
+
+ )}
+ {!isUser && msg.tool_calls && msg.tool_calls.length > 0 && (
+
+ )}
+
+
+
+
+
+
+ {isUser
+ ? <> You
+ : <> GoNavi AI}
+
+ {/* 气泡操作栏 */}
+
+
+ {isCopied ? (
+
+ ) : (
+ {
+ navigator.clipboard.writeText(msg.content);
+ setIsCopied(true);
+ setTimeout(() => setIsCopied(false), 2000);
+ }} style={{ cursor: 'pointer', color: overlayTheme.mutedText }} onMouseEnter={e => e.currentTarget.style.color = textColor} onMouseLeave={e => e.currentTarget.style.color = overlayTheme.mutedText} />
+ )}
+
+ {isUser ? (
+
+ onEdit(msg)} style={{ cursor: 'pointer', color: overlayTheme.mutedText }} onMouseEnter={e => e.currentTarget.style.color = textColor} onMouseLeave={e => e.currentTarget.style.color = overlayTheme.mutedText} />
+
+ ) : (
+
+ onRetry(msg)} style={{ cursor: 'pointer', color: overlayTheme.mutedText }} onMouseEnter={e => e.currentTarget.style.color = textColor} onMouseLeave={e => e.currentTarget.style.color = overlayTheme.mutedText} />
+
+ )}
+
+ onDelete(msg.id)} style={{ cursor: 'pointer', color: overlayTheme.mutedText }} onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = overlayTheme.mutedText} />
+
+
+
+
+ {msg.images && msg.images.length > 0 && (
+
+ {msg.images.map((img, i) => (
+
+ ))}
+
+ )}
+ {/* 可折叠思考过程 */}
+ {!isUser && msg.thinking && (
+
+ )}
+ {isUser ? (
+
{msg.content}
+ ) : (
+
+ )}
+ {/* 错误原文复制按钮 */}
+ {!isUser && msg.rawError && (
+
+
+
+ )}
+ {/* 工具调用进度展示 */}
+ {!isUser && msg.tool_calls && msg.tool_calls.length > 0 && (
+
+ )}
+ {msg.loading && msg.phase !== 'tool_calling' && msg.content && (
+
+ )}
+
+
+