From 72d6f9ab660b5bbf6a791f4d338a88f989ad55ec Mon Sep 17 00:00:00 2001
From: QihuAI Design <ai@qihuyun.com>
Date: Mon, 20 Jul 2026 09:24:40 +0800
Subject: [PATCH] Phase 4.1+: mermaid diagrams + YAML workflow buttons + agents
 API (v2026.07.19.11)

---
 VERSION                               |    2 +-
 frontend/src/api/index.ts             |    3 +
 frontend/src/pages/admin/Agents.tsx   | 1098 +++++++-
 frontend/src/pages/front/ChatPage.css | 3092 +++++++++++-----------
 frontend/src/pages/front/ChatPage.tsx | 3470 +++++++++++++------------
 5 files changed, 4324 insertions(+), 3341 deletions(-)

diff --git a/VERSION b/VERSION
index e0a5db2..95300b3 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-v2026.07.19.10
+v2026.07.19.11
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 412c786..fbaadf5 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -894,6 +894,9 @@ export const adminAPI = {
   // Phase 3.3: 多 Agent 编排图 (orchestration)
   getAgentOrchestration: (id: string) => get<any>(`/admin/agents/${id}/orchestration`),
   setAgentOrchestration: (id: string, orchestration: any) => put<any>(`/admin/agents/${id}/orchestration`, { orchestration }),
+  importYamlOrch: (id: string, yaml: string) => post<any>(`/admin/agents/${id}/orchestration/yaml/import`, { yaml_text: yaml }),
+  exportYamlOrch: (id: string) => post<any>(`/admin/agents/${id}/orchestration/yaml/export`),
+  getYamlTemplates: () => get<any>('/admin/agents/orchestration/yaml/templates'),
 
   getAdminAvailableSkills: (params?: any) => {
 
diff --git a/frontend/src/pages/admin/Agents.tsx b/frontend/src/pages/admin/Agents.tsx
index b99d1d0..0a6a798 100644
--- a/frontend/src/pages/admin/Agents.tsx
+++ b/frontend/src/pages/admin/Agents.tsx
@@ -1,905 +1,1837 @@
 import React, { useState, useEffect } from 'react';
+
 import { adminAPI } from '@/api';
 
+
+
 interface Agent {
+
   id: string;
+
   name: string;
+
   type: string;
+
   source: string;
+
   publisher_id: string;
+
   publisher_name?: string;
+
   description?: string;
+
   icon?: string;
+
   tutorial?: string;
+
   price: number;
+
   is_member_free: boolean;
+
   join_promotion: boolean;
+
   status: string;
+
   rating_avg: number;
+
   review_count: number;
+
   install_count: number;
+
   skill_content?: string;
+
   agent_endpoint?: string;
+
   config?: AgentConfig;
+
   linked_skills?: LinkedSkill[];
+
   created_at?: string;
+
   updated_at?: string;
+
 }
 
+
+
 interface AgentConfig {
+
   system_prompt?: string;
+
   temperature?: number;
+
   max_tokens?: number;
+
   model_id?: string;
+
   skills?: string[];
+
   tools?: string[];
+
   memory_enabled?: boolean;
+
   reasoning_enabled?: boolean;
+
 }
 
+
+
 interface LinkedSkill {
+
   id: string;
+
   skill_name: string;
+
   state: string;
+
   version: number;
+
 }
 
+
+
 interface AgentStats {
+
   total_agents: number;
+
   published_agents: number;
+
   pending_agents: number;
+
   official_agents: number;
+
   user_agents: number;
+
   total_installs: number;
+
   average_rating: number;
+
   by_source: Record<string, number>;
+
 }
 
+
+
 interface AvailableModel {
+
   id: string;
+
   name: string;
+
   provider: string;
+
   model_type?: string;
+
 }
 
+
+
 const AGENT_TYPES = [
+
   { id: 'skill', label: '技能' },
+
   { id: 'agent', label: 'Agent' },
+
   { id: 'mcp', label: 'MCP' },
+
 ];
 
+
+
 const Agents: React.FC = () => {
+
   const [agents, setAgents] = useState<Agent[]>([]);
+
   const [total, setTotal] = useState(0);
+
   const [page, setPage] = useState(1);
+
   const [loading, setLoading] = useState(false);
+
   const [stats, setStats] = useState<AgentStats | null>(null);
 
+
+
   // Filters
+
   const [keyword, setKeyword] = useState('');
+
   const [filterStatus, setFilterStatus] = useState('');
+
   const [filterSource, setFilterSource] = useState('');
 
+
+
   // Modal
+
   const [showModal, setShowModal] = useState(false);
+
   const [editingAgent, setEditingAgent] = useState<Agent | null>(null);
+
   const [form, setForm] = useState({
+
     name: '',
+
     description: '',
+
     icon: '',
+
     price: '0',
+
     is_member_free: false,
+
     system_prompt: '',
+
     temperature: '0.7',
+
     max_tokens: '2048',
+
     model_id: '',
+
     skills: [] as string[],
+
     memory_enabled: false,
+
     reasoning_enabled: false,
+
   });
 
+
+
   // Detail drawer
+
   const [showDetail, setShowDetail] = useState(false);
+
   const [detailAgent, setDetailAgent] = useState<Agent | null>(null);
 
+
+
   // Available skills for linking
+
   const [availableSkills, setAvailableSkills] = useState<any[]>([]);
+
   const [availableModels, setAvailableModels] = useState<AvailableModel[]>([]);
+
   // Available MCP servers for tool_policy sandbox allowlist
+
   const [availableMcps, setAvailableMcps] = useState<any[]>([]);
+
   // Tool policy (sandbox) — null means disabled / no policy
+
   const [toolPolicy, setToolPolicy] = useState<any>(null);
+
   // Phase 3.3: orchestration graph editor (JSON text + error)
+
   const [orchestrationText, setOrchestrationText] = useState<string>('');
+
   const [orchestrationError, setOrchestrationError] = useState<string>('');
 
+
+
   // Toast
+
   const [toast, setToast] = useState<{ msg: string; type: 'success' | 'error' } | null>(null);
+
   const showToast = (msg: string, type: 'success' | 'error' = 'success') => {
+
     setToast({ msg, type });
+
     setTimeout(() => setToast(null), 3000);
+
   };
 
+
+
   // Load agents
+
   const loadAgents = async () => {
+
     setLoading(true);
+
     try {
+
       const params: any = { page, page_size: 15 };
+
       if (keyword) params.keyword = keyword;
+
       if (filterStatus) params.status = filterStatus;
+
       if (filterSource) params.source = filterSource;
+
       const result = await adminAPI.getAdminAgents(params) as any;
+
       const data = result.data || result;
+
       setAgents(data.items || []);
+
       setTotal(data.total || 0);
+
     } catch (e: any) {
+
       showToast(`加载失败: ${e.message || e}`, 'error');
+
     } finally {
+
       setLoading(false);
+
     }
+
   };
 
+
+
   // Load stats
+
   const loadStats = async () => {
+
     try {
+
       const result = await adminAPI.getAdminAgentsStats() as any;
+
       const data = result.data || result;
+
       setStats(data);
+
     } catch {}
+
   };
 
+
+
   // Load available skills & models
+
   const loadAvailable = async () => {
+
     try {
+
       const [skillsResult, modelsResult, mcpsResult] = await Promise.all([
+
         adminAPI.getAdminAvailableSkills({ page_size: 50 }) as any,
+
         adminAPI.getAdminAvailableModels() as any,
+
         adminAPI.getAdminMcpServers({ page_size: 50 }) as any,
+
       ]);
+
       const skills = (skillsResult.data || skillsResult).items || [];
+
       const models = (modelsResult.data || modelsResult) || [];
+
       const mcps = (mcpsResult.data || mcpsResult).items || [];
+
       setAvailableSkills(skills);
+
       setAvailableModels(models);
+
       setAvailableMcps(mcps);
+
     } catch {}
+
   };
 
+
+
   useEffect(() => {
+
     loadAgents();
+
   }, [page, keyword, filterStatus, filterSource]);
 
+
+
   useEffect(() => {
+
     loadStats();
+
   }, []);
 
+
+
   // Search
+
   const handleSearch = () => {
+
     setPage(1);
+
     loadAgents();
+
   };
 
+
+
   // Open create
+
   const openCreate = async () => {
+
     setEditingAgent(null);
+
     await loadAvailable();
+
     setForm({
+
       name: '',
+
       description: '',
+
       icon: '',
+
       price: '0',
+
       is_member_free: false,
+
       system_prompt: '你是一个智能助手。',
+
       temperature: '0.7',
+
       max_tokens: '2048',
+
       model_id: '',
+
       skills: [],
+
       memory_enabled: false,
+
       reasoning_enabled: false,
+
     });
+
     setToolPolicy(null);
+
     setOrchestrationText('');
+
     setOrchestrationError('');
+
     setShowModal(true);
+
   };
 
+
+
   // Open edit
+
   const openEdit = async (agent: Agent) => {
+
     setEditingAgent(agent);
+
     await loadAvailable();
+
     await openEditLoadPolicy(agent.id);
+
     await openEditLoadOrchestration(agent.id);
 
+
+
     const cfg = agent.config || {};
+
     setForm({
+
       name: agent.name,
+
       description: agent.description || '',
+
       icon: agent.icon || '',
+
       price: String(agent.price),
+
       is_member_free: agent.is_member_free,
+
       system_prompt: cfg.system_prompt || '',
+
       temperature: String(cfg.temperature || 0.7),
+
       max_tokens: String(cfg.max_tokens || 2048),
+
       model_id: cfg.model_id || '',
+
       skills: cfg.skills || [],
+
       memory_enabled: cfg.memory_enabled || false,
+
       reasoning_enabled: cfg.reasoning_enabled || false,
+
     });
+
     setShowModal(true);
+
   };
 
+
+
   // Fetch existing tool_policy (sandbox) for this agent
+
   const openEditLoadPolicy = async (agentId: string) => {
+
     try {
+
       const tpRes = await adminAPI.getAgentToolPolicy(agentId) as any;
+
       setToolPolicy(tpRes?.data?.tool_policy || null);
+
     } catch {
+
       setToolPolicy(null);
+
     }
+
   };
+
   // Phase 3.3: 载入已有编排图
+
   const openEditLoadOrchestration = async (agentId: string) => {
+
     try {
+
       const oRes = await adminAPI.getAgentOrchestration(agentId) as any;
+
       const og = oRes?.data?.orchestration;
+
       setOrchestrationText(og ? JSON.stringify(og, null, 2) : '');
+
       setOrchestrationError('');
+
     } catch {
+
       setOrchestrationText('');
+
     }
+
   };
+
   const openDetail = async (agent: Agent) => {
+
     setDetailAgent(agent);
+
     setShowDetail(true);
+
   };
 
+
+
   // Save agent
+
   const handleSave = async () => {
+
     if (!form.name.trim()) {
+
       showToast('Agent 名称不能为空', 'error');
+
       return;
+
     }
 
+
+
     const payload: any = {
+
       name: form.name,
+
       description: form.description,
+
       icon: form.icon || undefined,
+
       price: parseFloat(form.price) || 0,
+
       is_member_free: form.is_member_free,
+
       config: {
+
         system_prompt: form.system_prompt,
+
         temperature: parseFloat(form.temperature) || 0.7,
+
         max_tokens: parseInt(form.max_tokens) || 2048,
+
         model_id: form.model_id || undefined,
+
         skills: form.skills,
+
         memory_enabled: form.memory_enabled,
+
         reasoning_enabled: form.reasoning_enabled,
+
       },
+
     };
 
+
+
     try {
+
       if (editingAgent) {
+
         await adminAPI.updateAdminAgent(editingAgent.id, payload);
+
         // Phase 3.1: persist tool_policy sandbox (null clears it)
+
         try {
+
           await adminAPI.setAgentToolPolicy(editingAgent.id, toolPolicy);
+
           showToast('Agent 已更新');
+
         } catch (pe: any) {
+
           showToast(`Agent 已更新，但策略保存失败: ${pe.message || pe}`, 'error');
+
         }
+
       } else {
+
         await adminAPI.createAdminAgent(payload);
+
         showToast('Agent 创建成功');
+
       }
+
       setShowModal(false);
+
       loadAgents();
+
       loadStats();
+
     } catch (e: any) {
+
       showToast(`保存失败: ${e.message || e}`, 'error');
+
     }
+
   };
 
+
+
   // Toggle agent
+
   const handleToggle = async (agent: Agent) => {
+
     const isActive = agent.status === 'published';
+
     try {
+
       await adminAPI.toggleAdminAgent(agent.id, !isActive);
+
       showToast(`Agent 已${isActive ? '禁用' : '启用'}`);
+
       loadAgents();
+
       loadStats();
+
     } catch (e: any) {
+
       showToast(`操作失败: ${e.message || e}`, 'error');
+
     }
+
   };
 
+
+
   // Delete agent
+
   const handleDelete = async (agent: Agent) => {
+
     if (!confirm(`确定要删除 Agent "${agent.name}" 吗？此操作不可恢复。`)) return;
+
     try {
+
       await adminAPI.deleteAdminAgent(agent.id);
+
       showToast('Agent 已删除');
+
       loadAgents();
+
       loadStats();
+
     } catch (e: any) {
+
       showToast(`删除失败: ${e.message || e}`, 'error');
+
     }
+
   };
 
+
+
   // Toggle skill in selection
+
   const toggleSkill = (skillId: string) => {
+
     setForm(f => ({
+
       ...f,
+
       skills: f.skills.includes(skillId)
+
         ? f.skills.filter(s => s !== skillId)
+
         : [...f.skills, skillId],
+
     }));
+
   };
 
+
+
   const PAGE_SIZE = 15;
+
   const totalPages = Math.ceil(total / PAGE_SIZE);
 
+
+
   const statusColor = (status: string) => {
+
     if (status === 'published') return { bg: '#D1FAE5', color: '#10B981' };
+
     if (status === 'pending') return { bg: '#FEF3C7', color: '#F59E0B' };
+
     return { bg: '#FEE2E2', color: '#EF4444' };
+
   };
 
+
+
   return (
+
     <div className="admin-page">
+
       {/* Toast */}
+
       {toast && (
+
         <div className="toast" style={{
+
           position: 'fixed', top: 20, right: 20, zIndex: 9999,
+
           padding: '12px 20px', borderRadius: 8,
+
           background: toast.type === 'success' ? '#10B981' : '#EF4444',
+
           color: '#fff', fontSize: 14, boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+
         }}>
+
           {toast.msg}
+
         </div>
+
       )}
 
+
+
       {/* Header */}
+
       <div className="admin-page-header">
+
         <div>
+
           <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>Agent 管理</h2>
+
           <p style={{ margin: '4px 0 0', color: '#6B7280', fontSize: 13 }}>
+
             管理 AI Agent/Skill/MCP，支持配置、关联技能和模型
+
           </p>
+
         </div>
+
       </div>
 
+
+
       {/* Stats */}
+
       {stats && (
+
         <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 12, marginBottom: 20 }}>
+
           <div className="stat-card" style={{ borderLeft: '3px solid #6366F1' }}>
+
             <div className="stat-value">{stats.total_agents}</div>
+
             <div className="stat-label">Agent 总数</div>
+
           </div>
+
           <div className="stat-card" style={{ borderLeft: '3px solid #10B981' }}>
+
             <div className="stat-value">{stats.published_agents}</div>
+
             <div className="stat-label">已发布</div>
+
           </div>
+
           <div className="stat-card" style={{ borderLeft: '3px solid #F59E0B' }}>
+
             <div className="stat-value">{stats.pending_agents}</div>
+
             <div className="stat-label">待发布</div>
+
           </div>
+
           <div className="stat-card" style={{ borderLeft: '3px solid #3B82F6' }}>
+
             <div className="stat-value">{stats.total_installs.toLocaleString()}</div>
+
             <div className="stat-label">总安装量</div>
+
           </div>
+
           <div className="stat-card" style={{ borderLeft: '3px solid #8B5CF6' }}>
+
             <div className="stat-value">{stats.average_rating.toFixed(1)}</div>
+
             <div className="stat-label">平均评分</div>
+
           </div>
+
           <div className="stat-card" style={{ borderLeft: '3px solid #EC4899' }}>
+
             <div className="stat-value">{stats.official_agents} / {stats.user_agents}</div>
+
             <div className="stat-label">官方 / 用户</div>
+
           </div>
+
         </div>
+
       )}
 
+
+
       {/* Filters */}
+
       <div className="admin-filters" style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 16 }}>
+
         <input className="admin-form-input" placeholder="搜索名称、描述..."
+
           value={keyword} onChange={e => setKeyword(e.target.value)}
+
           onKeyDown={e => e.key === 'Enter' && handleSearch()}
+
           style={{ maxWidth: 280 }} />
+
         <select className="admin-form-input" value={filterStatus} onChange={e => { setFilterStatus(e.target.value); setPage(1); }}
+
           style={{ maxWidth: 140 }}>
+
           <option value="">全部状态</option>
+
           <option value="published">已发布</option>
+
           <option value="pending">待发布</option>
+
           <option value="removed">已下架</option>
+
         </select>
+
         <select className="admin-form-input" value={filterSource} onChange={e => { setFilterSource(e.target.value); setPage(1); }}
+
           style={{ maxWidth: 140 }}>
+
           <option value="">全部来源</option>
+
           <option value="official">官方</option>
+
           <option value="user">用户</option>
+
         </select>
+
         <button className="admin-btn" onClick={handleSearch}>搜索</button>
+
         {(keyword || filterStatus || filterSource) && (
+
           <button className="admin-btn" onClick={() => { setKeyword(''); setFilterStatus(''); setFilterSource(''); setPage(1); }}>
+
             清空
+
           </button>
+
         )}
+
       </div>
 
+
+
       {/* Table */}
+
       <div className="admin-table-wrap">
+
         <table className="admin-table">
+
           <thead>
+
             <tr>
+
               <th>智能体</th>
+
               <th>类型</th>
+
               <th>来源</th>
+
               <th>状态</th>
+
               <th>价格</th>
+
               <th>安装量</th>
+
               <th>评分</th>
+
               <th>更新时间</th>
+
               <th style={{ width: 240 }}>操作</th>
+
             </tr>
+
           </thead>
+
           <tbody>
+
             {loading ? (
+
               <tr><td colSpan={9} style={{ textAlign: 'center', padding: 40, color: '#6B7280' }}>加载中...</td></tr>
+
             ) : agents.length === 0 ? (
+
               <tr><td colSpan={9} style={{ textAlign: 'center', padding: 40, color: '#6B7280' }}>暂无 Agent</td></tr>
+
             ) : agents.map(agent => {
+
               const sc = statusColor(agent.status);
+
               return (
+
                 <tr key={agent.id}>
+
                   <td>
+
                     <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+
                       {agent.icon ? (
+
                         <img src={agent.icon} alt="" style={{ width: 32, height: 32, borderRadius: 8, objectFit: 'cover' }} />
+
                       ) : (
+
                         <div style={{ width: 32, height: 32, borderRadius: 8, background: '#EEF2FF', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16 }}>
+
                           🤖
+
                         </div>
+
                       )}
+
                       <div>
+
                         <div style={{ fontWeight: 500 }}>{agent.name}</div>
+
                         {agent.description && (
+
                           <div style={{ fontSize: 12, color: '#6B7280', maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+
                             {agent.description}
+
                           </div>
+
                         )}
+
                       </div>
+
                     </div>
+
                   </td>
+
                   <td>
+
                     <span style={{ fontSize: 12, padding: '2px 8px', borderRadius: 10, background: '#EEF2FF', color: '#6366F1' }}>
+
                       {AGENT_TYPES.find(t => t.id === agent.type)?.label || agent.type}
+
                     </span>
+
                   </td>
+
                   <td>
+
                     <span style={{ fontSize: 12, color: agent.source === 'official' ? '#10B981' : '#6B7280' }}>
+
                       {agent.source === 'official' ? '官方' : '用户'}
+
                     </span>
+
                   </td>
+
                   <td>
+
                     <span style={{ display: 'inline-block', padding: '2px 10px', borderRadius: 12, fontSize: 12, background: sc.bg, color: sc.color, fontWeight: 500 }}>
+
                       {agent.status === 'published' ? '已发布' : agent.status === 'pending' ? '待发布' : '已下架'}
+
                     </span>
+
                   </td>
+
                   <td>{agent.price === 0 ? <span style={{ color: '#10B981' }}>免费</span> : `¥${agent.price}`}</td>
+
                   <td>{agent.install_count.toLocaleString()}</td>
+
                   <td>{agent.rating_avg > 0 ? `★ ${agent.rating_avg}` : '-'}</td>
+
                   <td style={{ fontSize: 12, color: '#6B7280' }}>
+
                     {agent.updated_at ? agent.updated_at.slice(0, 16).replace('T', ' ') : '-'}
+
                   </td>
+
                   <td>
+
                     <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+
                       <button className="admin-btn small" onClick={() => openDetail(agent)}>详情</button>
+
                       <button className="admin-btn small" onClick={() => openEdit(agent)}>编辑</button>
+
                       <button
+
                         className={`admin-btn small ${agent.status === 'published' ? 'warning' : 'success'}`}
+
                         onClick={() => handleToggle(agent)}
+
                       >
+
                         {agent.status === 'published' ? '禁用' : '启用'}
+
                       </button>
+
                       <button className="admin-btn small danger" onClick={() => handleDelete(agent)}>删除</button>
+
                     </div>
+
                   </td>
+
                 </tr>
+
               );
+
             })}
+
           </tbody>
+
         </table>
+
       </div>
 
+
+
       {/* Pagination */}
+
       {totalPages > 1 && (
+
         <div className="admin-pagination">
+
           <span style={{ color: '#6B7280', fontSize: 13 }}>共 {total} 条，第 {page}/{totalPages} 页</span>
+
           <div style={{ display: 'flex', gap: 4 }}>
+
             <button className="admin-btn small" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>上一页</button>
+
             {[...Array(Math.min(5, totalPages))].map((_, i) => {
+
               const p = Math.max(1, Math.min(page - 2, totalPages - 4)) + i;
+
               return p <= totalPages && (
+
                 <button key={p} className={`admin-btn small ${p === page ? 'primary' : ''}`} onClick={() => setPage(p)}>{p}</button>
+
               );
+
             })}
+
             <button className="admin-btn small" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>下一页</button>
+
           </div>
+
         </div>
+
       )}
 
+
+
       {/* Create/Edit Modal */}
+
       {showModal && (
+
         <div className="modal-overlay" onClick={() => setShowModal(false)}>
+
           <div className="modal-content" style={{ maxWidth: 800 }} onClick={e => e.stopPropagation()}>
+
             <div className="modal-header">
+
               <h3>{editingAgent ? '编辑 Agent' : '创建 Agent'}</h3>
+
               <button className="modal-close" onClick={() => setShowModal(false)}>×</button>
+
             </div>
+
             <div className="modal-body" style={{ maxHeight: '70vh', overflowY: 'auto' }}>
+
               <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+
                 <div className="form-group">
+
                   <label className="form-label">名称 *</label>
+
                   <input className="admin-form-input" value={form.name}
+
                     onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
+
                     placeholder="例如: 智能代码审查助手" />
+
                 </div>
+
                 <div className="form-group">
+
                   <label className="form-label">图标 URL</label>
+
                   <input className="admin-form-input" value={form.icon}
+
                     onChange={e => setForm(f => ({ ...f, icon: e.target.value }))}
+
                     placeholder="https://..." />
+
                 </div>
+
                 <div className="form-group">
+
                   <label className="form-label">价格（元，0=免费）</label>
+
                   <input className="admin-form-input" type="number" value={form.price}
+
                     onChange={e => setForm(f => ({ ...f, price: e.target.value }))} />
+
                 </div>
+
                 <div className="form-group" style={{ display: 'flex', alignItems: 'center', paddingTop: 24 }}>
+
                   <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
+
                     <input type="checkbox" checked={form.is_member_free}
+
                       onChange={e => setForm(f => ({ ...f, is_member_free: e.target.checked }))} />
+
                     会员免费
+
                   </label>
+
                 </div>
+
                 <div className="form-group" style={{ gridColumn: '1 / -1' }}>
+
                   <label className="form-label">描述</label>
+
                   <textarea className="admin-form-input" rows={2} value={form.description}
+
                     onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
+
                     placeholder="描述 Agent 的功能和使用场景..." />
+
                 </div>
+
               </div>
 
+
+
               <hr style={{ border: 'none', borderTop: '1px solid #E5E7EB', margin: '16px 0' }} />
 
+
+
               <div style={{ fontWeight: 600, marginBottom: 12 }}>⚙️ Agent 配置</div>
 
+
+
               <div className="form-group" style={{ gridColumn: '1 / -1' }}>
+
                 <label className="form-label">系统提示词</label>
+
                 <textarea className="admin-form-input"
+
                   value={form.system_prompt}
+
                   onChange={e => setForm(f => ({ ...f, system_prompt: e.target.value }))}
+
                   style={{ fontFamily: 'monospace', fontSize: 13, minHeight: 120 }}
+
                   placeholder="定义 Agent 的角色、行为和能力..." />
+
               </div>
 
+
+
               <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
+
                 <div className="form-group">
+
                   <label className="form-label">模型</label>
+
                   <select className="admin-form-input" value={form.model_id}
+
                     onChange={e => setForm(f => ({ ...f, model_id: e.target.value }))}>
+
                     <option value="">默认模型</option>
+
                     {availableModels.map(m => (
+
                       <option key={m.id} value={m.id}>{m.name} ({m.provider})</option>
+
                     ))}
+
                   </select>
+
                 </div>
+
                 <div className="form-group">
+
                   <label className="form-label">温度参数</label>
+
                   <input className="admin-form-input" type="number" step="0.1" min="0" max="2"
+
                     value={form.temperature}
+
                     onChange={e => setForm(f => ({ ...f, temperature: e.target.value }))} />
+
                 </div>
+
                 <div className="form-group">
+
                   <label className="form-label">最大令牌数</label>
+
                   <input className="admin-form-input" type="number"
+
                     value={form.max_tokens}
+
                     onChange={e => setForm(f => ({ ...f, max_tokens: e.target.value }))} />
+
                 </div>
+
               </div>
 
+
+
               <div style={{ display: 'flex', gap: 16, marginBottom: 16 }}>
+
                 <label style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}>
+
                   <input type="checkbox" checked={form.memory_enabled}
+
                     onChange={e => setForm(f => ({ ...f, memory_enabled: e.target.checked }))} />
+
                   记忆能力
+
                 </label>
+
                 <label style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}>
+
                   <input type="checkbox" checked={form.reasoning_enabled}
+
                     onChange={e => setForm(f => ({ ...f, reasoning_enabled: e.target.checked }))} />
+
                   推理能力
+
                 </label>
+
               </div>
 
+
+
               {/* Linked Skills */}
+
               <div className="form-group" style={{ gridColumn: '1 / -1' }}>
+
                 <label className="form-label">关联技能（可多选）</label>
+
                 <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, maxHeight: 160, overflowY: 'auto', padding: 8, border: '1px solid #E5E7EB', borderRadius: 6 }}>
+
                   {availableSkills.length === 0 ? (
+
                     <span style={{ color: '#9CA3AF', fontSize: 13 }}>暂无技能</span>
+
                   ) : availableSkills.map(skill => (
+
                     <label key={skill.id} style={{
+
                       display: 'flex', alignItems: 'center', gap: 4, padding: '4px 10px',
+
                       borderRadius: 12, fontSize: 12, cursor: 'pointer',
+
                       background: form.skills.includes(skill.id) ? '#EEF2FF' : '#F9FAFB',
+
                       border: `1px solid ${form.skills.includes(skill.id) ? '#6366F1' : '#E5E7EB'}`,
+
                       color: form.skills.includes(skill.id) ? '#6366F1' : '#374151',
+
                     }}>
+
                       <input type="checkbox" style={{ display: 'none' }}
+
                         checked={form.skills.includes(skill.id)}
+
                         onChange={() => toggleSkill(skill.id)} />
+
                       {skill.skill_name}
+
                       {skill.state !== 'baby' && (
+
                         <span style={{ fontSize: 10, background: '#E5E7EB', padding: '1px 4px', borderRadius: 4, marginLeft: 4 }}>
+
                           {skill.state}
+
                         </span>
+
                       )}
+
                     </label>
+
                   ))}
+
                 </div>
+
                 {form.skills.length > 0 && (
+
                   <div style={{ marginTop: 6, fontSize: 12, color: '#6366F1' }}>
+
                     已选 {form.skills.length} 个技能
+
                   </div>
+
                 )}
+
               </div>
+
               {editingAgent && (
+
                 <div style={{ gridColumn: '1 / -1' }}>
+
                   <hr style={{ border: 'none', borderTop: '1px solid #E5E7EB', margin: '16px 0' }} />
+
                   <div style={{ fontWeight: 600, marginBottom: 12 }}>🛡️ 工具权限沙箱 (tool_policy)</div>
+
                   <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', marginBottom: 12 }}>
+
                     <input type="checkbox" checked={toolPolicy !== null} onChange={e => {
+
                       if (e.target.checked) {
+
                         setToolPolicy({ allowed_tools: { skill_ids: [], mcp_ids: [] }, max_calls_per_conversation: null, per_round_cap: null, fallback_message: '' });
+
                       } else {
+
                         setToolPolicy(null);
+
                       }
+
                     }} />
+
                     启用工具/MCP 权限沙箱（限制该 Agent 可调用的工具与调用频次）
+
                   </label>
+
                   {toolPolicy && (
+
                     <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+
                       <div className="form-group" style={{ marginBottom: 0 }}>
+
                         <label className="form-label">允许调用的技能（不选 = 禁止调用任何技能）</label>
+
                         <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, maxHeight: 160, overflowY: 'auto', padding: 8, border: '1px solid #E5E7EB', borderRadius: 6 }}>
+
                           {availableSkills.length === 0 ? (
+
                             <span style={{ color: '#9CA3AF', fontSize: 13 }}>暂无技能</span>
+
                           ) : availableSkills.map((skill: any) => {
+
                             const checked = (toolPolicy.allowed_tools?.skill_ids || []).includes(skill.id);
+
                             return (
+
                               <label key={skill.id} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '4px 10px', borderRadius: 12, fontSize: 12, cursor: 'pointer', background: checked ? '#EEF2FF' : '#F9FAFB', border: `1px solid ${checked ? '#6366F1' : '#E5E7EB'}`, color: checked ? '#6366F1' : '#374151' }}>
+
                                 <input type="checkbox" style={{ display: 'none' }} checked={checked} onChange={() => {
+
                                   const cur = toolPolicy.allowed_tools?.skill_ids || [];
+
                                   const next = checked ? cur.filter((x: string) => x !== skill.id) : [...cur, skill.id];
+
                                   setToolPolicy({ ...toolPolicy, allowed_tools: { ...(toolPolicy.allowed_tools || {}), skill_ids: next } });
+
                                 }} />
+
                                 {skill.skill_name}
+
                               </label>
+
                             );
+
                           })}
+
                         </div>
+
                       </div>
+
                       <div className="form-group" style={{ marginBottom: 0 }}>
+
                         <label className="form-label">允许调用的 MCP 服务（不选 = 禁止调用任何 MCP）</label>
+
                         <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, maxHeight: 160, overflowY: 'auto', padding: 8, border: '1px solid #E5E7EB', borderRadius: 6 }}>
+
                           {availableMcps.length === 0 ? (
+
                             <span style={{ color: '#9CA3AF', fontSize: 13 }}>暂无 MCP 服务</span>
+
                           ) : availableMcps.map((m: any) => {
+
                             const checked = (toolPolicy.allowed_tools?.mcp_ids || []).includes(m.id);
+
                             return (
+
                               <label key={m.id} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '4px 10px', borderRadius: 12, fontSize: 12, cursor: 'pointer', background: checked ? '#EEF2FF' : '#F9FAFB', border: `1px solid ${checked ? '#6366F1' : '#E5E7EB'}`, color: checked ? '#6366F1' : '#374151' }}>
+
                                 <input type="checkbox" style={{ display: 'none' }} checked={checked} onChange={() => {
+
                                   const cur = toolPolicy.allowed_tools?.mcp_ids || [];
+
                                   const next = checked ? cur.filter((x: string) => x !== m.id) : [...cur, m.id];
+
                                   setToolPolicy({ ...toolPolicy, allowed_tools: { ...(toolPolicy.allowed_tools || {}), mcp_ids: next } });
+
                                 }} />
+
                                 {m.name}
+
                               </label>
+
                             );
+
                           })}
+
                         </div>
+
                       </div>
+
                       <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+
                         <div className="form-group" style={{ marginBottom: 0 }}>
+
                           <label className="form-label">单对话最大调用次数（留空=不限制）</label>
+
                           <input className="admin-form-input" type="number" min="0"
+
                             value={toolPolicy.max_calls_per_conversation ?? ''}
+
                             onChange={e => setToolPolicy({ ...toolPolicy, max_calls_per_conversation: e.target.value === '' ? null : parseInt(e.target.value) })} />
+
                         </div>
+
                         <div className="form-group" style={{ marginBottom: 0 }}>
+
                           <label className="form-label">单轮最大调用次数（留空=不限制）</label>
+
                           <input className="admin-form-input" type="number" min="0"
+
                             value={toolPolicy.per_round_cap ?? ''}
+
                             onChange={e => setToolPolicy({ ...toolPolicy, per_round_cap: e.target.value === '' ? null : parseInt(e.target.value) })} />
+
                         </div>
+
                       </div>
+
                       <div className="form-group" style={{ marginBottom: 0 }}>
+
                         <label className="form-label">额度耗尽提示语（可选）</label>
+
                         <textarea className="admin-form-input" rows={2}
+
                           value={toolPolicy.fallback_message || ''}
+
                           onChange={e => setToolPolicy({ ...toolPolicy, fallback_message: e.target.value })}
+
                           placeholder="例如：该智能体已达到工具调用上限，请开启新对话或调整智能体设置。" />
+
                       </div>
+
+                    </div>
+
+                  )}
+
+                </div>
+
+              )}
+
+              {editingAgent && (
+
+                <div style={{ gridColumn: '1 / -1' }}>
+
+                  <hr style={{ border: 'none', borderTop: '1px solid #E5E7EB', margin: '16px 0' }} />
+
+                  <div style={{ fontWeight: 600, marginBottom: 8 }}>🕸️ 多 Agent 编排图 (orchestration)</div>
+
+                  <div style={{ fontSize: 12, color: '#6B7280', marginBottom: 8 }}>
+
+                    用有向图描述多个智能体的协作：节点类型 llm / local / external / reduce，边 from→to 表示数据流。留空表示不启用编排（走原对话逻辑）。
+
+                  </div>
+
+                  <textarea
+
+                    className="admin-form-input"
+
+                    rows={14}
+
+                    style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 12, whiteSpace: 'pre', overflowWrap: 'normal', width: '100%' }}
+
+                    value={orchestrationText}
+
+                    spellCheck={false}
+
+                    onChange={e => { setOrchestrationText(e.target.value); setOrchestrationError(''); }}
+
+                    placeholder={'{\n  "nodes": [{"id":"router","type":"llm"},{"id":"worker","type":"local","agent_id":"子智能体ID"},{"id":"summary","type":"reduce"}],\n  "edges": [{"from":"router","to":"worker"},{"from":"worker","to":"summary"}]\n}'}
+
+                  />
+
+                  {orchestrationError && (
+
+                    <div style={{ color: '#DC2626', fontSize: 12, marginTop: 6, whiteSpace: 'pre-wrap' }}>{orchestrationError}</div>
+
+                  )}
+
+                  <div style={{ display: 'flex', gap: 8, marginTop: 8, flexWrap: 'wrap' }}>
+
+                    <button
+
+                      className="admin-btn"
+
+                      onClick={() => {
+
+                        try {
+
+                          const parsed = orchestrationText.trim() ? JSON.parse(orchestrationText) : null;
+
+                          setOrchestrationText(parsed ? JSON.stringify(parsed, null, 2) : '');
+
+                          setOrchestrationError('');
+
+                        } catch (e: any) {
+
+                          setOrchestrationError('JSON 格式错误: ' + (e.message || e));
+
+                        }
+
+                      }}
+
+                    >格式化</button>
+
+                    <button
+
+                      className="admin-btn"
+
+                      onClick={() => {
+
+                        const tpl = {
+
+                          nodes: [
+
+                            { id: 'router', type: 'llm', system_prompt: '判断用户意图并路由到合适的处理智能体。' },
+
+                            { id: 'worker', type: 'local', agent_id: '在此填入子智能体ID' },
+
+                            { id: 'summary', type: 'reduce', system_prompt: '汇总各子任务结果，输出面向用户的最终答复。' },
+
+                          ],
+
+                          edges: [
+
+                            { from: 'router', to: 'worker' },
+
+                            { from: 'worker', to: 'summary' },
+
+                          ],
+
+                        };
+
+                        setOrchestrationText(JSON.stringify(tpl, null, 2));
+
+                        setOrchestrationError('');
+
+                      }}
+
+                    >填入示例</button>
+
+                    <button
+
+                      className="admin-btn primary"
+
+                      onClick={async () => {
+
+                        try {
+
+                          const text = orchestrationText.trim();
+
+                          const parsed = text ? JSON.parse(text) : null;
+
+                          await adminAPI.setAgentOrchestration(editingAgent!.id, parsed);
+
+                          setOrchestrationError('');
+
+                          showToast('编排图已保存');
+
+                        } catch (e: any) {
+
+                          const msg = e?.response?.data?.detail || e?.message || String(e);
+
+                          setOrchestrationError('保存失败: ' + msg);
+
+                        }
+
+                      }}
+
+                    >保存编排图</button>
+
+                    {orchestrationText.trim() && (
+
+                      <button
+
+                        className="admin-btn"
+
+                        onClick={async () => {
+
+                          try {
+
+                            await adminAPI.setAgentOrchestration(editingAgent!.id, null);
+
+                            setOrchestrationText('');
+
+                            setOrchestrationError('');
+
+                            showToast('编排图已清除');
+
+                          } catch (e: any) {
+
+                            setOrchestrationError('清除失败: ' + (e?.message || e));
+
+                          }
+
+                        }}
+
+                      >清除编排</button>
+
+                    )}
+
+                  </div>
+                  {editingAgent && (
+                    <div style={{ marginTop: 10, padding: '6px 0', borderTop: '1px dashed #E5E7EB' }}>
+                      <span style={{ fontSize: 12, color: '#6B7280' }}>YAML:</span>{' '}
+                      <button className="admin-btn" style={{ fontSize: 12, padding: '3px 8px' }} onClick={async () => {
+                        try { const r = await adminAPI.exportYamlOrch(editingAgent!.id); setOrchestrationText(r?.yaml || ''); showToast('YAML exported'); }
+                        catch (e: any) { showToast('Export failed'); }
+                      }}>导出</button>{' '}
+                      <button className="admin-btn" style={{ fontSize: 12, padding: '3px 8px' }} onClick={() => {
+                        const y = prompt('Paste YAML workflow:');
+                        if (!y) return;
+                        adminAPI.importYamlOrch(editingAgent!.id, y).then((r: any) => {
+                          if (r?.orchestration) setOrchestrationText(JSON.stringify(r.orchestration, null, 2));
+                          showToast('YAML imported');
+                        }).catch((e: any) => showToast('Import failed'));
+                      }}>导入</button>{' '}
+                      <button className="admin-btn" style={{ fontSize: 12, padding: '3px 8px' }} onClick={async () => {
+                        try {
+                          const r = await adminAPI.getYamlTemplates();
+                          const ts = r?.templates || [];
+                          if (!ts.length) { showToast('No templates'); return; }
+                          const names = ts.map((t: any, i: number) => (i + 1) + '. ' + t.name).join('\n');
+                          const c = prompt('Select template:\n' + names);
+                          if (c) { const ii = parseInt(c) - 1; if (ii >= 0 && ii < ts.length) setOrchestrationText(ts[ii].yaml || ''); }
+                        } catch { showToast('Template load failed'); }
+                      }}>模板</button>
                     </div>
                   )}
+
                 </div>
+
               )}
-              {editingAgent && (
-                <div style={{ gridColumn: '1 / -1' }}>
-                  <hr style={{ border: 'none', borderTop: '1px solid #E5E7EB', margin: '16px 0' }} />
-                  <div style={{ fontWeight: 600, marginBottom: 8 }}>🕸️ 多 Agent 编排图 (orchestration)</div>
-                  <div style={{ fontSize: 12, color: '#6B7280', marginBottom: 8 }}>
-                    用有向图描述多个智能体的协作：节点类型 llm / local / external / reduce，边 from→to 表示数据流。留空表示不启用编排（走原对话逻辑）。
-                  </div>
-                  <textarea
-                    className="admin-form-input"
-                    rows={14}
-                    style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 12, whiteSpace: 'pre', overflowWrap: 'normal', width: '100%' }}
-                    value={orchestrationText}
-                    spellCheck={false}
-                    onChange={e => { setOrchestrationText(e.target.value); setOrchestrationError(''); }}
-                    placeholder={'{\n  "nodes": [{"id":"router","type":"llm"},{"id":"worker","type":"local","agent_id":"子智能体ID"},{"id":"summary","type":"reduce"}],\n  "edges": [{"from":"router","to":"worker"},{"from":"worker","to":"summary"}]\n}'}
-                  />
-                  {orchestrationError && (
-                    <div style={{ color: '#DC2626', fontSize: 12, marginTop: 6, whiteSpace: 'pre-wrap' }}>{orchestrationError}</div>
-                  )}
-                  <div style={{ display: 'flex', gap: 8, marginTop: 8, flexWrap: 'wrap' }}>
-                    <button
-                      className="admin-btn"
-                      onClick={() => {
-                        try {
-                          const parsed = orchestrationText.trim() ? JSON.parse(orchestrationText) : null;
-                          setOrchestrationText(parsed ? JSON.stringify(parsed, null, 2) : '');
-                          setOrchestrationError('');
-                        } catch (e: any) {
-                          setOrchestrationError('JSON 格式错误: ' + (e.message || e));
-                        }
-                      }}
-                    >格式化</button>
-                    <button
-                      className="admin-btn"
-                      onClick={() => {
-                        const tpl = {
-                          nodes: [
-                            { id: 'router', type: 'llm', system_prompt: '判断用户意图并路由到合适的处理智能体。' },
-                            { id: 'worker', type: 'local', agent_id: '在此填入子智能体ID' },
-                            { id: 'summary', type: 'reduce', system_prompt: '汇总各子任务结果，输出面向用户的最终答复。' },
-                          ],
-                          edges: [
-                            { from: 'router', to: 'worker' },
-                            { from: 'worker', to: 'summary' },
-                          ],
-                        };
-                        setOrchestrationText(JSON.stringify(tpl, null, 2));
-                        setOrchestrationError('');
-                      }}
-                    >填入示例</button>
-                    <button
-                      className="admin-btn primary"
-                      onClick={async () => {
-                        try {
-                          const text = orchestrationText.trim();
-                          const parsed = text ? JSON.parse(text) : null;
-                          await adminAPI.setAgentOrchestration(editingAgent!.id, parsed);
-                          setOrchestrationError('');
-                          showToast('编排图已保存');
-                        } catch (e: any) {
-                          const msg = e?.response?.data?.detail || e?.message || String(e);
-                          setOrchestrationError('保存失败: ' + msg);
-                        }
-                      }}
-                    >保存编排图</button>
-                    {orchestrationText.trim() && (
-                      <button
-                        className="admin-btn"
-                        onClick={async () => {
-                          try {
-                            await adminAPI.setAgentOrchestration(editingAgent!.id, null);
-                            setOrchestrationText('');
-                            setOrchestrationError('');
-                            showToast('编排图已清除');
-                          } catch (e: any) {
-                            setOrchestrationError('清除失败: ' + (e?.message || e));
-                          }
-                        }}
-                      >清除编排</button>
-                    )}
-                  </div>
-                </div>
-              )}
+
             </div>
+
             <div className="modal-footer">
+
               <button className="admin-btn" onClick={() => setShowModal(false)}>取消</button>
+
               <button className="admin-btn primary" onClick={handleSave}>
+
                 {editingAgent ? '保存更改' : '创建 Agent'}
+
               </button>
+
             </div>
+
           </div>
+
         </div>
+
       )}
 
+
+
       {/* Detail Drawer */}
+
       {showDetail && detailAgent && (
+
         <div className="modal-overlay" onClick={() => setShowDetail(false)}>
+
           <div className="modal-content" style={{ maxWidth: 600 }} onClick={e => e.stopPropagation()}>
+
             <div className="modal-header">
+
               <h3>{detailAgent.name}</h3>
+
               <button className="modal-close" onClick={() => setShowDetail(false)}>×</button>
+
             </div>
+
             <div className="modal-body" style={{ maxHeight: '60vh', overflowY: 'auto' }}>
+
               <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
+
                 <div className="detail-item"><span className="detail-label">类型</span><span>{detailAgent.type}</span></div>
+
                 <div className="detail-item"><span className="detail-label">来源</span><span>{detailAgent.source === 'official' ? '官方' : '用户'}</span></div>
+
                 <div className="detail-item"><span className="detail-label">状态</span><span>{detailAgent.status}</span></div>
+
                 <div className="detail-item"><span className="detail-label">价格</span><span>¥{detailAgent.price}</span></div>
+
                 <div className="detail-item"><span className="detail-label">安装量</span><span>{detailAgent.install_count}</span></div>
+
                 <div className="detail-item"><span className="detail-label">评分</span><span>{detailAgent.rating_avg > 0 ? `★ ${detailAgent.rating_avg}` : '-'}</span></div>
+
                 <div className="detail-item"><span className="detail-label">发布者</span><span>{detailAgent.publisher_name || detailAgent.publisher_id}</span></div>
+
                 <div className="detail-item"><span className="detail-label">创建时间</span><span>{detailAgent.created_at?.slice(0, 16).replace('T', ' ')}</span></div>
+
               </div>
 
+
+
               {detailAgent.description && (
+
                 <div style={{ marginBottom: 12 }}>
+
                   <div style={{ fontWeight: 500, marginBottom: 4 }}>描述</div>
+
                   <p style={{ color: '#6B7280', fontSize: 13, margin: 0 }}>{detailAgent.description}</p>
+
                 </div>
+
               )}
 
+
+
               {detailAgent.config && (
+
                 <div>
+
                   <div style={{ fontWeight: 500, marginBottom: 8 }}>⚙️ 配置</div>
+
                   <div style={{ background: '#F9FAFB', borderRadius: 8, padding: 12, fontSize: 13 }}>
+
                     {detailAgent.config.system_prompt && (
+
                       <div style={{ marginBottom: 8 }}>
+
                         <span style={{ color: '#6B7280' }}>System Prompt:</span>
+
                         <pre style={{ margin: '4px 0 0', whiteSpace: 'pre-wrap', fontFamily: 'monospace', fontSize: 12 }}>
+
                           {detailAgent.config.system_prompt}
+
                         </pre>
+
                       </div>
+
                     )}
+
                     <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
+
                       <span>Temperature: <code>{detailAgent.config.temperature}</code></span>
+
                       <span>Max Tokens: <code>{detailAgent.config.max_tokens}</code></span>
+
                       <span>Model: <code>{detailAgent.config.model_id || '默认'}</code></span>
+
                       <span>记忆: <code>{detailAgent.config.memory_enabled ? '✓' : '✗'}</code></span>
+
                       <span>推理: <code>{detailAgent.config.reasoning_enabled ? '✓' : '✗'}</code></span>
+
                       <span>关联技能: <code>{detailAgent.config.skills?.length || 0} 个</code></span>
+
                     </div>
+
                   </div>
+
                 </div>
+
               )}
+
             </div>
+
           </div>
+
         </div>
+
       )}
 
+
+
       <style>{`
+
         .stat-card { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+
         .stat-value { font-size: 24px; font-weight: 700; color: #1F2937; }
+
         .stat-label { font-size: 13px; color: #6B7280; margin-top: 4px; }
+
         .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
+
         .modal-content { background: #fff; border-radius: 12px; width: 90%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
+
         .modal-header { padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; }
+
         .modal-header h3 { margin: 0; font-size: 18px; }
+
         .modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #6B7280; }
+
         .modal-body { padding: 24px; overflow-y: auto; }
+
         .modal-footer { padding: 16px 24px; border-top: 1px solid #E5E7EB; display: flex; justify-content: flex-end; gap: 12px; }
+
         .form-group { margin-bottom: 16px; }
+
         .form-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #374151; }
+
         .detail-item { display: flex; gap: 8px; font-size: 13px; }
+
         .detail-label { color: #6B7280; min-width: 60px; }
+
       `}</style>
+
     </div>
+
   );
+
 };
 
+
+
 export default Agents;
+
diff --git a/frontend/src/pages/front/ChatPage.css b/frontend/src/pages/front/ChatPage.css
index fc48a08..a8db290 100644
--- a/frontend/src/pages/front/ChatPage.css
+++ b/frontend/src/pages/front/ChatPage.css
@@ -1,1538 +1,1554 @@
-/* ===== Spin Animation ===== */
-@keyframes spin-icon-rotate {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.spin-icon {
-  animation: spin-icon-rotate 0.8s linear infinite;
-}
-
-/* ===== Chat Page Layout ===== */
-.chat-page {
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-}
-
-/* ===== Left Sidebar ===== */
-.chat-sidebar {
-  width: 280px;
-  min-width: 280px;
-  background: var(--color-sidebar-bg);
-  border-right: 1px solid var(--color-border-light);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.chat-sidebar-header {
-  padding: var(--space-lg);
-  border-bottom: 1px solid var(--color-border-light);
-}
-
-.new-chat-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-sm);
-  width: 100%;
-  padding: var(--space-md) var(--space-lg);
-  background: var(--color-accent);
-  color: var(--color-text-inverse);
-  border: none;
-  border-radius: var(--radius-md);
-  font-size: var(--text-base);
-  font-weight: 600;
-  cursor: pointer;
-  transition: background var(--transition-fast), transform var(--transition-fast);
-}
-
-.new-chat-btn:hover {
-  background: var(--color-accent-hover);
-}
-
-.new-chat-btn:active {
-  transform: scale(0.98);
-}
-
-/* Search */
-.chat-sidebar-search {
-  padding: var(--space-md) var(--space-lg);
-  position: relative;
-}
-
-.search-icon-wrap {
-  position: absolute;
-  left: calc(var(--space-lg) + var(--space-md));
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  color: var(--color-text-tertiary);
-  pointer-events: none;
-}
-
-.search-input {
-  width: 100%;
-  padding: var(--space-sm) var(--space-md) var(--space-sm) calc(var(--space-2xl) + var(--space-sm));
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: var(--text-sm);
-  color: var(--color-text-primary);
-  outline: none;
-  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
-}
-
-.search-input::placeholder {
-  color: var(--color-text-disabled);
-}
-
-.search-input:focus {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent-light);
-}
-
-/* Conversation List */
-.chat-sidebar-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-sm) var(--space-sm);
-}
-
-.conversation-item {
-  padding: var(--space-md) var(--space-md);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: background var(--transition-fast);
-  margin-bottom: 2px;
-  position: relative;
-}
-
-.conversation-item:hover {
-  background: var(--color-sidebar-hover);
-}
-
-.conversation-item.active {
-  background: var(--color-sidebar-active);
-}
-
-.conversation-item.active .conv-title {
-  color: var(--color-accent);
-  font-weight: 600;
-}
-
-.conv-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-xs);
-  margin-bottom: 4px;
-}
-
-.conv-pin-icon {
-  display: flex;
-  align-items: center;
-  color: var(--color-accent);
-  flex-shrink: 0;
-  transform: rotate(45deg);
-}
-
-.conversation-item.pinned {
-  background: var(--color-accent-subtle);
-  border-left: 3px solid var(--color-accent);
-}
-
-.conversation-item.pinned:hover {
-  background: var(--color-accent-light);
-}
-
-.conversation-item.pinned.active {
-  background: var(--color-sidebar-active);
-  border-left-color: var(--color-accent);
-}
-
-.conv-title {
-  font-size: var(--text-sm);
-  font-weight: 500;
-  color: var(--color-text-primary);
-  flex: 1;
-  min-width: 0;
-  line-height: 1.4;
-}
-
-.conv-more-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: var(--radius-sm);
-  color: var(--color-text-tertiary);
-  cursor: pointer;
-  opacity: 0.5;
-  transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
-  flex-shrink: 0;
-}
-
-.conversation-item:hover .conv-more-btn {
-  opacity: 1;
-  color: var(--color-text-secondary);
-}
-
-.conv-more-btn:hover {
-  background: var(--color-bg-tertiary);
-  color: var(--color-accent);
-}
-
-.conv-preview {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-  line-height: 1.4;
-  margin-bottom: 4px;
-}
-
-.conv-meta {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-.conv-time {
-  font-size: 11px;
-  color: var(--color-text-disabled);
-}
-
-.conv-badge {
-  font-size: 10px;
-  color: var(--color-warning);
-  background: var(--color-warning-light);
-  padding: 1px 6px;
-  border-radius: var(--radius-full);
-  font-weight: 500;
-}
-
-.conv-empty {
-  padding: var(--space-2xl) var(--space-lg);
-  text-align: center;
-  color: var(--color-text-tertiary);
-  font-size: var(--text-sm);
-}
-
-/* ===== Right Main Area ===== */
-.chat-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  background: var(--color-bg-primary);
-  overflow: hidden;
-}
-
-/* Chat Header */
-.chat-header {
-  height: 52px;
-  min-height: 52px;
-  padding: 0 var(--space-xl);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: var(--color-bg-secondary);
-  border-bottom: 1px solid var(--color-border-light);
-}
-
-.chat-header-left {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  min-width: 0;
-}
-
-.model-selector {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-xs) var(--space-md);
-  background: var(--color-bg-tertiary);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  transition: background var(--transition-fast);
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.model-selector:hover {
-  background: var(--color-bg-hover);
-}
-
-.model-name {
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.model-badge {
-  font-size: 10px;
-  color: var(--color-accent);
-  background: var(--color-accent-light);
-  padding: 1px 6px;
-  border-radius: var(--radius-full);
-  font-weight: 600;
-}
-
-.chat-header-divider {
-  width: 1px;
-  height: 20px;
-  background: var(--color-border);
-  flex-shrink: 0;
-}
-
-.chat-title {
-  font-size: var(--text-base);
-  font-weight: 500;
-  color: var(--color-text-primary);
-  min-width: 0;
-}
-
-/* Messages Area */
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-xl);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
-}
-
-.chat-empty-state,
-.chat-empty-full {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--color-text-tertiary);
-  gap: var(--space-md);
-  user-select: none;
-}
-
-.empty-title {
-  font-size: var(--text-lg);
-  font-weight: 600;
-  color: var(--color-text-secondary);
-}
-
-.empty-desc {
-  font-size: var(--text-sm);
-  color: var(--color-text-tertiary);
-}
-
-/* Message Row */
-.message-row {
-  display: flex;
-  flex-direction: column;
-  max-width: 75%;
-  animation: fadeIn var(--transition-normal);
-}
-
-.message-row.user {
-  align-self: flex-end;
-  align-items: flex-end;
-}
-
-.message-row.assistant {
-  align-self: flex-start;
-  align-items: flex-start;
-}
-
-/* Message Bubble */
-.message-bubble {
-  padding: var(--space-md) var(--space-lg);
-  border-radius: var(--radius-lg);
-  font-size: var(--text-base);
-  line-height: 1.7;
-  word-break: break-word;
-}
-
-.message-bubble.user {
-  background: var(--color-accent);
-  color: var(--color-text-inverse);
-  border-bottom-right-radius: var(--radius-sm);
-}
-
-.message-bubble.assistant {
-  background: var(--color-bg-secondary);
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-border-light);
-  border-bottom-left-radius: var(--radius-sm);
-  box-shadow: var(--shadow-xs);
-}
-
-/* Message Meta */
-.message-meta {
-  display: flex;
-  gap: var(--space-sm);
-  padding: 4px var(--space-sm) 0;
-  font-size: 11px;
-  color: var(--color-text-disabled);
-}
-
-.message-meta.user {
-  justify-content: flex-end;
-}
-
-/* Markdown Rendering */
-.markdown-body {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.message-bubble.user .markdown-body {
-  gap: 4px;
-}
-
-.md-code-block {
-  background: rgba(0, 0, 0, 0.08);
-  border-radius: var(--radius-sm);
-  padding: var(--space-md);
-  overflow-x: auto;
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  line-height: 1.5;
-  margin: 4px 0;
-}
-
-.message-bubble.user .md-code-block {
-  background: rgba(255, 255, 255, 0.15);
-}
-
-.md-inline-code {
-  background: rgba(0, 0, 0, 0.07);
-  padding: 1px 5px;
-  border-radius: 3px;
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-}
-
-.message-bubble.user .md-inline-code {
-  background: rgba(255, 255, 255, 0.15);
-}
-
-.md-h2 {
-  font-size: var(--text-lg);
-  font-weight: 700;
-  margin-top: 8px;
-  color: inherit;
-}
-
-.md-h3 {
-  font-size: var(--text-md);
-  font-weight: 600;
-  margin-top: 6px;
-  color: inherit;
-}
-
-.md-h4 {
-  font-size: var(--text-base);
-  font-weight: 600;
-  color: inherit;
-}
-
-.md-li {
-  margin-left: 1.2em;
-  line-height: 1.6;
-}
-
-.md-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 12px 0;
-  font-size: var(--text-sm);
-  background: #fff;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-}
-
-.md-table thead {
-  background: linear-gradient(135deg, #5B5FED 0%, #7B7FEE 100%);
-  color: #fff;
-}
-
-.md-table th {
-  padding: 10px 14px;
-  font-weight: 600;
-  text-align: left;
-  font-size: var(--text-xs);
-  letter-spacing: 0.3px;
-}
-
-.md-table td {
-  padding: 10px 14px;
-  border-bottom: 1px solid #EEF0F4;
-  color: var(--color-text-primary);
-  vertical-align: top;
-}
-
-.md-table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.md-table tbody tr:hover {
-  background: #F8F9FC;
-}
-
-.md-table tbody tr:nth-child(even) {
-  background: #FAFBFD;
-}
-
-.md-table tbody tr:nth-child(even):hover {
-  background: #F0F2F7;
-}
-
-.message-bubble.user .md-table {
-  background: rgba(255, 255, 255, 0.08);
-  color: inherit;
-}
-.message-bubble.user .md-table th,
-.message-bubble.user .md-table td {
-  color: inherit;
-  border-color: rgba(255, 255, 255, 0.15);
-}
-.message-bubble.user .md-table tbody tr:hover,
-.message-bubble.user .md-table tbody tr:nth-child(even) {
-  background: rgba(255, 255, 255, 0.05);
-}
-
-/* 数学公式 */
-.md-math-block {
-  display: block;
-  overflow-x: auto;
-  padding: 10px 0;
-  text-align: center;
-}
-.md-math-inline {
-  display: inline;
-  padding: 0 2px;
-}
-
-/* 代码块包装器 + 复制按钮 */
-.md-code-wrapper {
-  position: relative;
-  margin: 12px 0;
-}
-.md-code-wrapper .md-code-block {
-  margin: 0;
-  border-radius: var(--radius-md);
-}
-.md-code-copy {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  padding: 4px 10px;
-  font-size: 12px;
-  color: #6B7280;
-  background: #F3F4F6;
-  border: 1px solid #E5E7EB;
-  border-radius: 4px;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.2s;
-  z-index: 2;
-}
-.md-code-wrapper:hover .md-code-copy {
-  opacity: 1;
-}
-
-/* 删除线 */
-del {
-  text-decoration: line-through;
-  opacity: 0.6;
-}
-
-.md-hr {
-  border: none;
-  border-top: 1px solid var(--color-border);
-  margin: 8px 0;
-}
-
-.message-bubble.user .md-hr {
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.message-bubble.user .md-code-block {
-  background: rgba(0, 0, 0, 0.2);
-}
-
-/* ===== Input Area ===== */
-.chat-input-area {
-  padding: var(--space-md) var(--space-xl) var(--space-xl);
-  background: var(--color-bg-primary);
-  overflow: visible;
-}
-
-.chat-input-container {
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: var(--space-sm);
-  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
-}
-
-.chat-input-container:focus-within {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent-light);
-}
-
-.input-attachments {
-  display: flex;
-  gap: 4px;
-  padding: 0 var(--space-sm) 4px;
-}
-
-.attach-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  border-radius: var(--radius-sm);
-  font-size: var(--text-xs);
-  color: var(--color-text-secondary);
-  background: var(--color-bg-tertiary);
-  border: 1px solid var(--color-border);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  font-weight: 500;
-}
-
-.attach-btn:hover {
-  background: var(--color-accent-subtle);
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
-.input-row {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--space-sm);
-  padding: 0 var(--space-sm);
-}
-
-.chat-textarea {
-  flex: 1;
-  border: none;
-  outline: none;
-  resize: none;
-  font-size: var(--text-base);
-  line-height: 1.6;
-  color: var(--color-text-primary);
-  background: transparent;
-  padding: var(--space-xs) 0;
-  max-height: 160px;
-  font-family: var(--font-sans);
-}
-
-.chat-textarea::placeholder {
-  color: var(--color-text-disabled);
-}
-
-.send-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
-  border-radius: var(--radius-md);
-  background: var(--color-accent);
-  color: var(--color-text-inverse);
-  border: none;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  flex-shrink: 0;
-  margin-bottom: 2px;
-}
-
-.send-btn:hover:not(:disabled) {
-  background: var(--color-accent-hover);
-  transform: scale(1.05);
-}
-
-.send-btn:active:not(:disabled) {
-  transform: scale(0.95);
-}
-
-.send-btn:disabled {
-  background: var(--color-bg-tertiary);
-  color: var(--color-text-disabled);
-  cursor: not-allowed;
-}
-
-/* ===== Dropdown ===== */
-.dropdown-wrapper {
-  position: relative;
-  display: inline-flex;
-}
-
-.dropdown-trigger {
-  cursor: pointer;
-}
-
-.dropdown-menu {
-  position: absolute;
-  top: calc(100% + 4px);
-  z-index: 9999;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  padding: var(--space-xs);
-  min-width: 180px;
-  max-height: 320px;
-  overflow-y: auto;
-  animation: fadeIn var(--transition-fast);
-}
-
-/* Upward-opening dropdown for bottom-of-page elements */
-.dropdown-menu.dropup {
-  top: auto;
-  bottom: calc(100% + 4px);
-}
-
-.dropdown-menu.align-left {
-  left: 0;
-}
-
-.dropdown-menu.align-right {
-  right: 0;
-}
-
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  width: 100%;
-  padding: var(--space-sm) var(--space-md);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  background: none;
-  border: none;
-  cursor: pointer;
-  transition: background var(--transition-fast);
-  text-align: left;
-  white-space: nowrap;
-}
-
-.dropdown-item:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text-primary);
-}
-
-.dropdown-item.selected {
-  color: var(--color-accent);
-  background: var(--color-accent-subtle);
-  font-weight: 500;
-}
-
-.dropdown-item.danger {
-  color: var(--color-error);
-}
-
-.dropdown-item.danger:hover {
-  background: var(--color-error-light);
-}
-
-.dropdown-item.disabled {
-  color: var(--color-text-disabled);
-  cursor: default;
-  pointer-events: none;
-}
-
-.dropdown-divider {
-  height: 1px;
-  background: var(--color-border-light);
-  margin: var(--space-xs) 0;
-}
-
-.model-dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  width: 100%;
-}
-
-.model-provider-tag {
-  font-size: 10px;
-  color: var(--color-text-tertiary);
-  margin-left: auto;
-  background: var(--color-bg-tertiary);
-  padding: 1px 6px;
-  border-radius: var(--radius-full);
-}
-
-.attach-dropdown-title {
-  padding: var(--space-xs) var(--space-md) var(--space-sm);
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--color-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.attach-count {
-  margin-left: auto;
-  font-size: 11px;
-  color: var(--color-text-disabled);
-}
-
-/* ===== Responsive ===== */
-@media (max-width: 768px) {
-  .chat-sidebar {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    z-index: var(--z-overlay);
-    transform: translateX(-100%);
-    transition: transform var(--transition-slow);
-    box-shadow: var(--shadow-lg);
-  }
-
-  .message-row {
-    max-width: 90%;
-  }
-
-  .chat-header {
-    padding: 0 var(--space-md);
-  }
-
-  .chat-messages {
-    padding: var(--space-md);
-  }
-
-  .chat-input-area {
-    padding: var(--space-sm) var(--space-md) var(--space-md);
-  }
-}
-
-/* ===== Knowledge Graph Conversion Modal ===== */
-.kg-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: var(--z-overlay);
-  animation: fadeIn 0.2s ease;
-}
-
-.kg-modal {
-  background: var(--color-card-bg);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-xl);
-  width: 420px;
-  max-width: 90vw;
-  overflow: hidden;
-}
-
-.kg-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-xl) var(--space-2xl);
-  border-bottom: 1px solid var(--color-border-light);
-}
-
-.kg-modal-header h3 {
-  font-size: var(--text-lg);
-  font-weight: 700;
-  color: var(--color-text-primary);
-}
-
-.kg-modal-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-full);
-  border: none;
-  background: transparent;
-  color: var(--color-text-tertiary);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.kg-modal-close:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text-primary);
-}
-
-.kg-modal-body {
-  padding: var(--space-2xl);
-}
-
-/* Progress State */
-.kg-progress-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-xl);
-}
-
-.kg-steps {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  width: 100%;
-}
-
-.kg-step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-.kg-step-indicator {
-  width: 36px;
-  height: 36px;
-  border-radius: var(--radius-full);
-  border: 2px solid var(--color-border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--color-text-tertiary);
-  background: var(--color-card-bg);
-  transition: all var(--transition-normal);
-}
-
-.kg-step.active .kg-step-indicator {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-  background: var(--color-accent-light);
-}
-
-.kg-step.done .kg-step-indicator {
-  border-color: var(--color-success);
-  color: var(--color-success);
-  background: var(--color-success-light, rgba(34, 197, 94, 0.1));
-}
-
-.kg-step-label {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-  white-space: nowrap;
-}
-
-.kg-step.active .kg-step-label {
-  color: var(--color-accent);
-  font-weight: 600;
-}
-
-.kg-step.done .kg-step-label {
-  color: var(--color-success);
-}
-
-.kg-step-connector {
-  flex: 1;
-  padding-bottom: 20px;
-}
-
-.kg-connector-line {
-  height: 2px;
-  background: var(--color-border);
-  border-radius: 1px;
-  position: relative;
-  overflow: hidden;
-}
-
-.kg-connector-line.done {
-  background: var(--color-success);
-}
-
-.kg-connector-progress {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 70%;
-  background: var(--color-accent);
-  border-radius: 1px;
-  animation: kgProgressPulse 1s ease-in-out infinite;
-}
-
-@keyframes kgProgressPulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-.kg-progress-tip {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-}
-
-/* Spinner */
-.kg-spinner {
-  width: 16px;
-  height: 16px;
-  border: 2px solid transparent;
-  border-top-color: var(--color-accent);
-  border-radius: var(--radius-full);
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* Success State */
-.kg-success-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-lg);
-}
-
-.kg-success-icon {
-  margin-bottom: var(--space-sm);
-}
-
-.kg-success-title {
-  font-size: var(--text-lg);
-  font-weight: 700;
-  color: var(--color-text-primary);
-}
-
-.kg-result-stats {
-  display: flex;
-  align-items: center;
-  gap: var(--space-xl);
-  padding: var(--space-lg) var(--space-2xl);
-  background: var(--color-bg-subtle);
-  border-radius: var(--radius-lg);
-}
-
-.kg-stat-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-xs);
-}
-
-.kg-stat-value {
-  font-size: var(--text-2xl);
-  font-weight: 800;
-  color: var(--color-accent);
-}
-
-.kg-stat-label {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-}
-
-.kg-stat-divider {
-  width: 1px;
-  height: 32px;
-  background: var(--color-border);
-}
-
-.kg-result-kb {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-}
-
-.kg-actions {
-  display: flex;
-  gap: var(--space-md);
-  margin-top: var(--space-sm);
-}
-
-/* Error State */
-.kg-error-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-lg);
-}
-
-.kg-error-icon {
-  margin-bottom: var(--space-xs);
-}
-
-.kg-error-text {
-  font-size: var(--text-sm);
-  color: var(--color-error);
-  text-align: center;
-}
-
-/* Buttons */
-.kg-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-sm) var(--space-xl);
-  border-radius: var(--radius-md);
-  font-size: var(--text-sm);
-  font-weight: 600;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  border: none;
-}
-
-.kg-btn-primary {
-  background: var(--color-accent);
-  color: var(--color-text-inverse);
-}
-
-.kg-btn-primary:hover {
-  background: var(--color-accent-hover);
-}
-
-.kg-btn-secondary {
-  background: var(--color-bg-hover);
-  color: var(--color-text-secondary);
-}
-
-.kg-btn-secondary:hover {
-  background: var(--color-border);
-  color: var(--color-text-primary);
-}
-
-/* ===== Evolution Skill Tags (below assistant messages) ===== */
-.evo-skill-tags-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-xs);
-  margin-top: var(--space-xs);
-  padding-left: 4px;
-}
-
-.evo-skill-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 10px;
-  border-radius: var(--radius-full);
-  background: var(--color-accent-subtle);
-  color: var(--color-accent);
-  font-size: 11px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  border: 1px solid transparent;
-  font-family: var(--font-mono);
-}
-
-.evo-skill-tag:hover {
-  background: var(--color-accent-light);
-  border-color: var(--color-accent);
-  transform: translateY(-1px);
-}
-
-.evo-skill-tag-more {
-  background: var(--color-bg-tertiary);
-  color: var(--color-text-tertiary);
-  cursor: default;
-  font-family: var(--font-sans);
-}
-
-.evo-skill-tag-more:hover {
-  background: var(--color-bg-tertiary);
-  border-color: transparent;
-  transform: none;
-}
-
-/* ===== AI 生成媒体：固定缩略图 + 下载 ===== */
-.md-text-seg {
-  display: block;
-  width: 100%;
-}
-
-.chat-media-wrap {
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-  margin: 2px 0;
-}
-
-.chat-media-img {
-  display: block;
-  max-width: 320px;
-  max-height: 320px;
-  width: auto;
-  height: auto;
-  object-fit: contain;
-  border-radius: var(--radius-md);
-  background: var(--color-bg-tertiary);
-  cursor: zoom-in;
-  box-shadow: var(--shadow-xs);
-}
-
-.chat-media-video {
-  display: block;
-  max-width: 360px;
-  max-height: 320px;
-  width: auto;
-  height: auto;
-  border-radius: var(--radius-md);
-  background: #000;
-  cursor: zoom-in;
-  box-shadow: var(--shadow-xs);
-}
-
-.chat-media-bar {
-  margin-top: 6px;
-}
-
-.chat-media-link {
-  font-size: var(--text-xs);
-  color: var(--color-accent);
-  text-decoration: none;
-}
-
-.chat-media-link:hover {
-  text-decoration: underline;
-}
-
-/* 下载按钮 */
-.chat-media-dl-btn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: var(--radius-full);
-  background: rgba(0, 0, 0, 0.55);
-  color: #fff;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity var(--transition-fast), background var(--transition-fast);
-  z-index: 2;
-}
-
-.chat-media-wrap:hover .chat-media-dl-btn {
-  opacity: 1;
-}
-
-.chat-media-dl-btn:hover {
-  background: rgba(0, 0, 0, 0.75);
-}
-
-/* 下载弹层 */
-.chat-media-dl-pop {
-  position: absolute;
-  top: 44px;
-  right: 8px;
-  z-index: 20;
-  width: 220px;
-  padding: var(--space-md);
-  background: var(--color-card-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  animation: fadeIn var(--transition-fast);
-}
-
-.chat-media-dl-title {
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin-bottom: var(--space-sm);
-}
-
-.chat-media-dl-row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  margin-bottom: var(--space-xs);
-}
-
-.chat-media-dl-label {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-  margin-bottom: 4px;
-}
-
-.chat-media-dl-fmts {
-  display: flex;
-  gap: 4px;
-}
-
-.chat-media-dl-fmt {
-  flex: 1;
-  padding: 4px 0;
-  font-size: var(--text-xs);
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  background: var(--color-bg-tertiary);
-  border: 1px solid transparent;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.chat-media-dl-fmt.active {
-  color: var(--color-text-inverse);
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-}
-
-.chat-media-dl-sizes {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.chat-media-dl-size {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 10px;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.chat-media-dl-size:hover {
-  border-color: var(--color-accent);
-  background: var(--color-accent-subtle);
-}
-
-.chat-media-dl-size-label {
-  font-size: var(--text-sm);
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.chat-media-dl-size-px {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-  font-family: var(--font-mono);
-}
-
-/* 灯箱预览 */
-.chat-lightbox {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.78);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: var(--z-overlay);
-  animation: fadeIn 0.2s ease;
-}
-
-.chat-lightbox-close {
-  position: absolute;
-  top: 18px;
-  right: 22px;
-  width: 40px;
-  height: 40px;
-  border-radius: var(--radius-full);
-  border: none;
-  background: rgba(255, 255, 255, 0.15);
-  color: #fff;
-  font-size: 24px;
-  line-height: 1;
-  cursor: pointer;
-  transition: background var(--transition-fast);
-}
-
-.chat-lightbox-close:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.chat-lightbox-content {
-  max-width: 92vw;
-  max-height: 86vh;
-}
-
-/* ===== Clarify Card (模糊创作意图方向确认) ===== */
-.chat-clarify-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-  padding: var(--space-lg);
-  background: var(--color-bg-tertiary, #f5f7fb);
-  border: 1px solid var(--color-border-light, #e6e9f0);
-  border-radius: var(--radius-lg);
-}
-
-.chat-clarify-title {
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.chat-clarify-sub {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-  padding: 6px 10px;
-  background: var(--color-bg-secondary, #fff);
-  border-radius: var(--radius-sm);
-  border-left: 3px solid var(--color-accent, #5B5FED);
-  word-break: break-all;
-}
-
-.chat-clarify-options {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--space-sm);
-}
-
-.chat-clarify-option {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 2px;
-  padding: 10px 14px;
-  border: 1.5px solid var(--color-border, #dfe3ec);
-  border-radius: var(--radius-md);
-  background: var(--color-bg-secondary, #fff);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  text-align: left;
-}
-
-.chat-clarify-option:hover {
-  border-color: var(--color-accent, #5B5FED);
-  background: var(--color-accent-subtle, #eef0ff);
-  transform: translateY(-1px);
-}
-
-.chat-clarify-opt-label {
-  font-size: var(--text-sm);
-  font-weight: 700;
-  color: var(--color-accent, #5B5FED);
-}
-
-.chat-clarify-opt-desc {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-  line-height: 1.4;
-}
-
-@media (max-width: 640px) {
-  .chat-clarify-options {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* ===== 附件 chips ===== */
-.attachment-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-xs);
-  padding: 8px 4px 0;
-}
-
-.attachment-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  max-width: 220px;
-  padding: 5px 8px 5px 10px;
-  background: var(--color-bg-tertiary, #f5f7fb);
-  border: 1px solid var(--color-border-light, #e6e9f0);
-  border-radius: var(--radius-md);
-  font-size: var(--text-xs);
-  color: var(--color-text-secondary);
-}
-
-.attachment-chip svg {
-  flex: none;
-  color: var(--color-accent, #5B5FED);
-}
-
-.attachment-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.attachment-remove {
-  flex: none;
-  border: none;
-  background: transparent;
-  color: var(--color-text-tertiary);
-  font-size: 16px;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0 2px;
-}
-
-.attachment-remove:hover {
-  color: #e5484d;
-}
-
-/* ===== 语音输入/朗读按钮 ===== */
-.mic-btn {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: 1px solid var(--color-border, #dfe3ec);
-  border-radius: var(--radius-md);
-  background: var(--color-bg-secondary, #fff);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.mic-btn:hover {
-  border-color: var(--color-accent, #5B5FED);
-  color: var(--color-accent, #5B5FED);
-}
-
-.mic-btn.recording {
-  background: #e5484d;
-  border-color: #e5484d;
-  color: #fff;
-  animation: mic-pulse 1.2s infinite;
-}
-
-@keyframes mic-pulse {
-  0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.5); }
-  70% { box-shadow: 0 0 0 10px rgba(229, 72, 77, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
-}
-
-.msg-tts-btn {
-  margin-top: 6px;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
-  border: 1px solid var(--color-border-light, #e6e9f0);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-secondary, #fff);
-  color: var(--color-text-tertiary);
-  cursor: pointer;
-  font-size: var(--text-xs);
-  transition: all var(--transition-fast);
-}
-
-.msg-tts-btn:hover {
-  border-color: var(--color-accent, #5B5FED);
-  color: var(--color-accent, #5B5FED);
-}
+/* ===== Spin Animation ===== */
+@keyframes spin-icon-rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.spin-icon {
+  animation: spin-icon-rotate 0.8s linear infinite;
+}
+
+/* ===== Chat Page Layout ===== */
+.chat-page {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* ===== Left Sidebar ===== */
+.chat-sidebar {
+  width: 280px;
+  min-width: 280px;
+  background: var(--color-sidebar-bg);
+  border-right: 1px solid var(--color-border-light);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chat-sidebar-header {
+  padding: var(--space-lg);
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.new-chat-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  width: 100%;
+  padding: var(--space-md) var(--space-lg);
+  background: var(--color-accent);
+  color: var(--color-text-inverse);
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: var(--text-base);
+  font-weight: 600;
+  cursor: pointer;
+  transition: background var(--transition-fast), transform var(--transition-fast);
+}
+
+.new-chat-btn:hover {
+  background: var(--color-accent-hover);
+}
+
+.new-chat-btn:active {
+  transform: scale(0.98);
+}
+
+/* Search */
+.chat-sidebar-search {
+  padding: var(--space-md) var(--space-lg);
+  position: relative;
+}
+
+.search-icon-wrap {
+  position: absolute;
+  left: calc(var(--space-lg) + var(--space-md));
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  color: var(--color-text-tertiary);
+  pointer-events: none;
+}
+
+.search-input {
+  width: 100%;
+  padding: var(--space-sm) var(--space-md) var(--space-sm) calc(var(--space-2xl) + var(--space-sm));
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  outline: none;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.search-input::placeholder {
+  color: var(--color-text-disabled);
+}
+
+.search-input:focus {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-light);
+}
+
+/* Conversation List */
+.chat-sidebar-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-sm) var(--space-sm);
+}
+
+.conversation-item {
+  padding: var(--space-md) var(--space-md);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+  margin-bottom: 2px;
+  position: relative;
+}
+
+.conversation-item:hover {
+  background: var(--color-sidebar-hover);
+}
+
+.conversation-item.active {
+  background: var(--color-sidebar-active);
+}
+
+.conversation-item.active .conv-title {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.conv-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-xs);
+  margin-bottom: 4px;
+}
+
+.conv-pin-icon {
+  display: flex;
+  align-items: center;
+  color: var(--color-accent);
+  flex-shrink: 0;
+  transform: rotate(45deg);
+}
+
+.conversation-item.pinned {
+  background: var(--color-accent-subtle);
+  border-left: 3px solid var(--color-accent);
+}
+
+.conversation-item.pinned:hover {
+  background: var(--color-accent-light);
+}
+
+.conversation-item.pinned.active {
+  background: var(--color-sidebar-active);
+  border-left-color: var(--color-accent);
+}
+
+.conv-title {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-text-primary);
+  flex: 1;
+  min-width: 0;
+  line-height: 1.4;
+}
+
+.conv-more-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.conversation-item:hover .conv-more-btn {
+  opacity: 1;
+  color: var(--color-text-secondary);
+}
+
+.conv-more-btn:hover {
+  background: var(--color-bg-tertiary);
+  color: var(--color-accent);
+}
+
+.conv-preview {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  line-height: 1.4;
+  margin-bottom: 4px;
+}
+
+.conv-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.conv-time {
+  font-size: 11px;
+  color: var(--color-text-disabled);
+}
+
+.conv-badge {
+  font-size: 10px;
+  color: var(--color-warning);
+  background: var(--color-warning-light);
+  padding: 1px 6px;
+  border-radius: var(--radius-full);
+  font-weight: 500;
+}
+
+.conv-empty {
+  padding: var(--space-2xl) var(--space-lg);
+  text-align: center;
+  color: var(--color-text-tertiary);
+  font-size: var(--text-sm);
+}
+
+/* ===== Right Main Area ===== */
+.chat-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--color-bg-primary);
+  overflow: hidden;
+}
+
+/* Chat Header */
+.chat-header {
+  height: 52px;
+  min-height: 52px;
+  padding: 0 var(--space-xl);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.chat-header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  min-width: 0;
+}
+
+.model-selector {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-xs) var(--space-md);
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  transition: background var(--transition-fast);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.model-selector:hover {
+  background: var(--color-bg-hover);
+}
+
+.model-name {
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.model-badge {
+  font-size: 10px;
+  color: var(--color-accent);
+  background: var(--color-accent-light);
+  padding: 1px 6px;
+  border-radius: var(--radius-full);
+  font-weight: 600;
+}
+
+.chat-header-divider {
+  width: 1px;
+  height: 20px;
+  background: var(--color-border);
+  flex-shrink: 0;
+}
+
+.chat-title {
+  font-size: var(--text-base);
+  font-weight: 500;
+  color: var(--color-text-primary);
+  min-width: 0;
+}
+
+/* Messages Area */
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.chat-empty-state,
+.chat-empty-full {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--color-text-tertiary);
+  gap: var(--space-md);
+  user-select: none;
+}
+
+.empty-title {
+  font-size: var(--text-lg);
+  font-weight: 600;
+  color: var(--color-text-secondary);
+}
+
+.empty-desc {
+  font-size: var(--text-sm);
+  color: var(--color-text-tertiary);
+}
+
+/* Message Row */
+.message-row {
+  display: flex;
+  flex-direction: column;
+  max-width: 75%;
+  animation: fadeIn var(--transition-normal);
+}
+
+.message-row.user {
+  align-self: flex-end;
+  align-items: flex-end;
+}
+
+.message-row.assistant {
+  align-self: flex-start;
+  align-items: flex-start;
+}
+
+/* Message Bubble */
+.message-bubble {
+  padding: var(--space-md) var(--space-lg);
+  border-radius: var(--radius-lg);
+  font-size: var(--text-base);
+  line-height: 1.7;
+  word-break: break-word;
+}
+
+.message-bubble.user {
+  background: var(--color-accent);
+  color: var(--color-text-inverse);
+  border-bottom-right-radius: var(--radius-sm);
+}
+
+.message-bubble.assistant {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-light);
+  border-bottom-left-radius: var(--radius-sm);
+  box-shadow: var(--shadow-xs);
+}
+
+/* Message Meta */
+.message-meta {
+  display: flex;
+  gap: var(--space-sm);
+  padding: 4px var(--space-sm) 0;
+  font-size: 11px;
+  color: var(--color-text-disabled);
+}
+
+.message-meta.user {
+  justify-content: flex-end;
+}
+
+/* Markdown Rendering */
+.markdown-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.message-bubble.user .markdown-body {
+  gap: 4px;
+}
+
+.md-code-block {
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: var(--radius-sm);
+  padding: var(--space-md);
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  margin: 4px 0;
+}
+
+.message-bubble.user .md-code-block {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.md-inline-code {
+  background: rgba(0, 0, 0, 0.07);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+}
+
+.message-bubble.user .md-inline-code {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.md-h2 {
+  font-size: var(--text-lg);
+  font-weight: 700;
+  margin-top: 8px;
+  color: inherit;
+}
+
+.md-h3 {
+  font-size: var(--text-md);
+  font-weight: 600;
+  margin-top: 6px;
+  color: inherit;
+}
+
+.md-h4 {
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: inherit;
+}
+
+.md-li {
+  margin-left: 1.2em;
+  line-height: 1.6;
+}
+
+.md-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 12px 0;
+  font-size: var(--text-sm);
+  background: #fff;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.md-table thead {
+  background: linear-gradient(135deg, #5B5FED 0%, #7B7FEE 100%);
+  color: #fff;
+}
+
+.md-table th {
+  padding: 10px 14px;
+  font-weight: 600;
+  text-align: left;
+  font-size: var(--text-xs);
+  letter-spacing: 0.3px;
+}
+
+.md-table td {
+  padding: 10px 14px;
+  border-bottom: 1px solid #EEF0F4;
+  color: var(--color-text-primary);
+  vertical-align: top;
+}
+
+.md-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.md-table tbody tr:hover {
+  background: #F8F9FC;
+}
+
+.md-table tbody tr:nth-child(even) {
+  background: #FAFBFD;
+}
+
+.md-table tbody tr:nth-child(even):hover {
+  background: #F0F2F7;
+}
+
+.message-bubble.user .md-table {
+  background: rgba(255, 255, 255, 0.08);
+  color: inherit;
+}
+.message-bubble.user .md-table th,
+.message-bubble.user .md-table td {
+  color: inherit;
+  border-color: rgba(255, 255, 255, 0.15);
+}
+.message-bubble.user .md-table tbody tr:hover,
+.message-bubble.user .md-table tbody tr:nth-child(even) {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* 数学公式 */
+.md-math-block {
+  display: block;
+  overflow-x: auto;
+  padding: 10px 0;
+  text-align: center;
+}
+.md-math-inline {
+  display: inline;
+  padding: 0 2px;
+}
+
+/* Mermaid 图表 */
+.md-mermaid {
+  display: flex;
+  justify-content: center;
+  margin: 16px 0;
+  padding: 12px;
+  background: #f8f9fb;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  overflow-x: auto;
+}
+.md-mermaid-rendered svg {
+  max-width: 100%;
+  height: auto;
+}
+
+/* 代码块包装器 + 复制按钮 */
+.md-code-wrapper {
+  position: relative;
+  margin: 12px 0;
+}
+.md-code-wrapper .md-code-block {
+  margin: 0;
+  border-radius: var(--radius-md);
+}
+.md-code-copy {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  padding: 4px 10px;
+  font-size: 12px;
+  color: #6B7280;
+  background: #F3F4F6;
+  border: 1px solid #E5E7EB;
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s;
+  z-index: 2;
+}
+.md-code-wrapper:hover .md-code-copy {
+  opacity: 1;
+}
+
+/* 删除线 */
+del {
+  text-decoration: line-through;
+  opacity: 0.6;
+}
+
+.md-hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 8px 0;
+}
+
+.message-bubble.user .md-hr {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.message-bubble.user .md-code-block {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+/* ===== Input Area ===== */
+.chat-input-area {
+  padding: var(--space-md) var(--space-xl) var(--space-xl);
+  background: var(--color-bg-primary);
+  overflow: visible;
+}
+
+.chat-input-container {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-sm);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.chat-input-container:focus-within {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-light);
+}
+
+.input-attachments {
+  display: flex;
+  gap: 4px;
+  padding: 0 var(--space-sm) 4px;
+}
+
+.attach-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  font-weight: 500;
+}
+
+.attach-btn:hover {
+  background: var(--color-accent-subtle);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.input-row {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--space-sm);
+  padding: 0 var(--space-sm);
+}
+
+.chat-textarea {
+  flex: 1;
+  border: none;
+  outline: none;
+  resize: none;
+  font-size: var(--text-base);
+  line-height: 1.6;
+  color: var(--color-text-primary);
+  background: transparent;
+  padding: var(--space-xs) 0;
+  max-height: 160px;
+  font-family: var(--font-sans);
+}
+
+.chat-textarea::placeholder {
+  color: var(--color-text-disabled);
+}
+
+.send-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: var(--radius-md);
+  background: var(--color-accent);
+  color: var(--color-text-inverse);
+  border: none;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  flex-shrink: 0;
+  margin-bottom: 2px;
+}
+
+.send-btn:hover:not(:disabled) {
+  background: var(--color-accent-hover);
+  transform: scale(1.05);
+}
+
+.send-btn:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.send-btn:disabled {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* ===== Dropdown ===== */
+.dropdown-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.dropdown-trigger {
+  cursor: pointer;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  z-index: 9999;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-xs);
+  min-width: 180px;
+  max-height: 320px;
+  overflow-y: auto;
+  animation: fadeIn var(--transition-fast);
+}
+
+/* Upward-opening dropdown for bottom-of-page elements */
+.dropdown-menu.dropup {
+  top: auto;
+  bottom: calc(100% + 4px);
+}
+
+.dropdown-menu.align-left {
+  left: 0;
+}
+
+.dropdown-menu.align-right {
+  right: 0;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  width: 100%;
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background var(--transition-fast);
+  text-align: left;
+  white-space: nowrap;
+}
+
+.dropdown-item:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.dropdown-item.selected {
+  color: var(--color-accent);
+  background: var(--color-accent-subtle);
+  font-weight: 500;
+}
+
+.dropdown-item.danger {
+  color: var(--color-error);
+}
+
+.dropdown-item.danger:hover {
+  background: var(--color-error-light);
+}
+
+.dropdown-item.disabled {
+  color: var(--color-text-disabled);
+  cursor: default;
+  pointer-events: none;
+}
+
+.dropdown-divider {
+  height: 1px;
+  background: var(--color-border-light);
+  margin: var(--space-xs) 0;
+}
+
+.model-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  width: 100%;
+}
+
+.model-provider-tag {
+  font-size: 10px;
+  color: var(--color-text-tertiary);
+  margin-left: auto;
+  background: var(--color-bg-tertiary);
+  padding: 1px 6px;
+  border-radius: var(--radius-full);
+}
+
+.attach-dropdown-title {
+  padding: var(--space-xs) var(--space-md) var(--space-sm);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.attach-count {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--color-text-disabled);
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 768px) {
+  .chat-sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: var(--z-overlay);
+    transform: translateX(-100%);
+    transition: transform var(--transition-slow);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .message-row {
+    max-width: 90%;
+  }
+
+  .chat-header {
+    padding: 0 var(--space-md);
+  }
+
+  .chat-messages {
+    padding: var(--space-md);
+  }
+
+  .chat-input-area {
+    padding: var(--space-sm) var(--space-md) var(--space-md);
+  }
+}
+
+/* ===== Knowledge Graph Conversion Modal ===== */
+.kg-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-overlay);
+  animation: fadeIn 0.2s ease;
+}
+
+.kg-modal {
+  background: var(--color-card-bg);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-xl);
+  width: 420px;
+  max-width: 90vw;
+  overflow: hidden;
+}
+
+.kg-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-xl) var(--space-2xl);
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.kg-modal-header h3 {
+  font-size: var(--text-lg);
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.kg-modal-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.kg-modal-close:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.kg-modal-body {
+  padding: var(--space-2xl);
+}
+
+/* Progress State */
+.kg-progress-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-xl);
+}
+
+.kg-steps {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  width: 100%;
+}
+
+.kg-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.kg-step-indicator {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-full);
+  border: 2px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--color-text-tertiary);
+  background: var(--color-card-bg);
+  transition: all var(--transition-normal);
+}
+
+.kg-step.active .kg-step-indicator {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+  background: var(--color-accent-light);
+}
+
+.kg-step.done .kg-step-indicator {
+  border-color: var(--color-success);
+  color: var(--color-success);
+  background: var(--color-success-light, rgba(34, 197, 94, 0.1));
+}
+
+.kg-step-label {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+.kg-step.active .kg-step-label {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.kg-step.done .kg-step-label {
+  color: var(--color-success);
+}
+
+.kg-step-connector {
+  flex: 1;
+  padding-bottom: 20px;
+}
+
+.kg-connector-line {
+  height: 2px;
+  background: var(--color-border);
+  border-radius: 1px;
+  position: relative;
+  overflow: hidden;
+}
+
+.kg-connector-line.done {
+  background: var(--color-success);
+}
+
+.kg-connector-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 70%;
+  background: var(--color-accent);
+  border-radius: 1px;
+  animation: kgProgressPulse 1s ease-in-out infinite;
+}
+
+@keyframes kgProgressPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.kg-progress-tip {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+}
+
+/* Spinner */
+.kg-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid transparent;
+  border-top-color: var(--color-accent);
+  border-radius: var(--radius-full);
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Success State */
+.kg-success-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-lg);
+}
+
+.kg-success-icon {
+  margin-bottom: var(--space-sm);
+}
+
+.kg-success-title {
+  font-size: var(--text-lg);
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.kg-result-stats {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xl);
+  padding: var(--space-lg) var(--space-2xl);
+  background: var(--color-bg-subtle);
+  border-radius: var(--radius-lg);
+}
+
+.kg-stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+.kg-stat-value {
+  font-size: var(--text-2xl);
+  font-weight: 800;
+  color: var(--color-accent);
+}
+
+.kg-stat-label {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+}
+
+.kg-stat-divider {
+  width: 1px;
+  height: 32px;
+  background: var(--color-border);
+}
+
+.kg-result-kb {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+}
+
+.kg-actions {
+  display: flex;
+  gap: var(--space-md);
+  margin-top: var(--space-sm);
+}
+
+/* Error State */
+.kg-error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-lg);
+}
+
+.kg-error-icon {
+  margin-bottom: var(--space-xs);
+}
+
+.kg-error-text {
+  font-size: var(--text-sm);
+  color: var(--color-error);
+  text-align: center;
+}
+
+/* Buttons */
+.kg-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-sm) var(--space-xl);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  border: none;
+}
+
+.kg-btn-primary {
+  background: var(--color-accent);
+  color: var(--color-text-inverse);
+}
+
+.kg-btn-primary:hover {
+  background: var(--color-accent-hover);
+}
+
+.kg-btn-secondary {
+  background: var(--color-bg-hover);
+  color: var(--color-text-secondary);
+}
+
+.kg-btn-secondary:hover {
+  background: var(--color-border);
+  color: var(--color-text-primary);
+}
+
+/* ===== Evolution Skill Tags (below assistant messages) ===== */
+.evo-skill-tags-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+  margin-top: var(--space-xs);
+  padding-left: 4px;
+}
+
+.evo-skill-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  border-radius: var(--radius-full);
+  background: var(--color-accent-subtle);
+  color: var(--color-accent);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  border: 1px solid transparent;
+  font-family: var(--font-mono);
+}
+
+.evo-skill-tag:hover {
+  background: var(--color-accent-light);
+  border-color: var(--color-accent);
+  transform: translateY(-1px);
+}
+
+.evo-skill-tag-more {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-tertiary);
+  cursor: default;
+  font-family: var(--font-sans);
+}
+
+.evo-skill-tag-more:hover {
+  background: var(--color-bg-tertiary);
+  border-color: transparent;
+  transform: none;
+}
+
+/* ===== AI 生成媒体：固定缩略图 + 下载 ===== */
+.md-text-seg {
+  display: block;
+  width: 100%;
+}
+
+.chat-media-wrap {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  margin: 2px 0;
+}
+
+.chat-media-img {
+  display: block;
+  max-width: 320px;
+  max-height: 320px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: var(--radius-md);
+  background: var(--color-bg-tertiary);
+  cursor: zoom-in;
+  box-shadow: var(--shadow-xs);
+}
+
+.chat-media-video {
+  display: block;
+  max-width: 360px;
+  max-height: 320px;
+  width: auto;
+  height: auto;
+  border-radius: var(--radius-md);
+  background: #000;
+  cursor: zoom-in;
+  box-shadow: var(--shadow-xs);
+}
+
+.chat-media-bar {
+  margin-top: 6px;
+}
+
+.chat-media-link {
+  font-size: var(--text-xs);
+  color: var(--color-accent);
+  text-decoration: none;
+}
+
+.chat-media-link:hover {
+  text-decoration: underline;
+}
+
+/* 下载按钮 */
+.chat-media-dl-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: var(--radius-full);
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--transition-fast), background var(--transition-fast);
+  z-index: 2;
+}
+
+.chat-media-wrap:hover .chat-media-dl-btn {
+  opacity: 1;
+}
+
+.chat-media-dl-btn:hover {
+  background: rgba(0, 0, 0, 0.75);
+}
+
+/* 下载弹层 */
+.chat-media-dl-pop {
+  position: absolute;
+  top: 44px;
+  right: 8px;
+  z-index: 20;
+  width: 220px;
+  padding: var(--space-md);
+  background: var(--color-card-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  animation: fadeIn var(--transition-fast);
+}
+
+.chat-media-dl-title {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-sm);
+}
+
+.chat-media-dl-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-xs);
+}
+
+.chat-media-dl-label {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  margin-bottom: 4px;
+}
+
+.chat-media-dl-fmts {
+  display: flex;
+  gap: 4px;
+}
+
+.chat-media-dl-fmt {
+  flex: 1;
+  padding: 4px 0;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  background: var(--color-bg-tertiary);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.chat-media-dl-fmt.active {
+  color: var(--color-text-inverse);
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+}
+
+.chat-media-dl-sizes {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.chat-media-dl-size {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.chat-media-dl-size:hover {
+  border-color: var(--color-accent);
+  background: var(--color-accent-subtle);
+}
+
+.chat-media-dl-size-label {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.chat-media-dl-size-px {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-mono);
+}
+
+/* 灯箱预览 */
+.chat-lightbox {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.78);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-overlay);
+  animation: fadeIn 0.2s ease;
+}
+
+.chat-lightbox-close {
+  position: absolute;
+  top: 18px;
+  right: 22px;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-full);
+  border: none;
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background var(--transition-fast);
+}
+
+.chat-lightbox-close:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.chat-lightbox-content {
+  max-width: 92vw;
+  max-height: 86vh;
+}
+
+/* ===== Clarify Card (模糊创作意图方向确认) ===== */
+.chat-clarify-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  padding: var(--space-lg);
+  background: var(--color-bg-tertiary, #f5f7fb);
+  border: 1px solid var(--color-border-light, #e6e9f0);
+  border-radius: var(--radius-lg);
+}
+
+.chat-clarify-title {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.chat-clarify-sub {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  padding: 6px 10px;
+  background: var(--color-bg-secondary, #fff);
+  border-radius: var(--radius-sm);
+  border-left: 3px solid var(--color-accent, #5B5FED);
+  word-break: break-all;
+}
+
+.chat-clarify-options {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-sm);
+}
+
+.chat-clarify-option {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  padding: 10px 14px;
+  border: 1.5px solid var(--color-border, #dfe3ec);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-secondary, #fff);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  text-align: left;
+}
+
+.chat-clarify-option:hover {
+  border-color: var(--color-accent, #5B5FED);
+  background: var(--color-accent-subtle, #eef0ff);
+  transform: translateY(-1px);
+}
+
+.chat-clarify-opt-label {
+  font-size: var(--text-sm);
+  font-weight: 700;
+  color: var(--color-accent, #5B5FED);
+}
+
+.chat-clarify-opt-desc {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  line-height: 1.4;
+}
+
+@media (max-width: 640px) {
+  .chat-clarify-options {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ===== 附件 chips ===== */
+.attachment-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+  padding: 8px 4px 0;
+}
+
+.attachment-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 220px;
+  padding: 5px 8px 5px 10px;
+  background: var(--color-bg-tertiary, #f5f7fb);
+  border: 1px solid var(--color-border-light, #e6e9f0);
+  border-radius: var(--radius-md);
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+}
+
+.attachment-chip svg {
+  flex: none;
+  color: var(--color-accent, #5B5FED);
+}
+
+.attachment-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.attachment-remove {
+  flex: none;
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 2px;
+}
+
+.attachment-remove:hover {
+  color: #e5484d;
+}
+
+/* ===== 语音输入/朗读按钮 ===== */
+.mic-btn {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--color-border, #dfe3ec);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-secondary, #fff);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.mic-btn:hover {
+  border-color: var(--color-accent, #5B5FED);
+  color: var(--color-accent, #5B5FED);
+}
+
+.mic-btn.recording {
+  background: #e5484d;
+  border-color: #e5484d;
+  color: #fff;
+  animation: mic-pulse 1.2s infinite;
+}
+
+@keyframes mic-pulse {
+  0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.5); }
+  70% { box-shadow: 0 0 0 10px rgba(229, 72, 77, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
+}
+
+.msg-tts-btn {
+  margin-top: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border: 1px solid var(--color-border-light, #e6e9f0);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-secondary, #fff);
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  font-size: var(--text-xs);
+  transition: all var(--transition-fast);
+}
+
+.msg-tts-btn:hover {
+  border-color: var(--color-accent, #5B5FED);
+  color: var(--color-accent, #5B5FED);
+}
diff --git a/frontend/src/pages/front/ChatPage.tsx b/frontend/src/pages/front/ChatPage.tsx
index 6857996..58a402e 100644
--- a/frontend/src/pages/front/ChatPage.tsx
+++ b/frontend/src/pages/front/ChatPage.tsx
@@ -1,1719 +1,1751 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { chatAPI, knowledgeAPI, marketAPI, evolutionAPI } from '@/api';
-import type { Conversation, Message } from '@/types';
-import './ChatPage.css';
-
-// ===== 增强渲染依赖 =====
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import katex from 'katex';
-import 'katex/dist/katex.min.css';
-
-// ===== Enhanced Markdown Renderer =====
-// 媒体(图片/视频)以受限缩略图呈现，并提供下载(格式+尺寸)选项
-interface MediaInfo { type: 'img' | 'video'; src: string; alt?: string; }
-
-// 全屏灯箱预览
-const ChatLightbox: React.FC<{ src: string; type: 'img' | 'video'; onClose: () => void }> = ({ src, type, onClose }) => {
-  useEffect(() => {
-    const h = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
-    document.addEventListener('keydown', h);
-    return () => document.removeEventListener('keydown', h);
-  }, [onClose]);
-  return (
-    <div className="chat-lightbox" onClick={onClose}>
-      <button className="chat-lightbox-close" onClick={onClose} aria-label="关闭">×</button>
-      <div className="chat-lightbox-content" onClick={(e) => e.stopPropagation()}>
-        {type === 'video'
-          ? <video src={src} controls autoPlay style={{ maxWidth: '92vw', maxHeight: '86vh', borderRadius: 8 }} />
-          : <img src={src} alt="" style={{ maxWidth: '92vw', maxHeight: '86vh', borderRadius: 8 }} />}
-      </div>
-    </div>
-  );
-};
-
-// 根据原始尺寸推算 3 个建议下载尺寸（保持宽高比）
-function computeSizes(natural: { w: number; h: number }) {
-  if (natural.w && natural.h) {
-    const ratio = natural.w / natural.h;
-    const fit = (maxDim: number) => ratio >= 1
-      ? { w: maxDim, h: Math.round(maxDim / ratio) }
-      : { w: Math.round(maxDim * ratio), h: maxDim };
-    return [
-      { label: '小图', ...fit(512) },
-      { label: '中图', ...fit(1024) },
-      { label: '原始', w: natural.w, h: natural.h },
-    ];
-  }
-  // 未知原始尺寸时按生成默认 4:3 给出三档
-  return [
-    { label: '小图', w: 512, h: 384 },
-    { label: '中图', w: 1024, h: 768 },
-    { label: '大图', w: 2048, h: 1536 },
-  ];
-}
-
-// 客户端画布转换格式+尺寸后下载；跨域受限时回退到新标签页打开原图
-function downloadImage(src: string, format: 'png' | 'jpg' | 'webp', w: number, h: number) {
-  const fallback = () => window.open(src, '_blank');
-  const img = new Image();
-  img.crossOrigin = 'anonymous';
-  img.onload = () => {
-    try {
-      const canvas = document.createElement('canvas');
-      canvas.width = w; canvas.height = h;
-      const ctx = canvas.getContext('2d');
-      if (!ctx) { fallback(); return; }
-      if (format === 'jpg') { ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, w, h); }
-      ctx.drawImage(img, 0, 0, w, h);
-      const mime = format === 'jpg' ? 'image/jpeg' : format === 'webp' ? 'image/webp' : 'image/png';
-      canvas.toBlob((blob) => {
-        if (!blob) { fallback(); return; }
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url; a.download = `aiflow-image-${w}x${h}.${format}`;
-        document.body.appendChild(a); a.click(); a.remove();
-        setTimeout(() => URL.revokeObjectURL(url), 1000);
-      }, mime, 0.92);
-    } catch (e) {
-      fallback();
-    }
-  };
-  img.onerror = fallback;
-  img.src = src;
-}
-
-// 媒体渲染组件：固定尺寸缩略图 + 点击放大 + 下载(格式/尺寸)
-const ChatMedia: React.FC<{ info: MediaInfo }> = ({ info }) => {
-  const [open, setOpen] = useState(false);
-  const [dlOpen, setDlOpen] = useState(false);
-  const [fmt, setFmt] = useState<'png' | 'jpg' | 'webp'>('png');
-  const [natural, setNatural] = useState<{ w: number; h: number }>({ w: 0, h: 0 });
-
-  if (info.type === 'video') {
-    return (
-      <div className="chat-media-wrap">
-        <video className="chat-media-video" src={info.src} controls preload="metadata" onClick={() => setOpen(true)} />
-        <div className="chat-media-bar">
-          <a className="chat-media-link" href={info.src} target="_blank" rel="noopener" onClick={(e) => e.stopPropagation()}>打开 / 下载原视频</a>
-        </div>
-        {open && <ChatLightbox src={info.src} type="video" onClose={() => setOpen(false)} />}
-      </div>
-    );
-  }
-
-  const sizes = computeSizes(natural);
-  return (
-    <div className="chat-media-wrap">
-      <img
-        className="chat-media-img"
-        src={info.src}
-        alt={info.alt || '生成图片'}
-        loading="lazy"
-        onClick={() => setOpen(true)}
-        onLoad={(e) => {
-          const im = e.currentTarget;
-          if (im.naturalWidth && im.naturalHeight) setNatural({ w: im.naturalWidth, h: im.naturalHeight });
-        }}
-      />
-      <button className="chat-media-dl-btn" title="下载图片" onClick={(e) => { e.stopPropagation(); setDlOpen((o) => !o); }}>
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" />
-        </svg>
-      </button>
-      {dlOpen && (
-        <div className="chat-media-dl-pop" onClick={(e) => e.stopPropagation()}>
-          <div className="chat-media-dl-title">下载图片</div>
-          <div className="chat-media-dl-row">
-            <span className="chat-media-dl-label">格式</span>
-            <div className="chat-media-dl-fmts">
-              {(['png', 'jpg', 'webp'] as const).map((f) => (
-                <button key={f} className={`chat-media-dl-fmt ${fmt === f ? 'active' : ''}`} onClick={() => setFmt(f)}>{f.toUpperCase()}</button>
-              ))}
-            </div>
-          </div>
-          <div className="chat-media-dl-label">尺寸</div>
-          <div className="chat-media-dl-sizes">
-            {sizes.map((s, i) => (
-              <button key={i} className="chat-media-dl-size" onClick={() => { downloadImage(info.src, fmt, s.w, s.h); setDlOpen(false); }}>
-                <span className="chat-media-dl-size-label">{s.label}</span>
-                <span className="chat-media-dl-size-px">{s.w}×{s.h}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-      {open && <ChatLightbox src={info.src} type="img" onClose={() => setOpen(false)} />}
-    </div>
-  );
-};
-
-const MarkdownContent: React.FC<{ content: string }> = ({ content }) => {
-  const nodes = useMemo(() => {
-    let text = content;
-
-    // 1. Extract code blocks first (protect from other replacements)
-    const codeBlocks: string[] = [];
-    text = text.replace(/```(\w*)\n?([\s\S]*?)```/g, (_m: string, _lang: string, code: string) => {
-      const idx = codeBlocks.length;
-      codeBlocks.push('<pre class="md-code-block"><code class="md-code">' + escapeHtml(code.trim()) + '</code></pre>');
-      return '\x00CODEBLOCK' + idx + '\x00';
-    });
-
-    // 2. Extract inline code
-    const inlineCodes: string[] = [];
-    text = text.replace(/`([^`]+)`/g, (_m: string, code: string) => {
-      const idx = inlineCodes.length;
-      inlineCodes.push('<code class="md-inline-code">' + escapeHtml(code) + '</code>');
-      return '\x00INLINE' + idx + '\x00';
-    });
-
-    // 2.5 Extract media blocks (<img>/<video>) → 结构化，后续渲染为 React 组件
-    const mediaBlocks: MediaInfo[] = [];
-    text = text.replace(/<(img|video)([^>]*?)\/?>/gi, (_m: string, tag: string, attrs: string) => {
-      const type = tag.toLowerCase() === 'img' ? 'img' : 'video';
-      const srcM = attrs.match(/src=["']([^"']+)["']/i);
-      const altM = attrs.match(/alt=["']([^"']*)["']/i);
-      mediaBlocks.push({ type, src: srcM ? srcM[1] : '', alt: altM ? altM[1] : '' });
-      return '\x00MEDIA' + (mediaBlocks.length - 1) + '\x00';
-    });
-
-    // 2.7 Extract Markdown tables: | h1 | h2 |\n|---|---| ... |
-    // 把整段表格替换为占位符，表格内容(已转义)放入 tableBlocks 数组
-    const tableBlocks: string[] = [];
-    text = text.replace(
-      /((?:^\|.+\|\r?\n)+^\|[\s\-:|]+\|\r?\n(?:^\|.+\|\r?\n?)+)/gm,
-      (_m: string, block: string) => {
-        const lines = block.trim().split(/\r?\n/).filter((l: string) => l.trim());
-        if (lines.length < 2) return block;
-        const headerCells = lines[0].split('|').slice(1, -1).map((c: string) => c.trim());
-        const alignCells = lines[1].split('|').slice(1, -1).map((c: string) => {
-          const t = c.trim();
-          const left = t.startsWith(':');
-          const right = t.endsWith(':');
-          if (left && right) return 'center';
-          if (right) return 'right';
-          if (left) return 'left';
-          return 'left';
-        });
-        const bodyRows = lines.slice(2).map((row: string) =>
-          row.split('|').slice(1, -1).map((c: string) => c.trim())
-        );
-        const thead = headerCells.map((c: string, i: number) =>
-          `<th style="text-align:${alignCells[i] || 'left'}">${c}</th>`
-        ).join('');
-        const tbody = bodyRows.map((r: string[]) =>
-          '<tr>' + r.map((c: string, i: number) =>
-            `<td style="text-align:${alignCells[i] || 'left'}">${c}</td>`
-          ).join('') + '</tr>'
-        ).join('');
-        const html = `<table class="md-table"><thead><tr>${thead}</tr></thead><tbody>${tbody}</tbody></table>`;
-        const idx = tableBlocks.length;
-        tableBlocks.push(html);
-        return '\x00TABLE' + idx + '\x00';
-      }
-    );
-
-    // 2.8 LaTeX 数学公式：$$...$$（块级）和 $...$（行内）
-    // 提取为占位符，渲染后用 KaTeX 处理
-    const mathBlocks: string[] = [];
-    text = text.replace(/\$\$([\s\S]+?)\$\$/g, (_m: string, formula: string) => {
-      try {
-        const rendered = katex.renderToString(formula.trim(), { displayMode: true, throwOnError: false });
-        const idx = mathBlocks.length;
-        mathBlocks.push(`<div class="md-math-block">${rendered}</div>`);
-        return '\x00MATHBLOCK' + idx + '\x00';
-      } catch { return _m; }
-    });
-    text = text.replace(/\$([^\s$][^$]*[^\s$])\$/g, (_m: string, formula: string) => {
-      try {
-        const rendered = katex.renderToString(formula.trim(), { displayMode: false, throwOnError: false });
-        const idx = mathBlocks.length;
-        mathBlocks.push(`<span class="md-math-inline">${rendered}</span>`);
-        return '\x00MATHBLOCK' + idx + '\x00';
-      } catch { return _m; }
-    });
-
-    // 2.9 Strikethrough: ~~text~~ → <del>text</del>
-    text = text.replace(/~~(.+?)~~/g, '<del>$1</del>');
-
-    // 2.10 Auto-link bare URLs: http(s)://... → <a>
-    text = text.replace(/(?<![="'>])https?:\/\/[^\s<>[\]()]+/g, (url: string) =>
-      `<a class="md-link" href="${url}" target="_blank" rel="noopener">${url}</a>`
-    );
-
-    // 3. Headers
-    text = text.replace(/^#### (.+)$/gm, '<h4 class="md-h4">$1</h4>');
-    text = text.replace(/^### (.+)$/gm, '<h4 class="md-h4">$1</h4>');
-    text = text.replace(/^## (.+)$/gm, '<h3 class="md-h3">$1</h3>');
-    text = text.replace(/^# (.+)$/gm, '<h2 class="md-h2">$1</h2>');
-
-    // 4. Horizontal rule
-    text = text.replace(/^---+$/gm, '<hr class="md-hr">');
-
-    // 5. Blockquotes
-    text = text.replace(/^> (.+)$/gm, '<blockquote class="md-blockquote">$1</blockquote>');
-
-    // 6. Links [text](url)
-    text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a class="md-link" href="$2" target="_blank" rel="noopener">$1</a>');
-
-    // 7. Bold and italic
-    text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
-    text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
-    text = text.replace(/(?<!\w)\*(?!\*)(.+?)(?<!\*)\*(?!\w)/g, '<em>$1</em>');
-
-    // 8. Lists
-    text = text.replace(/^\s*[-*] (.+)$/gm, '<li class="md-li">$1</li>');
-    text = text.replace(/^\s*\d+\. (.+)$/gm, '<li class="md-li">$1</li>');
-    // Wrap consecutive <li> in <ul>
-    text = text.replace(/((?:<li class="md-li">[\s\S]*?<\/li>\n?)+)/g, '<ul class="md-ul">$1</ul>');
-
-    // 9. Convert double newlines to paragraph breaks, single to <br/>
-    text = text.replace(/\n\n/g, '</p><p class="md-p">');
-    text = text.replace(/\n/g, '<br/>');
-
-    // 10. Restore code blocks and inline codes
-    text = text.replace(/\x00CODEBLOCK(\d+)\x00/g, (_m: string, idx: string) => codeBlocks[parseInt(idx)] || '');
-    text = text.replace(/\x00INLINE(\d+)\x00/g, (_m: string, idx: string) => inlineCodes[parseInt(idx)] || '');
-    text = text.replace(/\x00TABLE(\d+)\x00/g, (_m: string, idx: string) => tableBlocks[parseInt(idx)] || '');
-    text = text.replace(/\x00MATHBLOCK(\d+)\x00/g, (_m: string, idx: string) => mathBlocks[parseInt(idx)] || '');
-
-    // 10.5 Apply syntax highlighting to code blocks + add copy button
-    text = text.replace(
-      /<pre class="md-code-block"><code class="md-code">([\s\S]*?)<\/code><\/pre>/g,
-      (_m: string, code: string) => {
-        const decoded = code.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
-        let highlighted: string;
-        try { highlighted = hljs.highlightAuto(decoded).value; } catch { highlighted = code; }
-        return `<div class="md-code-wrapper">
-          <button class="md-code-copy" onclick="navigator.clipboard.writeText(this.parentElement.querySelector('code').textContent);this.textContent='已复制';setTimeout(()=>this.textContent='复制',2000)">复制</button>
-          <pre class="md-code-block"><code class="md-code hljs">${highlighted}</code></pre>
-        </div>`;
-      }
-    );
-
-    // 11. Wrap in paragraph and clean up
-    text = '<p class="md-p">' + text + '</p>';
-    text = text.replace(/<p class="md-p"><\/p>/g, '');
-    text = text.replace(/<p class="md-p">(<h[234][\s\S]*?<\/h[234]>)<\/p>/g, '$1');
-    text = text.replace(/<p class="md-p">(<pre[\s\S]*?<\/pre>)<\/p>/g, '$1');
-    text = text.replace(/<p class="md-p">(<ul[\s\S]*?<\/ul>)<\/p>/g, '$1');
-    text = text.replace(/<p class="md-p">(<hr[\s\S]*?)<\/p>/g, '$1');
-    text = text.replace(/<p class="md-p">(<blockquote[\s\S]*?<\/blockquote>)<\/p>/g, '$1');
-    text = text.replace(/<p class="md-p">(<table[\s\S]*?<\/table>)<\/p>/g, '$1');
-
-    // 12. 拆分为文本片段与媒体组件
-    const parts = text.split(/(\x00MEDIA\d+\x00)/g);
-    return parts.map((part: string, i: number) => {
-      const m = part.match(/^\x00MEDIA(\d+)\x00$/);
-      if (m) {
-        const info = mediaBlocks[parseInt(m[1])];
-        if (info && info.src) return <ChatMedia key={'m' + i} info={info} />;
-        return null;
-      }
-      if (!part) return null;
-      // 仅清除被媒体切分产生的悬空 <p> 标签，保留段落内部的成对 <p>
-      let s = part.replace(/^<\/p>/, '').replace(/<p class="md-p">$/, '');
-      if (!s.trim()) return null;
-      return <div key={'t' + i} className="md-text-seg" dangerouslySetInnerHTML={{ __html: s }} />;
-    });
-  }, [content]);
-
-  return <div className="markdown-body">{nodes}</div>;
-};
-
-// 解析后端返回的「模糊创作意图」确认指令：<<CLARIFY>>{json}<<CLARIFY>>
-function parseClarify(content: string): { prompt: string; options: any[] } | null {
-  if (!content || typeof content !== 'string') return null;
-  const m = content.match(/^<<CLARIFY>>([\s\S]+)<<CLARIFY>>$/);
-  if (!m) return null;
-  try {
-    const obj = JSON.parse(m[1]);
-    if (obj && Array.isArray(obj.options)) return obj;
-  } catch { /* ignore */ }
-  return null;
-}
-
-// 模糊创作意图确认卡片：让用户选择产出方向（文案/图片/视频/其他）
-const ClarifyCard: React.FC<{ data: { prompt: string; options: any[] }; onChoose: (opt: any) => void }> = ({ data, onChoose }) => {
-  return (
-    <div className="chat-clarify-card">
-      <div className="chat-clarify-title">🤔 这个请求的方向还不太明确，您希望以哪种形式呈现？</div>
-      <div className="chat-clarify-sub">「{data.prompt}」</div>
-      <div className="chat-clarify-options">
-        {data.options.map((opt: any) => (
-          <button key={opt.key} className="chat-clarify-option" onClick={() => onChoose(opt)}>
-            <span className="chat-clarify-opt-label">{opt.label}</span>
-            <span className="chat-clarify-opt-desc">{opt.desc}</span>
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}
-
-// ===== Time Formatting =====
-function formatTime(iso: string): string {
-  const date = new Date(iso);
-  const now = new Date();
-  const diff = now.getTime() - date.getTime();
-  const oneDay = 24 * 60 * 60 * 1000;
-
-  if (diff < oneDay) {
-    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
-  } else if (diff < 7 * oneDay) {
-    const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
-    return days[date.getDay()];
-  } else if (date.getFullYear() === now.getFullYear()) {
-    return `${date.getMonth() + 1}/${date.getDate()}`;
-  } else {
-    return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
-  }
-}
-
-// ===== Helpers: normalize API responses =====
-function unwrapList(res: any): any[] {
-  const data = res?.data !== undefined ? res.data : res;
-  if (Array.isArray(data)) return data;
-  if (data?.items) return data.items;
-  return [];
-}
-
-function unwrapData(res: any): any {
-  return res?.data !== undefined ? res.data : res;
-}
-
-// ===== Icons =====
-const IconSearch = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
-  </svg>
-);
-
-const IconPlus = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
-  </svg>
-);
-
-const IconMore = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <circle cx="12" cy="5" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="19" r="1.5" fill="currentColor" stroke="none"/>
-  </svg>
-);
-
-const IconSend = () => (
-  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
-  </svg>
-);
-
-const IconChevronDown = () => (
-  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <polyline points="6 9 12 15 18 9"/>
-  </svg>
-);
-
-const IconEdit = () => (
-  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
-  </svg>
-);
-
-const IconArchive = () => (
-  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/>
-  </svg>
-);
-
-const IconTrash = () => (
-  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
-  </svg>
-);
-
-const IconPin = () => (
-  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <path d="M12 2 L12 22"/><path d="M5 6 L5 6"/><path d="M6 6 L6 12 C6 15 12 17 12 22 C12 17 18 15 18 12 L18 6"/>
-  </svg>
-);
-
-const IconGraph = () => (
-  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/>
-    <line x1="8" y1="6" x2="10" y2="12"/><line x1="16" y1="6" x2="14" y2="12"/><line x1="8" y1="18" x2="10" y2="12"/><line x1="16" y1="18" x2="14" y2="12"/>
-  </svg>
-);
-
-const IconKnowledge = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
-  </svg>
-);
-
-const IconAgent = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-    <path d="M12 2a4 4 0 0 1 4 4v2a4 4 0 0 1-8 0V6a4 4 0 0 1 4-4z"/><path d="M2 21c0-5.5 4.5-10 10-10s10 4.5 10 10"/>
-    <circle cx="12" cy="9" r="1" fill="currentColor" stroke="none"/>
-  </svg>
-);
-
-const IconSkill = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
-  </svg>
-);
-
-const IconMcp = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-    <circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="12" cy="18" r="2.5"/>
-    <line x1="7.5" y1="7.5" x2="11" y2="16"/><line x1="16.5" y1="7.5" x2="13" y2="16"/>
-  </svg>
-);
-
-const IconPaperclip = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-    <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
-  </svg>
-);
-
-const IconMic = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-    <rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><line x1="12" y1="17" x2="12" y2="22"/>
-  </svg>
-);
-
-const IconStop = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
-    <rect x="6" y="6" width="12" height="12" rx="2"/>
-  </svg>
-);
-
-const IconVolume = () => (
-  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
-  </svg>
-);
-
-const IconModel = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-    <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
-  </svg>
-);
-
-const IconEmpty = () => (
-  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" opacity="0.3">
-    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-    <line x1="9" y1="10" x2="15" y2="10"/><line x1="12" y1="7" x2="12" y2="13"/>
-  </svg>
-);
-
-const IconSpinner = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="spin-icon">
-    <circle cx="12" cy="12" r="10" strokeOpacity="0.25"/>
-    <path d="M12 2a10 10 0 0 1 10 10" strokeLinecap="round"/>
-  </svg>
-);
-
-// ===== Dropdown Component =====
-interface DropdownProps {
-  trigger: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
-  align?: 'left' | 'right';
-  dropup?: boolean;
-  closeOnClick?: boolean;
-}
-
-const Dropdown: React.FC<DropdownProps> = ({ trigger, children, className = '', align = 'left', dropup = false, closeOnClick = true }) => {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const openRef = useRef(open);
-  openRef.current = open;
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      const target = e.target as Node;
-      // 如果点击在wrapper内部，不关闭
-      if (ref.current?.contains(target)) return;
-      setOpen(false);
-    };
-    document.addEventListener('mousedown', handleClickOutside, true);
-    return () => document.removeEventListener('mousedown', handleClickOutside, true);
-  }, []);
-
-  // 打开时处理z-index
-  useEffect(() => {
-    if (open && dropup) {
-      const menu = menuRef.current;
-      if (menu) {
-        menu.style.zIndex = '9999';
-      }
-    }
-  }, [open, dropup]);
-
-  const alignClass = align === 'right' ? 'align-right' : 'align-left';
-  const dropupClass = dropup ? 'dropup' : '';
-
-  const handleTriggerMouseDown = (e: React.MouseEvent) => {
-    // 阻止冒泡到document，防止被handleClickOutside误关
-    e.stopPropagation();
-    // 基于当前状态切换（在mousedown阶段决定，避免与click冲突）
-    setOpen(prev => !prev);
-  };
-
-  const handleTriggerClick = (e: React.MouseEvent) => {
-    // 阻止click冒泡到父级的导航onClick
-    e.stopPropagation();
-    e.preventDefault();
-  };
-
-  return (
-    <div className={`dropdown-wrapper ${className}`} ref={ref}>
-      <div
-        className="dropdown-trigger"
-        onMouseDown={handleTriggerMouseDown}
-        onClick={handleTriggerClick}
-      >
-        {trigger}
-      </div>
-      {open && (
-        <div
-          ref={menuRef}
-          className={`dropdown-menu ${alignClass} ${dropupClass}`}
-          onMouseDown={(e) => e.stopPropagation()}
-          onClick={(e) => { e.stopPropagation(); if (closeOnClick) setOpen(false); }}
-        >
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
-
-// ===== Main Component =====
-const ChatPage: React.FC = () => {
-  const { id } = useParams<{ id?: string }>();
-  const navigate = useNavigate();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedModelId, setSelectedModelId] = useState('auto');
-  const [chatModels, setChatModels] = useState<any[]>([]);
-  const [inputValue, setInputValue] = useState('');
-  const [sending, setSending] = useState(false);
-  const [conversations, setConversations] = useState<Conversation[]>([]);
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [loadingConversations, setLoadingConversations] = useState(true);
-  const [loadingMessages, setLoadingMessages] = useState(false);
-  const [knowledgeBases, setKnowledgeBases] = useState<any[]>([]);
-  const [agents, setAgents] = useState<any[]>([]);
-  const [skills, setSkills] = useState<any[]>([]);
-  const [mcps, setMcps] = useState<any[]>([]);
-  // 多选组合模式
-  const [selectedAgentIds, setSelectedAgentIds] = useState<string[]>([]);
-  const [selectedSkillIds, setSelectedSkillIds] = useState<string[]>([]);
-  const [selectedKbIds, setSelectedKbIds] = useState<string[]>([]);
-  const [selectedMcpIds, setSelectedMcpIds] = useState<string[]>([]);
-  // 文件附件
-  const [attachments, setAttachments] = useState<{ name: string; file_type: string; content?: string }[]>([]);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const recognitionRef = useRef<any>(null);
-  const [recording, setRecording] = useState(false);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  // Knowledge graph conversion state
-  const [kgModalOpen, setKgModalOpen] = useState(false);
-  const [kgStep, setKgStep] = useState<1 | 2 | 3>(1);
-  const [kgResult, setKgResult] = useState<{ nodes: number; edges: number; kbName: string; kbId: string } | null>(null);
-  const [kgError, setKgError] = useState<string | null>(null);
-  const [kgConvId, setKgConvId] = useState<string | null>(null);
-
-  // Load models from backend API
-  useEffect(() => {
-    chatAPI.getModels().then((res: any) => {
-      const data = res.data || res;
-      const models = Array.isArray(data) ? data : (data?.items || []);
-      setChatModels(models);
-      if (models.length > 0 && !selectedModelId) {
-        setSelectedModelId('auto');
-      }
-    }).catch(() => {
-      setChatModels([]);
-    });
-  }, []);
-
-  // Load conversations from API
-  const loadConversations = useCallback(async () => {
-    try {
-      setLoadingConversations(true);
-      const res = await chatAPI.getConversations();
-      const convs = unwrapList(res);
-      // Sort: pinned first, then by updatedAt desc
-      const sorted = [...convs].sort((a: any, b: any) => {
-        if (a.pinned && !b.pinned) return -1;
-        if (!a.pinned && b.pinned) return 1;
-        return new Date(b.updatedAt || b.updated_at || 0).getTime() - new Date(a.updatedAt || a.updated_at || 0).getTime();
-      });
-      // Normalize field names
-      const mapped: Conversation[] = sorted.map((c: any) => ({
-        id: c.id,
-        userId: c.userId || c.user_id || '',
-        title: c.title || '未命名对话',
-        modelId: c.modelId || c.model_id || '',
-        status: c.status || 'active',
-        pinned: c.pinned || false,
-        knowledgeGraphCount: c.knowledgeGraphCount ?? c.knowledge_graph_count ?? 0,
-        lastMessage: c.lastMessage || c.last_message || '',
-        createdAt: c.createdAt || c.created_at || new Date().toISOString(),
-        updatedAt: c.updatedAt || c.updated_at || new Date().toISOString(),
-      }));
-      setConversations(mapped);
-    } catch (err) {
-      console.error('加载对话列表失败', err);
-    } finally {
-      setLoadingConversations(false);
-    }
-  }, []);
-
-  // Load conversations on mount
-  useEffect(() => {
-    loadConversations();
-  }, [loadConversations]);
-
-  // Load messages for selected conversation
-  useEffect(() => {
-    if (!id) {
-      setMessages([]);
-      return;
-    }
-    const loadMessages = async () => {
-      try {
-        setLoadingMessages(true);
-        const res = await chatAPI.getMessages(id);
-        const msgs = unwrapList(res);
-        const mapped: Message[] = msgs.map((m: any) => ({
-          id: m.id,
-          conversationId: m.conversationId || m.conversation_id || id,
-          role: m.role,
-          content: m.content,
-          tokenUsed: m.tokenUsed ?? m.token_used ?? 0,
-          createdAt: m.createdAt || m.created_at || new Date().toISOString(),
-        }));
-        setMessages(mapped);
-        // 页面刷新时若仍有「⏳」占位的媒体消息，继续轮询后端回写结果
-        mapped.forEach((m) => {
-          if (m.role === 'assistant' && typeof m.content === 'string' && m.content.startsWith('⏳')) {
-            startMediaPolling(id, m.id);
-          }
-        });
-      } catch (err) {
-        console.error('加载消息失败', err);
-        setMessages([]);
-      } finally {
-        setLoadingMessages(false);
-      }
-    };
-    loadMessages();
-  }, [id]);
-
-  // 媒体(图像/视频)异步生成轮询：后端先返回「⏳」占位，前端定时拉取该消息最新内容并回写
-  const pollMediaRef = useRef<Record<string, ReturnType<typeof setInterval> | null>>({});
-
-  const stopMediaPolling = (msgId: string) => {
-    const t = pollMediaRef.current[msgId];
-    if (t) {
-      clearInterval(t);
-      pollMediaRef.current[msgId] = null;
-    }
-  };
-
-  const startMediaPolling = (convId: string, msgId: string) => {
-    if (pollMediaRef.current[msgId]) return; // 已在轮询
-    let ticks = 0;
-    const timer = setInterval(async () => {
-      ticks += 1;
-      try {
-        const res = await chatAPI.getMessages(convId);
-        const msgs: any[] = unwrapList(res);
-        const updated = msgs.find((m: any) => m.id === msgId);
-        if (!updated) {
-          stopMediaPolling(msgId);
-          return;
-        }
-        const content: string = updated.content || '';
-        if (content.startsWith('⏳')) {
-          if (ticks > 120) stopMediaPolling(msgId); // ~6 分钟兜底
-          return;
-        }
-        // 生成完成：回写消息内容
-        setMessages(prev => prev.map(m => m.id === msgId ? {
-          ...m,
-          content,
-          tokenUsed: updated.tokenUsed ?? updated.token_used ?? m.tokenUsed,
-          createdAt: updated.createdAt || updated.created_at || m.createdAt,
-          used_skills: updated.usedSkills ?? updated.used_skills ?? m.used_skills,
-          used_mcp: updated.usedMcp ?? updated.used_mcp ?? m.used_mcp,
-        } : m));
-        stopMediaPolling(msgId);
-      } catch (e) {
-        if (ticks > 120) stopMediaPolling(msgId); // 网络异常兜底
-      }
-    }, 3000);
-    pollMediaRef.current[msgId] = timer;
-  };
-
-  // 卸载时清理所有轮询定时器
-  useEffect(() => {
-    return () => {
-      Object.values(pollMediaRef.current).forEach(t => t && clearInterval(t));
-    };
-  }, []);
-
-  // Load knowledge bases, agents, skills for attachment dropdowns
-  useEffect(() => {
-    knowledgeAPI.getBases().then((res: any) => {
-      const data = res?.data !== undefined ? res.data : res;
-      if (data?.bases && Array.isArray(data.bases)) {
-        setKnowledgeBases(data.bases);
-      } else if (Array.isArray(data)) {
-        setKnowledgeBases(data);
-      } else if (data?.items) {
-        setKnowledgeBases(data.items);
-      } else {
-        setKnowledgeBases([]);
-      }
-    }).catch(() => {});
-    marketAPI.getApps({ type: 'agent' }).then((res: any) => {
-      const data = res?.data !== undefined ? res.data : res;
-      let apps: any[] = [];
-      if (Array.isArray(data)) apps = data;
-      else if (data?.items) apps = data.items;
-      // 显示所有已发布的Agent（不需要安装即可在聊天中使用）
-      setAgents(apps.filter((a: any) => a.status === 'published' || a.status === 'active' || !a.status));
-    }).catch(() => {});
-    marketAPI.getApps({ type: 'skill' }).then((res: any) => {
-      const data = res?.data !== undefined ? res.data : res;
-      let apps: any[] = [];
-      if (Array.isArray(data)) apps = data;
-      else if (data?.items) apps = data.items;
-      // 显示所有已发布的技能（不需要安装即可在聊天中使用）
-      setSkills(apps.filter((a: any) => a.status === 'published' || a.status === 'active' || !a.status));
-    }).catch(() => {});
-    marketAPI.getApps({ type: 'mcp' }).then((res: any) => {
-      const data = res?.data !== undefined ? res.data : res;
-      let apps: any[] = [];
-      if (Array.isArray(data)) apps = data;
-      else if (data?.items) apps = data.items;
-      setMcps(apps.filter((a: any) => a.status === 'published' || a.status === 'active' || !a.status));
-    }).catch(() => {});
-  }, []);
-
-  // Determine selected conversation
-  const selectedConversation = useMemo(() => {
-    if (id) {
-      return conversations.find(c => c.id === id) || null;
-    }
-    return conversations[0] || null;
-  }, [id, conversations]);
-
-  // Filter conversations by search
-  const filteredConversations = useMemo(() => {
-    const pinned = conversations.filter(c => c.pinned);
-    const unpinned = conversations.filter(c => !c.pinned);
-    if (!searchQuery.trim()) return [...pinned, ...unpinned];
-    const q = searchQuery.toLowerCase();
-    return [...pinned.filter(c => c.title.toLowerCase().includes(q)), ...unpinned.filter(c => c.title.toLowerCase().includes(q))];
-  }, [conversations, searchQuery]);
-
-  // Selected model info（Auto 自动：按对话意图自动匹配后台各能力默认模型）
-  const isAutoModel = selectedModelId === 'auto';
-  const AUTO_MODEL = { id: 'auto', name: 'Auto 自动', status: 'free', provider_name: '按能力智能匹配', capabilities: [], price_per_million_tokens: 0 };
-  const selectedModel = isAutoModel
-    ? AUTO_MODEL
-    : (chatModels.find(m => m.id === selectedModelId) || chatModels[0] || AUTO_MODEL);
-
-  // Scroll to bottom when messages change
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
-
-  // Select first conversation if no id param
-  useEffect(() => {
-    if (!id && conversations.length > 0) {
-      navigate(`/chat/${conversations[0].id}`, { replace: true });
-    }
-  }, [id, conversations, navigate]);
-
-  // Handle new conversation
-  const handleNewConversation = async () => {
-    try {
-      const res = await chatAPI.createConversation({ title: '新对话', model_id: selectedModelId === 'auto' ? (chatModels[0]?.id || '') : selectedModelId });
-      const newConv = unwrapData(res);
-      const conv: Conversation = {
-        id: newConv.id,
-        userId: newConv.userId || newConv.user_id || '',
-        title: newConv.title || '新对话',
-        modelId: newConv.modelId || newConv.model_id || selectedModelId,
-        status: 'active',
-        pinned: false,
-        knowledgeGraphCount: 0,
-        createdAt: newConv.createdAt || newConv.created_at || new Date().toISOString(),
-        updatedAt: newConv.updatedAt || newConv.updated_at || new Date().toISOString(),
-      };
-      setConversations(prev => [conv, ...prev]);
-      navigate(`/chat/${conv.id}`);
-    } catch (err: any) {
-      alert('创建对话失败: ' + (err.message || '未知错误'));
-    }
-  };
-
-  // Handle rename
-  const handleRename = async (convId: string, e: React.MouseEvent) => {
-    e.stopPropagation();
-    const newTitle = prompt('请输入新名称：');
-    if (newTitle && newTitle.trim()) {
-      try {
-        await chatAPI.updateConversation(convId, { title: newTitle.trim() });
-        setConversations(prev => prev.map(c => c.id === convId ? { ...c, title: newTitle.trim() } : c));
-      } catch (err: any) {
-        alert('重命名失败: ' + (err.message || '未知错误'));
-      }
-    }
-  };
-
-  // Handle archive
-  const handleArchive = async (convId: string, e: React.MouseEvent) => {
-    e.stopPropagation();
-    const conv = conversations.find(c => c.id === convId);
-    if (!conv) return;
-    const newStatus = conv.status === 'archived' ? 'active' : 'archived';
-    try {
-      await chatAPI.updateConversation(convId, { status: newStatus });
-      setConversations(prev => prev.map(c => c.id === convId ? { ...c, status: newStatus } as Conversation : c));
-    } catch (err: any) {
-      alert('操作失败: ' + (err.message || '未知错误'));
-    }
-  };
-
-  // Handle delete
-  const handleDelete = async (convId: string, e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (!confirm('确定要删除这个对话吗？')) return;
-    try {
-      await chatAPI.deleteConversation(convId);
-      const next = conversations.filter(c => c.id !== convId);
-      setConversations(next);
-      if (selectedConversation?.id === convId) {
-        if (next.length > 0) {
-          navigate(`/chat/${next[0].id}`);
-        } else {
-          navigate('/chat');
-        }
-      }
-    } catch (err: any) {
-      alert('删除失败: ' + (err.message || '未知错误'));
-    }
-  };
-
-  // Handle pin / unpin
-  const handlePin = async (convId: string, e: React.MouseEvent) => {
-    e.stopPropagation();
-    const conv = conversations.find(c => c.id === convId);
-    if (!conv) return;
-    const newPinned = !conv.pinned;
-    try {
-      await chatAPI.updateConversation(convId, { pinned: newPinned });
-      setConversations(prev => {
-        const updated = prev.map(c => c.id === convId ? { ...c, pinned: newPinned } : c);
-        const pinned = updated.filter(c => c.pinned);
-        const unpinned = updated.filter(c => !c.pinned).sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
-        return [...pinned, ...unpinned];
-      });
-    } catch (err: any) {
-      alert('操作失败: ' + (err.message || '未知错误'));
-    }
-  };
-
-  // Handle convert to knowledge graph
-  const handleKnowledgeGraph = async (convId: string, e: React.MouseEvent) => {
-    e.stopPropagation();
-    setKgModalOpen(true);
-    setKgStep(1);
-    setKgResult(null);
-    setKgError(null);
-    setKgConvId(convId);
-
-    try {
-      await new Promise(r => setTimeout(r, 600));
-      setKgStep(2);
-
-      const res = await chatAPI.convertToKnowledgeGraph(convId);
-      await new Promise(r => setTimeout(r, 400));
-      setKgStep(3);
-
-      if (res.code === 0) {
-        const graph = res.data.graph;
-        setKgResult({
-          nodes: graph.stats.total_nodes,
-          edges: graph.stats.total_edges,
-          kbName: res.data.knowledge_base_name,
-          kbId: res.data.knowledge_base_id,
-        });
-        // 使用后端返回的真实计数（幂等，始终为 1），避免前端重复累加导致计数虚高
-        const newCount = res.data.knowledge_graph_count ?? 1;
-        setConversations(prev =>
-          prev.map(c => c.id === convId ? { ...c, knowledgeGraphCount: newCount } : c)
-        );
-      } else {
-        setKgError(res.message || '转换失败');
-      }
-    } catch (err) {
-      setKgError((err as Error).message || '转换失败，请稍后重试');
-    }
-  };
-
-  // Handle send message - CALLS REAL API
-  // 抽出公共发送逻辑，供输入框发送与「模糊创作意图」方向选择复用
-  const sendText = async (content: string) => {
-    if (!content.trim() || sending || !selectedConversation) return;
-    setSending(true);
-
-    // Add user message optimistically
-    const tempUserMsg: Message = {
-      id: `temp_${Date.now()}`,
-      conversationId: selectedConversation?.id || '',
-      role: 'user',
-      content,
-      tokenUsed: 0,
-      createdAt: new Date().toISOString(),
-    };
-    setMessages(prev => [...prev, tempUserMsg]);
-
-    try {
-      const res = await chatAPI.sendMessage(selectedConversation!.id, {
-        content,
-        model_id: selectedModelId || undefined,
-        agent_ids: selectedAgentIds.length > 0 ? selectedAgentIds : undefined,
-        skill_ids: selectedSkillIds.length > 0 ? selectedSkillIds : undefined,
-        knowledge_base_ids: selectedKbIds.length > 0 ? selectedKbIds : undefined,
-        mcp_ids: selectedMcpIds.length > 0 ? selectedMcpIds : undefined,
-        attachments: attachments.length > 0 ? attachments.map(a => ({
-          name: a.name, file_type: a.file_type, content: a.content || '',
-        })) : undefined,
-        use_tools: selectedSkillIds.length > 0 || selectedAgentIds.length > 0 || selectedMcpIds.length > 0,
-      });
-
-      const data = unwrapData(res);
-
-      // Replace temporary user message and add assistant response
-      setMessages(prev => {
-        const filtered = prev.filter(m => m.id !== tempUserMsg.id);
-        const newMsgs: Message[] = [];
-        if (data.user_message) {
-          newMsgs.push({
-            id: data.user_message.id,
-            conversationId: selectedConversation?.id || '',
-            role: 'user',
-            content: data.user_message.content,
-            tokenUsed: data.user_message.token_used || 0,
-            createdAt: data.user_message.created_at || new Date().toISOString(),
-          });
-        }
-        if (data.assistant_message) {
-          newMsgs.push({
-            id: data.assistant_message.id,
-            conversationId: selectedConversation?.id || '',
-            role: 'assistant',
-            content: data.assistant_message.content,
-            tokenUsed: data.assistant_message.token_used || 0,
-            createdAt: data.assistant_message.created_at || new Date().toISOString(),
-            used_skills: data.assistant_message.used_skills || [],
-            used_mcp: data.assistant_message.used_mcp || [],
-          });
-        }
-        return [...filtered, ...newMsgs];
-      });
-
-      // 媒体异步生成：启动轮询，待后端回写后自动刷新
-      if (data.assistant_message?.generating) {
-        startMediaPolling(selectedConversation!.id, data.assistant_message.id);
-      }
-
-      // Refresh conversations to update lastMessage
-      loadConversations();
-      // 发送后清空本次附件（选择状态仍保留）
-      setAttachments([]);
-
-      // GAP-07: 对话结束后异步提交轨迹到进化引擎（后台静默，不阻塞UI）
-      if (selectedConversation?.id && data.assistant_message) {
-        const recentMsgs = [
-          ...(data.user_message ? [{ role: 'user', content: data.user_message.content, tokens: data.user_message.token_used || 0 }] : []),
-          { role: 'assistant', content: data.assistant_message.content, tokens: data.assistant_message.token_used || 0 },
-        ];
-        evolutionAPI.submitTrajectory({
-          conversation_id: selectedConversation.id,
-          messages: recentMsgs,
-        }).catch(() => {});
-      }
-    } catch (err: any) {
-      // Remove optimistic message on error
-      setMessages(prev => prev.filter(m => m.id !== tempUserMsg.id));
-      alert('发送失败: ' + (err.message || err.detail || '未知错误'));
-    } finally {
-      setSending(false);
-      inputRef.current?.focus();
-    }
-  };
-
-  // 文件上传：读取文本类文件内容作为附件上下文
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files || []);
-    if (!files.length) return;
-    const textExts = ['txt', 'md', 'markdown', 'csv', 'json', 'log', 'py', 'js', 'ts', 'tsx', 'jsx', 'html', 'css', 'xml', 'yaml', 'yml', 'sql', 'text'];
-    files.forEach(file => {
-      const ext = (file.name.split('.').pop() || '').toLowerCase();
-      const isText = textExts.includes(ext) || file.type.startsWith('text/');
-      if (isText && file.size <= 200 * 1024) {
-        const reader = new FileReader();
-        reader.onload = () => {
-          const content = String(reader.result || '');
-          setAttachments(prev => [...prev, { name: file.name, file_type: ext || 'txt', content }]);
-        };
-        reader.readAsText(file);
-      } else {
-        setAttachments(prev => [...prev, { name: file.name, file_type: ext || file.type || 'bin' }]);
-      }
-    });
-    e.target.value = '';
-  };
-
-  // 语音输入（浏览器 Web Speech API，支持中文）
-  const handleMicClick = () => {
-    const SR: any = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
-    if (!SR) {
-      alert('当前浏览器不支持语音输入，请使用 Chrome / Edge 等浏览器。');
-      return;
-    }
-    if (recording) {
-      recognitionRef.current?.stop();
-      return;
-    }
-    const rec = new SR();
-    recognitionRef.current = rec;
-    rec.lang = 'zh-CN';
-    rec.interimResults = true;
-    rec.continuous = false;
-    rec.onresult = (ev: any) => {
-      let text = '';
-      for (let i = 0; i < ev.results.length; i++) text += ev.results[i][0].transcript;
-      setInputValue(prev => (prev ? prev + text : text));
-    };
-    rec.onend = () => { setRecording(false); recognitionRef.current = null; };
-    rec.onerror = () => { setRecording(false); recognitionRef.current = null; };
-    setRecording(true);
-    rec.start();
-  };
-
-  // 语音合成（朗读回复，浏览器 TTS）
-  const speakText = (text: string) => {
-    if (typeof window === 'undefined' || !('speechSynthesis' in window)) {
-      alert('当前浏览器不支持朗读。');
-      return;
-    }
-    const synth = window.speechSynthesis;
-    synth.cancel();
-    const plain = text
-      .replace(/```[\s\S]*?```/g, ' ')
-      .replace(/[#>*`_~\-]+/g, ' ')
-      .replace(/\!\[[^\]]*\]\([^)]*\)/g, ' ')
-      .replace(/\[[^\]]*\]\([^)]*\)/g, ' ')
-      .replace(/\s+/g, ' ')
-      .trim();
-    const u = new SpeechSynthesisUtterance(plain);
-    u.lang = 'zh-CN';
-    u.rate = 1;
-    synth.speak(u);
-  };
-
-  const handleSend = () => {
-    const content = inputValue.trim();
-    if (!content || sending) return;
-    setInputValue('');
-    sendText(content);
-  };
-
-  // Handle key down
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  };
-
-  return (
-    <div className="chat-page">
-      {/* Left Sidebar - Conversation List */}
-      <aside className="chat-sidebar">
-        <div className="chat-sidebar-header">
-          <button className="new-chat-btn" onClick={handleNewConversation}>
-            <IconPlus />
-            <span>新建对话</span>
-          </button>
-        </div>
-
-        <div className="chat-sidebar-search">
-          <span className="search-icon-wrap">
-            <IconSearch />
-          </span>
-          <input
-            type="text"
-            className="search-input"
-            placeholder="搜索对话..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-        </div>
-
-        <div className="chat-sidebar-list">
-          {loadingConversations ? (
-            <div className="conv-empty">加载中...</div>
-          ) : (
-            filteredConversations.map(conv => (
-              <div
-                key={conv.id}
-                className={`conversation-item ${conv.id === selectedConversation?.id ? 'active' : ''} ${conv.pinned ? 'pinned' : ''}`}
-                onClick={() => navigate(`/chat/${conv.id}`)}
-              >
-                <div className="conv-top">
-                  {conv.pinned && <span className="conv-pin-icon"><IconPin /></span>}
-                  <span className="conv-title truncate">{conv.title}</span>
-                  <Dropdown
-                    trigger={<span className="conv-more-btn"><IconMore /></span>}
-                    align="right"
-                  >
-                    <button className="dropdown-item" onClick={(e) => handlePin(conv.id, e)}>
-                      <IconPin /> {conv.pinned ? '取消置顶' : '置顶'}
-                    </button>
-                    <button className="dropdown-item" onClick={(e) => handleKnowledgeGraph(conv.id, e)}>
-                      <IconGraph /> 转知识图谱{conv.knowledgeGraphCount ? ` (${conv.knowledgeGraphCount})` : ''}
-                    </button>
-                    <div className="dropdown-divider" />
-                    <button className="dropdown-item" onClick={(e) => handleRename(conv.id, e)}>
-                      <IconEdit /> 重命名
-                    </button>
-                    <button className="dropdown-item" onClick={(e) => handleArchive(conv.id, e)}>
-                      <IconArchive /> {conv.status === 'archived' ? '取消归档' : '归档'}
-                    </button>
-                    <div className="dropdown-divider" />
-                    <button className="dropdown-item danger" onClick={(e) => handleDelete(conv.id, e)}>
-                      <IconTrash /> 删除
-                    </button>
-                  </Dropdown>
-                </div>
-                <div className="conv-preview truncate">
-                  {conv.lastMessage || '暂无消息'}
-                </div>
-                <div className="conv-meta">
-                  <span className="conv-time">{formatTime(conv.updatedAt)}</span>
-                  {conv.status === 'archived' && <span className="conv-badge">已归档</span>}
-                </div>
-              </div>
-            ))
-          )}
-
-          {!loadingConversations && filteredConversations.length === 0 && (
-            <div className="conv-empty">
-              {searchQuery ? '未找到匹配的对话' : '暂无对话'}
-            </div>
-          )}
-        </div>
-      </aside>
-
-      {/* Right Main Chat Area */}
-      <div className="chat-main">
-        {selectedConversation ? (
-          <>
-            {/* Chat Header */}
-            <div className="chat-header">
-              <div className="chat-header-left">
-                <Dropdown
-                  trigger={
-                    <div className="model-selector">
-                      <IconModel />
-                      <span className="model-name">{selectedModel.name}</span>
-                      <span className="model-badge">{(selectedModel.status === 'free' || selectedModel.price_per_million_tokens === 0) ? '免费' : '付费'}</span>
-                      <IconChevronDown />
-                    </div>
-                  }
-                >
-                  <button
-                    key="auto"
-                    className={`dropdown-item ${selectedModelId === 'auto' ? 'selected' : ''}`}
-                    onClick={() => setSelectedModelId('auto')}
-                  >
-                    <div className="model-dropdown-item">
-                      <span>🤖 Auto 自动</span>
-                      <span className="model-provider-tag">按能力智能匹配</span>
-                      <span className="model-cap-badge">智能</span>
-                    </div>
-                  </button>
-                  {chatModels.filter(m => m.is_enabled !== false).map(model => (
-                    <button
-                      key={model.id}
-                      className={`dropdown-item ${model.id === selectedModelId ? 'selected' : ''}`}
-                      onClick={() => setSelectedModelId(model.id)}
-                    >
-                      <div className="model-dropdown-item">
-                        <span>{model.name}</span>
-                        <span className="model-provider-tag">{model.provider_name || model.providerName || ''}</span>
-                        {(() => {
-                          const caps = model.capabilities || [];
-                          const label = caps.includes('image') && caps.includes('video') ? '图像/视频'
-                            : caps.includes('image') ? '图像'
-                            : caps.includes('video') ? '视频' : '';
-                          return label ? <span className="model-cap-badge">{label}</span> : null;
-                        })()}
-                      </div>
-                    </button>
-                  ))}
-                </Dropdown>
-                <span className="chat-header-divider" />
-                <span className="chat-title">{selectedConversation.title}</span>
-              </div>
-            </div>
-
-            {/* Messages Area */}
-            <div className="chat-messages">
-              {loadingMessages ? (
-                <div className="chat-empty-state">
-                  <IconEmpty />
-                  <p className="empty-desc">加载消息中...</p>
-                </div>
-              ) : messages.length === 0 ? (
-                <div className="chat-empty-state">
-                  <IconEmpty />
-                  <p className="empty-title">开始一段新对话</p>
-                  <p className="empty-desc">
-                    向 {selectedModel.name} 发送消息，开始对话
-                  </p>
-                </div>
-              ) : (
-              messages.map(msg => {
-                // Real used_skills from API response
-                const usedSkills: string[] = (msg.role === 'assistant' && msg.used_skills) ? msg.used_skills : [];
-                const usedMcp: string[] = (msg.role === 'assistant' && msg.used_mcp) ? msg.used_mcp : [];
-                // 模糊创作意图确认卡片
-                const clarify = msg.role === 'assistant' ? parseClarify(msg.content) : null;
-                return (
-                <div key={msg.id} className={`message-row ${msg.role}`}>
-                  <div className={`message-bubble ${msg.role}`}>
-                    {clarify ? (
-                      <ClarifyCard
-                        data={clarify}
-                        onChoose={(opt: any) => sendText(`${opt.medium}：${clarify.prompt}`)}
-                      />
-                    ) : msg.role === 'assistant' ? (
-                      <MarkdownContent content={msg.content} />
-                    ) : (
-                      <span>{msg.content}</span>
-                    )}
-                  </div>
-                  {!clarify && msg.role === 'assistant' && msg.content && (
-                    <button
-                      className="msg-tts-btn"
-                      title="朗读回复"
-                      onClick={() => speakText(msg.content)}
-                    >
-                      <IconVolume />
-                    </button>
-                  )}
-                    {/* Skill usage tags */}
-                    {msg.role === 'assistant' && usedSkills.length > 0 && (
-                      <div className="evo-skill-tags-row">
-                        {usedSkills.slice(0, 3).map(skillName => (
-                          <span
-                            key={skillName}
-                            className="evo-skill-tag"
-                            onClick={() => { window.location.href = '/evolution?skill=' + encodeURIComponent(skillName); }}
-                            title={`使用了专属技能：${skillName}`}
-                          >
-                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
-                            </svg>
-                            {skillName}
-                          </span>
-                        ))}
-                        {usedSkills.length > 3 && (
-                          <span className="evo-skill-tag evo-skill-tag-more">+{usedSkills.length - 3}</span>
-                        )}
-                      </div>
-                    )}
-                    {msg.role === 'assistant' && usedMcp.length > 0 && (
-                      <div className="evo-skill-tags-row">
-                        {usedMcp.slice(0, 3).map(mcpName => (
-                          <span
-                            key={mcpName}
-                            className="evo-skill-tag evo-mcp-tag"
-                            title={`使用了 MCP 应用：${mcpName}`}
-                          >
-                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-                              <line x1="9" y1="9" x2="15" y2="15"/>
-                              <line x1="15" y1="9" x2="9" y2="15"/>
-                            </svg>
-                            {mcpName}
-                          </span>
-                        ))}
-                        {usedMcp.length > 3 && (
-                          <span className="evo-skill-tag evo-skill-tag-more">+{usedMcp.length - 3}</span>
-                        )}
-                      </div>
-                    )}
-                    <div className={`message-meta ${msg.role}`}>
-                      <span className="message-time">{formatTime(msg.createdAt)}</span>
-                      <span className="message-tokens">{msg.tokenUsed} tokens</span>
-                    </div>
-                  </div>
-                  );
-                })
-              )}
-              {sending && (
-                <div className="message-row assistant">
-                  <div className="message-bubble assistant" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                    <IconSpinner />
-                    <span>思考中...</span>
-                  </div>
-                </div>
-              )}
-              <div ref={messagesEndRef} />
-            </div>
-
-            {/* Input Area */}
-            <div className="chat-input-area">
-              <div className="chat-input-container">
-                <div className="input-attachments">
-                  <Dropdown
-                    dropup
-                    closeOnClick={false}
-                    trigger={
-                      <button className="attach-btn" title="知识库">
-                        <IconKnowledge />
-                        <span>{selectedKbIds.length > 0 ? `知识库 (${selectedKbIds.length})` : '知识库'}</span>
-                      </button>
-                    }
-                  >
-                    <div className="attach-dropdown-title">选择知识库（多选）</div>
-                    {knowledgeBases.map((kb: any) => (
-                      <button key={kb.id} className={`dropdown-item ${selectedKbIds.includes(kb.id) ? 'selected' : ''}`}
-                        onClick={() => { setSelectedKbIds(prev => prev.includes(kb.id) ? prev.filter(id => id !== kb.id) : [...prev, kb.id]); }}>
-                        <IconKnowledge />
-                        <span>{kb.name}</span>
-                        <span className="attach-count">{kb.documentCount ?? kb.document_count ?? 0} 文档</span>
-                        {selectedKbIds.includes(kb.id) && <span style={{marginLeft:'auto',color:'var(--color-accent)'}}>✓</span>}
-                      </button>
-                    ))}
-                    {knowledgeBases.length > 0 && selectedKbIds.length > 0 && (
-                      <div className="dropdown-divider" />
-                    )}
-                    {selectedKbIds.length > 0 && (
-                      <button className="dropdown-item" style={{color:'var(--color-text-tertiary)'}} onClick={() => setSelectedKbIds([])}>
-                        清除选择 ({selectedKbIds.length})
-                      </button>
-                    )}
-                    {knowledgeBases.length === 0 && (
-                      <div className="dropdown-item disabled">暂无可用知识库</div>
-                    )}
-                  </Dropdown>
-
-                  <Dropdown
-                    dropup
-                    closeOnClick={false}
-                    trigger={
-                      <button className="attach-btn" title="Agent">
-                        <IconAgent />
-                        <span>{selectedAgentIds.length > 0 ? `Agent (${selectedAgentIds.length})` : 'Agent'}</span>
-                      </button>
-                    }
-                  >
-                    <div className="attach-dropdown-title">选择 Agent（多选）</div>
-                    {agents.map((agent: any) => (
-                      <button key={agent.id} className={`dropdown-item ${selectedAgentIds.includes(agent.id) ? 'selected' : ''}`}
-                        onClick={() => { setSelectedAgentIds(prev => prev.includes(agent.id) ? prev.filter(id => id !== agent.id) : [...prev, agent.id]); }}>
-                        <IconAgent />
-                        <span>{agent.name}</span>
-                        {selectedAgentIds.includes(agent.id) && <span style={{marginLeft:'auto',color:'var(--color-accent)'}}>✓</span>}
-                      </button>
-                    ))}
-                    {agents.length > 0 && selectedAgentIds.length > 0 && (
-                      <div className="dropdown-divider" />
-                    )}
-                    {selectedAgentIds.length > 0 && (
-                      <button className="dropdown-item" style={{color:'var(--color-text-tertiary)'}} onClick={() => setSelectedAgentIds([])}>
-                        清除选择 ({selectedAgentIds.length})
-                      </button>
-                    )}
-                    {agents.length === 0 && (
-                      <div className="dropdown-item disabled">暂无可用 Agent</div>
-                    )}
-                  </Dropdown>
-
-                  <Dropdown
-                    dropup
-                    closeOnClick={false}
-                    trigger={
-                      <button className="attach-btn" title="技能">
-                        <IconSkill />
-                        <span>{selectedSkillIds.length > 0 ? `技能 (${selectedSkillIds.length})` : '技能'}</span>
-                      </button>
-                    }
-                  >
-                    <div className="attach-dropdown-title">选择技能（多选）</div>
-                    {skills.map((skill: any) => (
-                      <button key={skill.id} className={`dropdown-item ${selectedSkillIds.includes(skill.id) ? 'selected' : ''}`}
-                        onClick={() => { setSelectedSkillIds(prev => prev.includes(skill.id) ? prev.filter(id => id !== skill.id) : [...prev, skill.id]); }}>
-                        <IconSkill />
-                        <span>{skill.name}</span>
-                        {selectedSkillIds.includes(skill.id) && <span style={{marginLeft:'auto',color:'var(--color-accent)'}}>✓</span>}
-                      </button>
-                    ))}
-                    {skills.length > 0 && selectedSkillIds.length > 0 && (
-                      <div className="dropdown-divider" />
-                    )}
-                    {selectedSkillIds.length > 0 && (
-                      <button className="dropdown-item" style={{color:'var(--color-text-tertiary)'}} onClick={() => setSelectedSkillIds([])}>
-                        清除选择 ({selectedSkillIds.length})
-                      </button>
-                    )}
-                    {skills.length === 0 && (
-                      <div className="dropdown-item disabled">暂无可用技能</div>
-                    )}
-                  </Dropdown>
-
-                  <Dropdown
-                    dropup
-                    closeOnClick={false}
-                    trigger={
-                      <button className="attach-btn" title="MCP 应用">
-                        <IconMcp />
-                        <span>{selectedMcpIds.length > 0 ? `MCP (${selectedMcpIds.length})` : 'MCP'}</span>
-                      </button>
-                    }
-                  >
-                    <div className="attach-dropdown-title">选择 MCP 应用（多选）</div>
-                    {mcps.map((mcp: any) => (
-                      <button key={mcp.id} className={`dropdown-item ${selectedMcpIds.includes(mcp.id) ? 'selected' : ''}`}
-                        onClick={() => { setSelectedMcpIds(prev => prev.includes(mcp.id) ? prev.filter(id => id !== mcp.id) : [...prev, mcp.id]); }}>
-                        <IconMcp />
-                        <span>{mcp.name}</span>
-                        {selectedMcpIds.includes(mcp.id) && <span style={{marginLeft:'auto',color:'var(--color-accent)'}}>✓</span>}
-                      </button>
-                    ))}
-                    {mcps.length > 0 && selectedMcpIds.length > 0 && (
-                      <div className="dropdown-divider" />
-                    )}
-                    {selectedMcpIds.length > 0 && (
-                      <button className="dropdown-item" style={{color:'var(--color-text-tertiary)'}} onClick={() => setSelectedMcpIds([])}>
-                        清除选择 ({selectedMcpIds.length})
-                      </button>
-                    )}
-                    {mcps.length === 0 && (
-                      <div className="dropdown-item disabled">暂无可用 MCP 应用</div>
-                    )}
-                  </Dropdown>
-
-                  <button className="attach-btn" title="上传文件" onClick={() => fileInputRef.current?.click()}>
-                    <IconPaperclip />
-                    <span>{attachments.length > 0 ? `文件 (${attachments.length})` : '文件'}</span>
-                  </button>
-                  <input
-                    ref={fileInputRef}
-                    type="file"
-                    multiple
-                    style={{ display: 'none' }}
-                    onChange={handleFileChange}
-                  />
-                </div>
-
-                {attachments.length > 0 && (
-                  <div className="attachment-chips">
-                    {attachments.map((att, idx) => (
-                      <span key={idx} className="attachment-chip">
-                        <IconPaperclip />
-                        <span className="attachment-name" title={att.name}>{att.name}</span>
-                        <button
-                          type="button"
-                          className="attachment-remove"
-                          onClick={() => setAttachments(prev => prev.filter((_, i) => i !== idx))}
-                          title="移除"
-                        >×</button>
-                      </span>
-                    ))}
-                  </div>
-                )}
-
-                <div className="input-row">
-                  <textarea
-                    ref={inputRef}
-                    className="chat-textarea"
-                    placeholder={`向 ${selectedModel.name} 发送消息...（可点击 🎤 语音输入）`}
-                    value={inputValue}
-                    onChange={(e) => setInputValue(e.target.value)}
-                    onKeyDown={handleKeyDown}
-                    rows={1}
-                    disabled={sending}
-                  />
-                  <button
-                    className={`mic-btn ${recording ? 'recording' : ''}`}
-                    onClick={handleMicClick}
-                    disabled={sending}
-                    title={recording ? '停止录音' : '语音输入'}
-                  >
-                    {recording ? <IconStop /> : <IconMic />}
-                  </button>
-                  <button
-                    className="send-btn"
-                    onClick={handleSend}
-                    disabled={!inputValue.trim() || sending}
-                    title="发送 (Enter)"
-                  >
-                    {sending ? <IconSpinner /> : <IconSend />}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </>
-        ) : (
-          <div className="chat-empty-full">
-            <IconEmpty />
-            <p className="empty-title">选择或创建对话</p>
-            <p className="empty-desc">从左侧列表选择一个对话，或点击上方按钮创建新对话</p>
-          </div>
-        )}
-      </div>
-
-      {/* Knowledge Graph Conversion Progress Modal */}
-      {kgModalOpen && (
-        <div className="kg-overlay" onClick={() => !kgError && kgStep !== 2 && setKgModalOpen(false)}>
-          <div className="kg-modal" onClick={e => e.stopPropagation()}>
-            <div className="kg-modal-header">
-              <h3>转换知识图谱</h3>
-              <button className="kg-modal-close" onClick={() => setKgModalOpen(false)}>
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
-                </svg>
-              </button>
-            </div>
-            <div className="kg-modal-body">
-              {kgError ? (
-                <div className="kg-error-state">
-                  <div className="kg-error-icon">
-                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--color-error)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                      <circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
-                    </svg>
-                  </div>
-                  <p className="kg-error-text">{kgError}</p>
-                  <button className="kg-btn kg-btn-secondary" onClick={() => { setKgModalOpen(false); setKgError(null); }}>
-                    关闭
-                  </button>
-                </div>
-              ) : kgStep === 3 && kgResult ? (
-                <div className="kg-success-state">
-                  <div className="kg-success-icon">
-                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--color-success)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
-                    </svg>
-                  </div>
-                  <p className="kg-success-title">知识图谱生成完成</p>
-                  <div className="kg-result-stats">
-                    <div className="kg-stat-item">
-                      <span className="kg-stat-value">{kgResult.nodes}</span>
-                      <span className="kg-stat-label">节点</span>
-                    </div>
-                    <div className="kg-stat-divider" />
-                    <div className="kg-stat-item">
-                      <span className="kg-stat-value">{kgResult.edges}</span>
-                      <span className="kg-stat-label">条边</span>
-                    </div>
-                  </div>
-                  <p className="kg-result-kb">已存入知识库：{kgResult.kbName}</p>
-                  <div className="kg-actions">
-                    <button className="kg-btn kg-btn-primary" onClick={() => { setKgModalOpen(false); navigate('/knowledge'); }}>
-                      前往知识库查看
-                    </button>
-                    <button className="kg-btn kg-btn-secondary" onClick={() => setKgModalOpen(false)}>
-                      关闭
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                <div className="kg-progress-state">
-                  <div className="kg-steps">
-                    <div className={`kg-step ${kgStep >= 1 ? 'active' : ''} ${kgStep > 1 ? 'done' : ''}`}>
-                      <div className="kg-step-indicator">
-                        {kgStep > 1 ? (
-                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
-                            <polyline points="20 6 9 17 4 12"/>
-                          </svg>
-                        ) : kgStep === 1 ? (
-                          <div className="kg-spinner" />
-                        ) : (
-                          <span>1</span>
-                        )}
-                      </div>
-                      <span className="kg-step-label">提取对话内容</span>
-                    </div>
-                    <div className="kg-step-connector">
-                      <div className={`kg-connector-line ${kgStep > 1 ? 'done' : ''}`}>
-                        {kgStep === 2 && <div className="kg-connector-progress" />}
-                      </div>
-                    </div>
-                    <div className={`kg-step ${kgStep >= 2 ? 'active' : ''} ${kgStep > 2 ? 'done' : ''}`}>
-                      <div className="kg-step-indicator">
-                        {kgStep > 2 ? (
-                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
-                            <polyline points="20 6 9 17 4 12"/>
-                          </svg>
-                        ) : kgStep === 2 ? (
-                          <div className="kg-spinner" />
-                        ) : (
-                          <span>2</span>
-                        )}
-                      </div>
-                      <span className="kg-step-label">构建知识图谱</span>
-                    </div>
-                    <div className="kg-step-connector">
-                      <div className={`kg-connector-line ${kgStep > 2 ? 'done' : ''}`} />
-                    </div>
-                    <div className={`kg-step ${kgStep >= 3 ? 'active' : ''} ${kgStep > 3 ? 'done' : ''}`}>
-                      <div className="kg-step-indicator">
-                        <span>3</span>
-                      </div>
-                      <span className="kg-step-label">完成</span>
-                    </div>
-                  </div>
-                  <p className="kg-progress-tip">
-                    {kgStep === 1 ? '正在提取对话内容...' : kgStep === 2 ? '正在构建知识图谱...' : '处理完成'}
-                  </p>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ChatPage;
+import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { chatAPI, knowledgeAPI, marketAPI, evolutionAPI } from '@/api';
+import type { Conversation, Message } from '@/types';
+import './ChatPage.css';
+
+// ===== 增强渲染依赖 =====
+import hljs from 'highlight.js';
+import 'highlight.js/styles/github.css';
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+import mermaid from 'mermaid';
+
+mermaid.initialize({ startOnLoad: false, theme: 'default' });
+
+// ===== Enhanced Markdown Renderer =====
+// 媒体(图片/视频)以受限缩略图呈现，并提供下载(格式+尺寸)选项
+interface MediaInfo { type: 'img' | 'video'; src: string; alt?: string; }
+
+// 全屏灯箱预览
+const ChatLightbox: React.FC<{ src: string; type: 'img' | 'video'; onClose: () => void }> = ({ src, type, onClose }) => {
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', h);
+    return () => document.removeEventListener('keydown', h);
+  }, [onClose]);
+  return (
+    <div className="chat-lightbox" onClick={onClose}>
+      <button className="chat-lightbox-close" onClick={onClose} aria-label="关闭">×</button>
+      <div className="chat-lightbox-content" onClick={(e) => e.stopPropagation()}>
+        {type === 'video'
+          ? <video src={src} controls autoPlay style={{ maxWidth: '92vw', maxHeight: '86vh', borderRadius: 8 }} />
+          : <img src={src} alt="" style={{ maxWidth: '92vw', maxHeight: '86vh', borderRadius: 8 }} />}
+      </div>
+    </div>
+  );
+};
+
+// 根据原始尺寸推算 3 个建议下载尺寸（保持宽高比）
+function computeSizes(natural: { w: number; h: number }) {
+  if (natural.w && natural.h) {
+    const ratio = natural.w / natural.h;
+    const fit = (maxDim: number) => ratio >= 1
+      ? { w: maxDim, h: Math.round(maxDim / ratio) }
+      : { w: Math.round(maxDim * ratio), h: maxDim };
+    return [
+      { label: '小图', ...fit(512) },
+      { label: '中图', ...fit(1024) },
+      { label: '原始', w: natural.w, h: natural.h },
+    ];
+  }
+  // 未知原始尺寸时按生成默认 4:3 给出三档
+  return [
+    { label: '小图', w: 512, h: 384 },
+    { label: '中图', w: 1024, h: 768 },
+    { label: '大图', w: 2048, h: 1536 },
+  ];
+}
+
+// 客户端画布转换格式+尺寸后下载；跨域受限时回退到新标签页打开原图
+function downloadImage(src: string, format: 'png' | 'jpg' | 'webp', w: number, h: number) {
+  const fallback = () => window.open(src, '_blank');
+  const img = new Image();
+  img.crossOrigin = 'anonymous';
+  img.onload = () => {
+    try {
+      const canvas = document.createElement('canvas');
+      canvas.width = w; canvas.height = h;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) { fallback(); return; }
+      if (format === 'jpg') { ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, w, h); }
+      ctx.drawImage(img, 0, 0, w, h);
+      const mime = format === 'jpg' ? 'image/jpeg' : format === 'webp' ? 'image/webp' : 'image/png';
+      canvas.toBlob((blob) => {
+        if (!blob) { fallback(); return; }
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url; a.download = `aiflow-image-${w}x${h}.${format}`;
+        document.body.appendChild(a); a.click(); a.remove();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+      }, mime, 0.92);
+    } catch (e) {
+      fallback();
+    }
+  };
+  img.onerror = fallback;
+  img.src = src;
+}
+
+// 媒体渲染组件：固定尺寸缩略图 + 点击放大 + 下载(格式/尺寸)
+const ChatMedia: React.FC<{ info: MediaInfo }> = ({ info }) => {
+  const [open, setOpen] = useState(false);
+  const [dlOpen, setDlOpen] = useState(false);
+  const [fmt, setFmt] = useState<'png' | 'jpg' | 'webp'>('png');
+  const [natural, setNatural] = useState<{ w: number; h: number }>({ w: 0, h: 0 });
+
+  if (info.type === 'video') {
+    return (
+      <div className="chat-media-wrap">
+        <video className="chat-media-video" src={info.src} controls preload="metadata" onClick={() => setOpen(true)} />
+        <div className="chat-media-bar">
+          <a className="chat-media-link" href={info.src} target="_blank" rel="noopener" onClick={(e) => e.stopPropagation()}>打开 / 下载原视频</a>
+        </div>
+        {open && <ChatLightbox src={info.src} type="video" onClose={() => setOpen(false)} />}
+      </div>
+    );
+  }
+
+  const sizes = computeSizes(natural);
+  return (
+    <div className="chat-media-wrap">
+      <img
+        className="chat-media-img"
+        src={info.src}
+        alt={info.alt || '生成图片'}
+        loading="lazy"
+        onClick={() => setOpen(true)}
+        onLoad={(e) => {
+          const im = e.currentTarget;
+          if (im.naturalWidth && im.naturalHeight) setNatural({ w: im.naturalWidth, h: im.naturalHeight });
+        }}
+      />
+      <button className="chat-media-dl-btn" title="下载图片" onClick={(e) => { e.stopPropagation(); setDlOpen((o) => !o); }}>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" />
+        </svg>
+      </button>
+      {dlOpen && (
+        <div className="chat-media-dl-pop" onClick={(e) => e.stopPropagation()}>
+          <div className="chat-media-dl-title">下载图片</div>
+          <div className="chat-media-dl-row">
+            <span className="chat-media-dl-label">格式</span>
+            <div className="chat-media-dl-fmts">
+              {(['png', 'jpg', 'webp'] as const).map((f) => (
+                <button key={f} className={`chat-media-dl-fmt ${fmt === f ? 'active' : ''}`} onClick={() => setFmt(f)}>{f.toUpperCase()}</button>
+              ))}
+            </div>
+          </div>
+          <div className="chat-media-dl-label">尺寸</div>
+          <div className="chat-media-dl-sizes">
+            {sizes.map((s, i) => (
+              <button key={i} className="chat-media-dl-size" onClick={() => { downloadImage(info.src, fmt, s.w, s.h); setDlOpen(false); }}>
+                <span className="chat-media-dl-size-label">{s.label}</span>
+                <span className="chat-media-dl-size-px">{s.w}×{s.h}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+      {open && <ChatLightbox src={info.src} type="img" onClose={() => setOpen(false)} />}
+    </div>
+  );
+};
+
+const MarkdownContent: React.FC<{ content: string }> = ({ content }) => {
+  const nodes = useMemo(() => {
+    let text = content;
+
+    // 1. Extract code blocks first (protect from other replacements)
+    const codeBlocks: string[] = [];
+    const mermaidBlocks: string[] = [];
+    text = text.replace(/```(\w*)\n?([\s\S]*?)```/g, (_m: string, _lang: string, code: string) => {
+      if (_lang === 'mermaid') {
+        const idx = mermaidBlocks.length;
+        mermaidBlocks.push('<div class="md-mermaid" data-code="' + escapeHtml(code.trim()) + '"></div>');
+        return '\x00MERMAID' + idx + '\x00';
+      }
+      const idx = codeBlocks.length;
+      codeBlocks.push('<pre class="md-code-block"><code class="md-code">' + escapeHtml(code.trim()) + '</code></pre>');
+      return '\x00CODEBLOCK' + idx + '\x00';
+    });
+
+    // 2. Extract inline code
+    const inlineCodes: string[] = [];
+    text = text.replace(/`([^`]+)`/g, (_m: string, code: string) => {
+      const idx = inlineCodes.length;
+      inlineCodes.push('<code class="md-inline-code">' + escapeHtml(code) + '</code>');
+      return '\x00INLINE' + idx + '\x00';
+    });
+
+    // 2.5 Extract media blocks (<img>/<video>) → 结构化，后续渲染为 React 组件
+    const mediaBlocks: MediaInfo[] = [];
+    text = text.replace(/<(img|video)([^>]*?)\/?>/gi, (_m: string, tag: string, attrs: string) => {
+      const type = tag.toLowerCase() === 'img' ? 'img' : 'video';
+      const srcM = attrs.match(/src=["']([^"']+)["']/i);
+      const altM = attrs.match(/alt=["']([^"']*)["']/i);
+      mediaBlocks.push({ type, src: srcM ? srcM[1] : '', alt: altM ? altM[1] : '' });
+      return '\x00MEDIA' + (mediaBlocks.length - 1) + '\x00';
+    });
+
+    // 2.7 Extract Markdown tables: | h1 | h2 |\n|---|---| ... |
+    // 把整段表格替换为占位符，表格内容(已转义)放入 tableBlocks 数组
+    const tableBlocks: string[] = [];
+    text = text.replace(
+      /((?:^\|.+\|\r?\n)+^\|[\s\-:|]+\|\r?\n(?:^\|.+\|\r?\n?)+)/gm,
+      (_m: string, block: string) => {
+        const lines = block.trim().split(/\r?\n/).filter((l: string) => l.trim());
+        if (lines.length < 2) return block;
+        const headerCells = lines[0].split('|').slice(1, -1).map((c: string) => c.trim());
+        const alignCells = lines[1].split('|').slice(1, -1).map((c: string) => {
+          const t = c.trim();
+          const left = t.startsWith(':');
+          const right = t.endsWith(':');
+          if (left && right) return 'center';
+          if (right) return 'right';
+          if (left) return 'left';
+          return 'left';
+        });
+        const bodyRows = lines.slice(2).map((row: string) =>
+          row.split('|').slice(1, -1).map((c: string) => c.trim())
+        );
+        const thead = headerCells.map((c: string, i: number) =>
+          `<th style="text-align:${alignCells[i] || 'left'}">${c}</th>`
+        ).join('');
+        const tbody = bodyRows.map((r: string[]) =>
+          '<tr>' + r.map((c: string, i: number) =>
+            `<td style="text-align:${alignCells[i] || 'left'}">${c}</td>`
+          ).join('') + '</tr>'
+        ).join('');
+        const html = `<table class="md-table"><thead><tr>${thead}</tr></thead><tbody>${tbody}</tbody></table>`;
+        const idx = tableBlocks.length;
+        tableBlocks.push(html);
+        return '\x00TABLE' + idx + '\x00';
+      }
+    );
+
+    // 2.8 LaTeX 数学公式：$$...$$（块级）和 $...$（行内）
+    // 提取为占位符，渲染后用 KaTeX 处理
+    const mathBlocks: string[] = [];
+    text = text.replace(/\$\$([\s\S]+?)\$\$/g, (_m: string, formula: string) => {
+      try {
+        const rendered = katex.renderToString(formula.trim(), { displayMode: true, throwOnError: false });
+        const idx = mathBlocks.length;
+        mathBlocks.push(`<div class="md-math-block">${rendered}</div>`);
+        return '\x00MATHBLOCK' + idx + '\x00';
+      } catch { return _m; }
+    });
+    text = text.replace(/\$([^\s$][^$]*[^\s$])\$/g, (_m: string, formula: string) => {
+      try {
+        const rendered = katex.renderToString(formula.trim(), { displayMode: false, throwOnError: false });
+        const idx = mathBlocks.length;
+        mathBlocks.push(`<span class="md-math-inline">${rendered}</span>`);
+        return '\x00MATHBLOCK' + idx + '\x00';
+      } catch { return _m; }
+    });
+
+    // 2.9 Strikethrough: ~~text~~ → <del>text</del>
+    text = text.replace(/~~(.+?)~~/g, '<del>$1</del>');
+
+    // 2.10 Auto-link bare URLs: http(s)://... → <a>
+    text = text.replace(/(?<![="'>])https?:\/\/[^\s<>[\]()]+/g, (url: string) =>
+      `<a class="md-link" href="${url}" target="_blank" rel="noopener">${url}</a>`
+    );
+
+    // 3. Headers
+    text = text.replace(/^#### (.+)$/gm, '<h4 class="md-h4">$1</h4>');
+    text = text.replace(/^### (.+)$/gm, '<h4 class="md-h4">$1</h4>');
+    text = text.replace(/^## (.+)$/gm, '<h3 class="md-h3">$1</h3>');
+    text = text.replace(/^# (.+)$/gm, '<h2 class="md-h2">$1</h2>');
+
+    // 4. Horizontal rule
+    text = text.replace(/^---+$/gm, '<hr class="md-hr">');
+
+    // 5. Blockquotes
+    text = text.replace(/^> (.+)$/gm, '<blockquote class="md-blockquote">$1</blockquote>');
+
+    // 6. Links [text](url)
+    text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a class="md-link" href="$2" target="_blank" rel="noopener">$1</a>');
+
+    // 7. Bold and italic
+    text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+    text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    text = text.replace(/(?<!\w)\*(?!\*)(.+?)(?<!\*)\*(?!\w)/g, '<em>$1</em>');
+
+    // 8. Lists
+    text = text.replace(/^\s*[-*] (.+)$/gm, '<li class="md-li">$1</li>');
+    text = text.replace(/^\s*\d+\. (.+)$/gm, '<li class="md-li">$1</li>');
+    // Wrap consecutive <li> in <ul>
+    text = text.replace(/((?:<li class="md-li">[\s\S]*?<\/li>\n?)+)/g, '<ul class="md-ul">$1</ul>');
+
+    // 9. Convert double newlines to paragraph breaks, single to <br/>
+    text = text.replace(/\n\n/g, '</p><p class="md-p">');
+    text = text.replace(/\n/g, '<br/>');
+
+    // 10. Restore code blocks and inline codes
+    text = text.replace(/\x00CODEBLOCK(\d+)\x00/g, (_m: string, idx: string) => codeBlocks[parseInt(idx)] || '');
+    text = text.replace(/\x00MERMAID(\d+)\x00/g, (_m: string, idx: string) => mermaidBlocks[parseInt(idx)] || '');
+    text = text.replace(/\x00INLINE(\d+)\x00/g, (_m: string, idx: string) => inlineCodes[parseInt(idx)] || '');
+    text = text.replace(/\x00TABLE(\d+)\x00/g, (_m: string, idx: string) => tableBlocks[parseInt(idx)] || '');
+    text = text.replace(/\x00MATHBLOCK(\d+)\x00/g, (_m: string, idx: string) => mathBlocks[parseInt(idx)] || '');
+
+    // 10.5 Apply syntax highlighting to code blocks + add copy button
+    text = text.replace(
+      /<pre class="md-code-block"><code class="md-code">([\s\S]*?)<\/code><\/pre>/g,
+      (_m: string, code: string) => {
+        const decoded = code.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
+        let highlighted: string;
+        try { highlighted = hljs.highlightAuto(decoded).value; } catch { highlighted = code; }
+        return `<div class="md-code-wrapper">
+          <button class="md-code-copy" onclick="navigator.clipboard.writeText(this.parentElement.querySelector('code').textContent);this.textContent='已复制';setTimeout(()=>this.textContent='复制',2000)">复制</button>
+          <pre class="md-code-block"><code class="md-code hljs">${highlighted}</code></pre>
+        </div>`;
+      }
+    );
+
+    // 11. Wrap in paragraph and clean up
+    text = '<p class="md-p">' + text + '</p>';
+    text = text.replace(/<p class="md-p"><\/p>/g, '');
+    text = text.replace(/<p class="md-p">(<h[234][\s\S]*?<\/h[234]>)<\/p>/g, '$1');
+    text = text.replace(/<p class="md-p">(<pre[\s\S]*?<\/pre>)<\/p>/g, '$1');
+    text = text.replace(/<p class="md-p">(<ul[\s\S]*?<\/ul>)<\/p>/g, '$1');
+    text = text.replace(/<p class="md-p">(<hr[\s\S]*?)<\/p>/g, '$1');
+    text = text.replace(/<p class="md-p">(<blockquote[\s\S]*?<\/blockquote>)<\/p>/g, '$1');
+    text = text.replace(/<p class="md-p">(<table[\s\S]*?<\/table>)<\/p>/g, '$1');
+
+    // 12. 拆分为文本片段与媒体组件
+    const parts = text.split(/(\x00MEDIA\d+\x00)/g);
+    return parts.map((part: string, i: number) => {
+      const m = part.match(/^\x00MEDIA(\d+)\x00$/);
+      if (m) {
+        const info = mediaBlocks[parseInt(m[1])];
+        if (info && info.src) return <ChatMedia key={'m' + i} info={info} />;
+        return null;
+      }
+      if (!part) return null;
+      // 仅清除被媒体切分产生的悬空 <p> 标签，保留段落内部的成对 <p>
+      let s = part.replace(/^<\/p>/, '').replace(/<p class="md-p">$/, '');
+      if (!s.trim()) return null;
+      return <div key={'t' + i} className="md-text-seg" dangerouslySetInnerHTML={{ __html: s }} />;
+    });
+  }, [content]);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const diagrams = containerRef.current.querySelectorAll('.md-mermaid:not(.md-mermaid-rendered)');
+    if (diagrams.length === 0) return;
+    const timer = setTimeout(async () => {
+      for (const el of diagrams) {
+        try {
+          const code = el.getAttribute('data-code') || '';
+          if (!code) continue;
+          const id = 'mermaid-' + Math.random().toString(36).slice(2, 10);
+          const { svg } = await mermaid.render(id, code);
+          el.innerHTML = svg;
+          el.classList.add('md-mermaid-rendered');
+        } catch (e) {
+          el.innerHTML = '<pre class="md-code-block"><code>Mermaid: ' + (e as Error).message + '</code></pre>';
+        }
+      }
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [content]);
+
+  return <div className="markdown-body" ref={containerRef}>{nodes}</div>;
+};
+
+// 解析后端返回的「模糊创作意图」确认指令：<<CLARIFY>>{json}<<CLARIFY>>
+function parseClarify(content: string): { prompt: string; options: any[] } | null {
+  if (!content || typeof content !== 'string') return null;
+  const m = content.match(/^<<CLARIFY>>([\s\S]+)<<CLARIFY>>$/);
+  if (!m) return null;
+  try {
+    const obj = JSON.parse(m[1]);
+    if (obj && Array.isArray(obj.options)) return obj;
+  } catch { /* ignore */ }
+  return null;
+}
+
+// 模糊创作意图确认卡片：让用户选择产出方向（文案/图片/视频/其他）
+const ClarifyCard: React.FC<{ data: { prompt: string; options: any[] }; onChoose: (opt: any) => void }> = ({ data, onChoose }) => {
+  return (
+    <div className="chat-clarify-card">
+      <div className="chat-clarify-title">🤔 这个请求的方向还不太明确，您希望以哪种形式呈现？</div>
+      <div className="chat-clarify-sub">「{data.prompt}」</div>
+      <div className="chat-clarify-options">
+        {data.options.map((opt: any) => (
+          <button key={opt.key} className="chat-clarify-option" onClick={() => onChoose(opt)}>
+            <span className="chat-clarify-opt-label">{opt.label}</span>
+            <span className="chat-clarify-opt-desc">{opt.desc}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+// ===== Time Formatting =====
+function formatTime(iso: string): string {
+  const date = new Date(iso);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const oneDay = 24 * 60 * 60 * 1000;
+
+  if (diff < oneDay) {
+    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
+  } else if (diff < 7 * oneDay) {
+    const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+    return days[date.getDay()];
+  } else if (date.getFullYear() === now.getFullYear()) {
+    return `${date.getMonth() + 1}/${date.getDate()}`;
+  } else {
+    return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+  }
+}
+
+// ===== Helpers: normalize API responses =====
+function unwrapList(res: any): any[] {
+  const data = res?.data !== undefined ? res.data : res;
+  if (Array.isArray(data)) return data;
+  if (data?.items) return data.items;
+  return [];
+}
+
+function unwrapData(res: any): any {
+  return res?.data !== undefined ? res.data : res;
+}
+
+// ===== Icons =====
+const IconSearch = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+  </svg>
+);
+
+const IconPlus = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+  </svg>
+);
+
+const IconMore = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="12" cy="5" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="19" r="1.5" fill="currentColor" stroke="none"/>
+  </svg>
+);
+
+const IconSend = () => (
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+  </svg>
+);
+
+const IconChevronDown = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="6 9 12 15 18 9"/>
+  </svg>
+);
+
+const IconEdit = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+  </svg>
+);
+
+const IconArchive = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/>
+  </svg>
+);
+
+const IconTrash = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+  </svg>
+);
+
+const IconPin = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12 2 L12 22"/><path d="M5 6 L5 6"/><path d="M6 6 L6 12 C6 15 12 17 12 22 C12 17 18 15 18 12 L18 6"/>
+  </svg>
+);
+
+const IconGraph = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/>
+    <line x1="8" y1="6" x2="10" y2="12"/><line x1="16" y1="6" x2="14" y2="12"/><line x1="8" y1="18" x2="10" y2="12"/><line x1="16" y1="18" x2="14" y2="12"/>
+  </svg>
+);
+
+const IconKnowledge = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
+  </svg>
+);
+
+const IconAgent = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12 2a4 4 0 0 1 4 4v2a4 4 0 0 1-8 0V6a4 4 0 0 1 4-4z"/><path d="M2 21c0-5.5 4.5-10 10-10s10 4.5 10 10"/>
+    <circle cx="12" cy="9" r="1" fill="currentColor" stroke="none"/>
+  </svg>
+);
+
+const IconSkill = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+  </svg>
+);
+
+const IconMcp = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="12" cy="18" r="2.5"/>
+    <line x1="7.5" y1="7.5" x2="11" y2="16"/><line x1="16.5" y1="7.5" x2="13" y2="16"/>
+  </svg>
+);
+
+const IconPaperclip = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
+  </svg>
+);
+
+const IconMic = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><line x1="12" y1="17" x2="12" y2="22"/>
+  </svg>
+);
+
+const IconStop = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
+    <rect x="6" y="6" width="12" height="12" rx="2"/>
+  </svg>
+);
+
+const IconVolume = () => (
+  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
+  </svg>
+);
+
+const IconModel = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
+  </svg>
+);
+
+const IconEmpty = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" opacity="0.3">
+    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+    <line x1="9" y1="10" x2="15" y2="10"/><line x1="12" y1="7" x2="12" y2="13"/>
+  </svg>
+);
+
+const IconSpinner = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="spin-icon">
+    <circle cx="12" cy="12" r="10" strokeOpacity="0.25"/>
+    <path d="M12 2a10 10 0 0 1 10 10" strokeLinecap="round"/>
+  </svg>
+);
+
+// ===== Dropdown Component =====
+interface DropdownProps {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  align?: 'left' | 'right';
+  dropup?: boolean;
+  closeOnClick?: boolean;
+}
+
+const Dropdown: React.FC<DropdownProps> = ({ trigger, children, className = '', align = 'left', dropup = false, closeOnClick = true }) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const openRef = useRef(open);
+  openRef.current = open;
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node;
+      // 如果点击在wrapper内部，不关闭
+      if (ref.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener('mousedown', handleClickOutside, true);
+    return () => document.removeEventListener('mousedown', handleClickOutside, true);
+  }, []);
+
+  // 打开时处理z-index
+  useEffect(() => {
+    if (open && dropup) {
+      const menu = menuRef.current;
+      if (menu) {
+        menu.style.zIndex = '9999';
+      }
+    }
+  }, [open, dropup]);
+
+  const alignClass = align === 'right' ? 'align-right' : 'align-left';
+  const dropupClass = dropup ? 'dropup' : '';
+
+  const handleTriggerMouseDown = (e: React.MouseEvent) => {
+    // 阻止冒泡到document，防止被handleClickOutside误关
+    e.stopPropagation();
+    // 基于当前状态切换（在mousedown阶段决定，避免与click冲突）
+    setOpen(prev => !prev);
+  };
+
+  const handleTriggerClick = (e: React.MouseEvent) => {
+    // 阻止click冒泡到父级的导航onClick
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  return (
+    <div className={`dropdown-wrapper ${className}`} ref={ref}>
+      <div
+        className="dropdown-trigger"
+        onMouseDown={handleTriggerMouseDown}
+        onClick={handleTriggerClick}
+      >
+        {trigger}
+      </div>
+      {open && (
+        <div
+          ref={menuRef}
+          className={`dropdown-menu ${alignClass} ${dropupClass}`}
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={(e) => { e.stopPropagation(); if (closeOnClick) setOpen(false); }}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ===== Main Component =====
+const ChatPage: React.FC = () => {
+  const { id } = useParams<{ id?: string }>();
+  const navigate = useNavigate();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedModelId, setSelectedModelId] = useState('auto');
+  const [chatModels, setChatModels] = useState<any[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [sending, setSending] = useState(false);
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [loadingConversations, setLoadingConversations] = useState(true);
+  const [loadingMessages, setLoadingMessages] = useState(false);
+  const [knowledgeBases, setKnowledgeBases] = useState<any[]>([]);
+  const [agents, setAgents] = useState<any[]>([]);
+  const [skills, setSkills] = useState<any[]>([]);
+  const [mcps, setMcps] = useState<any[]>([]);
+  // 多选组合模式
+  const [selectedAgentIds, setSelectedAgentIds] = useState<string[]>([]);
+  const [selectedSkillIds, setSelectedSkillIds] = useState<string[]>([]);
+  const [selectedKbIds, setSelectedKbIds] = useState<string[]>([]);
+  const [selectedMcpIds, setSelectedMcpIds] = useState<string[]>([]);
+  // 文件附件
+  const [attachments, setAttachments] = useState<{ name: string; file_type: string; content?: string }[]>([]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const recognitionRef = useRef<any>(null);
+  const [recording, setRecording] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  // Knowledge graph conversion state
+  const [kgModalOpen, setKgModalOpen] = useState(false);
+  const [kgStep, setKgStep] = useState<1 | 2 | 3>(1);
+  const [kgResult, setKgResult] = useState<{ nodes: number; edges: number; kbName: string; kbId: string } | null>(null);
+  const [kgError, setKgError] = useState<string | null>(null);
+  const [kgConvId, setKgConvId] = useState<string | null>(null);
+
+  // Load models from backend API
+  useEffect(() => {
+    chatAPI.getModels().then((res: any) => {
+      const data = res.data || res;
+      const models = Array.isArray(data) ? data : (data?.items || []);
+      setChatModels(models);
+      if (models.length > 0 && !selectedModelId) {
+        setSelectedModelId('auto');
+      }
+    }).catch(() => {
+      setChatModels([]);
+    });
+  }, []);
+
+  // Load conversations from API
+  const loadConversations = useCallback(async () => {
+    try {
+      setLoadingConversations(true);
+      const res = await chatAPI.getConversations();
+      const convs = unwrapList(res);
+      // Sort: pinned first, then by updatedAt desc
+      const sorted = [...convs].sort((a: any, b: any) => {
+        if (a.pinned && !b.pinned) return -1;
+        if (!a.pinned && b.pinned) return 1;
+        return new Date(b.updatedAt || b.updated_at || 0).getTime() - new Date(a.updatedAt || a.updated_at || 0).getTime();
+      });
+      // Normalize field names
+      const mapped: Conversation[] = sorted.map((c: any) => ({
+        id: c.id,
+        userId: c.userId || c.user_id || '',
+        title: c.title || '未命名对话',
+        modelId: c.modelId || c.model_id || '',
+        status: c.status || 'active',
+        pinned: c.pinned || false,
+        knowledgeGraphCount: c.knowledgeGraphCount ?? c.knowledge_graph_count ?? 0,
+        lastMessage: c.lastMessage || c.last_message || '',
+        createdAt: c.createdAt || c.created_at || new Date().toISOString(),
+        updatedAt: c.updatedAt || c.updated_at || new Date().toISOString(),
+      }));
+      setConversations(mapped);
+    } catch (err) {
+      console.error('加载对话列表失败', err);
+    } finally {
+      setLoadingConversations(false);
+    }
+  }, []);
+
+  // Load conversations on mount
+  useEffect(() => {
+    loadConversations();
+  }, [loadConversations]);
+
+  // Load messages for selected conversation
+  useEffect(() => {
+    if (!id) {
+      setMessages([]);
+      return;
+    }
+    const loadMessages = async () => {
+      try {
+        setLoadingMessages(true);
+        const res = await chatAPI.getMessages(id);
+        const msgs = unwrapList(res);
+        const mapped: Message[] = msgs.map((m: any) => ({
+          id: m.id,
+          conversationId: m.conversationId || m.conversation_id || id,
+          role: m.role,
+          content: m.content,
+          tokenUsed: m.tokenUsed ?? m.token_used ?? 0,
+          createdAt: m.createdAt || m.created_at || new Date().toISOString(),
+        }));
+        setMessages(mapped);
+        // 页面刷新时若仍有「⏳」占位的媒体消息，继续轮询后端回写结果
+        mapped.forEach((m) => {
+          if (m.role === 'assistant' && typeof m.content === 'string' && m.content.startsWith('⏳')) {
+            startMediaPolling(id, m.id);
+          }
+        });
+      } catch (err) {
+        console.error('加载消息失败', err);
+        setMessages([]);
+      } finally {
+        setLoadingMessages(false);
+      }
+    };
+    loadMessages();
+  }, [id]);
+
+  // 媒体(图像/视频)异步生成轮询：后端先返回「⏳」占位，前端定时拉取该消息最新内容并回写
+  const pollMediaRef = useRef<Record<string, ReturnType<typeof setInterval> | null>>({});
+
+  const stopMediaPolling = (msgId: string) => {
+    const t = pollMediaRef.current[msgId];
+    if (t) {
+      clearInterval(t);
+      pollMediaRef.current[msgId] = null;
+    }
+  };
+
+  const startMediaPolling = (convId: string, msgId: string) => {
+    if (pollMediaRef.current[msgId]) return; // 已在轮询
+    let ticks = 0;
+    const timer = setInterval(async () => {
+      ticks += 1;
+      try {
+        const res = await chatAPI.getMessages(convId);
+        const msgs: any[] = unwrapList(res);
+        const updated = msgs.find((m: any) => m.id === msgId);
+        if (!updated) {
+          stopMediaPolling(msgId);
+          return;
+        }
+        const content: string = updated.content || '';
+        if (content.startsWith('⏳')) {
+          if (ticks > 120) stopMediaPolling(msgId); // ~6 分钟兜底
+          return;
+        }
+        // 生成完成：回写消息内容
+        setMessages(prev => prev.map(m => m.id === msgId ? {
+          ...m,
+          content,
+          tokenUsed: updated.tokenUsed ?? updated.token_used ?? m.tokenUsed,
+          createdAt: updated.createdAt || updated.created_at || m.createdAt,
+          used_skills: updated.usedSkills ?? updated.used_skills ?? m.used_skills,
+          used_mcp: updated.usedMcp ?? updated.used_mcp ?? m.used_mcp,
+        } : m));
+        stopMediaPolling(msgId);
+      } catch (e) {
+        if (ticks > 120) stopMediaPolling(msgId); // 网络异常兜底
+      }
+    }, 3000);
+    pollMediaRef.current[msgId] = timer;
+  };
+
+  // 卸载时清理所有轮询定时器
+  useEffect(() => {
+    return () => {
+      Object.values(pollMediaRef.current).forEach(t => t && clearInterval(t));
+    };
+  }, []);
+
+  // Load knowledge bases, agents, skills for attachment dropdowns
+  useEffect(() => {
+    knowledgeAPI.getBases().then((res: any) => {
+      const data = res?.data !== undefined ? res.data : res;
+      if (data?.bases && Array.isArray(data.bases)) {
+        setKnowledgeBases(data.bases);
+      } else if (Array.isArray(data)) {
+        setKnowledgeBases(data);
+      } else if (data?.items) {
+        setKnowledgeBases(data.items);
+      } else {
+        setKnowledgeBases([]);
+      }
+    }).catch(() => {});
+    marketAPI.getApps({ type: 'agent' }).then((res: any) => {
+      const data = res?.data !== undefined ? res.data : res;
+      let apps: any[] = [];
+      if (Array.isArray(data)) apps = data;
+      else if (data?.items) apps = data.items;
+      // 显示所有已发布的Agent（不需要安装即可在聊天中使用）
+      setAgents(apps.filter((a: any) => a.status === 'published' || a.status === 'active' || !a.status));
+    }).catch(() => {});
+    marketAPI.getApps({ type: 'skill' }).then((res: any) => {
+      const data = res?.data !== undefined ? res.data : res;
+      let apps: any[] = [];
+      if (Array.isArray(data)) apps = data;
+      else if (data?.items) apps = data.items;
+      // 显示所有已发布的技能（不需要安装即可在聊天中使用）
+      setSkills(apps.filter((a: any) => a.status === 'published' || a.status === 'active' || !a.status));
+    }).catch(() => {});
+    marketAPI.getApps({ type: 'mcp' }).then((res: any) => {
+      const data = res?.data !== undefined ? res.data : res;
+      let apps: any[] = [];
+      if (Array.isArray(data)) apps = data;
+      else if (data?.items) apps = data.items;
+      setMcps(apps.filter((a: any) => a.status === 'published' || a.status === 'active' || !a.status));
+    }).catch(() => {});
+  }, []);
+
+  // Determine selected conversation
+  const selectedConversation = useMemo(() => {
+    if (id) {
+      return conversations.find(c => c.id === id) || null;
+    }
+    return conversations[0] || null;
+  }, [id, conversations]);
+
+  // Filter conversations by search
+  const filteredConversations = useMemo(() => {
+    const pinned = conversations.filter(c => c.pinned);
+    const unpinned = conversations.filter(c => !c.pinned);
+    if (!searchQuery.trim()) return [...pinned, ...unpinned];
+    const q = searchQuery.toLowerCase();
+    return [...pinned.filter(c => c.title.toLowerCase().includes(q)), ...unpinned.filter(c => c.title.toLowerCase().includes(q))];
+  }, [conversations, searchQuery]);
+
+  // Selected model info（Auto 自动：按对话意图自动匹配后台各能力默认模型）
+  const isAutoModel = selectedModelId === 'auto';
+  const AUTO_MODEL = { id: 'auto', name: 'Auto 自动', status: 'free', provider_name: '按能力智能匹配', capabilities: [], price_per_million_tokens: 0 };
+  const selectedModel = isAutoModel
+    ? AUTO_MODEL
+    : (chatModels.find(m => m.id === selectedModelId) || chatModels[0] || AUTO_MODEL);
+
+  // Scroll to bottom when messages change
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // Select first conversation if no id param
+  useEffect(() => {
+    if (!id && conversations.length > 0) {
+      navigate(`/chat/${conversations[0].id}`, { replace: true });
+    }
+  }, [id, conversations, navigate]);
+
+  // Handle new conversation
+  const handleNewConversation = async () => {
+    try {
+      const res = await chatAPI.createConversation({ title: '新对话', model_id: selectedModelId === 'auto' ? (chatModels[0]?.id || '') : selectedModelId });
+      const newConv = unwrapData(res);
+      const conv: Conversation = {
+        id: newConv.id,
+        userId: newConv.userId || newConv.user_id || '',
+        title: newConv.title || '新对话',
+        modelId: newConv.modelId || newConv.model_id || selectedModelId,
+        status: 'active',
+        pinned: false,
+        knowledgeGraphCount: 0,
+        createdAt: newConv.createdAt || newConv.created_at || new Date().toISOString(),
+        updatedAt: newConv.updatedAt || newConv.updated_at || new Date().toISOString(),
+      };
+      setConversations(prev => [conv, ...prev]);
+      navigate(`/chat/${conv.id}`);
+    } catch (err: any) {
+      alert('创建对话失败: ' + (err.message || '未知错误'));
+    }
+  };
+
+  // Handle rename
+  const handleRename = async (convId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const newTitle = prompt('请输入新名称：');
+    if (newTitle && newTitle.trim()) {
+      try {
+        await chatAPI.updateConversation(convId, { title: newTitle.trim() });
+        setConversations(prev => prev.map(c => c.id === convId ? { ...c, title: newTitle.trim() } : c));
+      } catch (err: any) {
+        alert('重命名失败: ' + (err.message || '未知错误'));
+      }
+    }
+  };
+
+  // Handle archive
+  const handleArchive = async (convId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const conv = conversations.find(c => c.id === convId);
+    if (!conv) return;
+    const newStatus = conv.status === 'archived' ? 'active' : 'archived';
+    try {
+      await chatAPI.updateConversation(convId, { status: newStatus });
+      setConversations(prev => prev.map(c => c.id === convId ? { ...c, status: newStatus } as Conversation : c));
+    } catch (err: any) {
+      alert('操作失败: ' + (err.message || '未知错误'));
+    }
+  };
+
+  // Handle delete
+  const handleDelete = async (convId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!confirm('确定要删除这个对话吗？')) return;
+    try {
+      await chatAPI.deleteConversation(convId);
+      const next = conversations.filter(c => c.id !== convId);
+      setConversations(next);
+      if (selectedConversation?.id === convId) {
+        if (next.length > 0) {
+          navigate(`/chat/${next[0].id}`);
+        } else {
+          navigate('/chat');
+        }
+      }
+    } catch (err: any) {
+      alert('删除失败: ' + (err.message || '未知错误'));
+    }
+  };
+
+  // Handle pin / unpin
+  const handlePin = async (convId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const conv = conversations.find(c => c.id === convId);
+    if (!conv) return;
+    const newPinned = !conv.pinned;
+    try {
+      await chatAPI.updateConversation(convId, { pinned: newPinned });
+      setConversations(prev => {
+        const updated = prev.map(c => c.id === convId ? { ...c, pinned: newPinned } : c);
+        const pinned = updated.filter(c => c.pinned);
+        const unpinned = updated.filter(c => !c.pinned).sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
+        return [...pinned, ...unpinned];
+      });
+    } catch (err: any) {
+      alert('操作失败: ' + (err.message || '未知错误'));
+    }
+  };
+
+  // Handle convert to knowledge graph
+  const handleKnowledgeGraph = async (convId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setKgModalOpen(true);
+    setKgStep(1);
+    setKgResult(null);
+    setKgError(null);
+    setKgConvId(convId);
+
+    try {
+      await new Promise(r => setTimeout(r, 600));
+      setKgStep(2);
+
+      const res = await chatAPI.convertToKnowledgeGraph(convId);
+      await new Promise(r => setTimeout(r, 400));
+      setKgStep(3);
+
+      if (res.code === 0) {
+        const graph = res.data.graph;
+        setKgResult({
+          nodes: graph.stats.total_nodes,
+          edges: graph.stats.total_edges,
+          kbName: res.data.knowledge_base_name,
+          kbId: res.data.knowledge_base_id,
+        });
+        // 使用后端返回的真实计数（幂等，始终为 1），避免前端重复累加导致计数虚高
+        const newCount = res.data.knowledge_graph_count ?? 1;
+        setConversations(prev =>
+          prev.map(c => c.id === convId ? { ...c, knowledgeGraphCount: newCount } : c)
+        );
+      } else {
+        setKgError(res.message || '转换失败');
+      }
+    } catch (err) {
+      setKgError((err as Error).message || '转换失败，请稍后重试');
+    }
+  };
+
+  // Handle send message - CALLS REAL API
+  // 抽出公共发送逻辑，供输入框发送与「模糊创作意图」方向选择复用
+  const sendText = async (content: string) => {
+    if (!content.trim() || sending || !selectedConversation) return;
+    setSending(true);
+
+    // Add user message optimistically
+    const tempUserMsg: Message = {
+      id: `temp_${Date.now()}`,
+      conversationId: selectedConversation?.id || '',
+      role: 'user',
+      content,
+      tokenUsed: 0,
+      createdAt: new Date().toISOString(),
+    };
+    setMessages(prev => [...prev, tempUserMsg]);
+
+    try {
+      const res = await chatAPI.sendMessage(selectedConversation!.id, {
+        content,
+        model_id: selectedModelId || undefined,
+        agent_ids: selectedAgentIds.length > 0 ? selectedAgentIds : undefined,
+        skill_ids: selectedSkillIds.length > 0 ? selectedSkillIds : undefined,
+        knowledge_base_ids: selectedKbIds.length > 0 ? selectedKbIds : undefined,
+        mcp_ids: selectedMcpIds.length > 0 ? selectedMcpIds : undefined,
+        attachments: attachments.length > 0 ? attachments.map(a => ({
+          name: a.name, file_type: a.file_type, content: a.content || '',
+        })) : undefined,
+        use_tools: selectedSkillIds.length > 0 || selectedAgentIds.length > 0 || selectedMcpIds.length > 0,
+      });
+
+      const data = unwrapData(res);
+
+      // Replace temporary user message and add assistant response
+      setMessages(prev => {
+        const filtered = prev.filter(m => m.id !== tempUserMsg.id);
+        const newMsgs: Message[] = [];
+        if (data.user_message) {
+          newMsgs.push({
+            id: data.user_message.id,
+            conversationId: selectedConversation?.id || '',
+            role: 'user',
+            content: data.user_message.content,
+            tokenUsed: data.user_message.token_used || 0,
+            createdAt: data.user_message.created_at || new Date().toISOString(),
+          });
+        }
+        if (data.assistant_message) {
+          newMsgs.push({
+            id: data.assistant_message.id,
+            conversationId: selectedConversation?.id || '',
+            role: 'assistant',
+            content: data.assistant_message.content,
+            tokenUsed: data.assistant_message.token_used || 0,
+            createdAt: data.assistant_message.created_at || new Date().toISOString(),
+            used_skills: data.assistant_message.used_skills || [],
+            used_mcp: data.assistant_message.used_mcp || [],
+          });
+        }
+        return [...filtered, ...newMsgs];
+      });
+
+      // 媒体异步生成：启动轮询，待后端回写后自动刷新
+      if (data.assistant_message?.generating) {
+        startMediaPolling(selectedConversation!.id, data.assistant_message.id);
+      }
+
+      // Refresh conversations to update lastMessage
+      loadConversations();
+      // 发送后清空本次附件（选择状态仍保留）
+      setAttachments([]);
+
+      // GAP-07: 对话结束后异步提交轨迹到进化引擎（后台静默，不阻塞UI）
+      if (selectedConversation?.id && data.assistant_message) {
+        const recentMsgs = [
+          ...(data.user_message ? [{ role: 'user', content: data.user_message.content, tokens: data.user_message.token_used || 0 }] : []),
+          { role: 'assistant', content: data.assistant_message.content, tokens: data.assistant_message.token_used || 0 },
+        ];
+        evolutionAPI.submitTrajectory({
+          conversation_id: selectedConversation.id,
+          messages: recentMsgs,
+        }).catch(() => {});
+      }
+    } catch (err: any) {
+      // Remove optimistic message on error
+      setMessages(prev => prev.filter(m => m.id !== tempUserMsg.id));
+      alert('发送失败: ' + (err.message || err.detail || '未知错误'));
+    } finally {
+      setSending(false);
+      inputRef.current?.focus();
+    }
+  };
+
+  // 文件上传：读取文本类文件内容作为附件上下文
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (!files.length) return;
+    const textExts = ['txt', 'md', 'markdown', 'csv', 'json', 'log', 'py', 'js', 'ts', 'tsx', 'jsx', 'html', 'css', 'xml', 'yaml', 'yml', 'sql', 'text'];
+    files.forEach(file => {
+      const ext = (file.name.split('.').pop() || '').toLowerCase();
+      const isText = textExts.includes(ext) || file.type.startsWith('text/');
+      if (isText && file.size <= 200 * 1024) {
+        const reader = new FileReader();
+        reader.onload = () => {
+          const content = String(reader.result || '');
+          setAttachments(prev => [...prev, { name: file.name, file_type: ext || 'txt', content }]);
+        };
+        reader.readAsText(file);
+      } else {
+        setAttachments(prev => [...prev, { name: file.name, file_type: ext || file.type || 'bin' }]);
+      }
+    });
+    e.target.value = '';
+  };
+
+  // 语音输入（浏览器 Web Speech API，支持中文）
+  const handleMicClick = () => {
+    const SR: any = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+    if (!SR) {
+      alert('当前浏览器不支持语音输入，请使用 Chrome / Edge 等浏览器。');
+      return;
+    }
+    if (recording) {
+      recognitionRef.current?.stop();
+      return;
+    }
+    const rec = new SR();
+    recognitionRef.current = rec;
+    rec.lang = 'zh-CN';
+    rec.interimResults = true;
+    rec.continuous = false;
+    rec.onresult = (ev: any) => {
+      let text = '';
+      for (let i = 0; i < ev.results.length; i++) text += ev.results[i][0].transcript;
+      setInputValue(prev => (prev ? prev + text : text));
+    };
+    rec.onend = () => { setRecording(false); recognitionRef.current = null; };
+    rec.onerror = () => { setRecording(false); recognitionRef.current = null; };
+    setRecording(true);
+    rec.start();
+  };
+
+  // 语音合成（朗读回复，浏览器 TTS）
+  const speakText = (text: string) => {
+    if (typeof window === 'undefined' || !('speechSynthesis' in window)) {
+      alert('当前浏览器不支持朗读。');
+      return;
+    }
+    const synth = window.speechSynthesis;
+    synth.cancel();
+    const plain = text
+      .replace(/```[\s\S]*?```/g, ' ')
+      .replace(/[#>*`_~\-]+/g, ' ')
+      .replace(/\!\[[^\]]*\]\([^)]*\)/g, ' ')
+      .replace(/\[[^\]]*\]\([^)]*\)/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+    const u = new SpeechSynthesisUtterance(plain);
+    u.lang = 'zh-CN';
+    u.rate = 1;
+    synth.speak(u);
+  };
+
+  const handleSend = () => {
+    const content = inputValue.trim();
+    if (!content || sending) return;
+    setInputValue('');
+    sendText(content);
+  };
+
+  // Handle key down
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className="chat-page">
+      {/* Left Sidebar - Conversation List */}
+      <aside className="chat-sidebar">
+        <div className="chat-sidebar-header">
+          <button className="new-chat-btn" onClick={handleNewConversation}>
+            <IconPlus />
+            <span>新建对话</span>
+          </button>
+        </div>
+
+        <div className="chat-sidebar-search">
+          <span className="search-icon-wrap">
+            <IconSearch />
+          </span>
+          <input
+            type="text"
+            className="search-input"
+            placeholder="搜索对话..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+
+        <div className="chat-sidebar-list">
+          {loadingConversations ? (
+            <div className="conv-empty">加载中...</div>
+          ) : (
+            filteredConversations.map(conv => (
+              <div
+                key={conv.id}
+                className={`conversation-item ${conv.id === selectedConversation?.id ? 'active' : ''} ${conv.pinned ? 'pinned' : ''}`}
+                onClick={() => navigate(`/chat/${conv.id}`)}
+              >
+                <div className="conv-top">
+                  {conv.pinned && <span className="conv-pin-icon"><IconPin /></span>}
+                  <span className="conv-title truncate">{conv.title}</span>
+                  <Dropdown
+                    trigger={<span className="conv-more-btn"><IconMore /></span>}
+                    align="right"
+                  >
+                    <button className="dropdown-item" onClick={(e) => handlePin(conv.id, e)}>
+                      <IconPin /> {conv.pinned ? '取消置顶' : '置顶'}
+                    </button>
+                    <button className="dropdown-item" onClick={(e) => handleKnowledgeGraph(conv.id, e)}>
+                      <IconGraph /> 转知识图谱{conv.knowledgeGraphCount ? ` (${conv.knowledgeGraphCount})` : ''}
+                    </button>
+                    <div className="dropdown-divider" />
+                    <button className="dropdown-item" onClick={(e) => handleRename(conv.id, e)}>
+                      <IconEdit /> 重命名
+                    </button>
+                    <button className="dropdown-item" onClick={(e) => handleArchive(conv.id, e)}>
+                      <IconArchive /> {conv.status === 'archived' ? '取消归档' : '归档'}
+                    </button>
+                    <div className="dropdown-divider" />
+                    <button className="dropdown-item danger" onClick={(e) => handleDelete(conv.id, e)}>
+                      <IconTrash /> 删除
+                    </button>
+                  </Dropdown>
+                </div>
+                <div className="conv-preview truncate">
+                  {conv.lastMessage || '暂无消息'}
+                </div>
+                <div className="conv-meta">
+                  <span className="conv-time">{formatTime(conv.updatedAt)}</span>
+                  {conv.status === 'archived' && <span className="conv-badge">已归档</span>}
+                </div>
+              </div>
+            ))
+          )}
+
+          {!loadingConversations && filteredConversations.length === 0 && (
+            <div className="conv-empty">
+              {searchQuery ? '未找到匹配的对话' : '暂无对话'}
+            </div>
+          )}
+        </div>
+      </aside>
+
+      {/* Right Main Chat Area */}
+      <div className="chat-main">
+        {selectedConversation ? (
+          <>
+            {/* Chat Header */}
+            <div className="chat-header">
+              <div className="chat-header-left">
+                <Dropdown
+                  trigger={
+                    <div className="model-selector">
+                      <IconModel />
+                      <span className="model-name">{selectedModel.name}</span>
+                      <span className="model-badge">{(selectedModel.status === 'free' || selectedModel.price_per_million_tokens === 0) ? '免费' : '付费'}</span>
+                      <IconChevronDown />
+                    </div>
+                  }
+                >
+                  <button
+                    key="auto"
+                    className={`dropdown-item ${selectedModelId === 'auto' ? 'selected' : ''}`}
+                    onClick={() => setSelectedModelId('auto')}
+                  >
+                    <div className="model-dropdown-item">
+                      <span>🤖 Auto 自动</span>
+                      <span className="model-provider-tag">按能力智能匹配</span>
+                      <span className="model-cap-badge">智能</span>
+                    </div>
+                  </button>
+                  {chatModels.filter(m => m.is_enabled !== false).map(model => (
+                    <button
+                      key={model.id}
+                      className={`dropdown-item ${model.id === selectedModelId ? 'selected' : ''}`}
+                      onClick={() => setSelectedModelId(model.id)}
+                    >
+                      <div className="model-dropdown-item">
+                        <span>{model.name}</span>
+                        <span className="model-provider-tag">{model.provider_name || model.providerName || ''}</span>
+                        {(() => {
+                          const caps = model.capabilities || [];
+                          const label = caps.includes('image') && caps.includes('video') ? '图像/视频'
+                            : caps.includes('image') ? '图像'
+                            : caps.includes('video') ? '视频' : '';
+                          return label ? <span className="model-cap-badge">{label}</span> : null;
+                        })()}
+                      </div>
+                    </button>
+                  ))}
+                </Dropdown>
+                <span className="chat-header-divider" />
+                <span className="chat-title">{selectedConversation.title}</span>
+              </div>
+            </div>
+
+            {/* Messages Area */}
+            <div className="chat-messages">
+              {loadingMessages ? (
+                <div className="chat-empty-state">
+                  <IconEmpty />
+                  <p className="empty-desc">加载消息中...</p>
+                </div>
+              ) : messages.length === 0 ? (
+                <div className="chat-empty-state">
+                  <IconEmpty />
+                  <p className="empty-title">开始一段新对话</p>
+                  <p className="empty-desc">
+                    向 {selectedModel.name} 发送消息，开始对话
+                  </p>
+                </div>
+              ) : (
+              messages.map(msg => {
+                // Real used_skills from API response
+                const usedSkills: string[] = (msg.role === 'assistant' && msg.used_skills) ? msg.used_skills : [];
+                const usedMcp: string[] = (msg.role === 'assistant' && msg.used_mcp) ? msg.used_mcp : [];
+                // 模糊创作意图确认卡片
+                const clarify = msg.role === 'assistant' ? parseClarify(msg.content) : null;
+                return (
+                <div key={msg.id} className={`message-row ${msg.role}`}>
+                  <div className={`message-bubble ${msg.role}`}>
+                    {clarify ? (
+                      <ClarifyCard
+                        data={clarify}
+                        onChoose={(opt: any) => sendText(`${opt.medium}：${clarify.prompt}`)}
+                      />
+                    ) : msg.role === 'assistant' ? (
+                      <MarkdownContent content={msg.content} />
+                    ) : (
+                      <span>{msg.content}</span>
+                    )}
+                  </div>
+                  {!clarify && msg.role === 'assistant' && msg.content && (
+                    <button
+                      className="msg-tts-btn"
+                      title="朗读回复"
+                      onClick={() => speakText(msg.content)}
+                    >
+                      <IconVolume />
+                    </button>
+                  )}
+                    {/* Skill usage tags */}
+                    {msg.role === 'assistant' && usedSkills.length > 0 && (
+                      <div className="evo-skill-tags-row">
+                        {usedSkills.slice(0, 3).map(skillName => (
+                          <span
+                            key={skillName}
+                            className="evo-skill-tag"
+                            onClick={() => { window.location.href = '/evolution?skill=' + encodeURIComponent(skillName); }}
+                            title={`使用了专属技能：${skillName}`}
+                          >
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
+                            </svg>
+                            {skillName}
+                          </span>
+                        ))}
+                        {usedSkills.length > 3 && (
+                          <span className="evo-skill-tag evo-skill-tag-more">+{usedSkills.length - 3}</span>
+                        )}
+                      </div>
+                    )}
+                    {msg.role === 'assistant' && usedMcp.length > 0 && (
+                      <div className="evo-skill-tags-row">
+                        {usedMcp.slice(0, 3).map(mcpName => (
+                          <span
+                            key={mcpName}
+                            className="evo-skill-tag evo-mcp-tag"
+                            title={`使用了 MCP 应用：${mcpName}`}
+                          >
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                              <line x1="9" y1="9" x2="15" y2="15"/>
+                              <line x1="15" y1="9" x2="9" y2="15"/>
+                            </svg>
+                            {mcpName}
+                          </span>
+                        ))}
+                        {usedMcp.length > 3 && (
+                          <span className="evo-skill-tag evo-skill-tag-more">+{usedMcp.length - 3}</span>
+                        )}
+                      </div>
+                    )}
+                    <div className={`message-meta ${msg.role}`}>
+                      <span className="message-time">{formatTime(msg.createdAt)}</span>
+                      <span className="message-tokens">{msg.tokenUsed} tokens</span>
+                    </div>
+                  </div>
+                  );
+                })
+              )}
+              {sending && (
+                <div className="message-row assistant">
+                  <div className="message-bubble assistant" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <IconSpinner />
+                    <span>思考中...</span>
+                  </div>
+                </div>
+              )}
+              <div ref={messagesEndRef} />
+            </div>
+
+            {/* Input Area */}
+            <div className="chat-input-area">
+              <div className="chat-input-container">
+                <div className="input-attachments">
+                  <Dropdown
+                    dropup
+                    closeOnClick={false}
+                    trigger={
+                      <button className="attach-btn" title="知识库">
+                        <IconKnowledge />
+                        <span>{selectedKbIds.length > 0 ? `知识库 (${selectedKbIds.length})` : '知识库'}</span>
+                      </button>
+                    }
+                  >
+                    <div className="attach-dropdown-title">选择知识库（多选）</div>
+                    {knowledgeBases.map((kb: any) => (
+                      <button key={kb.id} className={`dropdown-item ${selectedKbIds.includes(kb.id) ? 'selected' : ''}`}
+                        onClick={() => { setSelectedKbIds(prev => prev.includes(kb.id) ? prev.filter(id => id !== kb.id) : [...prev, kb.id]); }}>
+                        <IconKnowledge />
+                        <span>{kb.name}</span>
+                        <span className="attach-count">{kb.documentCount ?? kb.document_count ?? 0} 文档</span>
+                        {selectedKbIds.includes(kb.id) && <span style={{marginLeft:'auto',color:'var(--color-accent)'}}>✓</span>}
+                      </button>
+                    ))}
+                    {knowledgeBases.length > 0 && selectedKbIds.length > 0 && (
+                      <div className="dropdown-divider" />
+                    )}
+                    {selectedKbIds.length > 0 && (
+                      <button className="dropdown-item" style={{color:'var(--color-text-tertiary)'}} onClick={() => setSelectedKbIds([])}>
+                        清除选择 ({selectedKbIds.length})
+                      </button>
+                    )}
+                    {knowledgeBases.length === 0 && (
+                      <div className="dropdown-item disabled">暂无可用知识库</div>
+                    )}
+                  </Dropdown>
+
+                  <Dropdown
+                    dropup
+                    closeOnClick={false}
+                    trigger={
+                      <button className="attach-btn" title="Agent">
+                        <IconAgent />
+                        <span>{selectedAgentIds.length > 0 ? `Agent (${selectedAgentIds.length})` : 'Agent'}</span>
+                      </button>
+                    }
+                  >
+                    <div className="attach-dropdown-title">选择 Agent（多选）</div>
+                    {agents.map((agent: any) => (
+                      <button key={agent.id} className={`dropdown-item ${selectedAgentIds.includes(agent.id) ? 'selected' : ''}`}
+                        onClick={() => { setSelectedAgentIds(prev => prev.includes(agent.id) ? prev.filter(id => id !== agent.id) : [...prev, agent.id]); }}>
+                        <IconAgent />
+                        <span>{agent.name}</span>
+                        {selectedAgentIds.includes(agent.id) && <span style={{marginLeft:'auto',color:'var(--color-accent)'}}>✓</span>}
+                      </button>
+                    ))}
+                    {agents.length > 0 && selectedAgentIds.length > 0 && (
+                      <div className="dropdown-divider" />
+                    )}
+                    {selectedAgentIds.length > 0 && (
+                      <button className="dropdown-item" style={{color:'var(--color-text-tertiary)'}} onClick={() => setSelectedAgentIds([])}>
+                        清除选择 ({selectedAgentIds.length})
+                      </button>
+                    )}
+                    {agents.length === 0 && (
+                      <div className="dropdown-item disabled">暂无可用 Agent</div>
+                    )}
+                  </Dropdown>
+
+                  <Dropdown
+                    dropup
+                    closeOnClick={false}
+                    trigger={
+                      <button className="attach-btn" title="技能">
+                        <IconSkill />
+                        <span>{selectedSkillIds.length > 0 ? `技能 (${selectedSkillIds.length})` : '技能'}</span>
+                      </button>
+                    }
+                  >
+                    <div className="attach-dropdown-title">选择技能（多选）</div>
+                    {skills.map((skill: any) => (
+                      <button key={skill.id} className={`dropdown-item ${selectedSkillIds.includes(skill.id) ? 'selected' : ''}`}
+                        onClick={() => { setSelectedSkillIds(prev => prev.includes(skill.id) ? prev.filter(id => id !== skill.id) : [...prev, skill.id]); }}>
+                        <IconSkill />
+                        <span>{skill.name}</span>
+                        {selectedSkillIds.includes(skill.id) && <span style={{marginLeft:'auto',color:'var(--color-accent)'}}>✓</span>}
+                      </button>
+                    ))}
+                    {skills.length > 0 && selectedSkillIds.length > 0 && (
+                      <div className="dropdown-divider" />
+                    )}
+                    {selectedSkillIds.length > 0 && (
+                      <button className="dropdown-item" style={{color:'var(--color-text-tertiary)'}} onClick={() => setSelectedSkillIds([])}>
+                        清除选择 ({selectedSkillIds.length})
+                      </button>
+                    )}
+                    {skills.length === 0 && (
+                      <div className="dropdown-item disabled">暂无可用技能</div>
+                    )}
+                  </Dropdown>
+
+                  <Dropdown
+                    dropup
+                    closeOnClick={false}
+                    trigger={
+                      <button className="attach-btn" title="MCP 应用">
+                        <IconMcp />
+                        <span>{selectedMcpIds.length > 0 ? `MCP (${selectedMcpIds.length})` : 'MCP'}</span>
+                      </button>
+                    }
+                  >
+                    <div className="attach-dropdown-title">选择 MCP 应用（多选）</div>
+                    {mcps.map((mcp: any) => (
+                      <button key={mcp.id} className={`dropdown-item ${selectedMcpIds.includes(mcp.id) ? 'selected' : ''}`}
+                        onClick={() => { setSelectedMcpIds(prev => prev.includes(mcp.id) ? prev.filter(id => id !== mcp.id) : [...prev, mcp.id]); }}>
+                        <IconMcp />
+                        <span>{mcp.name}</span>
+                        {selectedMcpIds.includes(mcp.id) && <span style={{marginLeft:'auto',color:'var(--color-accent)'}}>✓</span>}
+                      </button>
+                    ))}
+                    {mcps.length > 0 && selectedMcpIds.length > 0 && (
+                      <div className="dropdown-divider" />
+                    )}
+                    {selectedMcpIds.length > 0 && (
+                      <button className="dropdown-item" style={{color:'var(--color-text-tertiary)'}} onClick={() => setSelectedMcpIds([])}>
+                        清除选择 ({selectedMcpIds.length})
+                      </button>
+                    )}
+                    {mcps.length === 0 && (
+                      <div className="dropdown-item disabled">暂无可用 MCP 应用</div>
+                    )}
+                  </Dropdown>
+
+                  <button className="attach-btn" title="上传文件" onClick={() => fileInputRef.current?.click()}>
+                    <IconPaperclip />
+                    <span>{attachments.length > 0 ? `文件 (${attachments.length})` : '文件'}</span>
+                  </button>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    multiple
+                    style={{ display: 'none' }}
+                    onChange={handleFileChange}
+                  />
+                </div>
+
+                {attachments.length > 0 && (
+                  <div className="attachment-chips">
+                    {attachments.map((att, idx) => (
+                      <span key={idx} className="attachment-chip">
+                        <IconPaperclip />
+                        <span className="attachment-name" title={att.name}>{att.name}</span>
+                        <button
+                          type="button"
+                          className="attachment-remove"
+                          onClick={() => setAttachments(prev => prev.filter((_, i) => i !== idx))}
+                          title="移除"
+                        >×</button>
+                      </span>
+                    ))}
+                  </div>
+                )}
+
+                <div className="input-row">
+                  <textarea
+                    ref={inputRef}
+                    className="chat-textarea"
+                    placeholder={`向 ${selectedModel.name} 发送消息...（可点击 🎤 语音输入）`}
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    rows={1}
+                    disabled={sending}
+                  />
+                  <button
+                    className={`mic-btn ${recording ? 'recording' : ''}`}
+                    onClick={handleMicClick}
+                    disabled={sending}
+                    title={recording ? '停止录音' : '语音输入'}
+                  >
+                    {recording ? <IconStop /> : <IconMic />}
+                  </button>
+                  <button
+                    className="send-btn"
+                    onClick={handleSend}
+                    disabled={!inputValue.trim() || sending}
+                    title="发送 (Enter)"
+                  >
+                    {sending ? <IconSpinner /> : <IconSend />}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="chat-empty-full">
+            <IconEmpty />
+            <p className="empty-title">选择或创建对话</p>
+            <p className="empty-desc">从左侧列表选择一个对话，或点击上方按钮创建新对话</p>
+          </div>
+        )}
+      </div>
+
+      {/* Knowledge Graph Conversion Progress Modal */}
+      {kgModalOpen && (
+        <div className="kg-overlay" onClick={() => !kgError && kgStep !== 2 && setKgModalOpen(false)}>
+          <div className="kg-modal" onClick={e => e.stopPropagation()}>
+            <div className="kg-modal-header">
+              <h3>转换知识图谱</h3>
+              <button className="kg-modal-close" onClick={() => setKgModalOpen(false)}>
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+              </button>
+            </div>
+            <div className="kg-modal-body">
+              {kgError ? (
+                <div className="kg-error-state">
+                  <div className="kg-error-icon">
+                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--color-error)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
+                    </svg>
+                  </div>
+                  <p className="kg-error-text">{kgError}</p>
+                  <button className="kg-btn kg-btn-secondary" onClick={() => { setKgModalOpen(false); setKgError(null); }}>
+                    关闭
+                  </button>
+                </div>
+              ) : kgStep === 3 && kgResult ? (
+                <div className="kg-success-state">
+                  <div className="kg-success-icon">
+                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--color-success)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
+                    </svg>
+                  </div>
+                  <p className="kg-success-title">知识图谱生成完成</p>
+                  <div className="kg-result-stats">
+                    <div className="kg-stat-item">
+                      <span className="kg-stat-value">{kgResult.nodes}</span>
+                      <span className="kg-stat-label">节点</span>
+                    </div>
+                    <div className="kg-stat-divider" />
+                    <div className="kg-stat-item">
+                      <span className="kg-stat-value">{kgResult.edges}</span>
+                      <span className="kg-stat-label">条边</span>
+                    </div>
+                  </div>
+                  <p className="kg-result-kb">已存入知识库：{kgResult.kbName}</p>
+                  <div className="kg-actions">
+                    <button className="kg-btn kg-btn-primary" onClick={() => { setKgModalOpen(false); navigate('/knowledge'); }}>
+                      前往知识库查看
+                    </button>
+                    <button className="kg-btn kg-btn-secondary" onClick={() => setKgModalOpen(false)}>
+                      关闭
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <div className="kg-progress-state">
+                  <div className="kg-steps">
+                    <div className={`kg-step ${kgStep >= 1 ? 'active' : ''} ${kgStep > 1 ? 'done' : ''}`}>
+                      <div className="kg-step-indicator">
+                        {kgStep > 1 ? (
+                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                            <polyline points="20 6 9 17 4 12"/>
+                          </svg>
+                        ) : kgStep === 1 ? (
+                          <div className="kg-spinner" />
+                        ) : (
+                          <span>1</span>
+                        )}
+                      </div>
+                      <span className="kg-step-label">提取对话内容</span>
+                    </div>
+                    <div className="kg-step-connector">
+                      <div className={`kg-connector-line ${kgStep > 1 ? 'done' : ''}`}>
+                        {kgStep === 2 && <div className="kg-connector-progress" />}
+                      </div>
+                    </div>
+                    <div className={`kg-step ${kgStep >= 2 ? 'active' : ''} ${kgStep > 2 ? 'done' : ''}`}>
+                      <div className="kg-step-indicator">
+                        {kgStep > 2 ? (
+                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                            <polyline points="20 6 9 17 4 12"/>
+                          </svg>
+                        ) : kgStep === 2 ? (
+                          <div className="kg-spinner" />
+                        ) : (
+                          <span>2</span>
+                        )}
+                      </div>
+                      <span className="kg-step-label">构建知识图谱</span>
+                    </div>
+                    <div className="kg-step-connector">
+                      <div className={`kg-connector-line ${kgStep > 2 ? 'done' : ''}`} />
+                    </div>
+                    <div className={`kg-step ${kgStep >= 3 ? 'active' : ''} ${kgStep > 3 ? 'done' : ''}`}>
+                      <div className="kg-step-indicator">
+                        <span>3</span>
+                      </div>
+                      <span className="kg-step-label">完成</span>
+                    </div>
+                  </div>
+                  <p className="kg-progress-tip">
+                    {kgStep === 1 ? '正在提取对话内容...' : kgStep === 2 ? '正在构建知识图谱...' : '处理完成'}
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ChatPage;