chat: reposition session actions and refine history drawer

main
sp mac bookpro 2605 2026-06-06 14:11:49 +08:00
parent 3f5b737fbb
commit d7bf0e5c9d
5 changed files with 108 additions and 77 deletions

View File

@ -9,9 +9,10 @@ interface Props {
onChange: (sessionId: string, options?: { highlightMessageId?: string }) => void;
refreshTick?: number;
theme?: 'light' | 'dark';
showNewButton?: boolean;
}
export default function SessionSidebar({ agentId, activeSessionId, onChange, refreshTick, theme = 'light' }: Props) {
export default function SessionSidebar({ agentId, activeSessionId, onChange, refreshTick, theme = 'light', showNewButton = true }: Props) {
const { message } = AntApp.useApp();
const [tab, setTab] = useState<'active' | 'archived'>('active');
const [active, setActive] = useState<ChatSession[]>([]);
@ -269,9 +270,11 @@ export default function SessionSidebar({ agentId, activeSessionId, onChange, ref
return (
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
{showNewButton && (
<Button type="primary" onClick={handleNew} style={{ marginBottom: 8, background: c.primaryBtn }} block>
</Button>
)}
<Input.Search
placeholder="搜索会话与消息…"

View File

@ -67,7 +67,7 @@ export function NewChatIcon(props: SVGProps<SVGSVGElement>) {
<path
fillRule="evenodd"
clipRule="evenodd"
fill="var(--theme-icon-brand)"
fill="currentColor"
d="M128 22C69.458 22 22 69.458 22 128v96c0 5.523 4.477 10 10 10h96c58.542 0 106-47.458 106-106S186.542 22 128 22Zm0 56c5.523 0 10 4.477 10 10v30h30c5.523 0 10 4.477 10 10s-4.477 10-10 10h-30v30c0 5.523-4.477 10-10 10s-10-4.477-10-10v-30H88c-5.523 0-10-4.477-10-10s4.477-10 10-10h30V88c0-5.523 4.477-10 10-10Z"
/>
</g>

View File

@ -1,4 +1,4 @@
import { Button, Drawer, Empty, InputNumber, Slider } from 'antd';
import { Button, Drawer, Dropdown, Empty, InputNumber, Slider } from 'antd';
import type { Agent, ModelOverrides } from '../../../api';
import McpResourcesDrawer from '../../../components/McpResourcesDrawer';
import SessionSidebar from '../../../components/SessionSidebar';
@ -142,12 +142,25 @@ export default function ChatDrawers(props: {
</Drawer>
<Drawer
title="历史对话"
title="聊天记录"
placement="right"
width={320}
onClose={() => setHistoryDrawerOpen(false)}
open={historyDrawerOpen}
styles={{ body: { padding: 0 } }}
extra={
<Dropdown
trigger={['click']}
menu={{
items: [
{ key: 'select', label: '选择', disabled: true },
{ key: 'clear', label: '清除所有对话', disabled: true }
]
}}
>
<Button type="text"></Button>
</Dropdown>
}
>
{agentId ? (
<SessionSidebar
@ -159,6 +172,7 @@ export default function ChatDrawers(props: {
setHistoryDrawerOpen(false);
}}
refreshTick={sessionRefresh}
showNewButton={false}
/>
) : (
<Empty description="未选择 Agent" />

View File

@ -63,7 +63,7 @@ export default function ChatInput(props: {
))}
</div>
<div className="chat-input-card">
<div className="chat-input-card-wrap">
<div className="chat-input-actions">
<Tooltip title="历史记录">
<Button size="small" type="text" className="chat-input-action-btn" icon={<HistoryIcon />} onClick={onOpenHistory}>
@ -71,11 +71,12 @@ export default function ChatInput(props: {
</Button>
</Tooltip>
<Tooltip title="新增会话">
<Button size="small" type="text" className="chat-input-action-btn" icon={<NewChatIcon />} onClick={onNewSession}>
<Button size="small" type="text" className="chat-input-action-btn chat-input-action-btn-primary" icon={<NewChatIcon />} onClick={onNewSession}>
</Button>
</Tooltip>
</div>
<div className="chat-input-card">
<div className="chat-input-stack">
<Input.TextArea
value={input}
@ -150,6 +151,7 @@ export default function ChatInput(props: {
</div>
</div>
</div>
</div>
<div className="chat-disclaimer">AI </div>
</div>

View File

@ -749,13 +749,16 @@ body {
padding: 14px 16px 12px;
min-height: 110px;
box-shadow: var(--shadow-sm);
}
.chat-input-card-wrap {
position: relative;
}
.chat-input-actions {
position: absolute;
top: 10px;
right: 12px;
top: -10px;
right: 8px;
display: flex;
gap: 4px;
z-index: 2;
@ -772,6 +775,15 @@ body {
color: var(--color-text);
}
.chat-input-action-btn-primary {
color: var(--color-brand);
}
.chat-input-action-btn-primary:hover {
color: var(--color-brand);
opacity: 0.9;
}
.chat-input-stack {
display: flex;
flex-direction: column;