From f665030ee6c189778ffedb3dbe74b5890e28f07e Mon Sep 17 00:00:00 2001
From: sp mac bookpro 2605 <spmacbookpro2605@spdeMacBook-Pro.local>
Date: Fri, 29 May 2026 14:11:22 +0800
Subject: [PATCH] refactor(chat): use select model picker in composer

---
 src/pages/ChatPage.tsx | 102 ++++++++++++-----------------------------
 src/styles.css         |  78 +++++++++++++++++++++++++++++++
 2 files changed, 107 insertions(+), 73 deletions(-)

diff --git a/src/pages/ChatPage.tsx b/src/pages/ChatPage.tsx
index 4d23e08..d86e8e8 100644
--- a/src/pages/ChatPage.tsx
+++ b/src/pages/ChatPage.tsx
@@ -1,5 +1,5 @@
 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 { Button, Input, Space, Tag, App as AntApp, Popconfirm, Empty, Collapse, Switch, Drawer, Slider, InputNumber, Upload, Tooltip, Modal, Image as AntImage, Divider, Dropdown, Select } 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';
@@ -418,9 +418,15 @@ export default function ChatPage() {
     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;
+  const selectedModelKey = activeModelValue || '__default__';
+  const modelSelectOptions = [
+    {
+      value: '__default__',
+      label: `跟随默认 · ${defaultModelLabel}`
+    },
+    ...modelOptions
+  ];
 
   return (
     <div className="chat-shell">
@@ -639,7 +645,7 @@ export default function ChatPage() {
           </div>
 
           <div className="chat-input-card">
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: '100%' }}>
+            <div className="chat-input-stack">
               <Input.TextArea
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
@@ -653,73 +659,23 @@ export default function ChatPage() {
                 }}
                 className="chat-input-textarea"
                 disabled={sending}
-                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 || '__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>
+              <div className="chat-input-toolbar">
+                <div className="chat-input-toolbar-left">
+                  <Select
+                    value={selectedModelKey}
+                    className="chat-model-select"
+                    popupMatchSelectWidth={false}
+                    options={modelSelectOptions}
+                    suffixIcon={<DownOutlined className="chat-model-select-arrow" />}
+                    onChange={(value) =>
+                      setOverrides((o) => ({
+                        ...o,
+                        model: value === '__default__' ? undefined : String(value)
+                      }))
+                    }
+                  />
 
                   <Upload
                     multiple
@@ -740,8 +696,8 @@ export default function ChatPage() {
                     danger
                     shape="circle"
                     onClick={handleStop}
-                    icon={<div style={{ width: 10, height: 10, background: 'currentColor', borderRadius: 2 }} />}
-                    style={{ width: 40, height: 40, flexShrink: 0 }}
+                    icon={<span className="chat-stop-icon" />}
+                    className="chat-send-button"
                   />
                 ) : (
                   <Button
@@ -750,13 +706,13 @@ export default function ChatPage() {
                     onClick={handleSend}
                     icon={<ArrowUpOutlined />}
                     disabled={!input.trim()}
-                    style={{ background: 'var(--color-brand)', border: 'none', width: 40, height: 40, flexShrink: 0 }}
+                    className="chat-send-button chat-send-button-primary"
                   />
                 )}
               </div>
             </div>
           </div>
-          <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--color-text-tertiary)', marginTop: 8 }}>
+          <div className="chat-disclaimer">
             AI 可能会产生错误信息，请核实重要信息。
           </div>
         </div>
diff --git a/src/styles.css b/src/styles.css
index 4b35f30..c73bc38 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -561,6 +561,84 @@ body {
   box-shadow: var(--shadow-focus);
 }
 
+.chat-input-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.chat-input-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 8px;
+  border-top: 1px solid var(--color-border);
+}
+
+.chat-input-toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.chat-model-select {
+  min-width: 240px;
+  max-width: 320px;
+}
+
+.chat-model-select .ant-select-selector {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  padding: 0 24px 0 0 !important;
+}
+
+.chat-model-select .ant-select-selection-item {
+  color: var(--color-text);
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.chat-model-select .ant-select-selection-placeholder {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+}
+
+.chat-model-select-arrow {
+  font-size: 10px;
+  color: var(--color-text-tertiary);
+}
+
+.chat-send-button {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+}
+
+.chat-send-button-primary {
+  background: var(--color-brand);
+  border: none;
+}
+
+.chat-stop-icon {
+  display: block;
+  width: 10px;
+  height: 10px;
+  background: currentColor;
+  border-radius: 2px;
+}
+
+.chat-disclaimer {
+  text-align: center;
+  font-size: 11px;
+  color: var(--color-text-tertiary);
+  margin-top: 8px;
+}
+
 .agent-model-dropdown-trigger {
   width: 100%;
   min-height: 42px;