From d62848ee98edae959babe0deb38e3d5082ea48a3 Mon Sep 17 00:00:00 2001
From: qyyfw <qyyfw@qihuyun.com>
Date: Fri, 10 Jul 2026 15:47:03 +0800
Subject: [PATCH] feat(chat): support AGNES image/video models in AI chat -
 backend _generate_media (images/generations + async videos polling) and
 frontend MarkdownContent media rendering + model capability badges; nginx
 proxy_read_timeout raised to 600s for long media generation

---
 backend/python/app/api/chat.py        |  113 +-
 frontend/src/pages/front/ChatPage.css | 2170 ++++++++++++------------
 frontend/src/pages/front/ChatPage.tsx | 2215 +++++++++++++------------
 3 files changed, 2370 insertions(+), 2128 deletions(-)

diff --git a/backend/python/app/api/chat.py b/backend/python/app/api/chat.py
index 213746d..236217d 100644
--- a/backend/python/app/api/chat.py
+++ b/backend/python/app/api/chat.py
@@ -12,6 +12,7 @@ import uuid
 from datetime import datetime, timezone, timedelta
 import re
 import json
+import asyncio
 import math
 import httpx
 import os
@@ -40,6 +41,108 @@ def cst_now():
     return datetime.now(CST_TZ)
 
 
+def _html_escape(s: str) -> str:
+    return (str(s).replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
+            .replace('"', "&quot;").replace("'", "&#39;"))
+
+
+async def _generate_media(db, ai_model, prompt: str, user_id: str = None) -> str:
+    """图像/视频生成模型统一入口：按 capabilities 调用 AGNES 等媒体生成 API。
+    返回可直接在 AI 聊天中渲染的富文本(含 <img>/<video> 标签)。"""
+    provider = db.query(ModelProvider).filter(ModelProvider.id == ai_model.provider_id).first()
+    api_key = ai_model.api_key or (provider.api_key if provider else None)
+    if not api_key:
+        return "⚠️ 该媒体模型缺少 API Key，请在后台「大模型库」中配置。"
+
+    caps = [c.lower() for c in (ai_model.capabilities or [])]
+    headers = {"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"}
+    timeout = ai_model.timeout or 120
+
+    # ============ 图像生成 ============
+    if "image" in caps:
+        api_url = ai_model.endpoint
+        if not api_url:
+            api_url = f"{provider.api_base_url.rstrip('/')}/v1/images/generations" if provider else ""
+        if not api_url:
+            return "⚠️ 该图像模型未配置 Endpoint。"
+        payload = {
+            "model": ai_model.name,
+            "prompt": prompt,
+            "size": "1024x768",
+            "extra_body": {"response_format": "url"},
+        }
+        try:
+            async with httpx.AsyncClient(timeout=timeout) as client:
+                resp = await client.post(api_url, headers=headers, json=payload)
+            if resp.status_code != 200:
+                return f"⚠️ 图像生成失败 (HTTP {resp.status_code}): {resp.text[:200]}"
+            data = resp.json()
+            items = data.get("data") or []
+            if not items:
+                return f"⚠️ 图像生成失败：响应无图片数据 {str(data)[:200]}"
+            item = items[0]
+            url = item.get("url") or item.get("b64_json")
+            if not url:
+                return f"⚠️ 图像生成失败：未返回图片地址 {str(data)[:200]}"
+            if not url.startswith("http"):
+                url = f"data:image/png;base64,{url}"
+            return (f'<img class="md-img" src="{url}" alt="生成图片"/>\n\n'
+                    f'**提示词：** {_html_escape(prompt)}')
+        except Exception as e:
+            return f"⚠️ 图像生成异常：{str(e)[:200]}"
+
+    # ============ 视频生成 (异步任务 + 轮询) ============
+    if "video" in caps:
+        api_url = ai_model.endpoint
+        if not api_url:
+            api_url = f"{provider.api_base_url.rstrip('/')}/v1/videos" if provider else ""
+        if not api_url:
+            return "⚠️ 该视频模型未配置 Endpoint。"
+        base = api_url.split("/v1")[0] if "/v1" in api_url else api_url
+        payload = {
+            "model": ai_model.name,
+            "prompt": prompt,
+            "height": 768,
+            "width": 1152,
+            "num_frames": 121,
+            "frame_rate": 24,
+        }
+        try:
+            async with httpx.AsyncClient(timeout=timeout) as client:
+                resp = await client.post(api_url, headers=headers, json=payload)
+                if resp.status_code != 200:
+                    return f"⚠️ 视频生成失败 (HTTP {resp.status_code}): {resp.text[:200]}"
+                data = resp.json()
+                video_id = data.get("video_id") or data.get("task_id") or data.get("id")
+                if not video_id:
+                    return f"⚠️ 视频生成失败：未返回任务ID {str(data)[:200]}"
+                # 轮询结果(最多约 5 分钟)
+                result_url = None
+                err_msg = None
+                for _ in range(60):
+                    await asyncio.sleep(5)
+                    r2 = await client.get(f"{base}/agnesapi?video_id={video_id}", headers=headers)
+                    if r2.status_code != 200:
+                        continue
+                    rd = r2.json()
+                    st = rd.get("status")
+                    if st == "completed":
+                        result_url = rd.get("url")
+                        break
+                    if st == "failed":
+                        err_msg = rd.get("error")
+                        break
+                if result_url:
+                    return (f'<video class="md-video" controls src="{result_url}"></video>\n\n'
+                            f'**提示词：** {_html_escape(prompt)}')
+                return f"⚠️ 视频生成失败：{err_msg or '生成超时，请稍后在对话中重试'}"
+        except Exception as e:
+            return f"⚠️ 视频生成异常：{str(e)[:200]}"
+
+    return "⚠️ 未知的媒体模型类型。"
+
+
+
 # ============================================================
 # Request Models
 # ============================================================
@@ -881,7 +984,14 @@ async def send_message(
     if model_id:
         ai_model = db.query(AIModel).filter(AIModel.id == model_id).first()
 
-        if ai_model and ai_model.endpoint:
+        # ====== 图像/视频生成模型分支 ======
+        caps = [c.lower() for c in (ai_model.capabilities or [])] if ai_model else []
+        if ai_model and ("image" in caps or "video" in caps):
+            try:
+                ai_content = await _generate_media(db, ai_model, req.content, current_user.id)
+            except Exception as e:
+                ai_content = f"⚠️ 媒体生成失败：{str(e)[:200]}"
+        elif ai_model and ai_model.endpoint:
             provider = db.query(ModelProvider).filter(ModelProvider.id == ai_model.provider_id).first()
             api_key = ai_model.api_key or (provider.api_key if provider else None)
             api_url = ai_model.endpoint
@@ -1333,6 +1443,7 @@ def get_models(db: Session = Depends(get_db)):
             "display_name": getattr(m, "display_name", None) or m.name,
             "provider_id": m.provider_id,
             "provider_name": provider.name if provider else "",
+            "capabilities": m.capabilities or [],
             "status": m.status,
             "price_per_million_tokens": float(m.price_per_million_tokens or 0),
             "is_enabled": m.is_enabled,
diff --git a/frontend/src/pages/front/ChatPage.css b/frontend/src/pages/front/ChatPage.css
index 26210e9..00ff730 100644
--- a/frontend/src/pages/front/ChatPage.css
+++ b/frontend/src/pages/front/ChatPage.css
@@ -1,1047 +1,1123 @@
-/* ===== 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-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;
-}
+/* ===== 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: block;
+  line-height: 1.7;
+}
+
+.md-p { margin: 0 0 8px; }
+.md-p:last-child { margin-bottom: 0; }
+.md-blockquote {
+  border-left: 3px solid #6C63FF;
+  padding: 4px 12px;
+  margin: 8px 0;
+  background: rgba(0,0,0,0.04);
+  border-radius: 0 4px 4px 0;
+  color: #5A6480;
+}
+.md-link {
+  color: #6C63FF;
+  text-decoration: underline;
+}
+.md-table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 8px 0;
+  font-size: 13px;
+}
+.md-td {
+  border: 1px solid rgba(0,0,0,0.1);
+  padding: 6px 10px;
+  text-align: left;
+}
+.md-tr:first-child .md-td {
+  font-weight: 600;
+  background: rgba(0,0,0,0.03);
+}
+.md-ul {
+  margin: 4px 0 8px;
+  padding-left: 1.5em;
+}
+.md-ul .md-li {
+  margin: 2px 0;
+  list-style: disc;
+}
+
+.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-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;
+}
+
+/* 模型能力徽标（图像/视频） */
+.model-cap-badge {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-size: 11px;
+  line-height: 1;
+  padding: 3px 7px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #6C63FF 0%, #8B7CFF 100%);
+  color: #fff;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+}
+
+.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-img {
+  display: block;
+  max-width: 100%;
+  max-height: 420px;
+  width: auto;
+  height: auto;
+  border-radius: var(--radius-md);
+  margin: var(--space-sm) 0;
+  box-shadow: var(--shadow-md);
+  background: #fff;
+  object-fit: contain;
+}
+
+.md-video {
+  display: block;
+  max-width: 100%;
+  width: 100%;
+  max-height: 460px;
+  border-radius: var(--radius-md);
+  margin: var(--space-sm) 0;
+  box-shadow: var(--shadow-md);
+  background: #000;
+}
diff --git a/frontend/src/pages/front/ChatPage.tsx b/frontend/src/pages/front/ChatPage.tsx
index da45cf0..4c831c8 100644
--- a/frontend/src/pages/front/ChatPage.tsx
+++ b/frontend/src/pages/front/ChatPage.tsx
@@ -1,1080 +1,1135 @@
-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';
-
-// ===== Simple Markdown Renderer =====
-const MarkdownContent: React.FC<{ content: string }> = ({ content }) => {
-  const html = useMemo(() => {
-    let text = content;
-    // Code blocks (```)
-    text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_: string, lang: string, code: string) => {
-      return `<pre class="md-code-block"><code class="md-code">${escapeHtml(code.trim())}</code></pre>`;
-    });
-    // Inline code (`)
-    text = text.replace(/`([^`]+)`/g, '<code class="md-inline-code">$1</code>');
-    // Bold (**text**)
-    text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
-    // Italic (*text*)
-    text = text.replace(/\*(.+?)\*/g, '<em>$1</em>');
-    // Headers (## heading)
-    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>');
-    // Unordered list items
-    text = text.replace(/^- (.+)$/gm, '<li class="md-li">$1</li>');
-    // Ordered list items
-    text = text.replace(/^\d+\. (.+)$/gm, '<li class="md-li">$1</li>');
-    // Horizontal rule
-    text = text.replace(/^---$/gm, '<hr class="md-hr">');
-    // Paragraph spacing: double newlines
-    text = text.replace(/\n\n/g, '<br/><br/>');
-    // Single newlines to <br>
-    text = text.replace(/\n/g, '<br/>');
-    return text;
-  }, [content]);
-
-  return <div className="markdown-body" dangerouslySetInnerHTML={{ __html: html }} />;
-};
-
-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 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('');
-  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 [selectedAgentIds, setSelectedAgentIds] = useState<string[]>([]);
-  const [selectedSkillIds, setSelectedSkillIds] = useState<string[]>([]);
-  const [selectedKbIds, setSelectedKbIds] = useState<string[]>([]);
-  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(models[0].id);
-      }
-    }).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);
-      } catch (err) {
-        console.error('加载消息失败', err);
-        setMessages([]);
-      } finally {
-        setLoadingMessages(false);
-      }
-    };
-    loadMessages();
-  }, [id]);
-
-  // 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(() => {});
-  }, []);
-
-  // 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
-  const selectedModel = chatModels.find(m => m.id === selectedModelId) || chatModels[0] || { id: '', name: '选择模型', status: 'free', provider_name: '' };
-
-  // 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 });
-      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,
-        });
-        setConversations(prev =>
-          prev.map(c => c.id === convId ? { ...c, knowledgeGraphCount: (c.knowledgeGraphCount || 0) + 1 } : c)
-        );
-      } else {
-        setKgError(res.message || '转换失败');
-      }
-    } catch (err) {
-      setKgError((err as Error).message || '转换失败，请稍后重试');
-    }
-  };
-
-  // Handle send message - CALLS REAL API
-  const handleSend = async () => {
-    if (!inputValue.trim() || sending) return;
-    const content = inputValue.trim();
-    setInputValue('');
-    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,
-        use_tools: selectedSkillIds.length > 0 || selectedAgentIds.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 || [],
-          });
-        }
-        return [...filtered, ...newMsgs];
-      });
-
-      // Refresh conversations to update lastMessage
-      loadConversations();
-
-      // 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();
-    }
-  };
-
-  // 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>
-                  }
-                >
-                  {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>
-                      </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 : [];
-                  return (
-                  <div key={msg.id} className={`message-row ${msg.role}`}>
-                    <div className={`message-bubble ${msg.role}`}>
-                      {msg.role === 'assistant' ? (
-                        <MarkdownContent content={msg.content} />
-                      ) : (
-                        <span>{msg.content}</span>
-                      )}
-                    </div>
-                    {/* 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.hash = `#/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>
-                    )}
-                    <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>
-                </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="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';
+
+// ===== Enhanced Markdown Renderer =====
+const MarkdownContent: React.FC<{ content: string }> = ({ content }) => {
+  const html = 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>) to protect from other replacements
+    const mediaBlocks: string[] = [];
+    text = text.replace(/<(img|video)[^>]*\/?>/gi, (_m: string) => {
+      const idx = mediaBlocks.length;
+      mediaBlocks.push(_m);
+      return '\x00MEDIA' + idx + '\x00';
+    });
+
+    // 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(/\x00MEDIA(\d+)\x00/g, (_m: string, idx: string) => mediaBlocks[parseInt(idx)] || '');
+
+    // 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');
+
+    return text;
+  }, [content]);
+
+  return <div className="markdown-body" dangerouslySetInnerHTML={{ __html: html }} />;
+};
+
+
+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 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('');
+  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 [selectedAgentIds, setSelectedAgentIds] = useState<string[]>([]);
+  const [selectedSkillIds, setSelectedSkillIds] = useState<string[]>([]);
+  const [selectedKbIds, setSelectedKbIds] = useState<string[]>([]);
+  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(models[0].id);
+      }
+    }).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);
+      } catch (err) {
+        console.error('加载消息失败', err);
+        setMessages([]);
+      } finally {
+        setLoadingMessages(false);
+      }
+    };
+    loadMessages();
+  }, [id]);
+
+  // 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(() => {});
+  }, []);
+
+  // 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
+  const selectedModel = chatModels.find(m => m.id === selectedModelId) || chatModels[0] || { id: '', name: '选择模型', status: 'free', provider_name: '' };
+
+  // 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 });
+      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 handleSend = async () => {
+    if (!inputValue.trim() || sending) return;
+    const content = inputValue.trim();
+    setInputValue('');
+    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,
+        use_tools: selectedSkillIds.length > 0 || selectedAgentIds.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 || [],
+          });
+        }
+        return [...filtered, ...newMsgs];
+      });
+
+      // Refresh conversations to update lastMessage
+      loadConversations();
+
+      // 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();
+    }
+  };
+
+  // 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>
+                  }
+                >
+                  {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 : [];
+                  return (
+                  <div key={msg.id} className={`message-row ${msg.role}`}>
+                    <div className={`message-bubble ${msg.role}`}>
+                      {msg.role === 'assistant' ? (
+                        <MarkdownContent content={msg.content} />
+                      ) : (
+                        <span>{msg.content}</span>
+                      )}
+                    </div>
+                    {/* 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.hash = `#/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>
+                    )}
+                    <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>
+                </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="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;