From d7bf0e5c9dd0e76511e138c8a17901b44b6e2544 Mon Sep 17 00:00:00 2001
From: sp mac bookpro 2605 <spmacbookpro2605@spdeMacBook-Pro.local>
Date: Sat, 6 Jun 2026 14:11:49 +0800
Subject: [PATCH] chat: reposition session actions and refine history drawer

---
 src/components/SessionSidebar.tsx         |  11 +-
 src/components/icons.tsx                  |   2 +-
 src/pages/chat/components/ChatDrawers.tsx |  18 ++-
 src/pages/chat/components/ChatInput.tsx   | 138 +++++++++++-----------
 src/styles.css                            |  16 ++-
 5 files changed, 108 insertions(+), 77 deletions(-)

diff --git a/src/components/SessionSidebar.tsx b/src/components/SessionSidebar.tsx
index 5dc321d..f243473 100644
--- a/src/components/SessionSidebar.tsx
+++ b/src/components/SessionSidebar.tsx
@@ -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%' }}>
-      <Button type="primary" onClick={handleNew} style={{ marginBottom: 8, background: c.primaryBtn }} block>
-        ➕ 新对话
-      </Button>
+      {showNewButton && (
+        <Button type="primary" onClick={handleNew} style={{ marginBottom: 8, background: c.primaryBtn }} block>
+          ➕ 新对话
+        </Button>
+      )}
 
       <Input.Search
         placeholder="搜索会话与消息…"
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index 215ee49..5e38d8d 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -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>
diff --git a/src/pages/chat/components/ChatDrawers.tsx b/src/pages/chat/components/ChatDrawers.tsx
index f40a17a..1d5c2bc 100644
--- a/src/pages/chat/components/ChatDrawers.tsx
+++ b/src/pages/chat/components/ChatDrawers.tsx
@@ -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" />
diff --git a/src/pages/chat/components/ChatInput.tsx b/src/pages/chat/components/ChatInput.tsx
index c2c2383..1e43c96 100644
--- a/src/pages/chat/components/ChatInput.tsx
+++ b/src/pages/chat/components/ChatInput.tsx
@@ -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,82 +71,84 @@ 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-stack">
-          <Input.TextArea
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            placeholder="问我任何问题..."
-            autoSize={{ minRows: 3, maxRows: 10 }}
-            onKeyDown={(e) => {
-              if (e.key !== 'Enter') return;
-              if ((e as any).isComposing) return;
+        <div className="chat-input-card">
+          <div className="chat-input-stack">
+            <Input.TextArea
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder="问我任何问题..."
+              autoSize={{ minRows: 3, maxRows: 10 }}
+              onKeyDown={(e) => {
+                if (e.key !== 'Enter') return;
+                if ((e as any).isComposing) return;
 
-              if (e.metaKey || e.ctrlKey) {
-                e.preventDefault();
-                const el = e.currentTarget;
-                const start = el.selectionStart ?? input.length;
-                const end = el.selectionEnd ?? input.length;
-                const next = input.slice(0, start) + '\n' + input.slice(end);
-                setInput(next);
-                requestAnimationFrame(() => {
-                  el.selectionStart = el.selectionEnd = start + 1;
-                });
-                return;
-              }
+                if (e.metaKey || e.ctrlKey) {
+                  e.preventDefault();
+                  const el = e.currentTarget;
+                  const start = el.selectionStart ?? input.length;
+                  const end = el.selectionEnd ?? input.length;
+                  const next = input.slice(0, start) + '\n' + input.slice(end);
+                  setInput(next);
+                  requestAnimationFrame(() => {
+                    el.selectionStart = el.selectionEnd = start + 1;
+                  });
+                  return;
+                }
 
-              if (!e.shiftKey && !e.altKey) {
-                e.preventDefault();
-                onSend();
-              }
-            }}
-            className="chat-input-textarea"
-            disabled={sending}
-          />
+                if (!e.shiftKey && !e.altKey) {
+                  e.preventDefault();
+                  onSend();
+                }
+              }}
+              className="chat-input-textarea"
+              disabled={sending}
+            />
 
-          <div className="chat-input-toolbar">
-            <div className="chat-input-toolbar-left">
-              <Select
-                value={activeModelValue || undefined}
-                className="chat-model-select"
-                popupMatchSelectWidth={false}
-                options={modelOptions}
-                suffixIcon={<DownOutlined className="chat-model-select-arrow" />}
-                placeholder="选择模型"
-                onChange={onChangeModel}
-              />
+            <div className="chat-input-toolbar">
+              <div className="chat-input-toolbar-left">
+                <Select
+                  value={activeModelValue || undefined}
+                  className="chat-model-select"
+                  popupMatchSelectWidth={false}
+                  options={modelOptions}
+                  suffixIcon={<DownOutlined className="chat-model-select-arrow" />}
+                  placeholder="选择模型"
+                  onChange={onChangeModel}
+                />
 
-              <Upload
-                className="chat-upload"
-                multiple
-                beforeUpload={(_f, files) => {
-                  onAttach(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" className="chat-tool-button" icon={<PaperClipOutlined style={{ fontSize: 18 }} />} />
-              </Upload>
-              <Button type="text" className="chat-tool-button" icon={<BookOutlined style={{ fontSize: 18 }} />} onClick={onOpenTpl} />
+                <Upload
+                  className="chat-upload"
+                  multiple
+                  beforeUpload={(_f, files) => {
+                    onAttach(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" className="chat-tool-button" icon={<PaperClipOutlined style={{ fontSize: 18 }} />} />
+                </Upload>
+                <Button type="text" className="chat-tool-button" icon={<BookOutlined style={{ fontSize: 18 }} />} onClick={onOpenTpl} />
+              </div>
+
+              {sending ? (
+                <Button danger shape="circle" onClick={onStop} icon={<span className="chat-stop-icon" />} className="chat-send-button" />
+              ) : (
+                <Button
+                  type="primary"
+                  shape="circle"
+                  onClick={onSend}
+                  icon={<ArrowUpOutlined />}
+                  disabled={!input.trim()}
+                  className="chat-send-button chat-send-button-primary"
+                />
+              )}
             </div>
-
-            {sending ? (
-              <Button danger shape="circle" onClick={onStop} icon={<span className="chat-stop-icon" />} className="chat-send-button" />
-            ) : (
-              <Button
-                type="primary"
-                shape="circle"
-                onClick={onSend}
-                icon={<ArrowUpOutlined />}
-                disabled={!input.trim()}
-                className="chat-send-button chat-send-button-primary"
-              />
-            )}
           </div>
         </div>
       </div>
diff --git a/src/styles.css b/src/styles.css
index cea0cde..60e862c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -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;