mirror of
https://github.com/Syngnat/GoNavi.git
synced 2026-05-31 13:39:48 +08:00
✨ feat(ai): 发布全新 AI Copilot 助手面板与工作区智能打通
- 核心架构：新增独立 AI 会话中枢，集成主流大模型生态（含私有部署中继版）的无感衔接发问 - 智能诊断：打破信息孤岛，大模型可通过关联工作区实时数据表 DDL 和错误栈，充当专属 DBA 排错及代码编写 - 视觉与多模态：支持极简发图读图交互体验，智能补全模型所需的缺省预警 Prompt，并兼容不规范中转端点图文并茂 - UI 与性能：重构聊天浮层挂靠逻辑与渲染阻断，应对长时间巨量问答引发的卡段内存泄漏，会话自动保存归档
This commit is contained in:
Syngnat
@@ -157,9 +157,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
@@ -364,3 +364,122 @@
|
||||
.ai-ide-message:hover .ai-message-actions {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Markdown 额外样式增强: Table & Blockquote */
|
||||
.ai-markdown-content table {
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 12px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 让消息内容区域成为表格的滚动约束容器 */
|
||||
.ai-ide-message-content {
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 表格滚动容器 - 不限定直接子元素 */
|
||||
.ai-markdown-content table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ai-markdown-content table::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.ai-markdown-content table::-webkit-scrollbar-thumb {
|
||||
background: rgba(128, 128, 128, 0.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.ai-markdown-content th,
|
||||
.ai-markdown-content td {
|
||||
border: 1px solid rgba(125, 125, 125, 0.2);
|
||||
padding: 6px 12px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ai-markdown-content th {
|
||||
background: rgba(125, 125, 125, 0.1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ai-markdown-content blockquote {
|
||||
margin: 12px 0;
|
||||
padding: 8px 14px;
|
||||
border-left: 4px solid rgba(125, 125, 125, 0.4);
|
||||
background: rgba(125, 125, 125, 0.05);
|
||||
color: inherit;
|
||||
opacity: 0.85;
|
||||
border-radius: 0 6px 6px 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* 覆盖 code 块容器样式避免和 syntax highlighter 冲突 */
|
||||
.ai-markdown-content > pre {
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* ===== 新版 AI 状态流转动画 ===== */
|
||||
|
||||
/* 1. 连接脉冲动画 (connecting) */
|
||||
.ai-wave-pulse {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.ai-wave-pulse span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: currentColor;
|
||||
animation: wave-pulse-anim 1.2s ease-in-out infinite;
|
||||
}
|
||||
.ai-wave-pulse span:nth-child(1) { animation-delay: 0s; }
|
||||
.ai-wave-pulse span:nth-child(2) { animation-delay: 0.15s; }
|
||||
.ai-wave-pulse span:nth-child(3) { animation-delay: 0.3s; }
|
||||
|
||||
@keyframes wave-pulse-anim {
|
||||
0%, 100% { transform: translateY(0) scale(0.8); opacity: 0.4; }
|
||||
50% { transform: translateY(-4px) scale(1.1); opacity: 1; }
|
||||
}
|
||||
|
||||
/* 2. 平滑高度与透明度过渡 (针对 ThinkingBlock 和 面板折叠) */
|
||||
.ai-expand-transition {
|
||||
display: grid;
|
||||
transition: grid-template-rows 0.3s ease-out, opacity 0.3s ease-out;
|
||||
}
|
||||
.ai-expand-transition.expanded {
|
||||
grid-template-rows: 1fr;
|
||||
opacity: 1;
|
||||
}
|
||||
.ai-expand-transition.collapsed {
|
||||
grid-template-rows: 0fr;
|
||||
opacity: 0;
|
||||
}
|
||||
.ai-expand-transition > div {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 3. Agent风格旋转Loading环 */
|
||||
.ai-spinning-ring {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid rgba(22, 119, 255, 0.2);
|
||||
border-top-color: #1677ff;
|
||||
border-radius: 50%;
|
||||
animation: ai-spin-anim 0.8s linear infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes ai-spin-anim {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { Modal, Button, Input, Select, Form, message, Tooltip, Tabs, Space, Popconfirm, Slider } from 'antd';
|
||||
import { PlusOutlined, DeleteOutlined, EditOutlined, CheckOutlined, ApiOutlined, SafetyCertificateOutlined, RobotOutlined, ThunderboltOutlined, CloudOutlined, ExperimentOutlined, KeyOutlined, LinkOutlined, AppstoreOutlined } from '@ant-design/icons';
|
||||
import { PlusOutlined, DeleteOutlined, EditOutlined, CheckOutlined, ApiOutlined, SafetyCertificateOutlined, RobotOutlined, ThunderboltOutlined, CloudOutlined, ExperimentOutlined, KeyOutlined, LinkOutlined, AppstoreOutlined, ToolOutlined } from '@ant-design/icons';
|
||||
import type { AIProviderConfig, AIProviderType, AISafetyLevel, AIContextLevel } from '../types';
|
||||
|
||||
import type { OverlayWorkbenchTheme } from '../utils/overlayWorkbenchTheme';
|
||||
@@ -33,6 +33,8 @@ const PROVIDER_PRESETS: ProviderPreset[] = [
|
||||
{ key: 'moonshot', label: 'Kimi', icon: <ExperimentOutlined />, desc: 'Kimi K2.5 系列', color: '#0d9488', backendType: 'openai', defaultBaseUrl: 'https://api.moonshot.cn/v1', defaultModel: 'kimi-k2.5', models: ['kimi-k2.5', 'kimi-k2-turbo-preview', 'kimi-k2-thinking'] },
|
||||
{ key: 'anthropic', label: 'Claude', icon: <ExperimentOutlined />, desc: 'Claude Opus/Sonnet 4.6', color: '#d97706', backendType: 'anthropic', defaultBaseUrl: 'https://api.anthropic.com', defaultModel: 'claude-sonnet-4-6', models: ['claude-opus-4-6', 'claude-sonnet-4-6'] },
|
||||
{ key: 'gemini', label: 'Gemini', icon: <CloudOutlined />, desc: 'Gemini 3.1 / 2.5 系列', color: '#059669', backendType: 'gemini', defaultBaseUrl: 'https://generativelanguage.googleapis.com', defaultModel: 'gemini-2.5-flash', models: ['gemini-3.1-pro', 'gemini-2.5-flash', 'gemini-2.5-pro'] },
|
||||
{ key: 'volcengine', label: '火山引擎', icon: <CloudOutlined />, desc: '火山方舟 / 豆包大模型', color: '#0ea5e9', backendType: 'openai', defaultBaseUrl: 'https://ark.cn-beijing.volces.com/api/v3', defaultModel: 'ep-xxxxxx', models: [] },
|
||||
{ key: 'minimax', label: 'MiniMax', icon: <ExperimentOutlined />, desc: 'abab6.5 / abab7 系列', color: '#e11d48', backendType: 'openai', defaultBaseUrl: 'https://api.minimax.chat/v1', defaultModel: 'abab7-chat-preview', models: ['abab7-chat-preview', 'abab6.5-chat', 'abab6.5g-chat'] },
|
||||
{ key: 'ollama', label: 'Ollama', icon: <AppstoreOutlined />, desc: '本地部署开源模型', color: '#78716c', backendType: 'openai', defaultBaseUrl: 'http://localhost:11434/v1', defaultModel: 'llama3', models: [] },
|
||||
{ key: 'custom', label: '自定义', icon: <AppstoreOutlined />, desc: '自定义 API 端点', color: '#64748b', backendType: 'custom', defaultBaseUrl: '', defaultModel: '', models: [] },
|
||||
];
|
||||
@@ -61,6 +63,7 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [testStatus, setTestStatus] = useState<'idle' | 'success' | 'error'>('idle');
|
||||
const [builtinPrompts, setBuiltinPrompts] = useState<Record<string, string>>({});
|
||||
const [activeSection, setActiveSection] = useState<'providers' | 'safety' | 'context' | 'prompts' | 'tools'>('providers');
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// 主题色
|
||||
@@ -195,7 +198,7 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
setTestStatus('idle');
|
||||
const Service = (window as any).go?.aiservice?.Service;
|
||||
const res = await Service?.AITestProvider?.({ ...values, maxTokens: Number(values.maxTokens) || 4096, temperature: Number(values.temperature) ?? 0.7 });
|
||||
if (res?.success) { setTestStatus('success'); void message.success('连接成功 ✅'); }
|
||||
if (res?.success) { setTestStatus('success'); void message.success('连接成功'); }
|
||||
else { setTestStatus('error'); void message.error(`测试失败: ${res?.message || '未知错误'}`); }
|
||||
} catch (e: any) { setTestStatus('error'); void message.error(e?.message || '测试失败'); }
|
||||
finally { setLoading(false); }
|
||||
@@ -217,7 +220,7 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
background: cardBg, marginBottom: 12,
|
||||
};
|
||||
const fieldLabelStyle: React.CSSProperties = {
|
||||
fontSize: 10, fontWeight: 700, textTransform: 'uppercase' as const, letterSpacing: '0.08em',
|
||||
fontSize: 13, fontWeight: 700, textTransform: 'uppercase' as const, letterSpacing: '0.08em',
|
||||
color: sectionLabelColor, marginBottom: 10, display: 'flex', alignItems: 'center', gap: 6,
|
||||
};
|
||||
|
||||
@@ -226,12 +229,12 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{providers.length === 0 && (
|
||||
<div style={{
|
||||
textAlign: 'center', padding: '36px 20px', color: overlayTheme.mutedText, fontSize: 13,
|
||||
textAlign: 'center', padding: '36px 20px', color: overlayTheme.mutedText, fontSize: 14,
|
||||
border: `1px dashed ${cardBorder}`, borderRadius: 14, background: cardBg,
|
||||
}}>
|
||||
<RobotOutlined style={{ fontSize: 32, marginBottom: 12, opacity: 0.3, display: 'block' }} />
|
||||
暂未配置 AI Provider<br />
|
||||
<span style={{ fontSize: 12, opacity: 0.6 }}>添加一个以开始使用 AI 助手</span>
|
||||
暂未配置模型供应商<br />
|
||||
<span style={{ fontSize: 13, opacity: 0.6 }}>添加一个以开始使用 AI 助手</span>
|
||||
</div>
|
||||
)}
|
||||
{providers.map(p => {
|
||||
@@ -255,14 +258,14 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
{matchedPreset.icon || <ApiOutlined />}
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 13, color: overlayTheme.titleText, display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 14, color: overlayTheme.titleText, display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
{p.name || p.type}
|
||||
{isActive && <CheckOutlined style={{ color: overlayTheme.iconColor, fontSize: 12 }} />}
|
||||
{isActive && <CheckOutlined style={{ color: overlayTheme.iconColor, fontSize: 13 }} />}
|
||||
</div>
|
||||
<div style={{ fontSize: 11, color: overlayTheme.mutedText, marginTop: 3, display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<div style={{ fontSize: 12, color: overlayTheme.mutedText, marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<span>{matchedPreset.label}</span>
|
||||
<span style={{ opacity: 0.4 }}>·</span>
|
||||
<span style={{ fontFamily: 'monospace', fontSize: 11 }}>{p.model}</span>
|
||||
<span style={{ fontFamily: 'monospace', fontSize: 12 }}>{p.model}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Space size={2}>
|
||||
@@ -282,7 +285,7 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
})}
|
||||
<Button type="dashed" icon={<PlusOutlined />} onClick={handleAddProvider}
|
||||
style={{ borderRadius: 12, height: 42, borderColor: darkMode ? 'rgba(255,255,255,0.12)' : undefined }}>
|
||||
添加 Provider
|
||||
添加模型供应商
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
@@ -296,16 +299,16 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
<div style={{ marginBottom: 16, display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<Button size="small" onClick={() => { setIsEditing(false); setEditingProvider(null); }}
|
||||
style={{ borderRadius: 8 }}>← 返回</Button>
|
||||
<span style={{ fontWeight: 700, fontSize: 14, color: overlayTheme.titleText }}>
|
||||
{editingProvider?.id ? '编辑 Provider' : '添加 Provider'}
|
||||
<span style={{ fontWeight: 700, fontSize: 16, color: overlayTheme.titleText }}>
|
||||
{editingProvider?.id ? '编辑模型供应商' : '添加模型供应商'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Form form={form} layout="vertical" size="small" requiredMark={false}>
|
||||
<Form form={form} layout="vertical" size="small">
|
||||
{/* Provider 类型选择 - 卡片式 */}
|
||||
<div style={fieldGroupStyle}>
|
||||
<div style={fieldLabelStyle}>
|
||||
<AppstoreOutlined style={{ fontSize: 12 }} /> 服务类型
|
||||
<AppstoreOutlined style={{ fontSize: 14 }} /> 服务类型
|
||||
</div>
|
||||
<Form.Item name="presetKey" noStyle>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
|
||||
@@ -325,8 +328,8 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
{pt.icon}
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, color: overlayTheme.titleText, lineHeight: 1.2 }}>{pt.label}</div>
|
||||
<div style={{ fontSize: 9, color: overlayTheme.mutedText, marginTop: 1, lineHeight: 1.2 }}>{pt.desc}</div>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, color: overlayTheme.titleText, lineHeight: 1.3 }}>{pt.label}</div>
|
||||
<div style={{ fontSize: 12, color: overlayTheme.mutedText, marginTop: 4, lineHeight: 1.4 }}>{pt.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -337,30 +340,32 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
|
||||
{/* 基本信息 - 仅自定义/Ollama 显示 */}
|
||||
{(presetKeyFromForm === 'custom' || presetKeyFromForm === 'ollama') && (
|
||||
<div style={fieldGroupStyle}>
|
||||
<div style={fieldLabelStyle}>
|
||||
<RobotOutlined style={{ fontSize: 12 }} /> 基本信息
|
||||
</div>
|
||||
<Form.Item name="name" rules={[{ required: true, message: '请输入名称' }]} style={{ marginBottom: 10 }}>
|
||||
<Input placeholder="例如：我的 GPT-4o / DeepSeek"
|
||||
prefix={<span style={{ color: overlayTheme.mutedText, fontSize: 12, marginRight: 4 }}>名称</span>}
|
||||
style={{ borderRadius: 10, background: inputBg }} />
|
||||
</Form.Item>
|
||||
|
||||
{presetKeyFromForm === 'custom' && (
|
||||
<Form.Item name="apiFormat" style={{ marginBottom: 10 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ color: overlayTheme.mutedText, fontSize: 12, whiteSpace: 'nowrap' }}>API 格式</span>
|
||||
<div style={{ display: 'flex', gap: 4 }}>
|
||||
{[{ value: 'openai', label: 'OpenAI' }, { value: 'anthropic', label: 'Anthropic' }, { value: 'gemini', label: 'Gemini' }, { value: 'claude-cli', label: 'Claude CLI (代理)' }].map(fmt => (
|
||||
<div style={{ ...fieldGroupStyle, marginTop: 16 }}>
|
||||
<div style={fieldLabelStyle}>
|
||||
<RobotOutlined style={{ fontSize: 14 }} /> 基本信息
|
||||
</div>
|
||||
|
||||
<Form.Item label={<span style={{ fontWeight: 500, color: overlayTheme.titleText }}>供应商名称</span>} name="name" rules={[{ required: true, message: '请输入名称' }]} style={{ marginBottom: 16 }}>
|
||||
<Input placeholder="例如：我的自建 OpenAI / 专属大模型"
|
||||
size="middle"
|
||||
style={{ borderRadius: 8, background: inputBg, border: `1px solid ${cardBorder}` }} />
|
||||
</Form.Item>
|
||||
|
||||
{presetKeyFromForm === 'custom' && (
|
||||
<Form.Item label={<span style={{ fontWeight: 500, color: overlayTheme.titleText }}>API 格式</span>} name="apiFormat" style={{ marginBottom: 16 }}>
|
||||
<div style={{
|
||||
display: 'inline-flex', padding: 4, background: darkMode ? 'rgba(0,0,0,0.2)' : 'rgba(0,0,0,0.04)',
|
||||
borderRadius: 8, gap: 4
|
||||
}}>
|
||||
{[{ value: 'openai', label: 'OpenAI' }, { value: 'anthropic', label: 'Anthropic' }, { value: 'gemini', label: 'Gemini' }, { value: 'claude-cli', label: 'Claude CLI' }].map(fmt => (
|
||||
<div
|
||||
key={fmt.value}
|
||||
onClick={() => form.setFieldsValue({ apiFormat: fmt.value })}
|
||||
style={{
|
||||
padding: '3px 12px', borderRadius: 6, fontSize: 11, fontWeight: 600, cursor: 'pointer',
|
||||
border: `1.5px solid ${watchedApiFormat === fmt.value ? overlayTheme.selectedText : cardBorder}`,
|
||||
background: watchedApiFormat === fmt.value ? overlayTheme.selectedBg : 'transparent',
|
||||
color: watchedApiFormat === fmt.value ? overlayTheme.selectedText : overlayTheme.mutedText,
|
||||
padding: '6px 16px', borderRadius: 6, fontSize: 13, fontWeight: watchedApiFormat === fmt.value ? 600 : 500, cursor: 'pointer',
|
||||
background: watchedApiFormat === fmt.value ? (darkMode ? '#374151' : '#ffffff') : 'transparent',
|
||||
color: watchedApiFormat === fmt.value ? overlayTheme.titleText : overlayTheme.mutedText,
|
||||
boxShadow: watchedApiFormat === fmt.value ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
>
|
||||
@@ -368,38 +373,34 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
<Form.Item label={<span style={{ fontWeight: 500, color: overlayTheme.titleText }}>可用模型列表（可选配置）</span>} name="models" style={{ marginBottom: 0 }}>
|
||||
<Select mode="tags" size="middle" placeholder="配置指定的模型ID，留空则默认去服务端拉取" style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
<div style={{ marginBottom: 10 }}>
|
||||
<Form.Item name="models" style={{ marginBottom: 4 }}>
|
||||
<Select mode="tags" placeholder="配置指定的模型ID（非必填，可稍后在聊天窗口直接选择）" style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<div style={{ fontSize: 11, color: overlayTheme.mutedText }}>自定义包含的可用模型列表</div>
|
||||
</div>
|
||||
<Form.Item name="model" hidden><Input /></Form.Item>
|
||||
</div>
|
||||
)}
|
||||
<Form.Item name="model" hidden><Input /></Form.Item>
|
||||
<Form.Item name="name" hidden><Input /></Form.Item>
|
||||
|
||||
{/* 认证信息 */}
|
||||
<div style={fieldGroupStyle}>
|
||||
<div style={{ ...fieldGroupStyle, marginTop: 16 }}>
|
||||
<div style={fieldLabelStyle}>
|
||||
<KeyOutlined style={{ fontSize: 12 }} /> 认证 & 连接
|
||||
<KeyOutlined style={{ fontSize: 14 }} /> 认证 & 连接
|
||||
</div>
|
||||
<Form.Item name="apiKey" rules={[{ required: true, message: '请输入 API Key' }]} style={{ marginBottom: (presetKeyFromForm === 'custom' || presetKeyFromForm === 'ollama') ? 10 : 0 }}>
|
||||
<Form.Item label={<span style={{ fontWeight: 500, color: overlayTheme.titleText }}>API Key</span>} name="apiKey" rules={[{ required: true, message: '请输入 API Key' }]} style={{ marginBottom: 16 }}>
|
||||
<Input.Password placeholder="sk-... / 你的 API Key"
|
||||
prefix={<span style={{ color: overlayTheme.mutedText, fontSize: 12, marginRight: 4 }}>Key</span>}
|
||||
style={{ borderRadius: 10, background: inputBg }} />
|
||||
size="middle"
|
||||
style={{ borderRadius: 8, background: inputBg, border: `1px solid ${cardBorder}` }} />
|
||||
</Form.Item>
|
||||
|
||||
{(presetKeyFromForm === 'custom' || presetKeyFromForm === 'ollama') && (
|
||||
<Form.Item name="baseUrl" style={{ marginBottom: 0 }}>
|
||||
<Form.Item label={<span style={{ fontWeight: 500, color: overlayTheme.titleText }}>API Endpoint (URL)</span>} name="baseUrl" rules={[{ required: true, message: '请输入有效的接口地址' }]} style={{ marginBottom: 0 }}>
|
||||
<Input placeholder={findPreset(presetKeyFromForm).defaultBaseUrl || 'https://...'}
|
||||
prefix={<span style={{ color: overlayTheme.mutedText, fontSize: 12, marginRight: 4 }}>URL</span>}
|
||||
suffix={<LinkOutlined style={{ color: overlayTheme.mutedText, fontSize: 12 }} />}
|
||||
style={{ borderRadius: 10, background: inputBg }} />
|
||||
size="middle"
|
||||
suffix={<LinkOutlined style={{ color: overlayTheme.mutedText }} />}
|
||||
style={{ borderRadius: 8, background: inputBg, border: `1px solid ${cardBorder}` }} />
|
||||
</Form.Item>
|
||||
)}
|
||||
</div>
|
||||
@@ -408,8 +409,8 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div style={{
|
||||
display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4, paddingTop: 12,
|
||||
borderTop: `1px solid ${cardBorder}`,
|
||||
display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 12, paddingTop: 16,
|
||||
borderTop: `1px solid ${cardBorder}`, paddingBottom: 24,
|
||||
}}>
|
||||
<Button onClick={handleTestProvider} loading={loading} style={{ borderRadius: 10 }}
|
||||
icon={testStatus === 'success' ? <CheckOutlined style={{ color: '#22c55e' }} /> : undefined}>
|
||||
@@ -428,7 +429,7 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
// ===== 安全控制 =====
|
||||
const renderSafetySettings = () => (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<div style={{ fontSize: 12, color: overlayTheme.mutedText, marginBottom: 4 }}>
|
||||
<div style={{ fontSize: 13, color: overlayTheme.mutedText, marginBottom: 8 }}>
|
||||
控制 AI 可执行的 SQL 操作类型，保护数据安全
|
||||
</div>
|
||||
{SAFETY_OPTIONS.map(opt => {
|
||||
@@ -449,11 +450,11 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
{opt.icon}
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 13, color: overlayTheme.titleText, display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 14, color: overlayTheme.titleText, display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
{opt.label}
|
||||
{active && <CheckOutlined style={{ color: opt.color === '#ef4444' ? opt.color : overlayTheme.iconColor, fontSize: 12 }} />}
|
||||
{active && <CheckOutlined style={{ color: opt.color === '#ef4444' ? opt.color : overlayTheme.iconColor, fontSize: 14 }} />}
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: overlayTheme.mutedText, marginTop: 3, lineHeight: '1.5' }}>{opt.desc}</div>
|
||||
<div style={{ fontSize: 13, color: overlayTheme.mutedText, marginTop: 4, lineHeight: '1.5' }}>{opt.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -464,7 +465,7 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
// ===== 上下文级别 =====
|
||||
const renderContextSettings = () => (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<div style={{ fontSize: 12, color: overlayTheme.mutedText, marginBottom: 4 }}>
|
||||
<div style={{ fontSize: 13, color: overlayTheme.mutedText, marginBottom: 8 }}>
|
||||
控制发送给 AI 的数据库上下文信息量
|
||||
</div>
|
||||
{CONTEXT_OPTIONS.map(opt => {
|
||||
@@ -485,11 +486,11 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
{opt.icon}
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 13, color: overlayTheme.titleText, display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 14, color: overlayTheme.titleText, display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
{opt.label}
|
||||
{active && <CheckOutlined style={{ color: overlayTheme.iconColor, fontSize: 12 }} />}
|
||||
{active && <CheckOutlined style={{ color: overlayTheme.iconColor, fontSize: 14 }} />}
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: overlayTheme.mutedText, marginTop: 3, lineHeight: '1.5' }}>{opt.desc}</div>
|
||||
<div style={{ fontSize: 13, color: overlayTheme.mutedText, marginTop: 4, lineHeight: '1.5' }}>{opt.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -499,19 +500,19 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
|
||||
const renderBuiltinPrompts = () => (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
<div style={{ fontSize: 12, color: overlayTheme.mutedText, marginBottom: 4 }}>
|
||||
<div style={{ fontSize: 13, color: overlayTheme.mutedText, marginBottom: 4 }}>
|
||||
以下为当前版本 GoNavi 预设的底层 AI 提示词（只读）。它们会被动态注入到对应场景的请求上下文中。
|
||||
</div>
|
||||
{Object.entries(builtinPrompts).map(([title, promptText]) => (
|
||||
<div key={title} style={{
|
||||
padding: '12px', borderRadius: 12, border: `1px solid ${cardBorder}`, background: cardBg,
|
||||
}}>
|
||||
<div style={{ fontWeight: 700, fontSize: 13, color: overlayTheme.titleText, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 14, color: overlayTheme.titleText, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<RobotOutlined style={{ color: overlayTheme.iconColor }} /> {title}
|
||||
</div>
|
||||
<div style={{
|
||||
background: darkMode ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.8)',
|
||||
padding: '10px 12px', borderRadius: 8, fontSize: 12, color: overlayTheme.mutedText,
|
||||
padding: '10px 12px', borderRadius: 8, fontSize: 13, color: overlayTheme.mutedText,
|
||||
whiteSpace: 'pre-wrap', fontFamily: 'monospace', lineHeight: 1.5,
|
||||
userSelect: 'text', border: darkMode ? '1px solid rgba(255,255,255,0.03)' : '1px solid rgba(0,0,0,0.02)'
|
||||
}}>
|
||||
@@ -522,13 +523,55 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ open, onClose, darkMo
|
||||
</div>
|
||||
);
|
||||
|
||||
const tabItems = [
|
||||
{ key: 'providers', label: <span><ApiOutlined /> Provider</span>, children: isEditing ? renderProviderForm() : renderProviderList() },
|
||||
{ key: 'safety', label: <span><SafetyCertificateOutlined /> 安全控制</span>, children: renderSafetySettings() },
|
||||
{ key: 'context', label: <span><RobotOutlined /> 上下文</span>, children: renderContextSettings() },
|
||||
{ key: 'prompts', label: <span><ExperimentOutlined /> 内置提示词</span>, 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 = () => (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
<div style={{ fontSize: 13, color: overlayTheme.mutedText, marginBottom: 4 }}>
|
||||
AI 助手在处理数据库相关问题时，可以自动调用以下内置工具获取真实数据，全程无需人工干预。
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: overlayTheme.mutedText, opacity: 0.7, padding: '8px 12px', borderRadius: 8, background: cardBg, border: `1px solid ${cardBorder}` }}>
|
||||
💡 工作流程：get_connections → get_databases → get_tables → get_columns → 生成 SQL
|
||||
</div>
|
||||
{BUILTIN_TOOLS_INFO.map(tool => (
|
||||
<div key={tool.name} style={{
|
||||
padding: '14px 16px', borderRadius: 14, border: `1px solid ${cardBorder}`, background: cardBg,
|
||||
transition: 'all 0.2s ease',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
|
||||
<span style={{ fontSize: 20 }}>{tool.icon}</span>
|
||||
<div>
|
||||
<div style={{ fontWeight: 700, fontSize: 14, color: overlayTheme.titleText, fontFamily: 'monospace' }}>
|
||||
{tool.name}
|
||||
</div>
|
||||
<div style={{ fontSize: 13, color: overlayTheme.mutedText, marginTop: 2 }}>{tool.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: 13, color: overlayTheme.mutedText, lineHeight: 1.6, padding: '8px 12px',
|
||||
background: darkMode ? 'rgba(0,0,0,0.15)' : 'rgba(0,0,0,0.02)', borderRadius: 8,
|
||||
}}>
|
||||
{tool.detail}
|
||||
</div>
|
||||
<div style={{ marginTop: 8, fontSize: 12, color: overlayTheme.mutedText, opacity: 0.7, display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<ToolOutlined style={{ fontSize: 12 }} />
|
||||
<span>参数：</span>
|
||||
<code style={{ fontFamily: 'monospace', fontSize: 12, padding: '1px 6px', borderRadius: 4, background: darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)' }}>
|
||||
{tool.params}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
const modalShellStyle = {
|
||||
background: overlayTheme.shellBg, border: overlayTheme.shellBorder,
|
||||
boxShadow: overlayTheme.shellShadow, backdropFilter: overlayTheme.shellBackdropFilter,
|
||||
@@ -555,14 +598,64 @@ const AISettingsModal: React.FC<AISettingsModalProps> = ({ 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' },
|
||||
}}
|
||||
>
|
||||
<Tabs items={tabItems} size="small" />
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '180px minmax(0, 1fr)', gap: 16, padding: '12px 0', height: '100%', minHeight: 0, overflow: 'hidden', alignItems: 'stretch' }}>
|
||||
<div style={{ padding: '0 12px', height: 'fit-content' }}>
|
||||
<div style={{ marginBottom: 12, fontWeight: 600, color: overlayTheme.titleText }}>设置导航</div>
|
||||
<div style={{ display: 'grid', gap: 10 }}>
|
||||
{[
|
||||
{ key: 'providers', title: '模型供应商', description: '配置大模型接口与秘钥', icon: <ApiOutlined /> },
|
||||
{ key: 'safety', title: '安全控制', description: '限制 AI 操作风险级别', icon: <SafetyCertificateOutlined /> },
|
||||
{ key: 'context', title: '上下文', description: '配置携带的数据架构信息', icon: <RobotOutlined /> },
|
||||
{ key: 'tools', title: '内置工具', description: '查看 AI 可调用的数据探针', icon: <ToolOutlined /> },
|
||||
{ key: 'prompts', title: '内置提示词', description: '查看系统预设的底层要求', icon: <ExperimentOutlined /> },
|
||||
].map((item) => {
|
||||
const active = activeSection === item.key;
|
||||
return (
|
||||
<button
|
||||
key={item.key}
|
||||
type="button"
|
||||
onClick={() => setActiveSection(item.key as typeof activeSection)}
|
||||
style={{
|
||||
textAlign: 'left',
|
||||
padding: '12px 14px',
|
||||
borderRadius: 12,
|
||||
border: `1px solid ${active
|
||||
? (darkMode ? 'rgba(255,214,102,0.3)' : 'rgba(24,144,255,0.24)')
|
||||
: (darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(16,24,40,0.08)')}`,
|
||||
background: active
|
||||
? (darkMode ? 'linear-gradient(180deg, rgba(255,214,102,0.12) 0%, rgba(255,214,102,0.06) 100%)' : 'linear-gradient(180deg, rgba(24,144,255,0.10) 0%, rgba(24,144,255,0.05) 100%)')
|
||||
: (darkMode ? 'rgba(255,255,255,0.02)' : 'rgba(255,255,255,0.72)'),
|
||||
color: active ? (darkMode ? '#f5f7ff' : '#162033') : (darkMode ? 'rgba(255,255,255,0.82)' : '#3f4b5e'),
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<span style={{ fontSize: 16 }}>{item.icon}</span>
|
||||
<span style={{ fontSize: 14, fontWeight: 700 }}>{item.title}</span>
|
||||
</div>
|
||||
<div style={{ marginTop: 6, fontSize: 12, lineHeight: 1.6, color: active ? (darkMode ? 'rgba(255,255,255,0.68)' : 'rgba(22,32,51,0.68)') : 'rgba(128,128,128,0.7)' }}>
|
||||
{item.description}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ minWidth: 0, minHeight: 0, height: '100%', overflowY: 'auto', overflowX: 'hidden', paddingRight: 8, paddingBottom: 28 }}>
|
||||
{activeSection === 'providers' && (isEditing ? renderProviderForm() : renderProviderList())}
|
||||
{activeSection === 'safety' && renderSafetySettings()}
|
||||
{activeSection === 'context' && renderContextSettings()}
|
||||
{activeSection === 'tools' && renderBuiltinTools()}
|
||||
{activeSection === 'prompts' && renderBuiltinPrompts()}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -480,7 +480,9 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
contextMenuOrder: 1,
|
||||
run: (ed: any) => {
|
||||
const selection = ed.getModel()?.getValueInRange(ed.getSelection());
|
||||
let prompt = action.prompt;
|
||||
const conn = connectionsRef.current.find(c => c.id === currentConnectionIdRef.current);
|
||||
const ctxText = conn ? `【上下文环境：${conn.config?.type || '数据库'} "${conn.name}", 当前库选定为 "${currentDbRef.current || '默认'}"】\n` : '';
|
||||
let prompt = ctxText + action.prompt;
|
||||
if (action.useSelection && selection) {
|
||||
prompt = prompt.replace('{SQL}', selection);
|
||||
}
|
||||
@@ -853,7 +855,92 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
return { suggestions };
|
||||
}
|
||||
});
|
||||
// 注册 / 斜杠命令 AI 快捷补全
|
||||
const slashCmdDefs = [
|
||||
{ cmd: '/query', label: '🔍 自然语言查询', desc: '用中文描述你想查什么', prompt: '帮我写一条 SQL 查询：' },
|
||||
{ cmd: '/sql', label: '📝 生成 SQL', desc: '描述需求自动生成语句', prompt: '请根据以下需求生成 SQL：' },
|
||||
{ cmd: '/explain', label: '💡 解释 SQL', desc: '解释选中 SQL 的逻辑', prompt: '请解释以下 SQL 的执行逻辑和每一步的作用：\n```sql\n{SQL}\n```', useSelection: true },
|
||||
{ cmd: '/optimize', label: '⚡ 优化分析', desc: '分析 SQL 性能瓶颈', prompt: '请分析以下 SQL 的性能问题，并给出优化后的版本：\n```sql\n{SQL}\n```', useSelection: true },
|
||||
{ cmd: '/schema', label: '🏗️ 表设计评审', desc: '评审表结构设计质量', prompt: '请全面评审当前关联表的设计，包括字段类型、范式、索引策略等方面的改进建议：' },
|
||||
{ cmd: '/index', label: '📊 索引建议', desc: '推荐最优索引方案', prompt: '请基于当前表结构和常见查询场景，推荐最优的索引方案并给出建表语句：' },
|
||||
{ cmd: '/diff', label: '🔄 表对比', desc: '对比两表差异生成变更', prompt: '请对比以下两张表的结构差异，并生成从旧版本迁移到新版本的 ALTER 语句：' },
|
||||
{ cmd: '/mock', label: '🎲 造测试数据', desc: '生成 INSERT 测试数据', prompt: '请为当前关联的表生成 10 条符合业务语义的测试数据 INSERT 语句：' },
|
||||
];
|
||||
// 全局变量存储命令定义，供 onDidChangeModelContent 使用
|
||||
(window as any).__gonaviSlashCmdDefs = slashCmdDefs;
|
||||
|
||||
monaco.languages.registerCompletionItemProvider('sql', {
|
||||
triggerCharacters: ['/'],
|
||||
provideCompletionItems: (model: any, position: any) => {
|
||||
const lineContent = model.getLineContent(position.lineNumber);
|
||||
const textBefore = lineContent.substring(0, position.column - 1).trimStart();
|
||||
if (!textBefore.startsWith('/')) {
|
||||
return { suggestions: [] };
|
||||
}
|
||||
|
||||
const range = {
|
||||
startLineNumber: position.lineNumber,
|
||||
endLineNumber: position.lineNumber,
|
||||
startColumn: position.column - textBefore.length,
|
||||
endColumn: position.column,
|
||||
};
|
||||
|
||||
return {
|
||||
suggestions: slashCmdDefs.map((c, i) => ({
|
||||
label: `${c.cmd} ${c.label}`,
|
||||
kind: monaco.languages.CompletionItemKind.Event,
|
||||
detail: c.desc,
|
||||
insertText: `__AI_${c.cmd.slice(1).toUpperCase()}__`,
|
||||
range,
|
||||
sortText: String(i).padStart(2, '0'),
|
||||
})),
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
} // end sqlCompletionRegistered guard
|
||||
|
||||
// 每个编辑器实例都注册内容变化监听（检测斜杠命令标记）
|
||||
let _handlingSlash = false;
|
||||
editor.onDidChangeModelContent(() => {
|
||||
if (_handlingSlash) return;
|
||||
const model = editor.getModel();
|
||||
if (!model) return;
|
||||
const content = model.getValue();
|
||||
const markerMatch = content.match(/__AI_(\w+)__/);
|
||||
if (!markerMatch) return;
|
||||
|
||||
const cmdKey = markerMatch[1].toLowerCase();
|
||||
const defs = (window as any).__gonaviSlashCmdDefs || [];
|
||||
const cmdDef = defs.find((c: any) => c.cmd === `/${cmdKey}`);
|
||||
if (!cmdDef) return;
|
||||
|
||||
// 清除标记文本（带递归保护）
|
||||
_handlingSlash = true;
|
||||
const fullText = model.getValue();
|
||||
const newText = fullText.replace(markerMatch[0], '').replace(/^\s*\n/, '');
|
||||
model.setValue(newText);
|
||||
_handlingSlash = false;
|
||||
|
||||
// 组装 prompt
|
||||
const conn = connectionsRef.current.find(c => c.id === currentConnectionIdRef.current);
|
||||
const ctxText = conn ? `【上下文环境：${conn.config?.type || '数据库'} "${conn.name}", 当前库选定为 "${currentDbRef.current || '默认'}"】\n` : '';
|
||||
let finalPrompt = ctxText + cmdDef.prompt;
|
||||
if (cmdDef.useSelection) {
|
||||
const sel = editor.getSelection();
|
||||
const selText = sel ? model.getValueInRange(sel) : '';
|
||||
finalPrompt = finalPrompt.replace('{SQL}', selText || getCurrentQuery());
|
||||
}
|
||||
|
||||
// 打开 AI 面板并注入 prompt
|
||||
const store = useStore.getState();
|
||||
if (!store.aiPanelVisible) {
|
||||
store.setAIPanelVisible(true);
|
||||
}
|
||||
setTimeout(() => {
|
||||
window.dispatchEvent(new CustomEvent('gonavi:ai:inject-prompt', { detail: { prompt: finalPrompt } }));
|
||||
}, store.aiPanelVisible ? 0 : 350);
|
||||
});
|
||||
};
|
||||
|
||||
const handleFormat = () => {
|
||||
@@ -870,11 +957,14 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
const selection = editor?.getModel()?.getValueInRange(editor.getSelection()) || '';
|
||||
const fullSQL = getCurrentQuery();
|
||||
|
||||
const conn = connections.find(c => c.id === currentConnectionId);
|
||||
const ctxText = conn ? `【上下文环境：${conn.config?.type || '数据库'} "${conn.name}", 当前库选定为 "${currentDb || '默认'}"】\n` : '';
|
||||
|
||||
const prompts: Record<string, string> = {
|
||||
generate: '请根据当前数据库表结构生成查询语句：',
|
||||
explain: `请解释以下 SQL 语句的执行逻辑：\n\`\`\`sql\n${selection || fullSQL}\n\`\`\``,
|
||||
optimize: `请分析以下 SQL 语句的性能并给出优化建议：\n\`\`\`sql\n${selection || fullSQL}\n\`\`\``,
|
||||
schema: '请分析当前数据库的表结构并给出优化建议。',
|
||||
generate: `${ctxText}请根据当前数据库表结构生成查询语句：`,
|
||||
explain: `${ctxText}请解释以下 SQL 语句的执行逻辑：\n\`\`\`sql\n${selection || fullSQL}\n\`\`\``,
|
||||
optimize: `${ctxText}请分析以下 SQL 语句的性能并给出优化建议：\n\`\`\`sql\n${selection || fullSQL}\n\`\`\``,
|
||||
schema: `${ctxText}请针对当前数据库的表结构进行系统分析，并给出性能和设计上的优化建议。`,
|
||||
};
|
||||
|
||||
const store = useStore.getState();
|
||||
@@ -1932,41 +2022,73 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
|
||||
};
|
||||
}, [activeTabId, tab.id, handleRun]);
|
||||
|
||||
// 监听并处理外部注入的 SQL 代码 (如 AI 面板)
|
||||
// 监听由 TabManager 分发的专用注入事件
|
||||
useEffect(() => {
|
||||
const handleInsertSql = (e: CustomEvent) => {
|
||||
if (activeTabId !== tab.id || !e.detail?.sql) return;
|
||||
const sqlText = e.detail.sql;
|
||||
const handleInsertSql = (e: any) => {
|
||||
if (e.detail?.tabId !== tab.id || !e.detail?.sql) return;
|
||||
const { sql: sqlText, connectionId, dbName } = e.detail;
|
||||
|
||||
// 同步更新 ref，防止异步 fetchDbs 竞态覆盖正确的 dbName
|
||||
if (connectionId && connectionId !== currentConnectionId) {
|
||||
if (dbName) {
|
||||
currentDbRef.current = dbName;
|
||||
setCurrentDb(dbName);
|
||||
}
|
||||
setCurrentConnectionId(connectionId);
|
||||
} else if (dbName && dbName !== currentDb) {
|
||||
currentDbRef.current = dbName;
|
||||
setCurrentDb(dbName);
|
||||
}
|
||||
|
||||
const editor = editorRef.current;
|
||||
if (editor && (window as any).monaco) {
|
||||
const position = editor.getPosition();
|
||||
const monaco = monacoRef.current;
|
||||
if (editor && monaco) {
|
||||
let position = editor.getPosition();
|
||||
const model = editor.getModel();
|
||||
if (!position && model) {
|
||||
const lineCount = model.getLineCount();
|
||||
const maxCol = model.getLineMaxColumn(lineCount);
|
||||
position = new monaco.Position(lineCount, maxCol);
|
||||
}
|
||||
|
||||
if (position) {
|
||||
const mText = (sqlText.endsWith('\n') ? sqlText : sqlText + '\n');
|
||||
const startRange = new (window as any).monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column);
|
||||
const startRange = new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column);
|
||||
|
||||
editor.executeEdits('ai-insert', [{
|
||||
range: startRange,
|
||||
text: '\n' + mText,
|
||||
text: (position.column > 1 ? '\n' : '') + mText,
|
||||
forceMoveMarkers: true
|
||||
}]);
|
||||
|
||||
// 定位并滚动到可见区域
|
||||
const targetLine = position.lineNumber + (position.column > 1 ? 1 : 0);
|
||||
editor.revealLineInCenterIfOutsideViewport(targetLine);
|
||||
editor.setPosition({ lineNumber: targetLine + mText.split('\n').length - 1, column: 1 });
|
||||
editor.focus();
|
||||
|
||||
if (!e.detail.runImmediately) {
|
||||
message.success('代码已在当前光标处成功插入');
|
||||
}
|
||||
|
||||
if (e.detail.runImmediately) {
|
||||
const endPosition = editor.getPosition();
|
||||
editor.setSelection(new (window as any).monaco.Range(
|
||||
position.lineNumber + 1, 1,
|
||||
editor.setSelection(new monaco.Range(
|
||||
targetLine, 1,
|
||||
endPosition.lineNumber, endPosition.column
|
||||
));
|
||||
setTimeout(() => handleRun(), 50);
|
||||
// 🔧 延迟 500ms 等待连接/数据库切换的 setState 生效后再执行
|
||||
setTimeout(() => handleRun(), 500);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
setQuery((prev: string) => prev ? prev + '\n' + sqlText : sqlText);
|
||||
message.success('代码已追加');
|
||||
}
|
||||
};
|
||||
window.addEventListener('gonavi:insert-sql', handleInsertSql as EventListener);
|
||||
return () => window.removeEventListener('gonavi:insert-sql', handleInsertSql as EventListener);
|
||||
}, [activeTabId, tab.id, handleRun]);
|
||||
window.addEventListener('gonavi:insert-sql-to-tab', handleInsertSql as EventListener);
|
||||
return () => window.removeEventListener('gonavi:insert-sql-to-tab', handleInsertSql as EventListener);
|
||||
}, [tab.id, handleRun]);
|
||||
|
||||
const resolveDefaultQueryName = () => {
|
||||
const rawTitle = String(tab.title || '').trim();
|
||||
|
||||
@@ -1432,7 +1432,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
|
||||
if (type === 'connection') {
|
||||
setActiveContext({ connectionId: key, dbName: '' });
|
||||
} else if (type === 'database') {
|
||||
setActiveContext({ connectionId: dataRef.id, dbName: title });
|
||||
setActiveContext({ connectionId: dataRef.id, dbName: dataRef.dbName });
|
||||
} else if (type === 'table') {
|
||||
setActiveContext({ connectionId: dataRef.id, dbName: dataRef.dbName });
|
||||
} else if (type === 'view' || type === 'db-trigger' || type === 'routine') {
|
||||
@@ -1456,9 +1456,9 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
|
||||
|
||||
const onDoubleClick = (e: any, node: any) => {
|
||||
// 保证用户直接双击节点未触发 onClick/onSelect 时也能强行拿到选中状态
|
||||
const { type, dataRef, key: nodeKey, title } = node;
|
||||
const { type, dataRef, key: nodeKey } = node;
|
||||
if (type === 'connection') setActiveContext({ connectionId: nodeKey, dbName: '' });
|
||||
else if (type === 'database') setActiveContext({ connectionId: dataRef.id, dbName: title });
|
||||
else if (type === 'database') setActiveContext({ connectionId: dataRef.id, dbName: dataRef.dbName });
|
||||
else if (type === 'table' || type === 'view' || type === 'db-trigger' || type === 'routine') setActiveContext({ connectionId: dataRef.id, dbName: dataRef.dbName });
|
||||
else if (type === 'saved-query') setActiveContext({ connectionId: dataRef.connectionId, dbName: dataRef.dbName });
|
||||
else if (type === 'redis-db') setActiveContext({ connectionId: dataRef.id, dbName: `db${dataRef.redisDB}` });
|
||||
|
||||
@@ -89,6 +89,7 @@ const TabManager: React.FC = () => {
|
||||
const theme = useStore(state => state.theme);
|
||||
const activeTabId = useStore(state => state.activeTabId);
|
||||
const setActiveTab = useStore(state => state.setActiveTab);
|
||||
const addTab = useStore(state => state.addTab);
|
||||
const closeTab = useStore(state => state.closeTab);
|
||||
const closeOtherTabs = useStore(state => state.closeOtherTabs);
|
||||
const closeTabsToLeft = useStore(state => state.closeTabsToLeft);
|
||||
@@ -134,6 +135,59 @@ const TabManager: React.FC = () => {
|
||||
setDraggingTabId(null);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
const handleGlobalInsertSql = (e: any) => {
|
||||
const { sql, runImmediately, connectionId: eventConnId, dbName: eventDbName } = e.detail;
|
||||
if (!sql) return;
|
||||
|
||||
const activeTab = tabs.find(t => t.id === activeTabId);
|
||||
|
||||
// 🔧 runImmediately（点击"执行"）始终新建独立 tab，避免追加到已有 tab 导致 SQL 重复
|
||||
if (runImmediately) {
|
||||
const newTabId = 'tab-' + Date.now();
|
||||
const resolvedConnId = eventConnId || activeTab?.connectionId || (connections.length > 0 ? connections[0].id : '');
|
||||
const resolvedDbName = eventConnId ? (eventDbName || '') : (activeTab?.dbName || '');
|
||||
addTab({
|
||||
id: newTabId,
|
||||
type: 'query',
|
||||
title: '新建查询',
|
||||
query: '',
|
||||
connectionId: resolvedConnId,
|
||||
dbName: resolvedDbName
|
||||
});
|
||||
setActiveTab(newTabId);
|
||||
setTimeout(() => {
|
||||
window.dispatchEvent(new CustomEvent('gonavi:insert-sql-to-tab', {
|
||||
detail: { tabId: newTabId, sql, runImmediately: true, connectionId: resolvedConnId, dbName: resolvedDbName }
|
||||
}));
|
||||
}, 300);
|
||||
return;
|
||||
}
|
||||
|
||||
// 插入模式：追加到已有 tab 或新建 tab
|
||||
if (activeTab && activeTab.type === 'query') {
|
||||
window.dispatchEvent(new CustomEvent('gonavi:insert-sql-to-tab', {
|
||||
detail: { tabId: activeTab.id, sql, runImmediately: false, connectionId: eventConnId, dbName: eventDbName }
|
||||
}));
|
||||
} else {
|
||||
const newTabId = 'tab-' + Date.now();
|
||||
const resolvedConnId = eventConnId || activeTab?.connectionId || (connections.length > 0 ? connections[0].id : '');
|
||||
const resolvedDbName = eventConnId ? (eventDbName || '') : (activeTab?.dbName || '');
|
||||
addTab({
|
||||
id: newTabId,
|
||||
type: 'query',
|
||||
title: '新建查询',
|
||||
query: sql,
|
||||
connectionId: resolvedConnId,
|
||||
dbName: resolvedDbName
|
||||
});
|
||||
setActiveTab(newTabId);
|
||||
}
|
||||
};
|
||||
window.addEventListener('gonavi:insert-sql', handleGlobalInsertSql);
|
||||
return () => window.removeEventListener('gonavi:insert-sql', handleGlobalInsertSql);
|
||||
}, [tabs, activeTabId, addTab, setActiveTab, connections]);
|
||||
|
||||
const tabIds = useMemo(() => tabs.map((tab) => tab.id), [tabs]);
|
||||
|
||||
const renderTabBar: TabsProps['renderTabBar'] = (tabBarProps, DefaultTabBar) => (
|
||||
|
||||
76
frontend/src/components/ai/AIChatHeader.tsx
Normal file
76
frontend/src/components/ai/AIChatHeader.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import React from 'react';
|
||||
import { Button, Tooltip } from 'antd';
|
||||
import { HistoryOutlined, RobotOutlined, ClearOutlined, SettingOutlined, CloseOutlined, ExportOutlined } from '@ant-design/icons';
|
||||
import type { OverlayWorkbenchTheme } from '../../utils/overlayWorkbenchTheme';
|
||||
import type { AIChatMessage } from '../../types';
|
||||
|
||||
interface AIChatHeaderProps {
|
||||
darkMode: boolean;
|
||||
mutedColor: string;
|
||||
textColor: string;
|
||||
overlayTheme: OverlayWorkbenchTheme;
|
||||
onHistoryClick: () => void;
|
||||
onClear: () => void;
|
||||
onSettingsClick: () => void;
|
||||
onClose: () => void;
|
||||
messages?: AIChatMessage[];
|
||||
sessionTitle?: string;
|
||||
}
|
||||
|
||||
const exportToMarkdown = (messages: AIChatMessage[], title: string) => {
|
||||
const lines: string[] = [`# ${title}`, '', `> 导出时间：${new Date().toLocaleString()}`, ''];
|
||||
messages.forEach(msg => {
|
||||
const role = msg.role === 'user' ? '👤 You' : '🤖 GoNavi AI';
|
||||
lines.push(`## ${role}`);
|
||||
lines.push('');
|
||||
lines.push(msg.content);
|
||||
lines.push('');
|
||||
lines.push('---');
|
||||
lines.push('');
|
||||
});
|
||||
const blob = new Blob([lines.join('\n')], { type: 'text/markdown;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${title.replace(/[/\\?%*:|"<>]/g, '-')}.md`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
export const AIChatHeader: React.FC<AIChatHeaderProps> = ({
|
||||
darkMode, mutedColor, textColor, overlayTheme,
|
||||
onHistoryClick, onClear, onSettingsClick, onClose,
|
||||
messages = [], sessionTitle = '新对话'
|
||||
}) => {
|
||||
return (
|
||||
<div className="ai-chat-header" style={{ borderBottom: 'none', padding: '10px 16px', background: darkMode ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.01)' }}>
|
||||
<div className="ai-chat-header-left" style={{ gap: 8 }}>
|
||||
<Tooltip title="历史会话">
|
||||
<Button type="text" size="small" icon={<HistoryOutlined />} onClick={onHistoryClick} style={{ color: mutedColor }} />
|
||||
</Tooltip>
|
||||
<div className="ai-logo" style={{ background: overlayTheme.iconBg, color: overlayTheme.iconColor, display: 'flex', alignItems: 'center', justifyContent: 'center', width: 20, height: 20, borderRadius: 6, fontSize: 12 }}>
|
||||
<RobotOutlined />
|
||||
</div>
|
||||
<span className="ai-title" style={{ color: textColor, fontSize: 13, fontWeight: 600 }}>GoNavi AI</span>
|
||||
</div>
|
||||
<div className="ai-chat-header-right">
|
||||
{messages.length > 0 && (
|
||||
<Tooltip title="导出为 Markdown">
|
||||
<Button type="text" size="small" icon={<ExportOutlined />} onClick={() => exportToMarkdown(messages, sessionTitle)} style={{ color: mutedColor }} />
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip title="新对话 (清空当前)">
|
||||
<Button type="text" size="small" icon={<ClearOutlined />} onClick={onClear} style={{ color: mutedColor }} />
|
||||
</Tooltip>
|
||||
<Tooltip title="AI 设置">
|
||||
<Button type="text" size="small" icon={<SettingOutlined />} onClick={onSettingsClick} style={{ color: mutedColor }} />
|
||||
</Tooltip>
|
||||
<Tooltip title="关闭面板">
|
||||
<Button type="text" size="small" icon={<CloseOutlined />} onClick={onClose} style={{ color: mutedColor }} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
574
frontend/src/components/ai/AIChatInput.tsx
Normal file
574
frontend/src/components/ai/AIChatInput.tsx
Normal file
@@ -0,0 +1,574 @@
|
||||
import React from 'react';
|
||||
import { Input, Select, AutoComplete, Tooltip, Modal, Checkbox, Spin, message, Button, Tag } from 'antd';
|
||||
import { DatabaseOutlined, SendOutlined, TableOutlined, SearchOutlined, PictureOutlined } from '@ant-design/icons';
|
||||
import { useStore } from '../../store';
|
||||
import { DBGetTables, DBShowCreateTable, DBGetDatabases } from '../../../wailsjs/go/app/App';
|
||||
import type { OverlayWorkbenchTheme } from '../../utils/overlayWorkbenchTheme';
|
||||
|
||||
interface AIChatInputProps {
|
||||
input: string;
|
||||
setInput: (val: string) => void;
|
||||
draftImages: string[];
|
||||
setDraftImages: React.Dispatch<React.SetStateAction<string[]>>;
|
||||
sending: boolean;
|
||||
onSend: () => void;
|
||||
onStop: () => void;
|
||||
handleKeyDown: (e: React.KeyboardEvent) => void;
|
||||
activeConnName: string;
|
||||
activeContext: any;
|
||||
activeProvider: any;
|
||||
dynamicModels: string[];
|
||||
loadingModels: boolean;
|
||||
onModelChange: (val: string) => void;
|
||||
onFetchModels: () => void;
|
||||
textareaRef: React.RefObject<HTMLTextAreaElement>;
|
||||
darkMode: boolean;
|
||||
textColor: string;
|
||||
mutedColor: string;
|
||||
overlayTheme: OverlayWorkbenchTheme;
|
||||
contextUsageChars?: number;
|
||||
maxContextChars?: number;
|
||||
}
|
||||
|
||||
export const AIChatInput: React.FC<AIChatInputProps> = ({
|
||||
input, setInput, draftImages, setDraftImages, sending, onSend, onStop, handleKeyDown,
|
||||
activeConnName, activeContext, activeProvider, dynamicModels, loadingModels,
|
||||
onModelChange, onFetchModels, textareaRef, darkMode, textColor, mutedColor, overlayTheme,
|
||||
contextUsageChars, maxContextChars
|
||||
}) => {
|
||||
const [contextOpen, setContextOpen] = React.useState(false);
|
||||
const [contextLoading, setContextLoading] = React.useState(false);
|
||||
const [contextTables, setContextTables] = React.useState<{name: string}[]>([]);
|
||||
const [selectedTableKeys, setSelectedTableKeys] = React.useState<string[]>([]);
|
||||
const [searchText, setSearchText] = React.useState('');
|
||||
const [appendingContext, setAppendingContext] = React.useState(false);
|
||||
|
||||
const fileInputRef = React.useRef<HTMLInputElement>(null);
|
||||
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = Array.from(e.target.files || []);
|
||||
files.forEach(file => {
|
||||
if (file.type.indexOf('image') !== -1) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
if (event.target?.result) {
|
||||
setDraftImages(prev => [...prev, event.target!.result as string]);
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const [dbList, setDbList] = React.useState<string[]>([]);
|
||||
const [selectedDbName, setSelectedDbName] = React.useState<string>('');
|
||||
|
||||
const filteredTables = contextTables.filter(t => t.name.toLowerCase().includes(searchText.toLowerCase()));
|
||||
const [contextExpanded, setContextExpanded] = React.useState(false);
|
||||
|
||||
// Slash commands
|
||||
const [showSlashMenu, setShowSlashMenu] = React.useState(false);
|
||||
const [slashFilter, setSlashFilter] = React.useState('');
|
||||
const slashCommands = React.useMemo(() => [
|
||||
{ cmd: '/query', label: '🔍 自然语言查询', desc: '用中文描述你想查什么', prompt: '帮我写一条 SQL 查询：' },
|
||||
{ cmd: '/sql', label: '📝 生成 SQL', desc: '描述需求自动生成语句', prompt: '请根据以下需求生成 SQL：' },
|
||||
{ cmd: '/explain', label: '💡 解释 SQL', desc: '解释选中 SQL 的逻辑', prompt: '请解释以下 SQL 的执行逻辑和每一步的作用：\n```sql\n\n```' },
|
||||
{ cmd: '/optimize', label: '⚡ 优化分析', desc: '分析 SQL 性能瓶颈', prompt: '请分析以下 SQL 的性能问题，并给出优化后的版本：\n```sql\n\n```' },
|
||||
{ cmd: '/schema', label: '🏗️ 表设计评审', desc: '评审表结构设计质量', prompt: '请全面评审当前关联表的设计，包括字段类型、范式、索引策略等方面的改进建议：' },
|
||||
{ cmd: '/index', label: '📊 索引建议', desc: '推荐最优索引方案', prompt: '请基于当前表结构和常见查询场景，推荐最优的索引方案并给出建表语句：' },
|
||||
{ cmd: '/diff', label: '🔄 表对比', desc: '对比两表差异生成变更', prompt: '请对比以下两张表的结构差异，并生成从旧版本迁移到新版本的 ALTER 语句：' },
|
||||
{ cmd: '/mock', label: '🎲 造测试数据', desc: '生成 INSERT 测试数据', prompt: '请为当前关联的表生成 10 条符合业务语义的测试数据 INSERT 语句：' },
|
||||
], []);
|
||||
const filteredSlashCmds = slashCommands.filter(c => c.cmd.startsWith(slashFilter.toLowerCase()));
|
||||
|
||||
const aiContexts = useStore(state => state.aiContexts);
|
||||
const addAIContext = useStore(state => state.addAIContext);
|
||||
const removeAIContext = useStore(state => state.removeAIContext);
|
||||
|
||||
const connectionKey = activeContext?.connectionId ? `${activeContext.connectionId}:${activeContext.dbName || ''}` : 'default';
|
||||
const activeContextItems = aiContexts[connectionKey] || [];
|
||||
|
||||
const fetchTablesForDb = async (dbName: string, connConfig: any) => {
|
||||
setContextLoading(true);
|
||||
setSelectedDbName(dbName);
|
||||
try {
|
||||
const res = await DBGetTables(connConfig, dbName);
|
||||
if (res.success && Array.isArray(res.data)) {
|
||||
setContextTables(res.data.map(r => ({ name: Object.values(r)[0] as string })));
|
||||
} else {
|
||||
message.error('获取表格失败: ' + res.message);
|
||||
setContextTables([]);
|
||||
}
|
||||
} catch (e: any) {
|
||||
message.error(e.message);
|
||||
setContextTables([]);
|
||||
} finally {
|
||||
setContextLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenContext = async () => {
|
||||
if (!activeContext?.connectionId) {
|
||||
message.warning('请先在左侧选择一个数据库作为所聊上下文');
|
||||
return;
|
||||
}
|
||||
const conn = useStore.getState().connections.find(c => c.id === activeContext.connectionId);
|
||||
if (!conn) return;
|
||||
|
||||
setContextOpen(true);
|
||||
setContextLoading(true);
|
||||
setSearchText('');
|
||||
// Store dbName::tableName composite keys
|
||||
setSelectedTableKeys(activeContextItems.map(c => `${c.dbName}::${c.tableName}`));
|
||||
|
||||
try {
|
||||
// Fetch databases
|
||||
const dbRes = await DBGetDatabases(conn.config as any);
|
||||
if (dbRes.success && Array.isArray(dbRes.data)) {
|
||||
const databases = dbRes.data.map((r: any) => Object.values(r)[0] as string);
|
||||
setDbList(databases);
|
||||
}
|
||||
|
||||
// Fetch tables for the active contextual database
|
||||
const initDbName = activeContext.dbName || '';
|
||||
setSelectedDbName(initDbName);
|
||||
const tablesRes = await DBGetTables(conn.config as any, initDbName);
|
||||
if (tablesRes.success && Array.isArray(tablesRes.data)) {
|
||||
setContextTables(tablesRes.data.map((r: any) => ({ name: Object.values(r)[0] as string })));
|
||||
} else {
|
||||
setContextTables([]);
|
||||
}
|
||||
} catch (e: any) {
|
||||
message.error(e.message);
|
||||
} finally {
|
||||
setContextLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAppendContext = async () => {
|
||||
const conn = useStore.getState().connections.find(c => c.id === activeContext.connectionId);
|
||||
if (!conn) return;
|
||||
|
||||
setAppendingContext(true);
|
||||
try {
|
||||
let addedCount = 0;
|
||||
let removedCount = 0;
|
||||
|
||||
for (const cx of activeContextItems) {
|
||||
const key = `${cx.dbName}::${cx.tableName}`;
|
||||
if (!selectedTableKeys.includes(key)) {
|
||||
removeAIContext(connectionKey, cx.dbName, cx.tableName);
|
||||
removedCount++;
|
||||
}
|
||||
}
|
||||
|
||||
for (const key of selectedTableKeys) {
|
||||
const [dbName, tableName] = key.split('::');
|
||||
if (!dbName || !tableName) continue;
|
||||
|
||||
if (activeContextItems.find(c => c.dbName === dbName && c.tableName === tableName)) {
|
||||
continue;
|
||||
}
|
||||
const res = await DBShowCreateTable(conn.config as any, dbName, tableName);
|
||||
let createSql = '';
|
||||
if (res.success && res.data) {
|
||||
if (typeof res.data === 'string') {
|
||||
createSql = res.data;
|
||||
} else if (Array.isArray(res.data) && res.data.length > 0) {
|
||||
const row = res.data[0];
|
||||
createSql = (Object.values(row).find(v => typeof v === 'string' && (v.toUpperCase().includes('CREATE TABLE') || v.toUpperCase().includes('CREATE'))) || Object.values(row)[1] || Object.values(row)[0]) as string;
|
||||
}
|
||||
} else {
|
||||
message.error(`获取表 ${dbName}.${tableName} 结构失败: ` + (res.message || '未知错误'));
|
||||
}
|
||||
|
||||
if (createSql) {
|
||||
addAIContext(connectionKey, {
|
||||
dbName: dbName,
|
||||
tableName: tableName,
|
||||
ddl: createSql
|
||||
});
|
||||
addedCount++;
|
||||
}
|
||||
}
|
||||
if (addedCount > 0 || removedCount > 0) {
|
||||
if (addedCount > 0 && removedCount === 0) {
|
||||
message.success(`已添加 ${addedCount} 张表的结构到上下文`);
|
||||
} else if (removedCount > 0 && addedCount === 0) {
|
||||
message.success(`已从上下文移除 ${removedCount} 张表的结构`);
|
||||
} else {
|
||||
message.success(`上下文已同步更新：新增 ${addedCount}，移除 ${removedCount}`);
|
||||
}
|
||||
if (addedCount > 0) setContextExpanded(true);
|
||||
} else {
|
||||
message.info('选中的表未发生变化');
|
||||
}
|
||||
setContextOpen(false);
|
||||
} catch (e: any) {
|
||||
message.error(e.message);
|
||||
} finally {
|
||||
setAppendingContext(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ai-chat-input-area" style={{ borderTop: 'none', padding: '12px 16px 20px' }}>
|
||||
<div className="ai-chat-input-wrapper" style={{
|
||||
borderColor: 'transparent',
|
||||
background: 'transparent',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'stretch',
|
||||
gap: 8,
|
||||
padding: '8px 4px 8px'
|
||||
}}>
|
||||
<div className="ai-chat-input-preview-area" style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
|
||||
{activeContextItems.length > 0 && (
|
||||
<Tag
|
||||
onClick={() => 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' }}
|
||||
>
|
||||
<span style={{ fontSize: 13, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<DatabaseOutlined /> 关联上下文 ({activeContextItems.length}) {contextExpanded ? '▴' : '▾'}
|
||||
</span>
|
||||
</Tag>
|
||||
)}
|
||||
|
||||
{contextExpanded && activeContextItems.map((ctx, idx) => (
|
||||
<Tag
|
||||
key={`ctx-${idx}`}
|
||||
closable
|
||||
onClose={(e) => { 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 }}
|
||||
>
|
||||
<span style={{ fontSize: 13 }}>🗄️ {ctx.tableName}</span>
|
||||
</Tag>
|
||||
))}
|
||||
{draftImages.map((b64, i) => (
|
||||
<div key={i} style={{ position: 'relative', width: 60, height: 60, borderRadius: 6, overflow: 'hidden', border: overlayTheme.shellBorder }}>
|
||||
<img src={b64} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt={`Draft ${i}`} />
|
||||
<div
|
||||
onClick={() => 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 }}
|
||||
>
|
||||
✕
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ position: 'relative' }}>
|
||||
{showSlashMenu && filteredSlashCmds.length > 0 && (
|
||||
<div style={{
|
||||
position: 'absolute', bottom: '100%', left: 0, right: 0, marginBottom: 4,
|
||||
background: darkMode ? '#2a2a2a' : '#fff',
|
||||
border: `1px solid ${darkMode ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.1)'}`,
|
||||
borderRadius: 8, boxShadow: '0 4px 16px rgba(0,0,0,0.15)', zIndex: 100,
|
||||
maxHeight: 220, overflowY: 'auto', padding: 4
|
||||
}}>
|
||||
{filteredSlashCmds.map(cmd => (
|
||||
<div
|
||||
key={cmd.cmd}
|
||||
style={{
|
||||
padding: '8px 12px', borderRadius: 6, cursor: 'pointer',
|
||||
display: 'flex', alignItems: 'center', gap: 10,
|
||||
transition: 'background 0.15s'
|
||||
}}
|
||||
onMouseEnter={e => 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();
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: 14, fontWeight: 600, color: textColor, minWidth: 80 }}>{cmd.cmd}</span>
|
||||
<span style={{ fontSize: 13, fontWeight: 500, color: textColor }}>{cmd.label}</span>
|
||||
<span style={{ fontSize: 11, color: mutedColor, marginLeft: 'auto' }}>{cmd.desc}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<Input.TextArea
|
||||
onPaste={(e) => {
|
||||
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' }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
|
||||
<div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
{activeConnName && (
|
||||
<Tooltip title="当前数据查询上下文">
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 4,
|
||||
fontSize: 11, padding: '2px 8px', borderRadius: 12,
|
||||
background: darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
|
||||
color: overlayTheme.mutedText, cursor: 'default'
|
||||
}}>
|
||||
<DatabaseOutlined style={{ fontSize: 10 }} />
|
||||
<span style={{ maxWidth: 240, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{activeConnName}{activeContext?.dbName ? ` / ${activeContext.dbName}` : ''}
|
||||
</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{activeProvider && (
|
||||
<Select
|
||||
size="small"
|
||||
variant="filled"
|
||||
value={activeProvider.model || (dynamicModels.length > 0 ? dynamicModels[0] : activeProvider.models?.[0])}
|
||||
onChange={onModelChange}
|
||||
onDropdownVisibleChange={(open) => { if (open && dynamicModels.length === 0) onFetchModels(); }}
|
||||
loading={loadingModels}
|
||||
options={(dynamicModels.length > 0 ? dynamicModels : (activeProvider.models || [])).map((m: string) => ({ label: m, value: m }))}
|
||||
style={{ width: 130, fontSize: 11, background: 'transparent' }}
|
||||
dropdownStyle={{ minWidth: 200 }}
|
||||
showSearch
|
||||
placeholder="选择模型"
|
||||
/>
|
||||
)}
|
||||
|
||||
{contextUsageChars !== undefined && maxContextChars !== undefined && (
|
||||
<Tooltip title={`当前会话记忆已用字符。达到限制（${(maxContextChars/1000).toFixed(0)}k）时将触发自动压缩。`}>
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 4,
|
||||
fontSize: 10, padding: '2px 6px', borderRadius: 12, border: '1px solid transparent',
|
||||
background: contextUsageChars > maxContextChars * 0.8 ? (darkMode ? 'rgba(250, 173, 20, 0.1)' : 'rgba(250, 173, 20, 0.08)') : (darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)'),
|
||||
borderColor: contextUsageChars > maxContextChars * 0.8 ? 'rgba(250, 173, 20, 0.3)' : 'transparent',
|
||||
color: contextUsageChars > maxContextChars * 0.8 ? '#faad14' : overlayTheme.mutedText, cursor: 'default',
|
||||
transition: 'all 0.3s'
|
||||
}}>
|
||||
<span>🧠 {(contextUsageChars / 1000).toFixed(1)}k / {(maxContextChars / 1000).toFixed(0)}k</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 6, alignItems: 'center', flexShrink: 0 }}>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
ref={fileInputRef}
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleImageUpload}
|
||||
/>
|
||||
<Tooltip title="上传图片/截图">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<PictureOutlined style={{ fontSize: 16 }} />}
|
||||
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}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="关联附带数据库表上下文">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<TableOutlined style={{ fontSize: 16 }} />}
|
||||
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}
|
||||
/>
|
||||
</Tooltip>
|
||||
{sending ? (
|
||||
<button
|
||||
className="ai-chat-send-btn ai-chat-stop-btn"
|
||||
onClick={onStop}
|
||||
title="停止生成"
|
||||
style={{
|
||||
background: 'rgba(255,77,79,0.1)',
|
||||
color: '#ff4d4f', border: '1px solid rgba(255,77,79,0.2)',
|
||||
width: 26, height: 26, borderRadius: 6, padding: 0,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0
|
||||
}}
|
||||
>
|
||||
<div style={{ width: 10, height: 10, background: 'currentColor', borderRadius: 2 }} />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="ai-chat-send-btn"
|
||||
onClick={() => onSend()}
|
||||
disabled={!input.trim() && draftImages.length === 0}
|
||||
title="发送"
|
||||
style={{
|
||||
background: (input.trim() || draftImages.length > 0) ? overlayTheme.iconBg : (darkMode ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.04)'),
|
||||
color: (input.trim() || draftImages.length > 0) ? overlayTheme.iconColor : mutedColor,
|
||||
width: 26, height: 26, borderRadius: 6, border: 'none', padding: 0,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: (input.trim() || draftImages.length > 0) ? 'pointer' : 'not-allowed', flexShrink: 0
|
||||
}}
|
||||
>
|
||||
<SendOutlined />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
title={<span style={{ color: textColor }}>关联数据库表结构上下文</span>}
|
||||
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' }
|
||||
}}
|
||||
>
|
||||
<Spin spinning={contextLoading}>
|
||||
<div style={{ marginBottom: 16, display: 'flex', gap: 12 }}>
|
||||
{dbList.length > 0 && (
|
||||
<Select
|
||||
value={selectedDbName}
|
||||
onChange={val => {
|
||||
const c = useStore.getState().connections.find(conn => conn.id === activeContext?.connectionId);
|
||||
if (c) fetchTablesForDb(val, c.config);
|
||||
}}
|
||||
options={dbList.map(d => ({ label: d, value: d }))}
|
||||
style={{ width: 160, flexShrink: 0 }}
|
||||
placeholder="切换数据库"
|
||||
showSearch
|
||||
/>
|
||||
)}
|
||||
<Input
|
||||
placeholder="在当前库搜索表名..."
|
||||
prefix={<SearchOutlined style={{ color: overlayTheme.mutedText }} />}
|
||||
value={searchText}
|
||||
onChange={e => setSearchText(e.target.value)}
|
||||
style={{ background: darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)', border: 'none', flexGrow: 1 }}
|
||||
/>
|
||||
</div>
|
||||
{filteredTables.length > 0 ? (
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: `1px solid ${darkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'}`, paddingBottom: 12, marginBottom: 8 }}>
|
||||
<Checkbox
|
||||
indeterminate={
|
||||
filteredTables.length > 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})
|
||||
</Checkbox>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
style={{ padding: 0, height: 'auto', fontSize: 13 }}
|
||||
onClick={() => {
|
||||
const filteredKeys = filteredTables.map(t => `${selectedDbName}::${t.name}`);
|
||||
const remainingSelected = selectedTableKeys.filter(key => !filteredKeys.includes(key));
|
||||
const toAdd = filteredKeys.filter(key => !selectedTableKeys.includes(key));
|
||||
setSelectedTableKeys([...remainingSelected, ...toAdd]);
|
||||
}}
|
||||
>
|
||||
反选匹配结果
|
||||
</Button>
|
||||
</div>
|
||||
<div style={{ maxHeight: 300, overflowY: 'auto', margin: '0 -24px', padding: '0 24px' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
{filteredTables.map(t => {
|
||||
const key = `${selectedDbName}::${t.name}`;
|
||||
const isSelected = selectedTableKeys.includes(key);
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
style={{
|
||||
padding: '6px 10px',
|
||||
borderRadius: 6,
|
||||
transition: 'background 0.2s',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onMouseEnter={e => 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]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) setSelectedTableKeys([...selectedTableKeys, key]);
|
||||
else setSelectedTableKeys(selectedTableKeys.filter(k => k !== key));
|
||||
}}
|
||||
style={{ color: textColor, width: '100%' }}
|
||||
>
|
||||
<span style={{ fontSize: 13, userSelect: 'none' }}>{t.name}</span>
|
||||
</Checkbox>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ padding: '40px 0', textAlign: 'center', color: overlayTheme.mutedText }}>
|
||||
没有找到匹配 '{searchText}' 的表
|
||||
</div>
|
||||
)}
|
||||
</Spin>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
64
frontend/src/components/ai/AIChatWelcome.tsx
Normal file
64
frontend/src/components/ai/AIChatWelcome.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import { RobotOutlined } from '@ant-design/icons';
|
||||
import type { OverlayWorkbenchTheme } from '../../utils/overlayWorkbenchTheme';
|
||||
|
||||
interface AIChatWelcomeProps {
|
||||
overlayTheme: OverlayWorkbenchTheme;
|
||||
quickActionBg: string;
|
||||
quickActionBorder: string;
|
||||
textColor: string;
|
||||
mutedColor: string;
|
||||
onQuickAction: (prompt: string, autoSend?: boolean) => void;
|
||||
contextTableNames?: string[];
|
||||
}
|
||||
|
||||
export const AIChatWelcome: React.FC<AIChatWelcomeProps> = ({
|
||||
overlayTheme, quickActionBg, quickActionBorder, textColor, mutedColor, onQuickAction, contextTableNames = []
|
||||
}) => {
|
||||
const hasContext = contextTableNames.length > 0;
|
||||
const tableList = contextTableNames.join('、');
|
||||
|
||||
const quickActions = hasContext
|
||||
? [
|
||||
{ label: '📝 生成 SQL', prompt: `请根据以下表结构生成一条常用查询语句：${tableList}` },
|
||||
{ label: '🔍 解释表结构', prompt: `请详细解释以下表的设计意图和字段含义：${tableList}` },
|
||||
{ label: '⚡ 优化建议', prompt: `请分析以下表的结构设计，给出索引优化和查询性能优化建议：${tableList}` },
|
||||
{ label: '🏗️ Schema 分析', prompt: `请对以下表进行全面的 Schema 分析，包括数据类型选择、范式评估和改进建议：${tableList}` },
|
||||
]
|
||||
: [
|
||||
{ label: '📝 生成 SQL', prompt: '请根据当前数据库表结构生成一条查询语句：' },
|
||||
{ label: '🔍 解释 SQL', prompt: '请解释以下 SQL 语句的执行逻辑：\n```sql\n\n```' },
|
||||
{ label: '⚡ 优化建议', prompt: '请分析以下 SQL 语句的性能并给出优化建议：\n```sql\n\n```' },
|
||||
{ label: '🏗️ Schema 分析', prompt: '请分析当前数据库的表结构并给出优化建议。' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="ai-chat-welcome" style={{ padding: '30px 20px', alignItems: 'flex-start', textAlign: 'left' }}>
|
||||
<div style={{ color: overlayTheme.titleText, fontSize: 16, fontWeight: 600, marginBottom: 8 }}>
|
||||
<RobotOutlined style={{ marginRight: 8, color: overlayTheme.iconColor }} />
|
||||
你好，我是 GoNavi AI
|
||||
</div>
|
||||
<div className="welcome-desc" style={{ color: mutedColor, fontSize: 13, lineHeight: 1.6, marginBottom: 20 }}>
|
||||
{hasContext
|
||||
? `已自动关联 ${contextTableNames.length} 张表结构，点击下方按钮快速开始分析。`
|
||||
: '我是你的智能数据库助手。我可以帮你生成 SQL 查询、分析表结构、解释执行逻辑以及优化数据库性能。'}
|
||||
</div>
|
||||
<div className="quick-actions">
|
||||
{quickActions.map(action => (
|
||||
<div
|
||||
key={action.label}
|
||||
className="quick-action-btn"
|
||||
style={{
|
||||
background: quickActionBg,
|
||||
borderColor: quickActionBorder,
|
||||
color: textColor,
|
||||
}}
|
||||
onClick={() => onQuickAction(action.prompt)}
|
||||
>
|
||||
{action.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
127
frontend/src/components/ai/AIHistoryDrawer.tsx
Normal file
127
frontend/src/components/ai/AIHistoryDrawer.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Drawer, Button, Tooltip, Input } from 'antd';
|
||||
import { MenuFoldOutlined, PlusOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
|
||||
import { useStore } from '../../store';
|
||||
|
||||
interface AIHistoryDrawerProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
bgColor?: string;
|
||||
darkMode: boolean;
|
||||
textColor: string;
|
||||
mutedColor: string;
|
||||
borderColor: string;
|
||||
onCreateNew: () => void;
|
||||
sessionId: string;
|
||||
}
|
||||
|
||||
export const AIHistoryDrawer: React.FC<AIHistoryDrawerProps> = ({
|
||||
open, onClose, bgColor, darkMode, textColor, mutedColor, borderColor, onCreateNew, sessionId
|
||||
}) => {
|
||||
const aiChatSessions = useStore(state => state.aiChatSessions);
|
||||
const setAIActiveSessionId = useStore(state => state.setAIActiveSessionId);
|
||||
const deleteAISession = useStore(state => state.deleteAISession);
|
||||
|
||||
// 阶段4: 历史记录搜索
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
const filteredSessions = aiChatSessions.filter(s =>
|
||||
!searchText || (s.title && s.title.toLowerCase().includes(searchText.toLowerCase()))
|
||||
);
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
placement="left"
|
||||
closable={false}
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
getContainer={false}
|
||||
style={{ position: 'absolute', background: bgColor || (darkMode ? '#1e1e1e' : '#f8f9fa') }}
|
||||
width={260}
|
||||
bodyStyle={{ padding: 0, display: 'flex', flexDirection: 'column' }}
|
||||
>
|
||||
{/* 侧拉面板头部 */}
|
||||
<div style={{ padding: '16px 16px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<span style={{ fontSize: 14, fontWeight: 600, color: textColor }}>对话历史</span>
|
||||
<Tooltip title="收起">
|
||||
<Button type="text" size="small" icon={<MenuFoldOutlined />} onClick={onClose} style={{ color: mutedColor }} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
{/* 新建对话按钮 */}
|
||||
<div style={{ padding: '0 12px 12px' }}>
|
||||
<Button
|
||||
type="dashed"
|
||||
block
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => { onCreateNew(); onClose(); }}
|
||||
style={{ borderColor: borderColor, color: textColor, background: 'transparent' }}
|
||||
>
|
||||
开启新对话
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 列表搜索 */}
|
||||
<div style={{ padding: '0 12px 12px' }}>
|
||||
<Input
|
||||
placeholder="搜索历史记录..."
|
||||
prefix={<SearchOutlined style={{ color: mutedColor }} />}
|
||||
value={searchText}
|
||||
onChange={e => setSearchText(e.target.value)}
|
||||
variant="filled"
|
||||
size="small"
|
||||
style={{ background: darkMode ? 'rgba(255,255,255,0.04)' : 'transparent', color: textColor }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 列表容器 */}
|
||||
<div style={{ flex: 1, overflowY: 'auto', padding: '0 10px 16px' }} className="ai-history-list">
|
||||
{filteredSessions.length === 0 ? (
|
||||
<div style={{ padding: '30px 0', textAlign: 'center', color: mutedColor, fontSize: 12 }}>暂无匹配的对话记录</div>
|
||||
) : (
|
||||
filteredSessions.map(session => (
|
||||
<div
|
||||
key={session.id}
|
||||
className={`ai-history-item ${sessionId === session.id ? 'active' : ''}`}
|
||||
onClick={() => { 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',
|
||||
}}
|
||||
>
|
||||
<div style={{ overflow: 'hidden', flex: 1, paddingRight: 8 }}>
|
||||
<div style={{ fontSize: 13, color: textColor, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontWeight: sessionId === session.id ? 600 : 'normal' }}>
|
||||
{session.title || '新对话'}
|
||||
</div>
|
||||
<div style={{ fontSize: 11, color: mutedColor, marginTop: 4 }}>
|
||||
{new Date(session.updatedAt).toLocaleString(undefined, { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
|
||||
</div>
|
||||
</div>
|
||||
<Tooltip title="删除">
|
||||
<Button
|
||||
className="ai-history-delete-btn"
|
||||
type="text"
|
||||
size="small"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
deleteAISession(session.id);
|
||||
}}
|
||||
style={{ display: sessionId === session.id ? 'inline-flex' : undefined }}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
714
frontend/src/components/ai/AIMessageBubble.tsx
Normal file
714
frontend/src/components/ai/AIMessageBubble.tsx
Normal file
@@ -0,0 +1,714 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Tooltip, message } from 'antd';
|
||||
import { UserOutlined, RobotOutlined, EditOutlined, ReloadOutlined, DeleteOutlined, CheckOutlined, CopyOutlined, PlayCircleOutlined, ApiOutlined, LoadingOutlined, CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import mermaid from 'mermaid';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { vscDarkPlus, vs } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import { AIChatMessage, AIToolCall } from '../../types';
|
||||
import type { OverlayWorkbenchTheme } from '../../utils/overlayWorkbenchTheme';
|
||||
|
||||
// 🔧 性能优化：将 ReactMarkdown 包装为 Memo 组件并提取固定的 plugins
|
||||
const remarkPlugins = [remarkGfm];
|
||||
|
||||
const MemoizedMarkdown = React.memo(({
|
||||
content,
|
||||
darkMode,
|
||||
overlayTheme,
|
||||
activeConnectionConfig,
|
||||
activeConnectionId,
|
||||
activeDbName
|
||||
}: {
|
||||
content: string;
|
||||
darkMode: boolean;
|
||||
overlayTheme: OverlayWorkbenchTheme;
|
||||
activeConnectionConfig?: any;
|
||||
activeConnectionId?: string;
|
||||
activeDbName?: string;
|
||||
}) => {
|
||||
// 缓存 components 对象，避免每次渲染都生成新的函数引用击穿内部子组件的 memo
|
||||
const components = React.useMemo(() => ({
|
||||
code({ node, inline, className, children, ...props }: any) {
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
if (!inline && match && match[1] === 'mermaid') {
|
||||
return <MermaidRenderer chart={String(children).replace(/\n$/, '')} darkMode={darkMode} />;
|
||||
}
|
||||
return !inline && match ? (
|
||||
<AIBlockHashRender match={match} darkMode={darkMode} overlayTheme={overlayTheme} children={children} activeConnectionConfig={activeConnectionConfig} activeConnectionId={activeConnectionId} activeDbName={activeDbName} />
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
}), [darkMode, overlayTheme, activeConnectionConfig, activeConnectionId, activeDbName]);
|
||||
|
||||
return (
|
||||
<ReactMarkdown remarkPlugins={remarkPlugins} components={components}>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
);
|
||||
});
|
||||
|
||||
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 (
|
||||
<div style={{
|
||||
background: darkMode ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.02)',
|
||||
borderRadius: 6,
|
||||
padding: '6px 10px',
|
||||
border: `1px solid ${darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'}`,
|
||||
marginTop: 8,
|
||||
width: '100%'
|
||||
}}>
|
||||
<div
|
||||
style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', gap: 6, fontSize: 12, color: overlayTheme.mutedText }}
|
||||
onClick={() => setToolExpanded(!toolExpanded)}
|
||||
>
|
||||
{toolExpanded ? <CaretDownOutlined /> : <CaretRightOutlined />}
|
||||
<ApiOutlined style={{ color: '#1677ff' }} />
|
||||
<span>探针执行结果 (<span style={{ fontFamily: 'monospace', color: overlayTheme.iconColor }}>{resultMsg.tool_name || 'unknown'}</span>)</span>
|
||||
<span style={{ fontSize: 11, marginLeft: 8, opacity: 0.6 }}>{charCount > 0 ? `${charCount} 个字符` : '无数据'}</span>
|
||||
</div>
|
||||
{toolExpanded && (
|
||||
<div style={{ marginTop: 8, fontSize: 12, color: overlayTheme.mutedText, fontFamily: 'monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-all', maxHeight: 300, overflowY: 'auto', background: darkMode ? 'rgba(0,0,0,0.2)' : 'rgba(0,0,0,0.03)', padding: 8, borderRadius: 6 }}>
|
||||
{resultMsg.content}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const MermaidRenderer = ({ chart, darkMode }: { chart: string, darkMode: boolean }) => {
|
||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (containerRef.current) {
|
||||
try {
|
||||
mermaid.initialize({ startOnLoad: false, theme: darkMode ? 'dark' : 'default' });
|
||||
const id = `mermaid-${Math.random().toString(36).substring(2)}`;
|
||||
(async () => {
|
||||
const result: any = await mermaid.render(id, chart);
|
||||
if (containerRef.current) {
|
||||
containerRef.current.innerHTML = result.svg || result;
|
||||
}
|
||||
})().catch((e: any) => {
|
||||
if (containerRef.current) {
|
||||
containerRef.current.innerHTML = `<div style="color:#ef4444; padding:12px; background:rgba(239,68,68,0.1); border-radius:6px; font-size:12px">Mermaid 解析失败: ${e.message}</div>`;
|
||||
}
|
||||
});
|
||||
} catch (e: any) {
|
||||
if (containerRef.current) {
|
||||
containerRef.current.innerHTML = `<div style="color:#ef4444; padding:12px; background:rgba(239,68,68,0.1); border-radius:6px; font-size:12px">Mermaid 渲染异常: ${e.message}</div>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [chart, darkMode]);
|
||||
|
||||
return <div ref={containerRef} className="ai-mermaid-container" style={{ margin: '16px 0', display: 'flex', justifyContent: 'flex-start', overflowX: 'auto' }} />;
|
||||
};
|
||||
|
||||
const CodeCopyBtn = ({ text }: { text: string }) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
return (
|
||||
<span
|
||||
className="ai-code-copy-btn"
|
||||
onClick={() => {
|
||||
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 ? <CheckOutlined style={{ color: '#52c41a' }} /> : <CopyOutlined />}
|
||||
<span style={{ marginLeft: 4 }}>{copied ? '已复制' : '复制代码'}</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
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 (
|
||||
<div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
|
||||
<Tooltip title="将该段 SQL 注入查询工作区（可快捷修改或执行）">
|
||||
<span
|
||||
className="ai-code-run-btn"
|
||||
onClick={() => {
|
||||
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'; }}
|
||||
>
|
||||
<PlayCircleOutlined />
|
||||
<span style={{ marginLeft: 4 }}>插入</span>
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip title="立即执行（受 AI 安全策略管控）">
|
||||
<span
|
||||
className="ai-code-run-btn"
|
||||
onClick={handleExecute}
|
||||
style={{
|
||||
cursor: 'pointer', display: 'flex', alignItems: 'center',
|
||||
opacity: 0.6, transition: 'opacity 0.2s', padding: '0 4px', color: '#1677ff'
|
||||
}}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.opacity = '1'; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.6'; }}
|
||||
>
|
||||
<PlayCircleOutlined />
|
||||
<span style={{ marginLeft: 4 }}>执行</span>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 阶段2: 代码块体验升级 (折叠展开、行号显示、内联SQL预览)
|
||||
const AIBlockHashRender = ({ match, darkMode, overlayTheme, children, activeConnectionConfig, activeConnectionId, activeDbName }: any) => {
|
||||
const codeText = String(children).replace(/\n$/, '');
|
||||
// 将 @context 注释行从显示文本中剔除，用户无需看到内部元数据
|
||||
const displayText = codeText.replace(/^--\s*@context\s+.*\n?/gm, '').trim();
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [previewData, setPreviewData] = useState<any[] | null>(null);
|
||||
const [previewCols, setPreviewCols] = useState<string[]>([]);
|
||||
const [previewLoading, setPreviewLoading] = useState(false);
|
||||
const [previewError, setPreviewError] = useState('');
|
||||
const [previewExpanded, setPreviewExpanded] = useState(false);
|
||||
|
||||
const MAX_HEIGHT = 300;
|
||||
const isLongCode = displayText.split('\n').length > 15;
|
||||
const isSql = match[1] === 'sql';
|
||||
const isSelectQuery = isSql && /^\s*(SELECT|SHOW|DESCRIBE|DESC|EXPLAIN)\b/i.test(displayText.trim());
|
||||
|
||||
const handleInlineExecute = async () => {
|
||||
if (!activeConnectionConfig || previewLoading) return;
|
||||
setPreviewLoading(true);
|
||||
setPreviewError('');
|
||||
setPreviewData(null);
|
||||
try {
|
||||
const { DBQuery } = await import('../../../wailsjs/go/app/App');
|
||||
const res = await DBQuery(activeConnectionConfig, activeDbName || '', displayText + ' LIMIT 50');
|
||||
if (res.success && Array.isArray(res.data)) {
|
||||
const rows = res.data as any[];
|
||||
const cols = rows.length > 0 ? Object.keys(rows[0]) : [];
|
||||
setPreviewCols(cols);
|
||||
setPreviewData(rows.slice(0, 20));
|
||||
setPreviewExpanded(true);
|
||||
} else {
|
||||
setPreviewError(res.message || '查询无结果');
|
||||
}
|
||||
} catch (err: any) {
|
||||
setPreviewError(err?.message || '执行失败');
|
||||
} finally {
|
||||
setPreviewLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ai-code-block-container" style={{ margin: '12px 0', border: overlayTheme.sectionBorder, borderRadius: 6, overflow: 'hidden' }}>
|
||||
<div className="ai-code-header" style={{
|
||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||
padding: '6px 12px', background: darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
|
||||
fontSize: 12, color: overlayTheme.mutedText
|
||||
}}>
|
||||
<span style={{ fontFamily: 'monospace' }}>{match[1]}</span>
|
||||
<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
|
||||
{isSql && <CodeRunBtn text={codeText} connectionId={activeConnectionId} dbName={activeDbName} />}
|
||||
{isSelectQuery && activeConnectionConfig && (
|
||||
<Tooltip title="在聊天内预览查询结果（最多20行）">
|
||||
<span
|
||||
onClick={handleInlineExecute}
|
||||
style={{
|
||||
cursor: previewLoading ? 'wait' : 'pointer', display: 'flex', alignItems: 'center',
|
||||
opacity: previewLoading ? 1 : 0.6, transition: 'opacity 0.2s', padding: '0 4px', color: '#faad14'
|
||||
}}
|
||||
onMouseEnter={(e) => { if (!previewLoading) e.currentTarget.style.opacity = '1'; }}
|
||||
onMouseLeave={(e) => { if (!previewLoading) e.currentTarget.style.opacity = '0.6'; }}
|
||||
>
|
||||
{previewLoading ? '⏳' : '👁'}
|
||||
<span style={{ marginLeft: 4 }}>{previewLoading ? '执行中...' : '预览'}</span>
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
<CodeCopyBtn text={displayText} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ position: 'relative' }}>
|
||||
<SyntaxHighlighter
|
||||
style={darkMode ? vscDarkPlus as any : vs as any}
|
||||
language={match[1]}
|
||||
PreTag="div"
|
||||
showLineNumbers={true}
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
borderRadius: 0,
|
||||
background: darkMode ? 'rgba(0,0,0,0.25)' : 'rgba(0,0,0,0.02)',
|
||||
maxHeight: expanded ? 'none' : (isLongCode ? MAX_HEIGHT : 'none'),
|
||||
overflowY: expanded ? 'auto' : 'hidden',
|
||||
fontSize: '14px',
|
||||
lineHeight: 1.6
|
||||
}}
|
||||
codeTagProps={{
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Menlo, Monaco, Consolas, "Courier New", monospace'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{displayText}
|
||||
</SyntaxHighlighter>
|
||||
|
||||
{!expanded && isLongCode && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: 0, left: 0, right: 0,
|
||||
height: 60,
|
||||
background: `linear-gradient(to bottom, transparent, ${darkMode ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.9)'})`,
|
||||
display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
|
||||
paddingBottom: 8, cursor: 'pointer'
|
||||
}}
|
||||
onClick={() => setExpanded(true)}
|
||||
>
|
||||
<span style={{ fontSize: 12, color: overlayTheme.iconColor, background: darkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)', padding: '2px 8px', borderRadius: 12 }}>
|
||||
展开全部代码
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{expanded && isLongCode && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex', justifyContent: 'center', padding: '6px 0',
|
||||
background: darkMode ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.02)', cursor: 'pointer',
|
||||
borderTop: `1px solid ${darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'}`
|
||||
}}
|
||||
onClick={() => setExpanded(false)}
|
||||
>
|
||||
<span style={{ fontSize: 12, color: overlayTheme.iconColor }}>收起代码</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Inline SQL Preview Results */}
|
||||
{previewError && (
|
||||
<div style={{ padding: '8px 12px', fontSize: 12, color: '#ef4444', background: darkMode ? 'rgba(239,68,68,0.1)' : 'rgba(239,68,68,0.05)', borderTop: `1px solid ${darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'}` }}>
|
||||
❌ {previewError}
|
||||
</div>
|
||||
)}
|
||||
{previewExpanded && previewData && previewData.length > 0 && (
|
||||
<div style={{ borderTop: `1px solid ${darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'}` }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 12px', background: darkMode ? 'rgba(250,173,20,0.08)' : 'rgba(250,173,20,0.05)' }}>
|
||||
<span style={{ fontSize: 11, color: overlayTheme.mutedText }}>📊 预览结果（{previewData.length} 行 × {previewCols.length} 列）</span>
|
||||
<span style={{ fontSize: 11, color: overlayTheme.mutedText, cursor: 'pointer' }} onClick={() => setPreviewExpanded(false)}>收起 ▴</span>
|
||||
</div>
|
||||
<div style={{ overflowX: 'auto', maxHeight: 200, overflowY: 'auto' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 11, fontFamily: 'monospace' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
{previewCols.map(col => (
|
||||
<th key={col} style={{ padding: '4px 8px', textAlign: 'left', background: darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)', color: overlayTheme.titleText, fontWeight: 600, whiteSpace: 'nowrap', borderBottom: `1px solid ${darkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)'}` }}>
|
||||
{col}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{previewData.map((row, ri) => (
|
||||
<tr key={ri}>
|
||||
{previewCols.map(col => (
|
||||
<td key={col} style={{ padding: '3px 8px', color: overlayTheme.mutedText, whiteSpace: 'nowrap', borderBottom: `1px solid ${darkMode ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.03)'}`, maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
{row[col] === null ? <span style={{ color: '#999', fontStyle: 'italic' }}>NULL</span> : String(row[col])}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!previewExpanded && previewData && previewData.length > 0 && (
|
||||
<div
|
||||
style={{ padding: '4px 12px', cursor: 'pointer', fontSize: 11, color: overlayTheme.mutedText, background: darkMode ? 'rgba(250,173,20,0.05)' : 'rgba(250,173,20,0.03)', borderTop: `1px solid ${darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)'}` }}
|
||||
onClick={() => setPreviewExpanded(true)}
|
||||
>
|
||||
📊 查看结果（{previewData.length} 行）▾
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 可折叠思考过程组件
|
||||
const ThinkingBlock: React.FC<{ displayThinking: string; totalLen: number; isTyping: boolean; isGlobalLoading: boolean; darkMode: boolean; overlayTheme: any; hasContent: boolean }> = ({ displayThinking, totalLen, isTyping, isGlobalLoading, darkMode, overlayTheme, hasContent }) => {
|
||||
// 如果整体在loading，且尚未吐出content，我们认为真正的思考还在进行；如果吐出content了，思考框就算告一段落
|
||||
const isActivelyThinking = isGlobalLoading && !hasContent;
|
||||
const [expanded, setExpanded] = useState(isActivelyThinking);
|
||||
const contentRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
React.useEffect(() => { if (isActivelyThinking) setExpanded(true); }, [isActivelyThinking]);
|
||||
|
||||
// 断开连接或思考结束时，若已有内容且不再产生新内容则默认收起
|
||||
React.useEffect(() => {
|
||||
if (!isGlobalLoading) setExpanded(false);
|
||||
}, [isGlobalLoading]);
|
||||
|
||||
// 自动滚动到思考内容底部
|
||||
React.useEffect(() => {
|
||||
if (expanded && isTyping && contentRef.current) {
|
||||
contentRef.current.scrollTop = contentRef.current.scrollHeight;
|
||||
}
|
||||
}, [displayThinking, expanded, isTyping]);
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
marginBottom: hasContent ? 8 : 0,
|
||||
borderRadius: 6,
|
||||
border: `1px solid ${darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'}`,
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<div
|
||||
onClick={() => 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',
|
||||
}}
|
||||
>
|
||||
<span style={{ transition: 'transform 0.2s', transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)', fontSize: 10 }}>▶</span>
|
||||
<span>💭 思考过程</span>
|
||||
{isActivelyThinking && <span style={{ fontSize: 10, color: '#8b5cf6', animation: 'pulse 1.5s ease-in-out infinite' }}>思考中...</span>}
|
||||
{!isActivelyThinking && <span style={{ fontSize: 10, opacity: 0.5 }}>({displayThinking.length} 字)</span>}
|
||||
</div>
|
||||
<div className={`ai-expand-transition ${expanded ? 'expanded' : 'collapsed'}`}>
|
||||
<div ref={contentRef} style={{
|
||||
padding: expanded ? '8px 12px' : '0 12px',
|
||||
borderLeft: '3px solid #8b5cf6',
|
||||
margin: '0 8px 8px',
|
||||
fontSize: 12, lineHeight: 1.7,
|
||||
color: overlayTheme.mutedText,
|
||||
fontStyle: 'italic',
|
||||
whiteSpace: 'pre-wrap', wordBreak: 'break-word',
|
||||
maxHeight: 400, overflowY: 'auto',
|
||||
}}>
|
||||
{displayThinking}
|
||||
{isTyping && <span className="ai-blinking-cursor" style={{ background: '#8b5cf6', marginLeft: 4, width: 6, height: 12, display: 'inline-block', verticalAlign: 'middle', opacity: 0.8 }} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 工具调用进度面板聚合展示组件
|
||||
const AIToolCallingBlock: React.FC<{ tool_calls: AIToolCall[]; loading: boolean; allMessages: AIChatMessage[]; darkMode: boolean; overlayTheme: any; hasContent: boolean }> = ({ tool_calls, loading, allMessages, darkMode, overlayTheme, hasContent }) => {
|
||||
const totalCalls = tool_calls.length;
|
||||
const allDone = tool_calls.every(tc => allMessages?.find(m => m.role === 'tool' && m.tool_call_id === tc.id));
|
||||
const [expanded, setExpanded] = useState(!allDone && loading);
|
||||
|
||||
// 断开连接或执行完毕时，若已完成则默认收起
|
||||
React.useEffect(() => {
|
||||
if (allDone || !loading) setExpanded(false);
|
||||
}, [allDone, loading]);
|
||||
|
||||
// 显示友好的人类可读动作名
|
||||
const getHumanActionName = (fname: string) => {
|
||||
if (fname === 'get_connections') return '获取可用连接信息';
|
||||
if (fname === 'get_databases') return '扫描数据库列表';
|
||||
if (fname === 'get_tables') return '分析表结构信息';
|
||||
return fname;
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
background: darkMode ? 'rgba(0,0,0,0.15)' : 'rgba(0,0,0,0.025)',
|
||||
borderRadius: 8, fontSize: 12, overflow: 'hidden',
|
||||
border: `1px solid ${darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'}`,
|
||||
marginTop: hasContent ? 12 : 0,
|
||||
display: 'flex', flexDirection: 'column',
|
||||
}}>
|
||||
<div
|
||||
onClick={() => 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)',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, color: overlayTheme.titleText, fontWeight: 500 }}>
|
||||
{!allDone && loading ? (
|
||||
<div className="ai-spinning-ring" />
|
||||
) : (
|
||||
<CheckOutlined style={{ color: '#10b981' }} />
|
||||
)}
|
||||
<span>{!allDone && loading ? '正在执行数据探针...' : `数据探针执行完毕 (${totalCalls} 项)`}</span>
|
||||
</div>
|
||||
<span style={{ transition: 'transform 0.2s', transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)', fontSize: 10, color: overlayTheme.mutedText }}>▶</span>
|
||||
</div>
|
||||
<div className={`ai-expand-transition ${expanded ? 'expanded' : 'collapsed'}`}>
|
||||
<div style={{ padding: expanded ? '4px 12px 12px' : '0 12px' }}>
|
||||
{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 (
|
||||
<div key={tc.id} style={{
|
||||
display: 'flex', flexDirection: 'column', gap: 4,
|
||||
marginTop: 6, paddingLeft: 8,
|
||||
borderLeft: `2px solid ${isDone ? '#10b981' : (loading ? '#1677ff' : overlayTheme.shellBorder)}`,
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
{isDone
|
||||
? <CheckOutlined style={{ color: '#10b981', fontSize: 11 }} />
|
||||
: (loading ? <div className="ai-spinning-ring" style={{ width: 10, height: 10, borderWidth: 1.5 }} /> : <ApiOutlined style={{ color: overlayTheme.mutedText, fontSize: 11 }} />)
|
||||
}
|
||||
<span style={{ color: isDone ? overlayTheme.mutedText : overlayTheme.titleText }}>{actionName}</span>
|
||||
</div>
|
||||
{resultMsg && <AIToolResultItem resultMsg={resultMsg} darkMode={darkMode} overlayTheme={overlayTheme} />}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const AIMessageBubble: React.FC<AIMessageBubbleProps> = React.memo(({ msg, darkMode, overlayTheme, textColor, onEdit, onRetry, onDelete, activeConnectionId, activeConnectionConfig, activeDbName, allMessages }) => {
|
||||
const [isCopied, setIsCopied] = useState(false);
|
||||
const isUser = msg.role === 'user';
|
||||
|
||||
const displayContent = msg.content;
|
||||
const isTypingThinking = !!(msg.loading && msg.phase === 'thinking');
|
||||
|
||||
if (msg.role === 'tool') return null;
|
||||
|
||||
// 如果是纯空壳的加载状态（connecting，或还在思考/工具阶段但还没吐出一个字的 content）
|
||||
const isWaitState = msg.phase === 'connecting' ||
|
||||
(msg.loading && !msg.content && (msg.phase === 'thinking' || msg.phase === 'tool_calling'));
|
||||
|
||||
if (isWaitState) {
|
||||
return (
|
||||
<div className="ai-ide-message" style={{ borderBottom: 'none', padding: '8px 16px' }}>
|
||||
<div style={{
|
||||
background: darkMode ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.02)',
|
||||
borderRadius: 12, padding: '14px 16px',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, color: overlayTheme.mutedText }}>
|
||||
<div className="ai-wave-pulse">
|
||||
<span /> <span /> <span />
|
||||
</div>
|
||||
<span style={{ fontSize: 13, opacity: 0.8 }}>{msg.content || '正在建立连接'}...</span>
|
||||
</div>
|
||||
|
||||
{/* 即使在波纹过渡态，如果有 thinking / tool_calls 也要显示出来，只是把它们压在波纹下面 */}
|
||||
<div style={{ marginTop: msg.thinking || (msg.tool_calls && msg.tool_calls.length > 0) ? 12 : 0 }}>
|
||||
{!isUser && msg.thinking && (
|
||||
<ThinkingBlock
|
||||
displayThinking={msg.thinking}
|
||||
totalLen={msg.thinking.length}
|
||||
isTyping={isTypingThinking}
|
||||
isGlobalLoading={!!msg.loading}
|
||||
darkMode={darkMode}
|
||||
overlayTheme={overlayTheme}
|
||||
hasContent={false}
|
||||
/>
|
||||
)}
|
||||
{!isUser && msg.tool_calls && msg.tool_calls.length > 0 && (
|
||||
<AIToolCallingBlock
|
||||
tool_calls={msg.tool_calls}
|
||||
loading={!!msg.loading}
|
||||
allMessages={allMessages || []}
|
||||
darkMode={darkMode}
|
||||
overlayTheme={overlayTheme}
|
||||
hasContent={false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ai-ide-message" style={{ borderBottom: 'none', padding: '8px 16px' }}>
|
||||
<div style={{
|
||||
background: isUser ? (darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)') : (darkMode ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.02)'),
|
||||
borderRadius: 12,
|
||||
padding: '14px 16px',
|
||||
}}>
|
||||
<div className="ai-ide-message-header" style={{
|
||||
color: isUser ? overlayTheme.mutedText : overlayTheme.titleText,
|
||||
marginBottom: isUser ? 6 : 10,
|
||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center'
|
||||
}}>
|
||||
<div>
|
||||
{isUser
|
||||
? <><UserOutlined /> <span>You</span></>
|
||||
: <><RobotOutlined style={{ color: overlayTheme.iconColor }} /> <span>GoNavi AI</span></>}
|
||||
</div>
|
||||
{/* 气泡操作栏 */}
|
||||
<div className="ai-message-actions" style={{ display: 'flex', gap: 8, opacity: 0, transition: 'opacity 0.2s', padding: '0 4px' }}>
|
||||
<Tooltip title={isCopied ? "已复制" : "复制全文"}>
|
||||
{isCopied ? (
|
||||
<CheckOutlined className="ai-action-icon" style={{ color: '#10b981' }} />
|
||||
) : (
|
||||
<CopyOutlined className="ai-action-icon" onClick={() => {
|
||||
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} />
|
||||
)}
|
||||
</Tooltip>
|
||||
{isUser ? (
|
||||
<Tooltip title="编辑此条消息（移除其后所有记录并重新发送）">
|
||||
<EditOutlined className="ai-action-icon" onClick={() => onEdit(msg)} style={{ cursor: 'pointer', color: overlayTheme.mutedText }} onMouseEnter={e => e.currentTarget.style.color = textColor} onMouseLeave={e => e.currentTarget.style.color = overlayTheme.mutedText} />
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Tooltip title="重新生成（移除此条并触发上次用户输入重发）">
|
||||
<ReloadOutlined className="ai-action-icon" onClick={() => onRetry(msg)} style={{ cursor: 'pointer', color: overlayTheme.mutedText }} onMouseEnter={e => e.currentTarget.style.color = textColor} onMouseLeave={e => e.currentTarget.style.color = overlayTheme.mutedText} />
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip title="删除单条消息">
|
||||
<DeleteOutlined className="ai-action-icon" onClick={() => onDelete(msg.id)} style={{ cursor: 'pointer', color: overlayTheme.mutedText }} onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = overlayTheme.mutedText} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ai-ide-message-content ai-markdown-content" style={{ color: textColor }}>
|
||||
{msg.images && msg.images.length > 0 && (
|
||||
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 12 }}>
|
||||
{msg.images.map((img, i) => (
|
||||
<img key={i} src={img} alt={`Attached ${i}`} style={{ maxWidth: 200, maxHeight: 200, borderRadius: 8, objectFit: 'contain', border: overlayTheme.shellBorder }} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* 可折叠思考过程 */}
|
||||
{!isUser && msg.thinking && (
|
||||
<ThinkingBlock
|
||||
displayThinking={msg.thinking}
|
||||
totalLen={msg.thinking.length}
|
||||
isTyping={isTypingThinking}
|
||||
isGlobalLoading={!!msg.loading}
|
||||
darkMode={darkMode}
|
||||
overlayTheme={overlayTheme}
|
||||
hasContent={!!msg.content}
|
||||
/>
|
||||
)}
|
||||
{isUser ? (
|
||||
<div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: 13 }}>{msg.content}</div>
|
||||
) : (
|
||||
<MemoizedMarkdown
|
||||
content={displayContent}
|
||||
darkMode={darkMode}
|
||||
overlayTheme={overlayTheme}
|
||||
activeConnectionConfig={activeConnectionConfig}
|
||||
activeConnectionId={activeConnectionId}
|
||||
activeDbName={activeDbName}
|
||||
/>
|
||||
)}
|
||||
{/* 错误原文复制按钮 */}
|
||||
{!isUser && msg.rawError && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(msg.rawError || '');
|
||||
const btn = document.getElementById(`raw-err-btn-${msg.id}`);
|
||||
if (btn) { btn.textContent = '✅ 已复制'; setTimeout(() => { btn.textContent = '📋 复制报错原文'; }, 1500); }
|
||||
}}
|
||||
id={`raw-err-btn-${msg.id}`}
|
||||
style={{
|
||||
fontSize: 12, padding: '3px 10px', borderRadius: 6, cursor: 'pointer',
|
||||
border: `1px solid ${darkMode ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)'}`,
|
||||
background: darkMode ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.02)',
|
||||
color: overlayTheme.mutedText, transition: 'all 0.15s ease',
|
||||
}}
|
||||
>
|
||||
📋 复制报错原文
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{/* 工具调用进度展示 */}
|
||||
{!isUser && msg.tool_calls && msg.tool_calls.length > 0 && (
|
||||
<AIToolCallingBlock
|
||||
tool_calls={msg.tool_calls}
|
||||
loading={!!msg.loading}
|
||||
allMessages={allMessages || []}
|
||||
darkMode={darkMode}
|
||||
overlayTheme={overlayTheme}
|
||||
hasContent={!!msg.content}
|
||||
/>
|
||||
)}
|
||||
{msg.loading && msg.phase !== 'tool_calling' && msg.content && (
|
||||
<span className="ai-blinking-cursor" style={{ background: overlayTheme.iconColor }} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user