From 1d79e929f97353eb53fe6d1f156aad21d5fd0c26 Mon Sep 17 00:00:00 2001
From: sp mac bookpro 2605 <spmacbookpro2605@spdeMacBook-Pro.local>
Date: Fri, 29 May 2026 13:58:04 +0800
Subject: [PATCH] feat(chat): load allowed llms per agent

---
 src/api.ts                |   9 +
 src/pages/AgentEditor.tsx |  39 +-
 src/pages/ChatPage.tsx    | 732 +++++++++++++++++++-------------------
 src/styles.css            |  76 +++-
 4 files changed, 464 insertions(+), 392 deletions(-)

diff --git a/src/api.ts b/src/api.ts
index 948559e..99a635e 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -512,8 +512,17 @@ export interface LLMProvider {
   updatedAt: number;
 }
 
+export interface AgentAllowedLLMResponse {
+  agentId: string;
+  model: string;
+}
+
 export const LLMProviderAPI = {
   list: () => api.get<LLMProvider[]>('/llm-providers').then((r) => r.data),
+  allowedModels: (agentId: string) =>
+    api
+      .get<AgentAllowedLLMResponse>('/llm-providers', { params: { agent_id: agentId } })
+      .then((r) => r.data),
   create: (payload: Partial<LLMProvider> & { apiKey?: string }) =>
     api.post<{ id: string }>('/llm-providers', payload).then((r) => r.data),
   update: (id: string, payload: Partial<LLMProvider> & { apiKey?: string }) =>
diff --git a/src/pages/AgentEditor.tsx b/src/pages/AgentEditor.tsx
index 82f42c2..cd4efee 100644
--- a/src/pages/AgentEditor.tsx
+++ b/src/pages/AgentEditor.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { Button, Form, Input, InputNumber, Modal, Upload, App as AntApp, List, Popconfirm, Tag, Switch, Select, Collapse } from 'antd';
+import { Button, Form, Input, InputNumber, Modal, Upload, App as AntApp, List, Popconfirm, Tag, Switch, Select, Collapse, Checkbox } from 'antd';
 import type { UploadFile } from 'antd/es/upload/interface';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Agent, AgentAPI, ImageAPI, KnowledgeStatus, SkillType, Team, TeamAPI, AiModel, ModelAPI } from '../api';
@@ -493,33 +493,30 @@ export default function AgentEditor() {
                         Array.isArray(value) ? value.map((item) => String(item).trim()).filter(Boolean).join(', ') : ''
                       }
                     >
-                      <Select
-                        mode="multiple"
-                        placeholder="选择模型"
-                        style={{ height: 42 }}
-                        dropdownStyle={{ borderRadius: 12 }}
-                        maxTagCount="responsive"
-                        optionFilterProp="value"
-                        options={models.map((m) => {
+                      <Checkbox.Group className="agent-model-checkbox-group">
+                        {models.map((m) => {
                           const inputPrice = 2 * m.model_ratio;
                           const outputPrice = inputPrice * m.completion_ratio;
-                          return {
-                            value: m.model_name,
-                            label: (
-                              <div className="flex items-center justify-between w-full py-1">
-                                  <div className="flex items-center gap-2" style={{ flex: 1, minWidth: 0 }}>
-                                    <img src={m.icon || DEFAULT_RH_40X40_GRAY} alt={m.model_name} style={{ width: 20, height: 20, objectFit: 'contain', borderRadius: 4, flexShrink: 0 }} />
-                                    <span className="font-medium text-gray-800" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.model_name}</span>
-                                  </div>
-                                <div className="flex flex-col items-end justify-center text-[10px] text-gray-400" style={{ flexShrink: 0, marginLeft: 8 }}>
+                          return (
+                            <Checkbox key={m.model_name} value={m.model_name} className="agent-model-checkbox-item">
+                              <div className="agent-model-checkbox-content">
+                                <div className="agent-model-checkbox-meta">
+                                  <img
+                                    src={m.icon || DEFAULT_RH_40X40_GRAY}
+                                    alt={m.model_name}
+                                    className="agent-model-checkbox-icon"
+                                  />
+                                  <span className="agent-model-checkbox-name">{m.model_name}</span>
+                                </div>
+                                <div className="agent-model-checkbox-price">
                                   <span>输入: ${inputPrice.toFixed(2)}/M</span>
                                   <span>输出: ${outputPrice.toFixed(2)}/M</span>
                                 </div>
                               </div>
-                            ),
-                          };
+                            </Checkbox>
+                          );
                         })}
-                      />
+                      </Checkbox.Group>
                     </Form.Item>
                     <Form.Item
                       name="temperature"
diff --git a/src/pages/ChatPage.tsx b/src/pages/ChatPage.tsx
index 6b49ed0..4d23e08 100644
--- a/src/pages/ChatPage.tsx
+++ b/src/pages/ChatPage.tsx
@@ -1,19 +1,19 @@
 import { useEffect, useRef, useState } from 'react';
-import { Button, Input, Space, Tag, App as AntApp, Popconfirm, Empty, Collapse, Switch, Drawer, Slider, InputNumber, Upload, Tooltip, Modal, Image as AntImage, Divider, Dropdown } from 'antd';
-import { SettingOutlined, ApiOutlined, EditOutlined, DeleteOutlined, PaperClipOutlined, BookOutlined, ArrowUpOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons';
+import { Button, Input, Space, Tag, App as AntApp, Popconfirm, Empty, Collapse, Switch, Drawer, Slider, InputNumber, Upload, Tooltip, Modal, Image as AntImage, Divider, Dropdown } from 'antd';
+import { SettingOutlined, ApiOutlined, EditOutlined, DeleteOutlined, PaperClipOutlined, BookOutlined, ArrowUpOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
 import {
   Agent,
   AgentAPI,
+  AgentAllowedLLMResponse,
   BranchInfo,
   ChatAPI,
   ChatAttachment,
   ChatAttachmentsAPI,
   ChatMessage,
   ImageAPI,
-  LLMProvider,
-  LLMProviderAPI,
+  LLMProviderAPI,
   ModelOverrides,
   RetrievedSnippet,
   SessionAPI,
@@ -32,6 +32,12 @@ interface StreamingState {
   toolCalls: ToolCallTrace[];
 }
 
+const parseAllowedModels = (payload?: Pick<AgentAllowedLLMResponse, 'model'> | null) =>
+  String(payload?.model || '')
+    .split(',')
+    .map((item) => item.trim())
+    .filter(Boolean);
+
 export default function ChatPage() {
   const { id } = useParams();
   const navigate = useNavigate();
@@ -46,13 +52,13 @@ export default function ChatPage() {
   const [sessionId, setSessionId] = useState<string | null>(null);
   const [highlightId, setHighlightId] = useState<string | null>(null);
   const [sessionRefresh, setSessionRefresh] = useState(0);
-  const [agentList, setAgentList] = useState<Agent[]>([]);
-  const [historyDrawerOpen, setHistoryDrawerOpen] = useState(false);
+  const [agentList, setAgentList] = useState<Agent[]>([]);
+  const [historyDrawerOpen, setHistoryDrawerOpen] = useState(false);
   const [mcpDrawerOpen, setMcpDrawerOpen] = useState(false);
   const [paramsDrawerOpen, setParamsDrawerOpen] = useState(false);
   const [tplDrawerOpen, setTplDrawerOpen] = useState(false);
   const [overrides, setOverrides] = useState<ModelOverrides>({});
-  const [providers, setProviders] = useState<LLMProvider[]>([]);
+  const [allowedModels, setAllowedModels] = useState<string[]>([]);
   const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
   const [imageUrls, setImageUrls] = useState<string[]>([]);
   const [uploadingAtt, setUploadingAtt] = useState(false);
@@ -86,33 +92,34 @@ export default function ChatPage() {
     });
   };
 
-  const loadAgent = async () => {
-    if (!id) {
-      setAgent(null);
-      setMessages([]);
-      return;
-    }
-    const a = await AgentAPI.detail(id);
-    setAgent(a);
-  };
-
-  const loadAgentList = async () => {
-    try {
-      const list = await AgentAPI.list();
-      setAgentList(list);
-    } catch (e) {
-      // ignore
-    }
-  };
-
-  const loadProviders = async () => {
-    try {
-      const list = await LLMProviderAPI.list();
-      setProviders(list.filter((item) => item.enabled));
-    } catch (e: any) {
-      msg.error('加载模型列表失败：' + (e?.message ?? e));
-    }
-  };
+  const loadAgent = async () => {
+    if (!id) {
+      setAgent(null);
+      setMessages([]);
+      return;
+    }
+    const a = await AgentAPI.detail(id);
+    setAgent(a);
+  };
+
+  const loadAgentList = async () => {
+    try {
+      const list = await AgentAPI.list();
+      setAgentList(list);
+    } catch (e) {
+      // ignore
+    }
+  };
+
+  const loadAllowedModels = async (agentId: string) => {
+    try {
+      const result = await LLMProviderAPI.allowedModels(agentId);
+      setAllowedModels(parseAllowedModels(result));
+    } catch (e: any) {
+      setAllowedModels([]);
+      msg.error('加载智能体模型失败：' + (e?.message ?? e));
+    }
+  };
 
   const loadMessages = async () => {
     if (!id || !sessionId) return;
@@ -132,21 +139,29 @@ export default function ChatPage() {
     });
   };
 
-  useEffect(() => {
-    loadAgentList();
-  }, []);
-
-  useEffect(() => {
-    loadAgent();
-    loadProviders();
-    return () => abortRef.current?.abort();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id]);
-
-  useEffect(() => {
-    if (!id) return;
-    loadMessages();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    loadAgentList();
+  }, []);
+
+  useEffect(() => {
+    if (!id) {
+      setAgent(null);
+      setMessages([]);
+      setAllowedModels([]);
+      setOverrides({});
+      return () => abortRef.current?.abort();
+    }
+    loadAgent();
+    loadAllowedModels(id);
+    setOverrides({});
+    return () => abortRef.current?.abort();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  useEffect(() => {
+    if (!id) return;
+    loadMessages();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sessionId, highlightId, id]);
 
   /** 把附件文本拼成 system 注入字符串 */
@@ -257,16 +272,16 @@ export default function ChatPage() {
     };
     setMessages((m) => [...m, tempUser]);
     scrollBottom();
-    const attText = buildAttachmentsText();
+    const attText = buildAttachmentsText();
     try {
-      const res = await ChatAPI.send(
-        id,
-        text,
-        sessionId,
-        overrides,
-        attText || undefined,
-        imageUrls.length > 0 ? imageUrls : undefined
-      );
+      const res = await ChatAPI.send(
+        id,
+        text,
+        sessionId,
+        overrides,
+        attText || undefined,
+        imageUrls.length > 0 ? imageUrls : undefined
+      );
       setMessages((m) => [...m.filter((x) => x.id !== tempUser.id), res.user, res.assistant]);
       setSessionRefresh((t) => t + 1);
       setAttachments([]);
@@ -396,148 +411,130 @@ export default function ChatPage() {
     }
   };
 
-  const isImageUrl = (url: string) => url?.startsWith('http') || url?.startsWith('/');
-  const agentModel = agent?.model || '';
-  const activeModelValue = overrides.model || agentModel;
-  const defaultProvider = providers.find((item) => item.isDefault) || providers[0];
-  const modelOptions = providers.flatMap((provider) =>
-    (provider.models?.length ? provider.models : [provider.defaultModel]).filter(Boolean).map((modelName) => ({
-      value: `${provider.id}/${modelName}`,
-      label: `${modelName}`,
-      providerName: provider.name
-    }))
-  );
-  const activeModelOption = modelOptions.find((item) => item.value === activeModelValue);
-  const fallbackModelName = activeModelValue.includes('/') ? activeModelValue.split('/').slice(1).join('/') : activeModelValue;
-  const currentModelName = activeModelOption?.label || fallbackModelName || agentModel || defaultProvider?.defaultModel || '默认模型';
-  const currentProviderName =
-    activeModelOption?.providerName ||
-    (activeModelValue.includes('/') ? providers.find((item) => item.id === activeModelValue.split('/')[0])?.name : defaultProvider?.name) ||
-    (agentModel ? '当前 Agent 配置' : defaultProvider?.name || '系统默认');
-
-  return (
-    <div className="chat-shell">
-      {/* 1. 二级侧边栏：智能体列表 */}
-      <aside
-        className="chat-side"
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 0,
-          background: 'var(--color-surface)',
-          borderRight: '1px solid var(--color-border)',
-          width: 260
-        }}
-      >
-        <div style={{ padding: '16px', borderBottom: '1px solid var(--color-border)' }}>
-          <Button block type="dashed" onClick={() => navigate('/agents/new')}>+ 创建智能体</Button>
-        </div>
-        <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0' }}>
-          {agentList.map((a) => {
-            const isActive = a.id === id;
-            return (
-              <div
-                key={a.id}
-                onClick={() => navigate(`/chat/${a.id}`)}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 12,
-                  padding: '10px 16px',
-                  cursor: 'pointer',
-                  background: isActive ? 'var(--color-surface-2)' : 'transparent',
-                  borderLeft: `3px solid ${isActive ? 'var(--color-brand)' : 'transparent'}`,
-                  transition: 'background 0.2s'
-                }}
-              >
-                <div
-                  style={{
-                    width: 32,
-                    height: 32,
-                    borderRadius: '50%',
-                    background: a.avatar || 'var(--gradient-brand)',
-                    color: '#fff',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontWeight: 700,
-                    fontSize: 14,
-                    overflow: 'hidden'
-                  }}
-                >
-                  {isImageUrl(a.avatar) ? (
-                    <img src={a.avatar} className="w-full h-full object-cover" alt="avatar" />
-                  ) : (
-                    (a.name?.charAt(0) || '?').toUpperCase()
-                  )}
-                </div>
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ fontWeight: isActive ? 600 : 500, fontSize: 14, color: 'var(--color-text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                    {a.name}
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </aside>
-
-      {/* 2. 主聊天区 */}
-      <section className="chat-main" style={{ flex: 1, display: 'flex', flexDirection: 'column', position: 'relative' }}>
-        {!agent ? (
-          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-            <Empty description="请在左侧选择一个智能体开始对话" />
-          </div>
-        ) : (
-          <>
-            {/* Header */}
-            <div className="chat-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 24px' }}>
-              <div>
-                <div style={{ fontWeight: 600, fontSize: 16, color: 'var(--color-text)' }}>{agent.name}</div>
-                <div style={{ fontSize: 12, color: 'var(--color-text-tertiary)' }}>
-                  {agent.model || '默认模型'} · T={agent.temperature}
-                </div>
-              </div>
-              <Space>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginRight: 12 }}>
-                  <span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>流式输出</span>
-                  <Switch size="small" checked={useStream} onChange={setUseStream} />
-                </div>
-                <Button size="small" onClick={() => setHistoryDrawerOpen(true)}>历史对话</Button>
-                <Dropdown
-                  menu={{
-                    items: [
-                      { key: 'params', label: '模型参数', icon: <SettingOutlined />, onClick: () => setParamsDrawerOpen(true) },
-                      { key: 'mcp', label: 'MCP 资源', icon: <ApiOutlined />, onClick: () => setMcpDrawerOpen(true) },
-                      { key: 'edit', label: '管理 Agent', icon: <EditOutlined />, onClick: () => navigate(`/agents/${id}`) },
-                      { type: 'divider' },
-                      { key: 'clear', label: '清空对话', icon: <DeleteOutlined />, danger: true, onClick: () => {
-                          Modal.confirm({
-                            title: '清空当前会话所有消息？',
-                            onOk: handleClear
-                          });
-                        }
-                      }
-                    ]
-                  }}
-                >
-                  <Button size="small">更多 <DownOutlined /></Button>
-                </Dropdown>
-              </Space>
-            </div>
-
-            {/* Body */}
+  const isImageUrl = (url: string) => url?.startsWith('http') || url?.startsWith('/');
+  const agentModel = agent?.model || '';
+  const modelOptions = allowedModels.map((modelName) => ({
+    value: modelName,
+    label: modelName
+  }));
+  const activeModelValue = overrides.model || '';
+  const activeModelOption = modelOptions.find((item) => item.value === activeModelValue);
+  const defaultModelLabel = allowedModels.length > 0 ? allowedModels.join(', ') : agentModel || '默认模型';
+  const currentModelName = activeModelOption?.label || activeModelValue || defaultModelLabel;
+
+  return (
+    <div className="chat-shell">
+      {/* 1. 二级侧边栏：智能体列表 */}
+      <aside className="chat-side">
+        <div style={{ padding: '16px', borderBottom: '1px solid var(--color-border)' }}>
+          <Button block type="dashed" onClick={() => navigate('/agents/new')}>+ 创建智能体</Button>
+        </div>
+        <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0' }}>
+          {agentList.map((a) => {
+            const isActive = a.id === id;
+            return (
+              <div
+                key={a.id}
+                onClick={() => navigate(`/chat/${a.id}`)}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 12,
+                  padding: '10px 16px',
+                  cursor: 'pointer',
+                  background: isActive ? 'var(--color-surface-2)' : 'transparent',
+                  borderLeft: `3px solid ${isActive ? 'var(--color-brand)' : 'transparent'}`,
+                  transition: 'background 0.2s'
+                }}
+              >
+                <div
+                  style={{
+                    width: 32,
+                    height: 32,
+                    borderRadius: '50%',
+                    background: a.avatar || 'var(--gradient-brand)',
+                    color: '#fff',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontWeight: 700,
+                    fontSize: 14,
+                    overflow: 'hidden'
+                  }}
+                >
+                  {isImageUrl(a.avatar) ? (
+                    <img src={a.avatar} className="w-full h-full object-cover" alt="avatar" />
+                  ) : (
+                    (a.name?.charAt(0) || '?').toUpperCase()
+                  )}
+                </div>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ fontWeight: isActive ? 600 : 500, fontSize: 14, color: 'var(--color-text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {a.name}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </aside>
+
+      {/* 2. 主聊天区 */}
+      <section className="chat-main">
+        {!agent ? (
+          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Empty description="请在左侧选择一个智能体开始对话" />
+          </div>
+        ) : (
+          <>
+            {/* Header */}
+            <div className="chat-header">
+              <div>
+                <div style={{ fontWeight: 600, fontSize: 16, color: 'var(--color-text)' }}>{agent.name}</div>
+                <div style={{ fontSize: 12, color: 'var(--color-text-tertiary)' }}>
+                  {agent.model || '默认模型'} · T={agent.temperature}
+                </div>
+              </div>
+              <Space>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginRight: 12 }}>
+                  <span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>流式输出</span>
+                  <Switch size="small" checked={useStream} onChange={setUseStream} />
+                </div>
+                <Button size="small" onClick={() => setHistoryDrawerOpen(true)}>历史对话</Button>
+                <Dropdown
+                  menu={{
+                    items: [
+                      { key: 'params', label: '模型参数', icon: <SettingOutlined />, onClick: () => setParamsDrawerOpen(true) },
+                      { key: 'mcp', label: 'MCP 资源', icon: <ApiOutlined />, onClick: () => setMcpDrawerOpen(true) },
+                      { key: 'edit', label: '管理 Agent', icon: <EditOutlined />, onClick: () => navigate(`/agents/${id}`) },
+                      { type: 'divider' },
+                      { key: 'clear', label: '清空对话', icon: <DeleteOutlined />, danger: true, onClick: () => {
+                          Modal.confirm({
+                            title: '清空当前会话所有消息？',
+                            onOk: handleClear
+                          });
+                        }
+                      }
+                    ]
+                  }}
+                >
+                  <Button size="small">更多 <DownOutlined /></Button>
+                </Dropdown>
+              </Space>
+            </div>
+
+            {/* Body */}
             <div ref={bodyRef} className="chat-body">
           <div className="messages-container">
             {messages.length === 0 && !streaming.active ? (
-              <div style={{ textAlign: 'center', marginTop: 120 }}>
-                <div
-                  style={{
-                  width: 68, height: 68, borderRadius: '50%',
-                  background: agent.avatar || 'var(--gradient-brand)',
-                  color: '#fff', display: 'flex', alignItems: 'center',
-                  justifyContent: 'center', fontWeight: 700, fontSize: 32,
-                  margin: '0 auto 20px', boxShadow: 'var(--shadow-lg)',
+              <div style={{ textAlign: 'center', marginTop: 120 }}>
+                <div
+                  style={{
+                  width: 68, height: 68, borderRadius: '50%',
+                  background: agent.avatar || 'var(--gradient-brand)',
+                  color: '#fff', display: 'flex', alignItems: 'center',
+                  justifyContent: 'center', fontWeight: 700, fontSize: 32,
+                  margin: '0 auto 20px', boxShadow: 'var(--shadow-lg)',
                   overflow: 'hidden'
                 }}>
                   {isImageUrl(agent.avatar) ? (
@@ -546,20 +543,20 @@ export default function ChatPage() {
                     (agent.name?.charAt(0) || '?').toUpperCase()
                   )}
                 </div>
-                <h2
-                  style={{
-                    fontSize: 28,
-                    fontWeight: 700,
-                    color: 'var(--color-text)',
-                    marginBottom: 8,
-                    letterSpacing: '-0.02em'
-                  }}
-                >
-                  你好，今天想一起完成什么？
-                </h2>
-                <p style={{ color: 'var(--color-text-secondary)', fontSize: 15, lineHeight: 1.7 }}>
-                  {agent.description || '我是你的专属 AI 助手，随时准备为你服务。'}
-                </p>
+                <h2
+                  style={{
+                    fontSize: 28,
+                    fontWeight: 700,
+                    color: 'var(--color-text)',
+                    marginBottom: 8,
+                    letterSpacing: '-0.02em'
+                  }}
+                >
+                  你好，今天想一起完成什么？
+                </h2>
+                <p style={{ color: 'var(--color-text-secondary)', fontSize: 15, lineHeight: 1.7 }}>
+                  {agent.description || '我是你的专属 AI 助手，随时准备为你服务。'}
+                </p>
               </div>
             ) : (
               <>
@@ -583,7 +580,7 @@ export default function ChatPage() {
                       {streaming.text ? (
                         <ReactMarkdown>{streaming.text + '▍'}</ReactMarkdown>
                       ) : (
-                        <span style={{ color: 'var(--color-text-tertiary)' }}>思考中…</span>
+                        <span style={{ color: 'var(--color-text-tertiary)' }}>思考中…</span>
                       )}
                     </div>
                     {(streaming.retrieved.length > 0 || streaming.toolCalls.length > 0) && (
@@ -624,7 +621,7 @@ export default function ChatPage() {
                   src={u}
                   width={48}
                   height={48}
-                  style={{ objectFit: 'cover', borderRadius: 8, border: '1px solid var(--color-border)' }}
+                  style={{ objectFit: 'cover', borderRadius: 8, border: '1px solid var(--color-border)' }}
                 />
                 <Button
                   size="small"
@@ -641,13 +638,13 @@ export default function ChatPage() {
             ))}
           </div>
 
-          <div className="chat-input-card">
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: '100%' }}>
+          <div className="chat-input-card">
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: '100%' }}>
               <Input.TextArea
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
                 placeholder="问我任何问题..."
-                autoSize={{ minRows: 3, maxRows: 10 }}
+                autoSize={{ minRows: 3, maxRows: 10 }}
                 onPressEnter={(e) => {
                   if (!e.shiftKey) {
                     e.preventDefault();
@@ -656,120 +653,119 @@ export default function ChatPage() {
                 }}
                 className="chat-input-textarea"
                 disabled={sending}
-                style={{ width: '100%' }}
+                style={{ width: '100%' }}
               />
 
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                  gap: 12,
-                  paddingTop: 8,
-                  borderTop: '1px solid var(--color-border)'
-                }}
-              >
-                <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, minWidth: 0 }}>
-                  <Dropdown
-                    trigger={['hover']}
-                    placement="topLeft"
-                    menu={{
-                      selectedKeys: activeModelValue ? [activeModelValue] : [],
-                      onClick: ({ key }) =>
-                        setOverrides((o) => ({
-                          ...o,
-                          model: String(key) === '__default__' ? undefined : String(key)
-                        })),
-                      items: [
-                        {
-                          key: '__default__',
-                          label: `跟随默认 · ${agentModel || defaultProvider?.defaultModel || '默认模型'}`
-                        },
-                        ...modelOptions.map((item) => ({
-                          key: item.value,
-                          label: `${item.label}`,
-                          extra: item.providerName
-                        }))
-                      ]
-                    }}
-                  >
-                    <button
-                      type="button"
-                      style={{
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        gap: 6,
-                        minWidth: 0,
-                        padding: '0 2px',
-                        background: 'transparent',
-                        border: 'none',
-                        color: 'var(--color-text-secondary)',
-                        cursor: 'pointer',
-                        fontSize: 13,
-                        lineHeight: 1.2
-                      }}
-                    >
-                      <span
-                        style={{
-                          maxWidth: 240,
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
-                          fontWeight: 500,
-                          color: 'var(--color-text)'
-                        }}
-                      >
-                        {currentModelName}
-                      </span>
-                      <DownOutlined style={{ fontSize: 10, color: 'var(--color-text-tertiary)' }} />
-                    </button>
-                  </Dropdown>
-
-                  <Upload
-                    multiple
-                    beforeUpload={(_f, files) => {
-                      handleAttach(files as File[]);
-                      return false;
-                    }}
-                    showUploadList={false}
-                    accept=".txt,.md,.markdown,.json,.csv,.pdf,.docx,.html,.htm,image/png,image/jpeg,image/webp,image/gif"
-                  >
-                    <Button type="text" icon={<PaperClipOutlined style={{ fontSize: 18 }} />} />
-                  </Upload>
-                  <Button type="text" icon={<BookOutlined style={{ fontSize: 18 }} />} onClick={() => setTplDrawerOpen(true)} />
-                </div>
-
-                {sending ? (
-                  <Button
-                    danger
-                    shape="circle"
-                    onClick={handleStop}
-                    icon={<div style={{ width: 10, height: 10, background: 'currentColor', borderRadius: 2 }} />}
-                    style={{ width: 40, height: 40, flexShrink: 0 }}
-                  />
-                ) : (
-                  <Button
-                    type="primary"
-                    shape="circle"
-                    onClick={handleSend}
-                    icon={<ArrowUpOutlined />}
-                    disabled={!input.trim()}
-                    style={{ background: 'var(--color-brand)', border: 'none', width: 40, height: 40, flexShrink: 0 }}
-                  />
-                )}
-              </div>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: 12,
+                  paddingTop: 8,
+                  borderTop: '1px solid var(--color-border)'
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, minWidth: 0 }}>
+                  <Dropdown
+                    trigger={['hover']}
+                    placement="topLeft"
+                    menu={{
+                      selectedKeys: [activeModelValue || '__default__'],
+                      onClick: ({ key }) =>
+                        setOverrides((o) => ({
+                          ...o,
+                          model: String(key) === '__default__' ? undefined : String(key)
+                        })),
+                      items: [
+                        {
+                          key: '__default__',
+                          label: `跟随默认 · ${defaultModelLabel}`
+                        },
+                        ...modelOptions.map((item) => ({
+                          key: item.value,
+                          label: `${item.label}`
+                        }))
+                      ]
+                    }}
+                  >
+                    <button
+                      type="button"
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: 6,
+                        minWidth: 0,
+                        padding: '0 2px',
+                        background: 'transparent',
+                        border: 'none',
+                        color: 'var(--color-text-secondary)',
+                        cursor: 'pointer',
+                        fontSize: 13,
+                        lineHeight: 1.2
+                      }}
+                    >
+                      <span
+                        style={{
+                          maxWidth: 240,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          fontWeight: 500,
+                          color: 'var(--color-text)'
+                        }}
+                      >
+                        {currentModelName}
+                      </span>
+                      <DownOutlined style={{ fontSize: 10, color: 'var(--color-text-tertiary)' }} />
+                    </button>
+                  </Dropdown>
+
+                  <Upload
+                    multiple
+                    beforeUpload={(_f, files) => {
+                      handleAttach(files as File[]);
+                      return false;
+                    }}
+                    showUploadList={false}
+                    accept=".txt,.md,.markdown,.json,.csv,.pdf,.docx,.html,.htm,image/png,image/jpeg,image/webp,image/gif"
+                  >
+                    <Button type="text" icon={<PaperClipOutlined style={{ fontSize: 18 }} />} />
+                  </Upload>
+                  <Button type="text" icon={<BookOutlined style={{ fontSize: 18 }} />} onClick={() => setTplDrawerOpen(true)} />
+                </div>
+
+                {sending ? (
+                  <Button
+                    danger
+                    shape="circle"
+                    onClick={handleStop}
+                    icon={<div style={{ width: 10, height: 10, background: 'currentColor', borderRadius: 2 }} />}
+                    style={{ width: 40, height: 40, flexShrink: 0 }}
+                  />
+                ) : (
+                  <Button
+                    type="primary"
+                    shape="circle"
+                    onClick={handleSend}
+                    icon={<ArrowUpOutlined />}
+                    disabled={!input.trim()}
+                    style={{ background: 'var(--color-brand)', border: 'none', width: 40, height: 40, flexShrink: 0 }}
+                  />
+                )}
+              </div>
             </div>
           </div>
-          <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--color-text-tertiary)', marginTop: 8 }}>
-            AI 可能会产生错误信息，请核实重要信息。
-          </div>
-        </div>
-          </>
-        )}
-      </section>
-
-      {/* ---- 抽屉组件保持不变 ---- */}
-      {id && (
+          <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--color-text-tertiary)', marginTop: 8 }}>
+            AI 可能会产生错误信息，请核实重要信息。
+          </div>
+        </div>
+          </>
+        )}
+      </section>
+
+      {/* ---- 抽屉组件保持不变 ---- */}
+      {id && (
         <McpResourcesDrawer
           agentId={id}
           open={mcpDrawerOpen}
@@ -799,17 +795,17 @@ export default function ChatPage() {
         onClose={() => setParamsDrawerOpen(false)}
         width={380}
       >
-        <div
-          style={{
-            marginBottom: 16,
-            padding: 12,
-            background: 'var(--color-warning-soft)',
-            borderRadius: 10,
-            fontSize: 12,
-            color: 'var(--color-warning)',
-            border: '1px solid var(--color-border)'
-          }}
-        >
+        <div
+          style={{
+            marginBottom: 16,
+            padding: 12,
+            background: 'var(--color-warning-soft)',
+            borderRadius: 10,
+            fontSize: 12,
+            color: 'var(--color-warning)',
+            border: '1px solid var(--color-border)'
+          }}
+        >
           💡 这里设置的参数会临时覆盖智能体的默认配置，<b>仅作用于当前浏览器会话</b>，不会写回到智能体本身。<br />
           关闭页面或清空字段即可恢复默认。
         </div>
@@ -817,7 +813,7 @@ export default function ChatPage() {
         <div style={{ marginBottom: 24 }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
             <span>🌡 Temperature（创造性）</span>
-            <span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>
+            <span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>
               默认：{agent?.temperature ?? 0.7}
             </span>
           </div>
@@ -839,7 +835,7 @@ export default function ChatPage() {
         <div style={{ marginBottom: 24 }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
             <span>🎯 Top P（核采样）</span>
-            <span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>未设置时跟随模型默认</span>
+            <span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>未设置时跟随模型默认</span>
           </div>
           <Slider
             min={0.1}
@@ -863,7 +859,7 @@ export default function ChatPage() {
         <div style={{ marginBottom: 24 }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
             <span>📏 Max Tokens（生成长度上限）</span>
-            <span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>未设置时由模型决定</span>
+            <span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>未设置时由模型决定</span>
           </div>
           <InputNumber
             value={overrides.maxTokens}
@@ -875,34 +871,34 @@ export default function ChatPage() {
           />
         </div>
 
-        <Button block onClick={() => setOverrides({})}>
-          🔄 全部恢复默认
-        </Button>
-      </Drawer>
-
-      <Drawer
-        title="历史对话"
-        placement="right"
-        width={320}
-        onClose={() => setHistoryDrawerOpen(false)}
-        open={historyDrawerOpen}
-        bodyStyle={{ padding: 0 }}
-      >
-        {id && (
-          <SessionSidebar
-            agentId={id}
-            activeSessionId={sessionId}
-            onChange={(sid, opts) => {
-              setSessionId(sid);
-              setHighlightId(opts?.highlightMessageId || null);
-              setHistoryDrawerOpen(false);
-            }}
-            refreshTick={sessionRefresh}
-          />
-        )}
-      </Drawer>
-    </div>
-  );
+        <Button block onClick={() => setOverrides({})}>
+          🔄 全部恢复默认
+        </Button>
+      </Drawer>
+
+      <Drawer
+        title="历史对话"
+        placement="right"
+        width={320}
+        onClose={() => setHistoryDrawerOpen(false)}
+        open={historyDrawerOpen}
+        bodyStyle={{ padding: 0 }}
+      >
+        {id && (
+          <SessionSidebar
+            agentId={id}
+            activeSessionId={sessionId}
+            onChange={(sid, opts) => {
+              setSessionId(sid);
+              setHighlightId(opts?.highlightMessageId || null);
+              setHistoryDrawerOpen(false);
+            }}
+            refreshTick={sessionRefresh}
+          />
+        )}
+      </Drawer>
+    </div>
+  );
 }
 
 /** 输入栏子组件 */
diff --git a/src/styles.css b/src/styles.css
index d53921f..f21cdaa 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -463,12 +463,12 @@ body {
 }
 
 .chat-side {
-  width: 280px;
+  width: 260px;
   border-right: 1px solid var(--color-border);
-  padding: 16px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  gap: 0;
   height: 100%;
   background: var(--color-surface);
 }
@@ -479,6 +479,7 @@ body {
   flex-direction: column;
   background: var(--color-bg);
   min-width: 0;
+  position: relative;
 }
 
 .chat-header {
@@ -487,7 +488,7 @@ body {
   border-bottom: 1px solid var(--color-border);
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   background: var(--color-surface);
 }
 
@@ -560,6 +561,75 @@ body {
   box-shadow: var(--shadow-focus);
 }
 
+.agent-model-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.agent-model-checkbox-item {
+  display: flex;
+  align-items: flex-start;
+  margin-inline-start: 0;
+  padding: 12px 14px;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  background: var(--color-surface);
+}
+
+.agent-model-checkbox-item .ant-checkbox {
+  margin-top: 3px;
+}
+
+.agent-model-checkbox-item .ant-checkbox + span {
+  width: 100%;
+  padding-inline-start: 10px;
+}
+
+.agent-model-checkbox-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+}
+
+.agent-model-checkbox-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+}
+
+.agent-model-checkbox-icon {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.agent-model-checkbox-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+.agent-model-checkbox-price {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: 8px;
+  font-size: 10px;
+  color: var(--color-text-tertiary);
+}
+
 .chat-input-textarea {
   border: none !important;
   box-shadow: none !important;