Aura
/
aura-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(chat): use select model picker in composer

main
sp mac bookpro 2605 2026-05-29 14:11:22 +08:00
parent 6ad8a1517f
commit f665030ee6
2 changed files with 107 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/pages/ChatPage.tsx
View File

@ -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>

78
src/styles.css
View File

@ -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;