From 90117b41fe13d13d381c9a08a94f3ee012a79e6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=B1=E6=BD=AE?= <zhuchaowe@users.noreply.github.com>
Date: Tue, 13 Jan 2026 14:22:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=AC=A6=E5=8F=B7=E9=93=BE?=
 =?UTF-8?q?=E6=8E=A5=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C=E5=92=8Cdeep=5Fag?=
 =?UTF-8?q?ent=E6=8F=90=E7=A4=BA=E8=AF=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 prompt/system_prompt_deep_agent.md |   37 +-
 public/index.html                  | 3355 +++++++++++++++++++++-------
 routes/skill_manager.py            |   11 +-
 utils/fastapi_utils.py             |    4 +
 4 files changed, 2631 insertions(+), 776 deletions(-)
diff --git a/prompt/system_prompt_deep_agent.md b/prompt/system_prompt_deep_agent.md
index 5b25bc9..09ae2ef 100644
--- a/prompt/system_prompt_deep_agent.md
+++ b/prompt/system_prompt_deep_agent.md
@@ -1,3 +1,5 @@
+{extra_prompt}
+
 <env>
 Working directory: {agent_dir_path}
 Current User: {user_identifier}
@@ -39,10 +41,37 @@ When using the write_todos tool:
 2. Only create todos for complex, multi-step tasks that truly need tracking
 3. Break down work into clear, actionable items without over-fragmenting
 4. For simple tasks (1-2 steps), just do them directly without creating todos
-5. When first creating a todo list for a task, ALWAYS ask the user if the plan looks good before starting work
-   - Create the todos, let them render, then ask: "Does this plan look good?" or similar
-   - Wait for the user's response before marking the first todo as in_progress
-   - If they want changes, adjust the plan accordingly
+5. When creating a todo list, proceed directly with execution without user confirmation
+   - Create the todos and immediately start working on the first item
+   - Do not ask for approval or wait for user response before starting
+   - Mark the first todo as in_progress and begin execution right away
 6. Update todo status promptly as you complete each item
 
 The todo list is a planning tool - use it judiciously to avoid overwhelming the user with excessive task tracking.
+
+### Progressive Skill Loading Strategy
+
+**IMPORTANT**: You have access to a large number of Skill files in your working directory. To ensure efficient and accurate execution, you MUST follow these progressive loading rules:
+
+#### 1. Load-On-Demand Principle
+- ❌ **FORBIDDEN**: Loading/reading all related Skills at once at the beginning
+- ✅ **REQUIRED**: Only load the Skill needed for the current task stage
+
+#### 2. Phased Loading Process
+
+Break down complex tasks into stages. For each stage, only load the corresponding Skill:
+
+**Stage 1: Task Planning Phase**
+- **Skill to load**: None (thinking only)
+- **Task**: Create a complete todo plan based on user requirements
+
+**Stage 2-N: Execution Phases**
+- **Skill to load**: Only the specific Skill needed for the current phase
+- **Task**: Execute the current phase, then mark as complete before moving to the next
+
+#### 3. Prohibited Behaviors
+
+1. ❌ **Loading all Skills at once** - Must use progressive, phased loading
+2. ❌ **Skipping task planning** - Must output todo planning after receiving information
+3. ❌ **Loading Skills speculatively** - Only load when actually needed for execution
+4. ❌ **Loading multiple Skills simultaneously** - Only load one Skill at a time for current phase
diff --git a/public/index.html b/public/index.html
index 7964a7f..1d65880 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,410 +3,663 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI聊天助手</title>
-    <!-- 引入 marked.js 用于 Markdown 解析 - 使用国内CDN -->
-    <script src="https://cdn.staticfile.net/marked/4.3.0/marked.min.js"></script>
-    <!-- 引入 highlight.js 用于代码高亮 - 使用国内CDN -->
+    <title>AI Chat Assistant</title>
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Highlight.js -->
     <link rel="stylesheet" href="https://cdn.staticfile.net/highlight.js/11.9.0/styles/github.min.css">
     <script src="https://cdn.staticfile.net/highlight.js/11.9.0/highlight.min.js"></script>
+    <!-- Marked.js -->
+    <script src="https://cdn.staticfile.net/marked/4.3.0/marked.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
+
     <style>
+        :root {
+            /* SaaS Color Palette */
+            --primary: #2563EB;
+            --primary-hover: #1D4ED8;
+            --secondary: #3B82F6;
+            --cta: #F97316;
+            --cta-hover: #EA580C;
+            --background: #F8FAFC;
+            --surface: #FFFFFF;
+            --text: #1E293B;
+            --text-muted: #64748B;
+            --border: #E2E8F0;
+            --success: #10B981;
+            --warning: #F59E0B;
+            --error: #EF4444;
+
+            /* Glass effect */
+            --glass-bg: rgba(255, 255, 255, 0.8);
+            --glass-border: rgba(226, 232, 240, 0.8);
+            --glass-blur: 12px;
+
+            /* Spacing */
+            --sidebar-width: 280px;
+            --header-height: 64px;
+        }
+
+        .dark {
+            --primary: #3B82F6;
+            --primary-hover: #60A5FA;
+            --secondary: #60A5FA;
+            --cta: #FB923C;
+            --cta-hover: #F97316;
+            --background: #0F172A;
+            --surface: #1E293B;
+            --text: #F1F5F9;
+            --text-muted: #94A3B8;
+            --border: #334155;
+            --glass-bg: rgba(30, 41, 59, 0.8);
+            --glass-border: rgba(51, 65, 85, 0.8);
+        }
+
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
-        
+
         body {
-            font-family: 'Arial', sans-serif;
-            background-color: #f5f5f5;
+            font-family: 'Open Sans', sans-serif;
+            background: var(--background);
+            color: var(--text);
             height: 100vh;
             display: flex;
-            flex-direction: column;
+            overflow: hidden;
+            transition: background-color 0.3s ease, color 0.3s ease;
         }
-        
-        .chat-container {
-            max-width: 900px;
-            margin: 0 auto;
-            height: 100%;
+
+        /* ===== Sidebar ===== */
+        .sidebar {
+            width: var(--sidebar-width);
+            background: var(--surface);
+            border-right: 1px solid var(--border);
             display: flex;
             flex-direction: column;
-            background-color: white;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, background-color 0.3s ease;
+            z-index: 20;
         }
-        
-        .chat-header {
-            background-color: #4a6cf7;
-            color: white;
-            padding: 15px 20px;
+
+        .sidebar.collapsed {
+            transform: translateX(-100%);
+        }
+
+        .sidebar-header {
+            padding: 16px;
+            border-bottom: 1px solid var(--border);
             display: flex;
             align-items: center;
-            border-bottom: 1px solid #e0e0e0;
+            justify-content: space-between;
         }
-        
-        .chat-title {
+
+        .sidebar-header h1 {
+            font-family: 'Poppins', sans-serif;
             font-size: 18px;
-            font-weight: bold;
+            font-weight: 600;
+            color: var(--primary);
         }
-        
-        .chat-status {
-            margin-left: 10px;
+
+        .new-chat-btn {
+            width: calc(100% - 32px);
+            margin: 16px 16px;
+            padding: 12px 16px;
+            background: var(--primary);
+            color: white;
+            border: none;
+            border-radius: 10px;
+            font-family: 'Poppins', sans-serif;
             font-size: 14px;
-            opacity: 0.8;
-        }
-        
-        .status-indicator {
-            display: inline-block;
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background-color: #4ade80;
-            margin-right: 5px;
-        }
-        
-        .status-indicator.disconnected {
-            background-color: #f87171;
-        }
-        
-        .status-indicator.connecting {
-            background-color: #fbbf24;
-        }
-        
-        .chat-messages {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            gap: 15px;
-        }
-        
-        .message {
-            display: flex;
-            gap: 10px;
-            max-width: 80%;
-        }
-        
-        .message.user {
-            align-self: flex-end;
-            flex-direction: row-reverse;
-        }
-        
-        .message.assistant {
-            align-self: flex-start;
-        }
-        
-        .message-avatar {
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
+            font-weight: 500;
+            cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 16px;
+            gap: 8px;
+            transition: background-color 0.2s ease;
+        }
+
+        .new-chat-btn:hover {
+            background: var(--primary-hover);
+        }
+
+        .chat-history {
+            flex: 1;
+            overflow-y: auto;
+            padding: 0 12px;
+        }
+
+        .chat-history-section {
+            margin-bottom: 16px;
+        }
+
+        .chat-history-title {
+            font-size: 11px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--text-muted);
+            padding: 8px 12px;
+        }
+
+        .chat-history-item {
+            padding: 10px 12px;
+            border-radius: 8px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            transition: background-color 0.15s ease;
+            margin-bottom: 2px;
+        }
+
+        .chat-history-item:hover {
+            background: var(--background);
+        }
+
+        .chat-history-item.active {
+            background: rgba(37, 99, 235, 0.1);
+        }
+
+        .dark .chat-history-item.active {
+            background: rgba(59, 130, 246, 0.2);
+        }
+
+        .chat-history-item-icon {
+            width: 32px;
+            height: 32px;
+            border-radius: 8px;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 14px;
             flex-shrink: 0;
         }
-        
-        .message.user .message-avatar {
-            background-color: #4a6cf7;
+
+        .chat-history-item-content {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .chat-history-item-title {
+            font-size: 13px;
+            font-weight: 500;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .chat-history-item-preview {
+            font-size: 12px;
+            color: var(--text-muted);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .chat-history-item-delete {
+            width: 24px;
+            height: 24px;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-muted);
+            opacity: 0;
+            transition: all 0.15s ease;
+        }
+
+        .chat-history-item:hover .chat-history-item-delete {
+            opacity: 1;
+        }
+
+        .chat-history-item-delete:hover {
+            background: rgba(239, 68, 68, 0.1);
+            color: var(--error);
+        }
+
+        .sidebar-footer {
+            padding: 12px;
+            border-top: 1px solid var(--border);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .sidebar-footer-btn {
+            flex: 1;
+            padding: 10px 12px;
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            background: transparent;
+            color: var(--text);
+            font-size: 13px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+            transition: all 0.15s ease;
+        }
+
+        .sidebar-footer-btn:hover {
+            background: var(--background);
+            border-color: var(--primary);
+        }
+
+        /* ===== Main Content ===== */
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+        }
+
+        /* ===== Header ===== */
+        .header {
+            height: var(--header-height);
+            background: var(--glass-bg);
+            backdrop-filter: blur(var(--glass-blur));
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 20px;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+
+        .header-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+
+        .sidebar-toggle {
+            width: 36px;
+            height: 36px;
+            border-radius: 8px;
+            border: none;
+            background: transparent;
+            color: var(--text);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background-color 0.15s ease;
+        }
+
+        .sidebar-toggle:hover {
+            background: var(--background);
+        }
+
+        .header-title {
+            font-family: 'Poppins', sans-serif;
+            font-size: 16px;
+            font-weight: 600;
+        }
+
+        .header-center {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .status-badge {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 12px;
+            background: var(--background);
+            border-radius: 20px;
+            font-size: 12px;
+        }
+
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--success);
+        }
+
+        .status-dot.connecting {
+            background: var(--warning);
+        }
+
+        .status-dot.error {
+            background: var(--error);
+        }
+
+        .header-right {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .header-btn {
+            width: 36px;
+            height: 36px;
+            border-radius: 8px;
+            border: none;
+            background: transparent;
+            color: var(--text);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.15s ease;
+        }
+
+        .header-btn:hover {
+            background: var(--background);
+        }
+
+        .header-btn.primary {
+            background: var(--primary);
             color: white;
         }
-        
+
+        .header-btn.primary:hover {
+            background: var(--primary-hover);
+        }
+
+        /* ===== Chat Messages ===== */
+        .chat-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 24px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .welcome-screen {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            padding: 40px;
+        }
+
+        .welcome-logo {
+            width: 80px;
+            height: 80px;
+            border-radius: 20px;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 24px;
+        }
+
+        .welcome-logo svg {
+            width: 40px;
+            height: 40px;
+            color: white;
+        }
+
+        .welcome-title {
+            font-family: 'Poppins', sans-serif;
+            font-size: 28px;
+            font-weight: 600;
+            margin-bottom: 12px;
+        }
+
+        .welcome-subtitle {
+            font-size: 15px;
+            color: var(--text-muted);
+            max-width: 400px;
+            margin-bottom: 32px;
+        }
+
+        .suggestion-chips {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            justify-content: center;
+            max-width: 600px;
+        }
+
+        .suggestion-chip {
+            padding: 10px 16px;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            font-size: 13px;
+            cursor: pointer;
+            transition: all 0.15s ease;
+        }
+
+        .suggestion-chip:hover {
+            border-color: var(--primary);
+            color: var(--primary);
+        }
+
+        /* ===== Messages ===== */
+        .message {
+            display: flex;
+            gap: 12px;
+            max-width: 800px;
+            margin: 0 auto;
+            width: 100%;
+        }
+
+        .message.user {
+            flex-direction: row-reverse;
+        }
+
+        .message-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+
         .message.assistant .message-avatar {
-            background-color: #f1f5f9;
-            color: #4a5568;
-        }
-        
-        .message-content {
-            padding: 12px 16px;
-            border-radius: 18px;
-            max-width: 100%;
-            word-wrap: break-word;
-        }
-        
-        .message.user .message-content {
-            background-color: #4a6cf7;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
             color: white;
-            border-bottom-right-radius: 6px;
         }
-        
-        .message.assistant .message-content {
-            background-color: #f1f5f9;
-            color: #1a202c;
-            border-bottom-left-radius: 6px;
+
+        .message.user .message-avatar {
+            background: var(--surface);
+            border: 1px solid var(--border);
         }
-        
-        /* Markdown 样式 */
+
         .message-content {
+            padding: 14px 18px;
+            border-radius: 16px;
+            max-width: calc(100% - 48px);
             line-height: 1.6;
+            font-size: 14px;
         }
-        
+
+        .message.assistant .message-content {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-bottom-left-radius: 4px;
+        }
+
+        .message.user .message-content {
+            background: var(--primary);
+            color: white;
+            border-bottom-right-radius: 4px;
+        }
+
+        /* ===== Markdown Styles ===== */
         .message-content h1,
         .message-content h2,
         .message-content h3,
         .message-content h4,
         .message-content h5,
         .message-content h6 {
-            margin: 16px 0 8px 0;
-            font-weight: bold;
-            color: #1a202c;
+            font-family: 'Poppins', sans-serif;
+            font-weight: 600;
+            margin: 16px 0 8px;
         }
-        
-        .message-content h1 { font-size: 1.5em; }
-        .message-content h2 { font-size: 1.4em; }
-        .message-content h3 { font-size: 1.3em; }
-        .message-content h4 { font-size: 1.2em; }
-        .message-content h5 { font-size: 1.1em; }
-        .message-content h6 { font-size: 1em; }
-        
+
+        .message-content h1 { font-size: 1.4em; }
+        .message-content h2 { font-size: 1.3em; }
+        .message-content h3 { font-size: 1.2em; }
+
         .message-content p {
             margin: 8px 0;
         }
-        
+
+        .message-content code {
+            background: rgba(0, 0, 0, 0.05);
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'Monaco', 'Consolas', monospace;
+            font-size: 0.9em;
+        }
+
+        .dark .message-content code {
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        .message.user .message-content code {
+            background: rgba(255, 255, 255, 0.15);
+        }
+
+        .message-content pre {
+            background: var(--background);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 14px;
+            overflow-x: auto;
+            margin: 12px 0;
+        }
+
+        .message-content pre code {
+            background: transparent;
+            padding: 0;
+        }
+
         .message-content ul,
         .message-content ol {
             margin: 8px 0;
-            padding-left: 20px;
+            padding-left: 24px;
         }
-        
+
         .message-content li {
             margin: 4px 0;
         }
-        
+
         .message-content blockquote {
-            margin: 8px 0;
-            padding: 8px 12px;
-            border-left: 4px solid #4a6cf7;
-            background-color: #f8fafc;
+            border-left: 3px solid var(--primary);
+            padding-left: 14px;
+            margin: 12px 0;
+            color: var(--text-muted);
             font-style: italic;
         }
-        
-        .message-content code {
-            background-color: #f1f5f9;
-            padding: 2px 4px;
-            border-radius: 3px;
-            font-family: 'Courier New', monospace;
-            font-size: 0.9em;
-        }
-        
-        .message-content pre {
-            background-color: #f8fafc;
-            border: 1px solid #e2e8f0;
-            border-radius: 6px;
-            padding: 12px;
-            overflow-x: auto;
-            margin: 8px 0;
-        }
-        
-        .message-content pre code {
-            background-color: transparent;
-            padding: 0;
-            border-radius: 0;
-            font-size: 0.9em;
-        }
-        
-        .message-content table {
-            border-collapse: collapse;
-            width: 100%;
-            margin: 8px 0;
-        }
-        
-        .message-content th,
-        .message-content td {
-            border: 1px solid #e2e8f0;
-            padding: 8px 12px;
-            text-align: left;
-        }
-        
-        .message-content th {
-            background-color: #f8fafc;
-            font-weight: bold;
-        }
-        
+
         .message-content a {
-            color: #4a6cf7;
-            text-decoration: none;
+            color: var(--primary);
         }
-        
-        .message-content a:hover {
-            text-decoration: underline;
-        }
-        
-        .message-content strong {
-            font-weight: bold;
-        }
-        
-        .message-content em {
-            font-style: italic;
-        }
-        
-        .message-content hr {
-            border: none;
-            border-top: 1px solid #e2e8f0;
-            margin: 16px 0;
-        }
-        
-        /* 代码高亮样式 */
-        .hljs {
-            background-color: #f8fafc !important;
-            color: #1a202c;
-        }
-        
-        /* 用户消息的Markdown样式调整 */
-        .message.user .message-content h1,
-        .message.user .message-content h2,
-        .message.user .message-content h3,
-        .message.user .message-content h4,
-        .message.user .message-content h5,
-        .message.user .message-content h6 {
-            color: white;
-        }
-        
-        .message.user .message-content blockquote {
-            background-color: rgba(255, 255, 255, 0.1);
-            border-left-color: rgba(255, 255, 255, 0.5);
-        }
-        
-        .message.user .message-content code {
-            background-color: rgba(255, 255, 255, 0.1);
-        }
-        
-        .message.user .message-content pre {
-            background-color: rgba(255, 255, 255, 0.1);
-            border-color: rgba(255, 255, 255, 0.2);
-        }
-        
-        .message.user .message-content th {
-            background-color: rgba(255, 255, 255, 0.1);
-        }
-        
-        .message.user .message-content td,
-        .message.user .message-content th {
-            border-color: rgba(255, 255, 255, 0.2);
-        }
-        
+
         .message.user .message-content a {
-            color: #bee3f8;
+            color: rgba(255, 255, 255, 0.9);
         }
-        
-        /* 工具调用和响应的样式 */
+
+        /* ===== Tool Sections ===== */
         .tool-section {
             margin: 12px 0;
-            border: 1px solid #e2e8f0;
-            border-radius: 6px;
+            border: 1px solid var(--border);
+            border-radius: 10px;
             overflow: hidden;
+            background: var(--background);
         }
-        
+
         .tool-header {
-            background-color: #f8fafc;
-            padding: 8px 12px;
+            padding: 10px 14px;
             cursor: pointer;
             display: flex;
             align-items: center;
             gap: 8px;
-            font-weight: bold;
-            border-bottom: 1px solid #e2e8f0;
-            transition: background-color 0.2s;
+            font-size: 13px;
+            font-weight: 500;
+            transition: background-color 0.15s ease;
         }
-        
+
         .tool-header:hover {
-            background-color: #f1f5f9;
+            background: var(--border);
         }
-        
+
         .tool-header .tool-icon {
-            transition: transform 0.2s;
+            transition: transform 0.2s ease;
         }
-        
+
         .tool-header.collapsed .tool-icon {
             transform: rotate(-90deg);
         }
-        
+
         .tool-call .tool-header {
-            background-color: #eff6ff;
-            color: #1e40af;
+            background: rgba(37, 99, 235, 0.08);
+            color: var(--primary);
         }
-        
+
         .tool-response .tool-header {
-            background-color: #f0fdf4;
-            color: #166534;
+            background: rgba(16, 185, 129, 0.08);
+            color: var(--success);
         }
-        
+
         .tool-content {
-            padding: 12px;
-            font-family: 'Courier New', monospace;
-            font-size: 0.9em;
-            background-color: #f8fafc;
+            padding: 14px;
+            font-family: 'Monaco', 'Consolas', monospace;
+            font-size: 12px;
             max-height: 300px;
             overflow-y: auto;
             white-space: pre-wrap;
+            background: var(--surface);
+            border-top: 1px solid var(--border);
         }
-        
+
         .tool-content.collapsed {
             display: none;
         }
-        
-        .tool-content pre {
-            margin: 0;
-            padding: 0;
-            background: none;
-            border: none;
-        }
-        
-        .tool-name {
-            font-weight: bold;
-            color: #4a6cf7;
-        }
-        
-        /* 用户消息中的工具样式调整 */
-        .message.user .tool-header {
-            background-color: rgba(255, 255, 255, 0.1);
-            color: rgba(255, 255, 255, 0.9);
-        }
-        
-        .message.user .tool-call .tool-header {
-            background-color: rgba(59, 130, 246, 0.2);
-        }
-        
-        .message.user .tool-response .tool-header {
-            background-color: rgba(34, 197, 94, 0.2);
-        }
-        
-        .message.user .tool-content {
-            background-color: rgba(255, 255, 255, 0.05);
-        }
-        
+
+        /* ===== Typing Indicator ===== */
         .typing-indicator {
             display: flex;
             align-items: center;
-            gap: 4px;
-            padding: 12px 16px;
-            background-color: #f1f5f9;
-            border-radius: 18px;
-            border-bottom-left-radius: 6px;
-            color: #64748b;
-            font-style: italic;
+            gap: 6px;
+            padding: 14px 18px;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            border-bottom-left-radius: 4px;
+            font-size: 13px;
+            color: var(--text-muted);
         }
-        
+
         .typing-dots {
             display: flex;
             gap: 4px;
         }
-        
+
         .typing-dot {
-            width: 8px;
-            height: 8px;
+            width: 6px;
+            height: 6px;
             border-radius: 50%;
-            background-color: #94a3b8;
+            background: var(--text-muted);
             animation: typing 1.4s infinite ease-in-out;
         }
-        
-        .typing-dot:nth-child(1) {
-            animation-delay: -0.32s;
-        }
-        
-        .typing-dot:nth-child(2) {
-            animation-delay: -0.16s;
-        }
-        
+
+        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
+        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
+
         @keyframes typing {
             0%, 80%, 100% {
                 transform: scale(0.8);
@@ -417,324 +670,1549 @@
                 opacity: 1;
             }
         }
-        
-        .chat-input-container {
-            padding: 20px;
-            border-top: 1px solid #e0e0e0;
-            background-color: #fafafa;
+
+        /* ===== Input Area ===== */
+        .input-container {
+            padding: 16px 24px 24px;
+            background: var(--glass-bg);
+            backdrop-filter: blur(var(--glass-blur));
+            border-top: 1px solid var(--border);
         }
-        
-        .chat-input-form {
+
+        .input-wrapper {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .input-box {
             display: flex;
-            gap: 10px;
+            align-items: flex-end;
+            gap: 12px;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 14px;
+            padding: 8px 14px;
+            transition: border-color 0.15s ease, box-shadow 0.15s ease;
         }
-        
+
+        .input-box:focus-within {
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+        }
+
+        .dark .input-box:focus-within {
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+        }
+
         .chat-input {
             flex: 1;
-            padding: 12px 16px;
-            border: 1px solid #d1d5db;
-            border-radius: 24px;
-            font-size: 16px;
+            border: none;
+            background: transparent;
             outline: none;
-            transition: border-color 0.2s;
-        }
-        
-        .chat-input:focus {
-            border-color: #4a6cf7;
-        }
-        
-        .chat-send-button {
-            padding: 12px 24px;
-            background-color: #4a6cf7;
-            color: white;
-            border: none;
-            border-radius: 24px;
-            font-size: 16px;
-            cursor: pointer;
-            transition: background-color 0.2s;
-        }
-        
-        .chat-send-button:hover {
-            background-color: #3b5bdb;
-        }
-        
-        .chat-send-button:disabled {
-            background-color: #94a3b8;
-            cursor: not-allowed;
-        }
-        
-        .settings-panel {
-            padding: 15px 20px;
-            border-bottom: 1px solid #e0e0e0;
-            background-color: #f8fafc;
-            display: none;
-        }
-        
-        .settings-panel.active {
-            display: block;
-        }
-        
-        .settings-toggle {
-            margin-left: auto;
-            background: none;
-            border: none;
-            color: white;
-            cursor: pointer;
             font-size: 14px;
+            resize: none;
+            max-height: 150px;
+            min-height: 24px;
+            line-height: 1.5;
+            font-family: 'Open Sans', sans-serif;
+        }
+
+        .chat-input::placeholder {
+            color: var(--text-muted);
+        }
+
+        .input-actions {
             display: flex;
             align-items: center;
-            gap: 5px;
+            gap: 6px;
         }
-        
-        .settings-form {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
+
+        .input-btn {
+            width: 32px;
+            height: 32px;
+            border-radius: 8px;
+            border: none;
+            background: transparent;
+            color: var(--text-muted);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.15s ease;
         }
-        
-        .setting-group {
+
+        .input-btn:hover {
+            background: var(--background);
+            color: var(--text);
+        }
+
+        .input-btn.send {
+            background: var(--primary);
+            color: white;
+        }
+
+        .input-btn.send:hover {
+            background: var(--primary-hover);
+        }
+
+        .input-btn.send:disabled {
+            background: var(--border);
+            cursor: not-allowed;
+        }
+
+        /* ===== Settings Modal ===== */
+        .modal-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(4px);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 100;
+        }
+
+        .modal-overlay.active {
+            display: flex;
+        }
+
+        .modal {
+            background: var(--surface);
+            border-radius: 16px;
+            width: 90%;
+            max-width: 600px;
+            max-height: 85vh;
+            overflow: hidden;
             display: flex;
             flex-direction: column;
-            gap: 5px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
         }
-        
-        .setting-group.full-width {
+
+        .modal-header {
+            padding: 20px 24px;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .modal-title {
+            font-family: 'Poppins', sans-serif;
+            font-size: 18px;
+            font-weight: 600;
+        }
+
+        .modal-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 8px;
+            border: none;
+            background: transparent;
+            color: var(--text-muted);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .modal-close:hover {
+            background: var(--background);
+            color: var(--text);
+        }
+
+        .modal-body {
+            padding: 24px;
+            overflow-y: auto;
+        }
+
+        .settings-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 16px;
+        }
+
+        .settings-group {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .settings-group.full-width {
             grid-column: 1 / -1;
         }
-        
-        .setting-label {
-            font-size: 14px;
-            font-weight: bold;
-            color: #374151;
+
+        .settings-label {
+            font-size: 13px;
+            font-weight: 500;
+            color: var(--text-muted);
         }
-        
-        .setting-input {
-            padding: 8px 12px;
-            border: 1px solid #d1d5db;
-            border-radius: 6px;
+
+        .settings-input,
+        .settings-select {
+            padding: 10px 12px;
+            border: 1px solid var(--border);
+            border-radius: 8px;
             font-size: 14px;
+            background: var(--background);
+            color: var(--text);
+            outline: none;
+            transition: border-color 0.15s ease;
         }
-        
-        .setting-textarea {
-            padding: 8px 12px;
-            border: 1px solid #d1d5db;
-            border-radius: 6px;
+
+        .settings-input:focus,
+        .settings-select:focus {
+            border-color: var(--primary);
+        }
+
+        .settings-textarea {
+            padding: 10px 12px;
+            border: 1px solid var(--border);
+            border-radius: 8px;
             font-size: 14px;
-            min-height: 80px;
+            background: var(--background);
+            color: var(--text);
+            outline: none;
             resize: vertical;
+            min-height: 80px;
+            font-family: 'Open Sans', sans-serif;
         }
-        
-        .setting-checkbox {
-            margin-right: 8px;
+
+        .settings-checkbox-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 0;
         }
-        
-        .error-message {
-            padding: 10px 15px;
-            background-color: #fef2f2;
-            border: 1px solid #fecaca;
-            color: #dc2626;
-            border-radius: 6px;
-            margin-bottom: 15px;
+
+        .settings-checkbox {
+            width: 18px;
+            height: 18px;
+            border-radius: 4px;
+            border: 1px solid var(--border);
+            cursor: pointer;
         }
-        
+
+        .modal-footer {
+            padding: 16px 24px;
+            border-top: 1px solid var(--border);
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+        }
+
+        .btn {
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.15s ease;
+        }
+
+        .btn-secondary {
+            background: var(--background);
+            border: 1px solid var(--border);
+            color: var(--text);
+        }
+
+        .btn-secondary:hover {
+            border-color: var(--primary);
+        }
+
+        .btn-primary {
+            background: var(--primary);
+            border: none;
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: var(--primary-hover);
+        }
+
+        /* ===== Error Message ===== */
+        .error-banner {
+            padding: 12px 16px;
+            background: rgba(239, 68, 68, 0.1);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            border-radius: 10px;
+            color: var(--error);
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        /* ===== Scrollbar ===== */
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--border);
+            border-radius: 3px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--text-muted);
+        }
+
+        /* ===== Responsive ===== */
+        @media (max-width: 1024px) {
+            .sidebar {
+                position: fixed;
+                left: 0;
+                top: 0;
+                bottom: 0;
+                transform: translateX(-100%);
+            }
+
+            .sidebar.open {
+                transform: translateX(0);
+            }
+
+            .sidebar-overlay {
+                position: fixed;
+                inset: 0;
+                background: rgba(0, 0, 0, 0.5);
+                z-index: 15;
+                display: none;
+            }
+
+            .sidebar-overlay.active {
+                display: block;
+            }
+        }
+
         @media (max-width: 768px) {
+            .header {
+                padding: 0 12px;
+            }
+
+            .header-center {
+                display: none;
+            }
+
             .chat-container {
-                height: 100vh;
-                max-width: 100%;
+                padding: 16px;
             }
-            
-            .message {
-                max-width: 95%;
+
+            .input-container {
+                padding: 12px 16px 16px;
             }
-            
-            .settings-form {
+
+            .settings-grid {
                 grid-template-columns: 1fr;
             }
+
+            .modal {
+                width: 100%;
+                max-width: 100%;
+                height: 100%;
+                max-height: 100%;
+                border-radius: 0;
+            }
+
+            .welcome-title {
+                font-size: 22px;
+            }
+
+            .suggestion-chips {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .suggestion-chip {
+                width: 100%;
+            }
+        }
+
+        /* ===== Animation ===== */
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(8px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .message {
+            animation: fadeIn 0.3s ease;
+        }
+
+        /* ===== Skills Grid ===== */
+        .skills-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 10px;
+            max-height: 200px;
+            overflow-y: auto;
+            padding: 8px;
+            background: var(--background);
+            border-radius: 8px;
+            border: 1px solid var(--border);
+        }
+
+        .skill-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 12px;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.15s ease;
+        }
+
+        .skill-item:hover {
+            border-color: var(--primary);
+            background: rgba(37, 99, 235, 0.05);
+        }
+
+        .skill-item.selected {
+            border-color: var(--primary);
+            background: rgba(37, 99, 235, 0.1);
+        }
+
+        .skill-item input[type="checkbox"] {
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+        }
+
+        .skill-item-label {
+            flex: 1;
+            font-size: 13px;
+            cursor: pointer;
+        }
+
+        .skill-item-desc {
+            font-size: 11px;
+            color: var(--text-muted);
+            margin-top: 2px;
+        }
+
+        .skills-loading {
+            grid-column: 1 / -1;
+            text-align: center;
+            padding: 20px;
+            color: var(--text-muted);
+            font-size: 13px;
+        }
+
+        /* ===== MCP Grid ===== */
+        .mcp-grid {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            max-height: 300px;
+            overflow-y: auto;
+            padding: 8px;
+            background: var(--background);
+            border-radius: 8px;
+            border: 1px solid var(--border);
+        }
+
+        .mcp-item {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            overflow: hidden;
+            transition: all 0.15s ease;
+        }
+
+        .mcp-item.enabled {
+            border-color: var(--success);
+        }
+
+        .mcp-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px;
+            cursor: pointer;
+        }
+
+        .mcp-header:hover {
+            background: var(--background);
+        }
+
+        .mcp-checkbox {
+            width: 18px;
+            height: 18px;
+            cursor: pointer;
+        }
+
+        .mcp-info {
+            flex: 1;
+        }
+
+        .mcp-name {
+            font-size: 13px;
+            font-weight: 500;
+        }
+
+        .mcp-desc {
+            font-size: 11px;
+            color: var(--text-muted);
+            margin-top: 2px;
+        }
+
+        .mcp-toggle {
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-muted);
+            transition: transform 0.2s ease;
+        }
+
+        .mcp-item.expanded .mcp-toggle {
+            transform: rotate(180deg);
+        }
+
+        .mcp-config {
+            padding: 0 12px 12px;
+            display: none;
+            border-top: 1px solid var(--border);
+            padding-top: 12px;
+        }
+
+        .mcp-item.expanded .mcp-config {
+            display: block;
+        }
+
+        .mcp-config-item {
+            margin-bottom: 10px;
+        }
+
+        .mcp-config-item:last-child {
+            margin-bottom: 0;
+        }
+
+        .mcp-config-label {
+            font-size: 12px;
+            color: var(--text-muted);
+            margin-bottom: 4px;
+        }
+
+        .mcp-config-input {
+            width: 100%;
+            padding: 8px 10px;
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            font-size: 12px;
+            background: var(--background);
+            color: var(--text);
+            outline: none;
+        }
+
+        .mcp-config-input:focus {
+            border-color: var(--primary);
+        }
+
+        /* ===== Settings Tabs ===== */
+        .settings-tabs {
+            display: flex;
+            gap: 4px;
+            padding: 0 24px;
+            border-bottom: 1px solid var(--border);
+            margin-bottom: 16px;
+        }
+
+        .settings-tab {
+            padding: 12px 16px;
+            background: transparent;
+            border: none;
+            border-bottom: 2px solid transparent;
+            color: var(--text-muted);
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.15s ease;
+        }
+
+        .settings-tab:hover {
+            color: var(--text);
+        }
+
+        .settings-tab.active {
+            color: var(--primary);
+            border-bottom-color: var(--primary);
+        }
+
+        .settings-tab-content {
+            display: none;
+        }
+
+        .settings-tab-content.active {
+            display: block;
+        }
+
+        /* ===== Large Modal ===== */
+        .settings-modal-large {
+            max-width: 700px;
+            max-height: 85vh;
+        }
+
+        /* ===== Skills Grid Large ===== */
+        .skills-grid-large {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+            gap: 12px;
+            max-height: 350px;
+            overflow-y: auto;
+            padding: 12px;
+            background: var(--background);
+            border-radius: 8px;
+            border: 1px solid var(--border);
+        }
+
+        /* ===== MCP Manager Button ===== */
+        .mcp-manager-btn {
+            width: 100%;
+            padding: 12px 16px;
+            background: var(--background);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            color: var(--text);
+            font-size: 14px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            transition: all 0.15s ease;
+        }
+
+        .mcp-manager-btn:hover {
+            border-color: var(--primary);
+            background: rgba(37, 99, 235, 0.05);
+        }
+
+        /* ===== MCP Manager Modal ===== */
+        .mcp-manager-modal {
+            max-width: 600px;
+            max-height: 80vh;
+        }
+
+        .mcp-manager-list {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+
+        .mcp-manager-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 16px;
+            background: var(--background);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            transition: all 0.15s ease;
+        }
+
+        .mcp-manager-item:hover {
+            border-color: var(--border);
+            background: var(--surface);
+        }
+
+        .mcp-manager-item.enabled {
+            border-color: var(--success);
+            background: rgba(16, 185, 129, 0.05);
+        }
+
+        .mcp-manager-checkbox {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+            flex-shrink: 0;
+        }
+
+        .mcp-manager-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .mcp-manager-name {
+            font-size: 14px;
+            font-weight: 500;
+            color: var(--text);
+        }
+
+        .mcp-manager-type {
+            font-size: 11px;
+            color: var(--text-muted);
+            font-family: 'Monaco', 'Consolas', monospace;
+            margin-top: 2px;
+        }
+
+        .mcp-manager-actions {
+            display: flex;
+            gap: 8px;
+        }
+
+        .mcp-manager-action-btn {
+            width: 32px;
+            height: 32px;
+            border-radius: 6px;
+            border: none;
+            background: transparent;
+            color: var(--text-muted);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.15s ease;
+        }
+
+        .mcp-manager-action-btn:hover {
+            background: var(--background);
+            color: var(--text);
+        }
+
+        .mcp-manager-action-btn.edit:hover {
+            background: rgba(37, 99, 235, 0.1);
+            color: var(--primary);
+        }
+
+        .mcp-manager-action-btn.delete:hover {
+            background: rgba(239, 68, 68, 0.1);
+            color: var(--error);
+        }
+
+        .btn-add-mcp {
+            padding: 8px 16px;
+            background: var(--primary);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.15s ease;
+        }
+
+        .btn-add-mcp:hover {
+            background: var(--primary-hover);
+        }
+
+        /* ===== Empty State ===== */
+        .mcp-empty-state {
+            text-align: center;
+            padding: 40px 20px;
+            color: var(--text-muted);
+        }
+
+        .mcp-empty-state-icon {
+            width: 48px;
+            height: 48px;
+            margin: 0 auto 16px;
+            border-radius: 12px;
+            background: var(--background);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-muted);
+        }
+
+        /* ===== MCP JSON Editor ===== */
+        .mcp-json-editor {
+            min-height: 150px !important;
+            font-family: 'Monaco', 'Consolas', 'Menlo', monospace !important;
+            font-size: 13px !important;
+            line-height: 1.5 !important;
+            tab-size: 2;
+        }
+
+        .mcp-json-hint {
+            padding: 10px 12px;
+            background: var(--background);
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            font-size: 12px;
+            color: var(--text-muted);
+        }
+
+        .mcp-manager-config {
+            font-family: 'Monaco', 'Consolas', monospace;
+            font-size: 11px;
+            color: var(--text-muted);
+            margin-top: 2px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
     </style>
 </head>
 <body>
-    <div class="chat-container">
-        <div class="chat-header">
-            <div class="chat-title">AI聊天助手</div>
-            <div class="chat-status">
-                <span class="status-indicator" id="status-indicator"></span>
-                <span id="status-text">已连接</span>
-            </div>
-            <button class="settings-toggle" id="settings-toggle">⚙️ 设置</button>
+    <!-- Sidebar Overlay (Mobile) -->
+    <div class="sidebar-overlay" id="sidebar-overlay"></div>
+
+    <!-- Sidebar -->
+    <aside class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <h1>AI Assistant</h1>
+            <button class="header-btn" id="sidebar-close-btn" style="display: none;">
+                <i data-lucide="x" style="width: 18px; height: 18px;"></i>
+            </button>
         </div>
-        
-        <div class="settings-panel" id="settings-panel">
-            <div class="settings-form">
-                <div class="setting-group">
-                    <label class="setting-label" for="model">模型</label>
-                    <input type="text" id="model" class="setting-input" value="qwen/qwen3-next-80b-a3b-instruct">
+
+        <button class="new-chat-btn" id="new-chat-btn">
+            <i data-lucide="plus" style="width: 16px; height: 16px;"></i>
+            新对话
+        </button>
+
+        <div class="chat-history" id="chat-history">
+            <!-- Chat history will be dynamically rendered -->
+        </div>
+
+        <div class="sidebar-footer">
+            <button class="sidebar-footer-btn" id="settings-btn">
+                <i data-lucide="settings" style="width: 16px; height: 16px;"></i>
+                设置
+            </button>
+        </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-left">
+                <button class="sidebar-toggle" id="sidebar-toggle">
+                    <i data-lucide="menu" style="width: 20px; height: 20px;"></i>
+                </button>
+                <div class="header-title" id="header-title">AI Assistant</div>
+            </div>
+
+            <div class="header-center">
+                <div class="status-badge">
+                    <span class="status-dot" id="status-dot"></span>
+                    <span id="status-text">已连接</span>
                 </div>
-                <div class="setting-group">
-                    <label class="setting-label" for="api-key">API Key</label>
-                    <input type="password" id="api-key" class="setting-input" value="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">
+            </div>
+
+            <div class="header-right">
+                <button class="header-btn" id="theme-toggle" title="切换主题">
+                    <i data-lucide="moon" style="width: 18px; height: 18px;"></i>
+                </button>
+                <button class="header-btn primary" id="header-settings-btn">
+                    <i data-lucide="settings" style="width: 18px; height: 18px;"></i>
+                </button>
+            </div>
+        </header>
+
+        <!-- Chat Container -->
+        <div class="chat-container" id="chat-container">
+            <!-- Welcome Screen (shown when no messages) -->
+            <div class="welcome-screen" id="welcome-screen">
+                <div class="welcome-logo">
+                    <i data-lucide="sparkles" style="width: 40px; height: 40px;"></i>
                 </div>
-                <div class="setting-group">
-                    <label class="setting-label" for="model-server">模型服务器</label>
-                    <input type="text" id="model-server" class="setting-input" value="https://openrouter.ai/api/v1">
-                </div>
-                <div class="setting-group full-width">
-                    <label class="setting-label" for="api-domain">API域名</label>
-                    <select id="api-domain" class="setting-input">
-                        <option value="current">当前域名</option>
-                        <option value="https://catalog-agent-dev.gbase.ai">https://catalog-agent-dev.gbase.ai</option>
-                        <option value="http://localhost:8001">http://localhost:8001</option>
-                        <option value="http://qwen-agent-api:8001">http://qwen-agent-api:8001</option>
-                        <option value="custom">自定义</option>
-                    </select>
-                </div>
-                <div class="setting-group full-width" id="custom-api-domain-group" style="display: none;">
-                    <label class="setting-label" for="custom-api-domain">自定义API域名</label>
-                    <input type="text" id="custom-api-domain" class="setting-input" placeholder="https://your-api-domain.com">
-                </div>
-                <div class="setting-group">
-                    <label class="setting-label" for="bot-id">Bot ID</label>
-                    <input type="text" id="bot-id" class="setting-input" value="test">
-                </div>
-                <div class="setting-group">
-                    <label class="setting-label" for="language">语言</label>
-                    <select id="language" class="setting-input">
-                        <option value="zh-CN" selected>中文</option>
-                        <option value="en">English</option>
-                        <option value="ja">日本語</option>
-                        <option value="ko">한국어</option>
-                    </select>
-                </div>
-                <div class="setting-group">
-                    <label class="setting-label" for="robot-type">机器人类型</label>
-                    <select id="robot-type" class="setting-input">
-                        <option value="">默认</option>
-                        <option value="agent">Agent</option>
-                        <option value="catalog_agent">Catalog Agent</option>
-                    </select>
-                </div>
-                <div class="setting-group full-width">
-                    <label class="setting-label" for="dataset-ids">数据集ID (逗号分隔)</label>
-                    <input type="text" id="dataset-ids" class="setting-input" placeholder="例如: dataset1,dataset2">
-                </div>
-                <div class="setting-group full-width">
-                    <label class="setting-label" for="mcp-settings">MCP设置 (JSON格式)</label>
-                    <textarea id="mcp-settings" class="setting-textarea" placeholder='{"key": "value"}'></textarea>
-                </div>
-                <div class="setting-group">
-                    <label class="setting-label" for="tool-response">
-                        <input type="checkbox" id="tool-response" class="setting-checkbox">
-                        启用工具响应
-                    </label>
+                <h2 class="welcome-title">AI 聊天助手</h2>
+                <p class="welcome-subtitle">有什么可以帮助您的吗？我可以回答问题、编写代码、提供创意等。</p>
+                <div class="suggestion-chips">
+                    <button class="suggestion-chip">用 Python 写一个排序算法</button>
+                    <button class="suggestion-chip">解释量子计算的原理</button>
+                    <button class="suggestion-chip">帮我写一首关于秋天的诗</button>
+                    <button class="suggestion-chip">推荐一些学习资源</button>
                 </div>
             </div>
         </div>
-        
-        <div class="chat-messages" id="chat-messages">
-            <div class="message assistant">
-                <div class="message-avatar">AI</div>
-                <div class="message-content">
-                    您好！我是AI助手，有什么可以帮助您的吗？
+
+        <!-- Input Area -->
+        <div class="input-container">
+            <div class="input-wrapper">
+                <div class="input-box">
+                    <textarea
+                        class="chat-input"
+                        id="chat-input"
+                        placeholder="输入您的问题..."
+                        rows="1"
+                    ></textarea>
+                    <div class="input-actions">
+                        <button class="input-btn" id="attach-btn" title="附加文件">
+                            <i data-lucide="paperclip" style="width: 18px; height: 18px;"></i>
+                        </button>
+                        <button class="input-btn send" id="send-btn">
+                            <i data-lucide="send" style="width: 18px; height: 18px;"></i>
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
-        
-        <div class="chat-input-container">
-            <form class="chat-input-form" id="chat-form">
-                <input 
-                    type="text" 
-                    class="chat-input" 
-                    id="chat-input" 
-                    placeholder="输入您的问题..." 
-                    autocomplete="off"
-                    required
-                >
-                <button type="submit" class="chat-send-button" id="send-button">发送</button>
-            </form>
+    </main>
+
+    <!-- Settings Modal -->
+    <div class="modal-overlay" id="settings-modal">
+        <div class="modal settings-modal-large">
+            <div class="modal-header">
+                <h3 class="modal-title">设置</h3>
+                <button class="modal-close" id="modal-close">
+                    <i data-lucide="x" style="width: 18px; height: 18px;"></i>
+                </button>
+            </div>
+            <!-- Tabs -->
+            <div class="settings-tabs">
+                <button class="settings-tab active" data-tab="basic">基础设置</button>
+                <button class="settings-tab" data-tab="advanced">高级配置</button>
+                <button class="settings-tab" data-tab="skills">技能选择</button>
+            </div>
+            <div class="modal-body">
+                <!-- 基础设置 Tab -->
+                <div class="settings-tab-content active" data-tab="basic">
+                    <div class="settings-grid">
+                        <div class="settings-group">
+                            <label class="settings-label" for="model">模型</label>
+                            <input type="text" id="model" class="settings-input" value="qwen/qwen3-next-80b-a3b-instruct">
+                        </div>
+                        <div class="settings-group">
+                            <label class="settings-label" for="api-key">API Key</label>
+                            <input type="password" id="api-key" class="settings-input" value="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">
+                        </div>
+                        <div class="settings-group">
+                            <label class="settings-label" for="model-server">模型服务器</label>
+                            <input type="text" id="model-server" class="settings-input" value="https://openrouter.ai/api/v1">
+                        </div>
+                        <div class="settings-group">
+                            <label class="settings-label" for="api-domain">API域名</label>
+                            <select id="api-domain" class="settings-select">
+                                <option value="current">当前域名</option>
+                                <option value="https://catalog-agent-dev.gbase.ai">https://catalog-agent-dev.gbase.ai</option>
+                                <option value="http://localhost:8001">http://localhost:8001</option>
+                                <option value="http://qwen-agent-api:8001">http://qwen-agent-api:8001</option>
+                                <option value="custom">自定义</option>
+                            </select>
+                        </div>
+                        <div class="settings-group full-width" id="custom-api-domain-group" style="display: none;">
+                            <label class="settings-label" for="custom-api-domain">自定义API域名</label>
+                            <input type="text" id="custom-api-domain" class="settings-input" placeholder="https://your-api-domain.com">
+                        </div>
+                        <div class="settings-group">
+                            <label class="settings-label" for="bot-id">Bot ID</label>
+                            <input type="text" id="bot-id" class="settings-input" value="test">
+                        </div>
+                        <div class="settings-group">
+                            <label class="settings-label" for="language">语言</label>
+                            <select id="language" class="settings-select">
+                                <option value="zh-CN" selected>中文</option>
+                                <option value="en">English</option>
+                                <option value="ja">日本語</option>
+                                <option value="ko">한국어</option>
+                            </select>
+                        </div>
+                        <div class="settings-group">
+                            <label class="settings-label" for="robot-type">机器人类型</label>
+                            <select id="robot-type" class="settings-select">
+                                <option value="">默认</option>
+                                <option value="agent">Agent</option>
+                                <option value="catalog_agent">Catalog Agent</option>
+                                <option value="deep_agent">Deep Agent</option>
+                            </select>
+                        </div>
+                        <div class="settings-group">
+                            <div class="settings-checkbox-wrapper">
+                                <input type="checkbox" id="tool-response" class="settings-checkbox">
+                                <label class="settings-label" for="tool-response" style="margin-bottom: 0;">启用工具响应</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 高级配置 Tab -->
+                <div class="settings-tab-content" data-tab="advanced">
+                    <div class="settings-grid">
+                        <div class="settings-group full-width">
+                            <label class="settings-label" for="system-prompt">系统提示词</label>
+                            <textarea id="system-prompt" class="settings-textarea" placeholder="输入系统提示词..." style="min-height: 120px;"></textarea>
+                        </div>
+                        <div class="settings-group full-width">
+                            <label class="settings-label" for="dataset-ids">数据集ID (逗号分隔)</label>
+                            <input type="text" id="dataset-ids" class="settings-input" placeholder="例如: dataset1,dataset2">
+                        </div>
+                        <div class="settings-group">
+                            <label class="settings-label" for="user-identifier">用户标识</label>
+                            <input type="text" id="user-identifier" class="settings-input" placeholder="输入用户标识...">
+                        </div>
+                        <!-- MCP 管理入口 -->
+                        <div class="settings-group full-width">
+                            <label class="settings-label">MCP 服务器管理</label>
+                            <button type="button" id="open-mcp-manager-btn" class="mcp-manager-btn">
+                                <i data-lucide="settings" style="width: 16px; height: 16px;"></i>
+                                管理 MCP 服务器 (<span id="mcp-count">0</span> 个已启用)
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 技能选择 Tab -->
+                <div class="settings-tab-content" data-tab="skills">
+                    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
+                        <label class="settings-label">可用技能</label>
+                        <button type="button" id="refresh-skills-btn" style="background: none; border: none; color: var(--primary); cursor: pointer; font-size: 12px; padding: 4px 8px; border-radius: 4px;">
+                            <i data-lucide="refresh-cw" style="width: 14px; height: 14px;"></i>
+                            刷新
+                        </button>
+                    </div>
+                    <div id="skills-container" class="skills-grid-large">
+                        <div class="skills-loading">加载中...</div>
+                    </div>
+                    <input type="hidden" id="skills" value="">
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" id="modal-cancel">取消</button>
+                <button class="btn btn-primary" id="modal-save">保存</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- MCP Manager Modal -->
+    <div class="modal-overlay" id="mcp-manager-modal">
+        <div class="modal mcp-manager-modal">
+            <div class="modal-header">
+                <h3 class="modal-title">MCP 服务器管理</h3>
+                <button class="modal-close" id="mcp-manager-close">
+                    <i data-lucide="x" style="width: 18px; height: 18px;"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <!-- 添加新服务器按钮 -->
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+                    <span class="settings-label">已配置的服务器</span>
+                    <button type="button" id="add-mcp-server-btn" class="btn-add-mcp">
+                        <i data-lucide="plus" style="width: 14px; height: 14px;"></i>
+                        添加服务器
+                    </button>
+                </div>
+                <!-- MCP 服务器列表 -->
+                <div id="mcp-manager-list" class="mcp-manager-list">
+                    <!-- 动态生成 -->
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-primary" id="mcp-manager-done">完成</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- MCP Server Edit Modal -->
+    <div class="modal-overlay" id="mcp-edit-modal">
+        <div class="modal">
+            <div class="modal-header">
+                <h3 class="modal-title" id="mcp-edit-title">添加 MCP 服务器</h3>
+                <button class="modal-close" id="mcp-edit-close">
+                    <i data-lucide="x" style="width: 18px; height: 18px;"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="settings-group full-width">
+                    <label class="settings-label" for="mcp-edit-json">MCP 配置 (JSON)</label>
+                    <textarea id="mcp-edit-json" class="settings-textarea mcp-json-editor" placeholder='输入 MCP 服务器配置，例如：&#10;{&#10;  "服务器名称": {&#10;    "url": "http://example.com/sse",&#10;    "command": "npx",&#10;    "args": ["-y", "@modelcontextprotocol/server-everything"]&#10;  }&#10;}&#10;&#10;根据服务器类型填入所需字段即可' style="min-height: 200px; font-family: 'Monaco', 'Consolas', monospace; font-size: 13px;"></textarea>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" id="mcp-edit-cancel">取消</button>
+                <button class="btn btn-primary" id="mcp-edit-save">保存</button>
+            </div>
         </div>
     </div>
 
     <script>
+        // Initialize Lucide icons
+        lucide.createIcons();
+
         class ChatApp {
             constructor() {
-                this.chatForm = document.getElementById('chat-form');
-                this.chatInput = document.getElementById('chat-input');
-                this.chatMessages = document.getElementById('chat-messages');
-                this.sendButton = document.getElementById('send-button');
-                this.settingsToggle = document.getElementById('settings-toggle');
-                this.settingsPanel = document.getElementById('settings-panel');
-                this.statusIndicator = document.getElementById('status-indicator');
-                this.statusText = document.getElementById('status-text');
-                
+                this.elements = {
+                    sidebar: document.getElementById('sidebar'),
+                    sidebarToggle: document.getElementById('sidebar-toggle'),
+                    sidebarCloseBtn: document.getElementById('sidebar-close-btn'),
+                    sidebarOverlay: document.getElementById('sidebar-overlay'),
+                    themeToggle: document.getElementById('theme-toggle'),
+                    settingsBtn: document.getElementById('settings-btn'),
+                    headerSettingsBtn: document.getElementById('header-settings-btn'),
+                    settingsModal: document.getElementById('settings-modal'),
+                    modalClose: document.getElementById('modal-close'),
+                    modalCancel: document.getElementById('modal-cancel'),
+                    modalSave: document.getElementById('modal-save'),
+                    chatContainer: document.getElementById('chat-container'),
+                    chatInput: document.getElementById('chat-input'),
+                    sendBtn: document.getElementById('send-btn'),
+                    welcomeScreen: document.getElementById('welcome-screen'),
+                    statusDot: document.getElementById('status-dot'),
+                    statusText: document.getElementById('status-text'),
+                    newChatBtn: document.getElementById('new-chat-btn'),
+                    apiDomain: document.getElementById('api-domain'),
+                    customApiDomainGroup: document.getElementById('custom-api-domain-group'),
+                    skillsContainer: document.getElementById('skills-container'),
+                    refreshSkillsBtn: document.getElementById('refresh-skills-btn'),
+                    // MCP Manager
+                    mcpManagerBtn: document.getElementById('open-mcp-manager-btn'),
+                    mcpManagerModal: document.getElementById('mcp-manager-modal'),
+                    mcpManagerClose: document.getElementById('mcp-manager-close'),
+                    mcpManagerDone: document.getElementById('mcp-manager-done'),
+                    mcpManagerList: document.getElementById('mcp-manager-list'),
+                    addMcpServerBtn: document.getElementById('add-mcp-server-btn'),
+                    // MCP Edit
+                    mcpEditModal: document.getElementById('mcp-edit-modal'),
+                    mcpEditClose: document.getElementById('mcp-edit-close'),
+                    mcpEditCancel: document.getElementById('mcp-edit-cancel'),
+                    mcpEditSave: document.getElementById('mcp-edit-save'),
+                    mcpEditJson: document.getElementById('mcp-edit-json'),
+                    mcpEditTitle: document.getElementById('mcp-edit-title')
+                };
+
+                // 从 localStorage 加载自定义 MCP 服务器
+                this.customMcpServers = this.loadCustomMcpServers();
+
+                // 当前编辑的 MCP 服务器索引
+                this.editingMcpIndex = -1;
+
                 this.isProcessing = false;
+                this.messages = [];
                 this.currentController = null;
-                
+                this.currentSessionId = null;
+                this.allSessions = [];
+
                 this.initializeEventListeners();
+                this.initializeSettingsTabs();
                 this.loadSettings();
+                this.loadTheme();
+                this.loadChatHistory();
             }
-            
+
             initializeEventListeners() {
-                this.chatForm.addEventListener('submit', (e) => {
-                    e.preventDefault();
-                    this.sendMessage();
+                // Sidebar toggle
+                this.elements.sidebarToggle.addEventListener('click', () => this.toggleSidebar());
+                this.elements.sidebarCloseBtn.addEventListener('click', () => this.closeSidebar());
+                this.elements.sidebarOverlay.addEventListener('click', () => this.closeSidebar());
+
+                // Theme toggle
+                this.elements.themeToggle.addEventListener('click', () => this.toggleTheme());
+
+                // Settings modal
+                this.elements.settingsBtn.addEventListener('click', () => this.openSettings());
+                this.elements.headerSettingsBtn.addEventListener('click', () => this.openSettings());
+                this.elements.modalClose.addEventListener('click', () => this.closeSettings());
+                this.elements.modalCancel.addEventListener('click', () => this.closeSettings());
+                this.elements.modalSave.addEventListener('click', () => this.saveAndCloseSettings());
+                this.elements.settingsModal.addEventListener('click', (e) => {
+                    if (e.target === this.elements.settingsModal) this.closeSettings();
                 });
-                
-                this.settingsToggle.addEventListener('click', () => {
-                    this.settingsPanel.classList.toggle('active');
-                });
-                
-                // API域名选择变化时显示/隐藏自定义输入框
-                const apiDomainSelect = document.getElementById('api-domain');
-                const customApiDomainGroup = document.getElementById('custom-api-domain-group');
-                
-                apiDomainSelect.addEventListener('change', () => {
-                    if (apiDomainSelect.value === 'custom') {
-                        customApiDomainGroup.style.display = 'block';
-                    } else {
-                        customApiDomainGroup.style.display = 'none';
+
+                // Chat input
+                this.elements.chatInput.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        this.sendMessage();
                     }
+                });
+                this.elements.sendBtn.addEventListener('click', () => this.sendMessage());
+
+                // Auto-resize textarea
+                this.elements.chatInput.addEventListener('input', () => {
+                    this.elements.chatInput.style.height = 'auto';
+                    this.elements.chatInput.style.height = Math.min(this.elements.chatInput.scrollHeight, 150) + 'px';
+                });
+
+                // API domain change
+                this.elements.apiDomain.addEventListener('change', () => {
+                    this.elements.customApiDomainGroup.style.display =
+                        this.elements.apiDomain.value === 'custom' ? 'block' : 'none';
                     this.saveSettings();
                 });
-                
-                // 当用户修改设置时自动保存
-                const settingInputs = document.querySelectorAll('.setting-input, .setting-textarea');
-                settingInputs.forEach(input => {
+
+                // New chat
+                this.elements.newChatBtn.addEventListener('click', () => this.startNewChat());
+
+                // Refresh skills
+                this.elements.refreshSkillsBtn.addEventListener('click', () => this.loadSkills());
+
+                // MCP Manager
+                this.elements.mcpManagerBtn.addEventListener('click', () => this.openMCPManager());
+                this.elements.mcpManagerClose.addEventListener('click', () => this.closeMCPManager());
+                this.elements.mcpManagerDone.addEventListener('click', () => this.closeMCPManager());
+                this.elements.mcpManagerModal.addEventListener('click', (e) => {
+                    if (e.target === this.elements.mcpManagerModal) this.closeMCPManager();
+                });
+
+                // Add MCP Server
+                this.elements.addMcpServerBtn.addEventListener('click', () => this.openMcpEditModal());
+
+                // MCP Edit Modal
+                this.elements.mcpEditClose.addEventListener('click', () => this.closeMcpEditModal());
+                this.elements.mcpEditCancel.addEventListener('click', () => this.closeMcpEditModal());
+                this.elements.mcpEditSave.addEventListener('click', () => this.saveMcpEdit());
+                this.elements.mcpEditModal.addEventListener('click', (e) => {
+                    if (e.target === this.elements.mcpEditModal) this.closeMcpEditModal();
+                });
+
+                // Suggestion chips
+                document.querySelectorAll('.suggestion-chip').forEach(chip => {
+                    chip.addEventListener('click', () => {
+                        this.elements.chatInput.value = chip.textContent;
+                        this.sendMessage();
+                    });
+                });
+
+                // Settings auto-save on change
+                document.querySelectorAll('.settings-input, .settings-select, .settings-textarea, .settings-checkbox').forEach(input => {
                     input.addEventListener('change', () => this.saveSettings());
                 });
             }
-            
+
+            initializeSettingsTabs() {
+                // 标签页切换
+                document.querySelectorAll('.settings-tab').forEach(tab => {
+                    tab.addEventListener('click', () => {
+                        const targetTab = tab.dataset.tab;
+                        // 切换标签状态
+                        document.querySelectorAll('.settings-tab').forEach(t => t.classList.remove('active'));
+                        tab.classList.add('active');
+                        // 切换内容
+                        document.querySelectorAll('.settings-tab-content').forEach(content => {
+                            content.classList.remove('active');
+                            if (content.dataset.tab === targetTab) {
+                                content.classList.add('active');
+                            }
+                        });
+                        // 切换到技能标签时加载技能
+                        if (targetTab === 'skills') {
+                            this.loadSkills();
+                        }
+                    });
+                });
+            }
+
+            loadCustomMcpServers() {
+                const stored = localStorage.getItem('custom-mcp-servers');
+                if (stored) {
+                    try {
+                        return JSON.parse(stored);
+                    } catch (e) {
+                        console.error('Failed to load MCP servers:', e);
+                        return [];
+                    }
+                }
+                return [];
+            }
+
+            saveCustomMcpServers() {
+                localStorage.setItem('custom-mcp-servers', JSON.stringify(this.customMcpServers));
+                this.updateMcpCount();
+            }
+
+            updateMcpCount() {
+                const count = this.customMcpServers.filter(s => s.enabled).length;
+                const countEl = document.getElementById('mcp-count');
+                if (countEl) countEl.textContent = count;
+            }
+
+            openMCPManager() {
+                this.renderMcpManagerList();
+                this.elements.mcpManagerModal.classList.add('active');
+            }
+
+            closeMCPManager() {
+                this.elements.mcpManagerModal.classList.remove('active');
+                this.saveSettings(); // 保存设置以更新 mcp-settings
+            }
+
+            renderMcpManagerList() {
+                const container = this.elements.mcpManagerList;
+                container.innerHTML = '';
+
+                if (this.customMcpServers.length === 0) {
+                    container.innerHTML = `
+                        <div class="mcp-empty-state">
+                            <div class="mcp-empty-state-icon">
+                                <i data-lucide="server" style="width: 24px; height: 24px;"></i>
+                            </div>
+                            <p>暂无配置的 MCP 服务器</p>
+                            <p style="font-size: 12px; margin-top: 8px;">点击上方"添加服务器"按钮添加</p>
+                        </div>
+                    `;
+                    lucide.createIcons();
+                    return;
+                }
+
+                this.customMcpServers.forEach((server, index) => {
+                    const item = document.createElement('div');
+                    item.className = `mcp-manager-item ${server.enabled ? 'enabled' : ''}`;
+
+                    // 从 config 中获取 server_type 作为名称
+                    const serverName = server.config?.server_type || `MCP 服务器 ${index + 1}`;
+                    const configJson = JSON.stringify(server.config, null, 2);
+
+                    item.innerHTML = `
+                        <input type="checkbox" class="mcp-manager-checkbox" ${server.enabled ? 'checked' : ''}>
+                        <div class="mcp-manager-info">
+                            <div class="mcp-manager-name">${this.escapeHtml(serverName)}</div>
+                            <div class="mcp-manager-config">${this.escapeHtml(configJson)}</div>
+                        </div>
+                        <div class="mcp-manager-actions">
+                            <button type="button" class="mcp-manager-action-btn edit" data-index="${index}" title="编辑">
+                                <i data-lucide="pencil" style="width: 14px; height: 14px;"></i>
+                            </button>
+                            <button type="button" class="mcp-manager-action-btn delete" data-index="${index}" title="删除">
+                                <i data-lucide="trash-2" style="width: 14px; height: 14px;"></i>
+                            </button>
+                        </div>
+                    `;
+                    container.appendChild(item);
+
+                    // 事件监听
+                    const checkbox = item.querySelector('.mcp-manager-checkbox');
+                    checkbox.addEventListener('change', () => {
+                        server.enabled = checkbox.checked;
+                        item.classList.toggle('enabled', checkbox.checked);
+                        this.saveCustomMcpServers();
+                    });
+
+                    const editBtn = item.querySelector('.edit');
+                    editBtn.addEventListener('click', () => this.openMcpEditModal(index));
+
+                    const deleteBtn = item.querySelector('.delete');
+                    deleteBtn.addEventListener('click', () => this.deleteMcpServer(index));
+                });
+
+                lucide.createIcons();
+            }
+
+            openMcpEditModal(index = -1) {
+                this.editingMcpIndex = index;
+
+                if (index >= 0) {
+                    // 编辑模式 - 加载现有配置
+                    const server = this.customMcpServers[index];
+                    this.elements.mcpEditTitle.textContent = '编辑 MCP 服务器';
+                    // 尝试转换为简化格式显示
+                    this.elements.mcpEditJson.value = this.toSimplifiedFormat(server.config);
+                } else {
+                    // 添加模式 - 空模板
+                    this.elements.mcpEditTitle.textContent = '添加 MCP 服务器';
+                    this.elements.mcpEditJson.value = '';
+                }
+
+                this.elements.mcpEditModal.classList.add('active');
+            }
+
+            // 将内部格式转换为简化格式（用于显示）
+            toSimplifiedFormat(config) {
+                const serverType = config.server_type || 'MCP-Server';
+                const simplified = {
+                    [serverType]: { ...config }
+                };
+                // 移除 server_type 字段，避免重复
+                delete simplified[serverType].server_type;
+                return JSON.stringify(simplified, null, 2);
+            }
+
+            closeMcpEditModal() {
+                this.elements.mcpEditModal.classList.remove('active');
+                this.editingMcpIndex = -1;
+            }
+
+            saveMcpEdit() {
+                const jsonText = this.elements.mcpEditJson.value.trim();
+
+                if (!jsonText) {
+                    alert('请输入 MCP 配置 JSON');
+                    return;
+                }
+
+                let config;
+                try {
+                    config = JSON.parse(jsonText);
+                } catch (e) {
+                    alert('JSON 格式错误: ' + e.message);
+                    return;
+                }
+
+                // 支持简化格式: { "ServerName": { ...config } }
+                if (this.isSimplifiedFormat(config)) {
+                    const serverName = Object.keys(config)[0];
+                    const serverConfig = config[serverName];
+                    config = {
+                        ...serverConfig,
+                        server_type: serverName
+                    };
+                }
+
+                // 生成 server_type（如果没有的话）
+                if (!config.server_type) {
+                    config.server_type = `mcp-server-${Date.now()}`;
+                }
+
+                if (this.editingMcpIndex >= 0) {
+                    // 编辑现有服务器
+                    this.customMcpServers[this.editingMcpIndex].config = config;
+                } else {
+                    // 添加新服务器
+                    this.customMcpServers.push({
+                        config: config,
+                        enabled: true
+                    });
+                }
+
+                this.saveCustomMcpServers();
+                this.renderMcpManagerList();
+                this.closeMcpEditModal();
+            }
+
+            // 检查是否为简化格式（单层结构，服务器名作为 key）
+            isSimplifiedFormat(obj) {
+                if (!obj || typeof obj !== 'object') return false;
+
+                const keys = Object.keys(obj);
+                if (keys.length !== 1) return false;
+
+                const value = obj[keys[0]];
+                // 简化格式特征：值为对象
+                return value && typeof value === 'object';
+            }
+
+            deleteMcpServer(index) {
+                if (confirm('确定要删除此 MCP 服务器吗？')) {
+                    this.customMcpServers.splice(index, 1);
+                    this.saveCustomMcpServers();
+                    this.renderMcpManagerList();
+                }
+            }
+
+            toggleSidebar() {
+                this.elements.sidebar.classList.toggle('open');
+                this.elements.sidebarOverlay.classList.toggle('active');
+
+                // Show/hide close button on mobile
+                if (window.innerWidth <= 1024) {
+                    this.elements.sidebarCloseBtn.style.display =
+                        this.elements.sidebar.classList.contains('open') ? 'flex' : 'none';
+                }
+            }
+
+            closeSidebar() {
+                this.elements.sidebar.classList.remove('open');
+                this.elements.sidebarOverlay.classList.remove('active');
+                this.elements.sidebarCloseBtn.style.display = 'none';
+            }
+
+            toggleTheme() {
+                document.documentElement.classList.toggle('dark');
+                const isDark = document.documentElement.classList.contains('dark');
+                localStorage.setItem('theme', isDark ? 'dark' : 'light');
+                this.updateThemeIcon(isDark);
+            }
+
+            loadTheme() {
+                const theme = localStorage.getItem('theme') || 'light';
+                if (theme === 'dark') {
+                    document.documentElement.classList.add('dark');
+                }
+                this.updateThemeIcon(theme === 'dark');
+            }
+
+            updateThemeIcon(isDark) {
+                if (!this.elements.themeToggle) return;
+                const icon = this.elements.themeToggle.querySelector('i');
+                if (!icon) return;
+                icon.setAttribute('data-lucide', isDark ? 'sun' : 'moon');
+                lucide.createIcons();
+            }
+
+            openSettings() {
+                this.elements.settingsModal.classList.add('active');
+                // 打开设置时加载技能列表
+                this.loadSkills();
+            }
+
+            closeSettings() {
+                this.elements.settingsModal.classList.remove('active');
+            }
+
+            saveAndCloseSettings() {
+                this.saveSettings();
+                this.closeSettings();
+            }
+
             loadSettings() {
                 const settings = localStorage.getItem('chat-settings');
                 if (settings) {
                     try {
-                        const parsedSettings = JSON.parse(settings);
-                        Object.keys(parsedSettings).forEach(key => {
+                        const parsed = JSON.parse(settings);
+                        Object.keys(parsed).forEach(key => {
+                            // Skip session-id as it's now managed per conversation
+                            if (key === 'session-id') return;
+
                             const element = document.getElementById(key);
                             if (element) {
                                 if (element.type === 'checkbox') {
-                                    element.checked = parsedSettings[key];
+                                    element.checked = parsed[key];
                                 } else {
-                                    element.value = parsedSettings[key];
+                                    element.value = parsed[key];
                                 }
                             }
                         });
-                        
-                        // 处理API域名设置
-                        const apiDomainSelect = document.getElementById('api-domain');
-                        const customApiDomainGroup = document.getElementById('custom-api-domain-group');
-                        
-                        if (apiDomainSelect.value === 'custom') {
-                            customApiDomainGroup.style.display = 'block';
-                        } else {
-                            customApiDomainGroup.style.display = 'none';
+
+                        // Handle custom API domain visibility
+                        if (this.elements.apiDomain.value === 'custom') {
+                            this.elements.customApiDomainGroup.style.display = 'block';
+                        }
+
+                        // Clean up old session-id from settings
+                        if (parsed['session-id']) {
+                            delete parsed['session-id'];
+                            localStorage.setItem('chat-settings', JSON.stringify(parsed));
                         }
                     } catch (e) {
                         console.error('Failed to load settings:', e);
                     }
                 }
+
+                // 更新 MCP 计数显示
+                this.updateMcpCount();
             }
-            
+
             saveSettings() {
+                // 获取选中的技能
+                const selectedSkills = [];
+                document.querySelectorAll('.skill-item input:checked').forEach(checkbox => {
+                    selectedSkills.push(checkbox.value);
+                });
+
+                // 获取启用的 MCP 服务器配置
+                const mcpServers = {};
+                this.customMcpServers.filter(s => s.enabled).forEach(server => {
+                    const serverType = server.config?.server_type || 'unknown';
+                    const config = server.config || {};
+                    // 移除 server_type 避免重复，因为 server_type 已经作为 key
+                    const { server_type, ...configWithoutType } = config;
+                    mcpServers[serverType] = configWithoutType;
+                });
+
+                const mcpSettingsValue = Object.keys(mcpServers).length > 0
+                    ? JSON.stringify([{ mcpServers: mcpServers }])
+                    : '';
+
                 const settings = {
                     'model': document.getElementById('model').value,
                     'api-key': document.getElementById('api-key').value,
@@ -745,178 +2223,536 @@
                     'language': document.getElementById('language').value,
                     'robot-type': document.getElementById('robot-type').value,
                     'dataset-ids': document.getElementById('dataset-ids').value,
-                    'mcp-settings': document.getElementById('mcp-settings').value,
+                    'system-prompt': document.getElementById('system-prompt').value,
+                    'user-identifier': document.getElementById('user-identifier').value,
+                    'skills': selectedSkills.join(','),
+                    'mcp-settings': mcpSettingsValue,
                     'tool-response': document.getElementById('tool-response').checked
                 };
                 localStorage.setItem('chat-settings', JSON.stringify(settings));
             }
-            
+
+            async loadSkills() {
+                const container = this.elements.skillsContainer;
+                const botId = document.getElementById('bot-id')?.value || 'test';
+
+                container.innerHTML = '<div class="skills-loading">加载中...</div>';
+
+                try {
+                    const response = await fetch(`/api/v1/skill/list?bot_id=${botId}`);
+                    if (!response.ok) {
+                        throw new Error('Failed to load skills');
+                    }
+
+                    const data = await response.json();
+                    container.innerHTML = '';
+
+                    if (data.skills && data.skills.length > 0) {
+                        data.skills.forEach(skill => {
+                            const item = document.createElement('label');
+                            item.className = 'skill-item';
+
+                            // 获取当前已选择的技能
+                            const currentSkills = document.getElementById('skills').value.split(',').filter(s => s);
+                            const isChecked = currentSkills.includes(skill.name);
+
+                            item.innerHTML = `
+                                <input type="checkbox" value="${skill.name}" ${isChecked ? 'checked' : ''}>
+                                <div class="skill-item-label">
+                                    <div>${this.escapeHtml(skill.name)}</div>
+                                    <div class="skill-item-desc">${this.escapeHtml(skill.description || '')}</div>
+                                </div>
+                            `;
+
+                            // 事件监听
+                            const checkbox = item.querySelector('input');
+                            checkbox.addEventListener('change', () => {
+                                item.classList.toggle('selected', checkbox.checked);
+                                this.updateSelectedSkills();
+                            });
+
+                            if (isChecked) {
+                                item.classList.add('selected');
+                            }
+
+                            container.appendChild(item);
+                        });
+                    } else {
+                        container.innerHTML = '<div class="skills-loading">暂无可用技能</div>';
+                    }
+                } catch (error) {
+                    console.error('Failed to load skills:', error);
+                    container.innerHTML = '<div class="skills-loading">加载失败，请重试</div>';
+                }
+            }
+
+            updateSelectedSkills() {
+                const selectedSkills = [];
+                document.querySelectorAll('.skill-item input:checked').forEach(checkbox => {
+                    selectedSkills.push(checkbox.value);
+                });
+                document.getElementById('skills').value = selectedSkills.join(',');
+                this.saveSettings();
+            }
+
+            loadChatHistory() {
+                const historyData = localStorage.getItem('chat-sessions');
+                if (historyData) {
+                    try {
+                        this.allSessions = JSON.parse(historyData);
+                    } catch (e) {
+                        this.allSessions = [];
+                    }
+                } else {
+                    this.allSessions = [];
+                }
+
+                // Load or create current session
+                const lastSessionId = localStorage.getItem('current-session-id');
+                if (lastSessionId && this.getSessionById(lastSessionId)) {
+                    this.loadSession(lastSessionId);
+                } else if (this.allSessions.length === 0) {
+                    this.startNewChat();
+                } else {
+                    this.loadSession(this.allSessions[0].id);
+                }
+
+                this.renderChatHistory();
+            }
+
+            getSessionById(sessionId) {
+                return this.allSessions.find(s => s.id === sessionId);
+            }
+
+            saveCurrentSession() {
+                if (!this.currentSessionId) return;
+
+                const sessionData = this.getSessionById(this.currentSessionId);
+                if (sessionData) {
+                    sessionData.messages = this.messages;
+                    sessionData.updatedAt = Date.now();
+                    // Update title from first user message if exists
+                    if (this.messages.length > 0) {
+                        const firstUserMessage = this.messages.find(m => m.role === 'user');
+                        if (firstUserMessage) {
+                            sessionData.title = firstUserMessage.content.slice(0, 30) + (firstUserMessage.content.length > 30 ? '...' : '');
+                        }
+                    }
+                } else {
+                    // Create new session
+                    const newSession = {
+                        id: this.currentSessionId,
+                        title: this.messages.length > 0 ? this.messages[0].content.slice(0, 30) + '...' : '新对话',
+                        messages: this.messages,
+                        createdAt: Date.now(),
+                        updatedAt: Date.now()
+                    };
+                    this.allSessions.unshift(newSession);
+                }
+
+                localStorage.setItem('chat-sessions', JSON.stringify(this.allSessions));
+            }
+
+            loadSession(sessionId) {
+                const session = this.getSessionById(sessionId);
+                if (!session) return;
+
+                // Save current session before switching
+                if (this.currentSessionId && this.currentSessionId !== sessionId) {
+                    this.saveCurrentSession();
+                }
+
+                this.currentSessionId = sessionId;
+                this.messages = session.messages || [];
+                localStorage.setItem('current-session-id', sessionId);
+
+                // Clear and rebuild chat container
+                this.elements.chatContainer.innerHTML = '';
+                this.elements.chatContainer.appendChild(this.elements.welcomeScreen);
+
+                if (this.messages.length === 0) {
+                    this.elements.welcomeScreen.style.display = 'flex';
+                } else {
+                    this.elements.welcomeScreen.style.display = 'none';
+                    this.messages.forEach(msg => {
+                        const messageEl = this.createMessageElement(msg.role, msg.content);
+                        this.elements.chatContainer.appendChild(messageEl);
+                    });
+                    this.scrollToBottom();
+                }
+
+                this.renderChatHistory();
+            }
+
+            deleteSession(sessionId, event) {
+                if (event) event.stopPropagation();
+
+                this.allSessions = this.allSessions.filter(s => s.id !== sessionId);
+                localStorage.setItem('chat-sessions', JSON.stringify(this.allSessions));
+
+                if (this.currentSessionId === sessionId) {
+                    if (this.allSessions.length > 0) {
+                        this.loadSession(this.allSessions[0].id);
+                    } else {
+                        this.startNewChat();
+                    }
+                }
+
+                this.renderChatHistory();
+            }
+
+            renderChatHistory() {
+                const chatHistoryEl = document.getElementById('chat-history');
+                if (!chatHistoryEl) return;
+
+                // Group sessions by date
+                const now = Date.now();
+                const today = [];
+                const last7Days = [];
+                const older = [];
+
+                this.allSessions.forEach(session => {
+                    const daysSince = (now - session.updatedAt) / (1000 * 60 * 60 * 24);
+                    if (daysSince < 1) {
+                        today.push(session);
+                    } else if (daysSince < 7) {
+                        last7Days.push(session);
+                    } else {
+                        older.push(session);
+                    }
+                });
+
+                let html = '';
+
+                const renderSection = (title, sessions) => {
+                    if (sessions.length === 0) return '';
+                    let sectionHtml = `<div class="chat-history-section">
+                        <div class="chat-history-title">${title}</div>`;
+                    sessions.forEach(session => {
+                        const isActive = session.id === this.currentSessionId ? 'active' : '';
+                        const icon = this.getSessionIcon(session);
+                        sectionHtml += `
+                            <div class="chat-history-item ${isActive}" data-session-id="${session.id}">
+                                <div class="chat-history-item-icon">${icon}</div>
+                                <div class="chat-history-item-content">
+                                    <div class="chat-history-item-title">${this.escapeHtml(session.title)}</div>
+                                    <div class="chat-history-item-preview">${this.getPreviewText(session.messages)}</div>
+                                </div>
+                                <div class="chat-history-item-delete" data-delete-session="${session.id}">
+                                    <i data-lucide="trash-2" style="width: 14px; height: 14px;"></i>
+                                </div>
+                            </div>`;
+                    });
+                    sectionHtml += '</div>';
+                    return sectionHtml;
+                };
+
+                html += renderSection('今天', today);
+                html += renderSection('过去 7 天', last7Days);
+                html += renderSection('更早', older);
+
+                chatHistoryEl.innerHTML = html;
+
+                // Add click handlers
+                chatHistoryEl.querySelectorAll('.chat-history-item').forEach(item => {
+                    item.addEventListener('click', (e) => {
+                        if (!e.target.closest('.chat-history-item-delete')) {
+                            this.loadSession(item.dataset.sessionId);
+                        }
+                    });
+                });
+
+                chatHistoryEl.querySelectorAll('.chat-history-item-delete').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        this.deleteSession(btn.dataset.deleteSession, e);
+                    });
+                });
+
+                lucide.createIcons();
+            }
+
+            getSessionIcon(session) {
+                const title = session.title.toLowerCase();
+                if (title.includes('代码') || title.includes('python') || title.includes('js') || title.includes('api')) {
+                    return '<i data-lucide="code" style="width: 16px; height: 16px;"></i>';
+                } else if (title.includes('学习') || title.includes('教程')) {
+                    return '<i data-lucide="book-open" style="width: 16px; height: 16px;"></i>';
+                } else {
+                    return '<i data-lucide="message-square" style="width: 16px; height: 16px;"></i>';
+                }
+            }
+
+            getPreviewText(messages) {
+                if (!messages || messages.length === 0) return '暂无消息';
+                const lastMessage = messages[messages.length - 1];
+                let text = lastMessage.content;
+                // Remove markdown and tool tags for preview
+                text = text.replace(/\[TOOL_CALL\][\s\S]*?\[TOOL_RESPONSE\]/g, '[使用工具]');
+                text = text.replace(/```[\s\S]*?```/g, '[代码]');
+                text = text.replace(/\*\*/g, '').replace(/\*/g, '');
+                if (text.length > 40) text = text.slice(0, 40) + '...';
+                return text;
+            }
+
+            startNewChat() {
+                // Save current session before starting new one
+                if (this.currentSessionId) {
+                    this.saveCurrentSession();
+                }
+
+                // Create new session
+                this.currentSessionId = this.generateUUID();
+                this.messages = [];
+
+                localStorage.setItem('current-session-id', this.currentSessionId);
+
+                // Clear chat container
+                this.elements.chatContainer.innerHTML = '';
+                this.elements.chatContainer.appendChild(this.elements.welcomeScreen);
+                this.elements.welcomeScreen.style.display = 'flex';
+
+                this.renderChatHistory();
+            }
+
             getSettings() {
-                // 获取API域名
+                // 辅助函数：安全获取元素值
+                const getValue = (id, defaultValue = '') => {
+                    const el = document.getElementById(id);
+                    return el?.value ?? defaultValue;
+                };
+
+                // 辅助函数：安全获取 checkbox 状态
+                const getChecked = (id, defaultValue = false) => {
+                    const el = document.getElementById(id);
+                    return el?.checked ?? defaultValue;
+                };
+
                 const apiDomainSelect = document.getElementById('api-domain');
                 let apiUrl;
-                
-                if (apiDomainSelect.value === 'current') {
+
+                if (!apiDomainSelect) {
+                    apiUrl = `${window.location.origin}/api/v1/chat/completions`;
+                } else if (apiDomainSelect.value === 'current') {
                     apiUrl = `${window.location.origin}/api/v1/chat/completions`;
                 } else if (apiDomainSelect.value === 'custom') {
-                    const customDomain = document.getElementById('custom-api-domain').value;
+                    const customDomain = getValue('custom-api-domain');
                     if (customDomain) {
-                        // 确保自定义域名有正确的协议
                         let domain = customDomain.trim();
                         if (!domain.startsWith('http://') && !domain.startsWith('https://')) {
                             domain = 'https://' + domain;
                         }
                         apiUrl = `${domain}/api/v1/chat/completions`;
                     } else {
-                        // 如果自定义域名为空，默认使用当前域名
                         apiUrl = `${window.location.origin}/api/v1/chat/completions`;
                     }
                 } else {
-                    // 使用预定义的域名
                     apiUrl = `${apiDomainSelect.value}/api/v1/chat/completions`;
                 }
-                
-                // 解析数据集ID
-                const datasetIds = document.getElementById('dataset-ids').value
+
+                const datasetIdsValue = getValue('dataset-ids');
+                const datasetIds = datasetIdsValue
                     .split(',')
                     .map(id => id.trim())
                     .filter(id => id);
-                
-                // 解析MCP设置
-                let mcpSettings = {};
-                const mcpSettingsText = document.getElementById('mcp-settings').value;
-                if (mcpSettingsText) {
-                    try {
-                        mcpSettings = JSON.parse(mcpSettingsText);
-                    } catch (e) {
-                        console.warn('Invalid MCP settings JSON:', e);
-                        mcpSettings = {};
-                    }
+
+                const skillsValue = getValue('skills');
+                const skills = skillsValue
+                    .split(',')
+                    .map(skill => skill.trim())
+                    .filter(skill => skill);
+
+                // 直接从 customMcpServers 构建 mcpSettings
+                let mcpSettings = [];
+                const mcpServers = {};
+                this.customMcpServers.filter(s => s.enabled).forEach(server => {
+                    const serverType = server.config?.server_type || 'unknown';
+                    const config = server.config || {};
+                    // 移除 server_type 避免重复，因为 server_type 已经作为 key
+                    const { server_type, ...configWithoutType } = config;
+                    mcpServers[serverType] = configWithoutType;
+                });
+
+                if (Object.keys(mcpServers).length > 0) {
+                    mcpSettings = [{ mcpServers: mcpServers }];
                 }
-                
+
+                // Use current session ID
+                let sessionId = this.currentSessionId;
+                if (!sessionId) {
+                    sessionId = this.generateUUID();
+                    this.currentSessionId = sessionId;
+                    localStorage.setItem('current-session-id', sessionId);
+                }
+
                 return {
-                    apiUrl: apiUrl,
-                    model: document.getElementById('model').value,
-                    apiKey: document.getElementById('api-key').value,
-                    modelServer: document.getElementById('model-server').value,
-                    botId: document.getElementById('bot-id').value,
-                    language: document.getElementById('language').value,
-                    robotType: document.getElementById('robot-type').value,
-                    datasetIds: datasetIds,
-                    mcpSettings: mcpSettings,
-                    toolResponse: document.getElementById('tool-response').checked
+                    apiUrl,
+                    model: getValue('model'),
+                    apiKey: getValue('api-key'),
+                    modelServer: getValue('model-server'),
+                    botId: getValue('bot-id'),
+                    language: getValue('language', 'zh-CN'),
+                    robotType: getValue('robot-type'),
+                    datasetIds,
+                    systemPrompt: getValue('system-prompt'),
+                    sessionId,
+                    userIdentifier: getValue('user-identifier'),
+                    skills,
+                    mcpSettings,
+                    toolResponse: getChecked('tool-response')
                 };
             }
-            
-            updateStatus(status, text) {
-                this.statusIndicator.className = `status-indicator ${status}`;
-                this.statusText.textContent = text;
+
+            generateUUID() {
+                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+                    const r = Math.random() * 16 | 0;
+                    const v = c === 'x' ? r : (r & 0x3 | 0x8);
+                    return v.toString(16);
+                });
             }
-            
+
+            updateStatus(status, text) {
+                this.elements.statusDot.className = 'status-dot';
+                if (status) this.elements.statusDot.classList.add(status);
+                this.elements.statusText.textContent = text;
+            }
+
             async sendMessage() {
                 if (this.isProcessing) return;
-                
-                const message = this.chatInput.value.trim();
+
+                const message = this.elements.chatInput.value.trim();
                 if (!message) return;
-                
-                this.addUserMessage(message);
-                this.chatInput.value = '';
+
+                // Hide welcome screen
+                this.elements.welcomeScreen.style.display = 'none';
+
+                // Add user message
+                this.addMessage('user', message);
+                this.elements.chatInput.value = '';
+                this.elements.chatInput.style.height = 'auto';
                 this.setProcessingState(true);
-                
+
                 try {
                     await this.callAPI(message);
+                    // Save session after successful API call
+                    this.saveCurrentSession();
                 } catch (error) {
-                    this.addErrorMessage(`连接错误: ${error.message}`);
-                    this.updateStatus('disconnected', '连接失败');
+                    this.addError(`连接错误: ${error.message}`);
+                    this.updateStatus('error', '连接失败');
                 } finally {
                     this.setProcessingState(false);
                 }
             }
-            
-            addUserMessage(content) {
-                const messageElement = this.createMessageElement('user', content);
-                this.chatMessages.appendChild(messageElement);
+
+            addMessage(role, content) {
+                // Store message in memory
+                this.messages.push({ role, content });
+
+                const messageEl = this.createMessageElement(role, content);
+                this.elements.chatContainer.appendChild(messageEl);
                 this.scrollToBottom();
+                return messageEl;
             }
-            
-            addAssistantMessage(content) {
-                let messageElement = this.createMessageElement('assistant', '', true);
-                this.chatMessages.appendChild(messageElement);
-                this.scrollToBottom();
-                return messageElement;
-            }
-            
-            addErrorMessage(content) {
-                const errorElement = document.createElement('div');
-                errorElement.className = 'error-message';
-                errorElement.textContent = content;
-                this.chatMessages.appendChild(errorElement);
-                this.scrollToBottom();
-            }
-            
-            createMessageElement(role, content, isTyping = false) {
-                const messageContainer = document.createElement('div');
-                messageContainer.className = `message ${role}`;
-                
+
+            createMessageElement(role, content) {
+                const container = document.createElement('div');
+                container.className = `message ${role}`;
+
                 const avatar = document.createElement('div');
                 avatar.className = 'message-avatar';
-                avatar.textContent = role === 'user' ? 'U' : 'AI';
-                
-                const contentElement = document.createElement('div');
-                contentElement.className = 'message-content';
-                
-                if (isTyping) {
-                    contentElement.innerHTML = `
-                        <div class="typing-indicator">
-                            <span>AI正在思考</span>
-                            <div class="typing-dots">
-                                <div class="typing-dot"></div>
-                                <div class="typing-dot"></div>
-                                <div class="typing-dot"></div>
-                            </div>
-                        </div>
-                    `;
+                if (role === 'assistant') {
+                    avatar.innerHTML = '<i data-lucide="bot" style="width: 20px; height: 20px;"></i>';
                 } else {
-                    // 使用Markdown渲染消息内容
-                    this.updateMessageContent(contentElement, content, role === 'user');
+                    avatar.innerHTML = '<i data-lucide="user" style="width: 20px; height: 20px;"></i>';
                 }
-                
-                messageContainer.appendChild(avatar);
-                messageContainer.appendChild(contentElement);
-                
-                return messageContainer;
+
+                const contentEl = document.createElement('div');
+                contentEl.className = 'message-content';
+                this.updateMessageContent(contentEl, content, role === 'user');
+
+                container.appendChild(avatar);
+                container.appendChild(contentEl);
+
+                lucide.createIcons();
+                return container;
             }
-            
+
+            addTypingIndicator() {
+                const container = document.createElement('div');
+                container.className = 'message assistant';
+                container.id = 'typing-indicator';
+
+                const avatar = document.createElement('div');
+                avatar.className = 'message-avatar';
+                avatar.innerHTML = '<i data-lucide="bot" style="width: 20px; height: 20px;"></i>';
+
+                const contentEl = document.createElement('div');
+                contentEl.className = 'typing-indicator';
+                contentEl.innerHTML = `
+                    <span>AI正在思考</span>
+                    <div class="typing-dots">
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                    </div>
+                `;
+
+                container.appendChild(avatar);
+                container.appendChild(contentEl);
+
+                this.elements.chatContainer.appendChild(container);
+                this.scrollToBottom();
+
+                lucide.createIcons();
+                return container;
+            }
+
+            removeTypingIndicator() {
+                const indicator = document.getElementById('typing-indicator');
+                if (indicator) indicator.remove();
+            }
+
+            addError(message) {
+                const errorEl = document.createElement('div');
+                errorEl.className = 'error-banner';
+                errorEl.innerHTML = `
+                    <i data-lucide="alert-circle" style="width: 16px; height: 16px;"></i>
+                    <span>${message}</span>
+                `;
+                this.elements.chatContainer.appendChild(errorEl);
+                this.scrollToBottom();
+                lucide.createIcons();
+            }
+
             setProcessingState(isProcessing) {
                 this.isProcessing = isProcessing;
-                this.sendButton.disabled = isProcessing;
-                this.chatInput.disabled = isProcessing;
-                
+                this.elements.sendBtn.disabled = isProcessing;
+                this.elements.chatInput.disabled = isProcessing;
+
                 if (isProcessing) {
-                    this.sendButton.textContent = '发送中...';
                     this.updateStatus('connecting', '连接中');
                 } else {
-                    this.sendButton.textContent = '发送';
                     this.updateStatus('', '已连接');
                 }
             }
-            
+
             async callAPI(message) {
                 const settings = this.getSettings();
-                
-                // 创建消息容器
-                let messageElement = this.addAssistantMessage();
-                let contentElement = messageElement.querySelector('.message-content');
-                let accumulatedContent = '';
-                
-                // 创建请求体
+
+                // Create typing indicator
+                this.addTypingIndicator();
+
+                // Add placeholder for assistant message first, then build messages array excluding it
+                let messageEl = this.addMessage('assistant', '');
+                let contentElement = messageEl.querySelector('.message-content');
+
+                // Build messages array for API (exclude the empty assistant message we just added)
+                const apiMessages = this.messages.slice(0, -1).map(msg => ({
+                    role: msg.role,
+                    content: msg.content
+                }));
+
                 const requestBody = {
-                    messages: [
-                        {
-                            role: "user",
-                            content: message
-                        }
-                    ],
+                    messages: apiMessages,
                     stream: true,
                     model: settings.model,
                     model_server: settings.modelServer,
@@ -924,22 +2760,17 @@
                     language: settings.language,
                     tool_response: settings.toolResponse
                 };
-                
-                // 添加可选参数
-                if (settings.robotType) {
-                    requestBody.robot_type = settings.robotType;
-                }
-                
-                if (settings.datasetIds && settings.datasetIds.length > 0) {
-                    requestBody.dataset_ids = settings.datasetIds;
-                }
-                
-                if (Object.keys(settings.mcpSettings).length > 0) {
-                    requestBody.mcp_settings = settings.mcpSettings;
-                }
-                
+
+                // Add optional parameters
+                if (settings.robotType) requestBody.robot_type = settings.robotType;
+                if (settings.systemPrompt) requestBody.system_prompt = settings.systemPrompt;
+                if (settings.sessionId) requestBody.session_id = settings.sessionId;
+                if (settings.userIdentifier) requestBody.user_identifier = settings.userIdentifier;
+                if (settings.skills?.length) requestBody.skills = settings.skills;
+                if (settings.datasetIds?.length) requestBody.dataset_ids = settings.datasetIds;
+                if (settings.mcpSettings?.length) requestBody.mcp_settings = settings.mcpSettings;
+
                 try {
-                    // 使用fetch API发送请求
                     const response = await fetch(settings.apiUrl, {
                         method: 'POST',
                         headers: {
@@ -948,70 +2779,75 @@
                         },
                         body: JSON.stringify(requestBody)
                     });
-                    
+
                     if (!response.ok) {
-                        throw new Error(`HTTP error! status: ${response.status}`);
+                        throw new Error(`HTTP ${response.status}`);
                     }
-                    
+
                     this.updateStatus('', '已连接');
-                    
-                    // 获取响应流
+
+                    // Remove typing indicator
+                    this.removeTypingIndicator();
+
+                    let accumulatedContent = '';
+
                     const reader = response.body.getReader();
                     const decoder = new TextDecoder();
-                    
-                    // 读取流式数据
+
                     while (true) {
                         const { done, value } = await reader.read();
                         if (done) break;
-                        
-                        // 解码数据块
+
                         const chunk = decoder.decode(value, { stream: true });
                         const lines = chunk.split('\n');
-                        
+
                         for (const line of lines) {
                             if (line.startsWith('data: ')) {
                                 const data = line.slice(6);
-                                if (data === '[DONE]') {
-                                    continue;
-                                }
-                                
+                                if (data === '[DONE]') continue;
+
                                 try {
                                     const parsed = JSON.parse(data);
-                                    if (parsed.choices && parsed.choices[0] && 
-                                        parsed.choices[0].delta && 
-                                        parsed.choices[0].delta.content) {
-                                        
-                                        const newContent = parsed.choices[0].delta.content;
-                                        accumulatedContent += newContent;
-                                        
-                                        // 更新消息内容，使用Markdown渲染
+                                    if (parsed.choices?.[0]?.delta?.content) {
+                                        accumulatedContent += parsed.choices[0].delta.content;
                                         this.updateMessageContent(contentElement, accumulatedContent, false);
                                         this.scrollToBottom();
                                     }
-                                } catch (e) {
-                                    console.error('Failed to parse chunk:', e);
-                                }
+                                } catch (e) {}
                             }
                         }
                     }
-                    
-                    // 如果没有内容，显示默认消息
+
                     if (!accumulatedContent) {
-                        this.updateMessageContent(contentElement, '抱歉，我无法处理您的请求。', false);
+                        accumulatedContent = '抱歉，我无法处理您的请求。';
+                        this.updateMessageContent(contentElement, accumulatedContent, false);
                     }
-                    
+
+                    // Update the stored message content
+                    this.messages[this.messages.length - 1] = { role: 'assistant', content: accumulatedContent };
+
                 } catch (error) {
-                    // 如果出错，移除typing指示器并显示错误
-                    this.updateMessageContent(contentElement, `错误: ${error.message}`, false);
+                    this.removeTypingIndicator();
                     throw error;
                 }
-                  }
-            
-            renderMarkdown(content, isUserMessage = false) {
-                // 首先处理标签化内容
-                const processedContent = this.processTaggedContent(content, isUserMessage);
-                
-                // 配置marked选项
+            }
+
+            updateMessageContent(contentElement, content, isUserMessage) {
+                if (isUserMessage) {
+                    contentElement.innerHTML = this.renderSimpleMarkdown(content);
+                } else {
+                    contentElement.innerHTML = this.renderMarkdown(content);
+                }
+
+                // Highlight code blocks
+                contentElement.querySelectorAll('pre code').forEach((block) => {
+                    hljs.highlightElement(block);
+                });
+            }
+
+            renderMarkdown(content) {
+                const processedContent = this.processTaggedContent(content);
+
                 marked.setOptions({
                     highlight: function(code, lang) {
                         if (lang && hljs.getLanguage(lang)) {
@@ -1021,118 +2857,97 @@
                         }
                         return hljs.highlightAuto(code).value;
                     },
-                    breaks: true,  // 支持换行
-                    gfm: true      // 支持GitHub风格的Markdown
+                    breaks: true,
+                    gfm: true
                 });
-                
+
                 return marked.parse(processedContent);
             }
-            
-            processTaggedContent(content, isUserMessage = false) {
-                // 直接根据标签进行切割
+
+            processTaggedContent(content) {
                 const parts = content.split(/\[(ANSWER|TOOL_CALL|TOOL_RESPONSE)\]/);
                 let processedContent = '';
                 let toolCallIndex = 0;
-                
+
                 for (let i = 0; i < parts.length; i += 2) {
-                    const tag = parts[i - 1]; // 前一个标签
-                    const content = parts[i]; // 当前内容
-                    
-                    if (!content || !content.trim()) continue;
-                    
+                    const tag = parts[i - 1];
+                    const text = parts[i];
+
+                    if (!text || !text.trim()) continue;
+
                     if (tag === 'ANSWER') {
-                        // 直接显示ANSWER内容
-                        processedContent += `\n\n${content.trim()}\n\n`;
+                        processedContent += `\n\n${text.trim()}\n\n`;
                     } else if (tag === 'TOOL_CALL') {
-                        // 工具调用折叠显示
-                        const lines = content.trim().split('\n');
+                        const lines = text.trim().split('\n');
                         const toolName = lines[0] || '未知工具';
                         const toolData = lines.slice(1).join('\n').trim();
-                        
                         const toolId = `tool-call-${toolCallIndex++}`;
                         processedContent += `
 <div class="tool-section tool-call">
-    <div class="tool-header collapsed" onclick="toggleToolSection('${toolId}')">
-        <span class="tool-icon">▼</span>
-        <span>🔧 工具调用: <span class="tool-name">${toolName}</span></span>
+    <div class="tool-header collapsed" onclick="window.toggleToolSection('${toolId}')">
+        <span class="tool-icon"><i data-lucide="chevron-down" style="width: 14px; height: 14px;"></i></span>
+        <span>工具调用: <strong>${toolName}</strong></span>
     </div>
     <div class="tool-content collapsed" id="${toolId}">
         <pre>${this.escapeHtml(toolData)}</pre>
     </div>
 </div>`;
                     } else if (tag === 'TOOL_RESPONSE') {
-                        // 工具响应折叠显示
-                        const lines = content.trim().split('\n');
+                        const lines = text.trim().split('\n');
                         const toolName = lines[0] || '未知工具响应';
                         const toolData = lines.slice(1).join('\n').trim();
-                        
                         const toolId = `tool-response-${toolCallIndex++}`;
                         processedContent += `
 <div class="tool-section tool-response">
-    <div class="tool-header collapsed" onclick="toggleToolSection('${toolId}')">
-        <span class="tool-icon">▼</span>
-        <span>📋 工具响应: <span class="tool-name">${toolName}</span></span>
+    <div class="tool-header collapsed" onclick="window.toggleToolSection('${toolId}')">
+        <span class="tool-icon"><i data-lucide="chevron-down" style="width: 14px; height: 14px;"></i></span>
+        <span>工具响应: <strong>${toolName}</strong></span>
     </div>
     <div class="tool-content collapsed" id="${toolId}">
         <pre>${this.escapeHtml(toolData)}</pre>
     </div>
 </div>`;
+                    } else if (!tag) {
+                        processedContent += text;
                     }
                 }
-                
+
                 return processedContent;
             }
-            
+
             escapeHtml(text) {
                 const div = document.createElement('div');
                 div.textContent = text;
                 return div.innerHTML;
             }
-            
-            updateMessageContent(contentElement, content, isUserMessage = false) {
-                if (isUserMessage) {
-                    // 用户消息使用简单的文本渲染，但保留基本的Markdown格式
-                    contentElement.innerHTML = this.renderSimpleMarkdown(content);
-                } else {
-                    // AI助手消息使用完整的Markdown渲染
-                    contentElement.innerHTML = this.renderMarkdown(content);
-                }
-                
-                // 重新高亮代码块
-                contentElement.querySelectorAll('pre code').forEach((block) => {
-                    hljs.highlightElement(block);
-                });
-            }
-            
+
             renderSimpleMarkdown(content) {
-                // 为用户消息提供简单的Markdown渲染
                 return content
-                    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')  // 粗体
-                    .replace(/\*(.*?)\*/g, '<em>$1</em>')              // 斜体
-                    .replace(/`([^`]+)`/g, '<code>$1</code>')          // 行内代码
-                    .replace(/\n/g, '<br>');                           // 换行
+                    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                    .replace(/\*(.*?)\*/g, '<em>$1</em>')
+                    .replace(/`([^`]+)`/g, '<code>$1</code>')
+                    .replace(/\n/g, '<br>');
             }
-            
+
             scrollToBottom() {
-                this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
+                this.elements.chatContainer.scrollTop = this.elements.chatContainer.scrollHeight;
             }
         }
-        
-        // 全局函数：切换工具内容的折叠状态
-        function toggleToolSection(toolId) {
-            const header = document.querySelector(`[onclick="toggleToolSection('${toolId}')"]`);
+
+        // Global function for tool section toggle
+        window.toggleToolSection = function(toolId) {
             const content = document.getElementById(toolId);
-            
-            if (header && content) {
+            const header = content?.previousElementSibling;
+            if (content && header) {
                 header.classList.toggle('collapsed');
                 content.classList.toggle('collapsed');
             }
-        }
-        
-        // 初始化聊天应用
+        };
+
+        // Initialize app
         document.addEventListener('DOMContentLoaded', () => {
             new ChatApp();
         });
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/routes/skill_manager.py b/routes/skill_manager.py
index 30bb197..b955d01 100644
--- a/routes/skill_manager.py
+++ b/routes/skill_manager.py
@@ -140,8 +140,15 @@ async def safe_extract_zip(zip_path: str, extract_dir: str) -> None:
                             f"文件将被解压到目标目录之外: {zip_info.filename}"
                         )
 
-                # 检查符号链接
-                if zip_info.is_symlink():
+                # 检查符号链接（兼容 Python 3.8+）
+                # is_symlink() 方法在 Python 3.9+ 才有，使用 hasattr 兼容旧版本
+                is_symlink = (
+                    hasattr(zip_info, 'is_symlink') and zip_info.is_symlink()
+                ) or (
+                    # 通过 external_attr 检查（兼容所有版本）
+                    (zip_info.external_attr >> 16) & 0o170000 == 0o120000
+                )
+                if is_symlink:
                     raise zipfile.BadZipFile(
                         f"不允许符号链接: {zip_info.filename}"
                     )
diff --git a/utils/fastapi_utils.py b/utils/fastapi_utils.py
index 5ba1f8a..4576f06 100644
--- a/utils/fastapi_utils.py
+++ b/utils/fastapi_utils.py
@@ -371,6 +371,10 @@ def create_project_directory(dataset_ids: Optional[List[str]], bot_id: str, robo
     if robot_type == "general_agent":
         return None
 
+    # 如果 dataset_ids 为空，不创建目录
+    if not dataset_ids:
+        dataset_ids = []
+
     try:
         from utils.multi_project_manager import create_robot_project
         from pathlib import Path
