From 1205a9666115318b79e4f8204ed7641094656c26 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Sat, 18 Apr 2026 00:05:20 +0800
Subject: [PATCH] feat: update ChatHistoryPanel layout and styling for improved
 UI consistency

---
 src/components/chat/ChatHistoryPanel.tsx | 27 ++++++++++--------------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/components/chat/ChatHistoryPanel.tsx b/src/components/chat/ChatHistoryPanel.tsx
index 0cf2cc4..8198732 100644
--- a/src/components/chat/ChatHistoryPanel.tsx
+++ b/src/components/chat/ChatHistoryPanel.tsx
@@ -100,7 +100,7 @@ export default function ChatHistoryPanel({
     };
   }, [menuState]);
 
-  const panelWidthClass = isCompact ? 'md:w-[96px] lg:w-[96px]' : 'md:w-[240px] lg:w-[252px]';
+  const panelWidthClass = isCompact ? 'md:w-[70px] lg:w-[70px]' : 'md:w-[240px] lg:w-[252px]';
 
   return (
     <aside
@@ -118,7 +118,7 @@ export default function ChatHistoryPanel({
               <div className="flex h-12 w-12 flex-none items-center justify-center overflow-hidden rounded-[16px] border border-white bg-white shadow-[0_6px_16px_rgba(15,23,42,0.08)]">
                 <img className="h-full w-full object-cover" src={blueLogo} alt="YINIAN" />
               </div>
-              <div className="truncate text-[20px] font-semibold tracking-[0.06em] text-[#111827] dark:text-gray-50">
+              <div className="truncate text-[20px] font-semibold whitespace-nowrap tracking-[0.06em] text-[#111827] dark:text-gray-50">
                 YINIAN
               </div>
             </div>
@@ -127,21 +127,21 @@ export default function ChatHistoryPanel({
 
           <button
             type="button"
-            className="inline-flex h-8 w-8 items-center justify-center  text-[#64748b] transition-colors hover:border-[#cfd8e3] hover:text-[#111827] dark:border-[#2a2a2d] dark:text-gray-300 dark:hover:border-[#3a3a3f] dark:hover:text-gray-100"
+            className="inline-flex h-12 w-12 items-center justify-center text-[#64748b] transition-colors border border-white hover:text-[#111827] rounded-[14px]  dark:border-[#2a2a2d] dark:text-gray-300 dark:hover:border-[#3a3a3f] dark:hover:text-gray-100"
             title={isCompact ? '展开侧栏' : '收起侧栏'}
             onClick={() => {
               setMenuState(null);
               setIsCompact((current) => !current);
             }}
           >
-            {isCompact ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
+            {isCompact ? <PanelLeftOpen  /> : <PanelLeftClose  />}
           </button>
         </div>
 
         <button
           type="button"
           className={cx(
-            'mt-4 inline-flex h-12 items-center justify-center gap-2 rounded-[14px] border border-[#e3eaf3] bg-white px-4 text-[15px] font-medium text-[#111827] shadow-[0_4px_14px_rgba(15,23,42,0.05)] transition-all hover:-translate-y-px hover:border-[#d5e3f4] hover:shadow-[0_10px_24px_rgba(15,23,42,0.08)] dark:border-[#2a2a2d] dark:bg-[#202024] dark:text-gray-100 dark:hover:border-[#3a3a3f]',
+            'mt-4 inline-flex h-12 items-center justify-center gap-2 rounded-lg border border-[#e3eaf3] bg-white px-4 text-[15px] font-medium text-[#111827] shadow-[0_4px_14px_rgba(15,23,42,0.05)] transition-all hover:-translate-y-px hover:border-[#d5e3f4] hover:shadow-[0_10px_24px_rgba(15,23,42,0.08)] dark:border-[#2a2a2d] dark:bg-[#202024] dark:text-gray-100 dark:hover:border-[#3a3a3f]',
             isCompact && 'px-0',
           )}
           title="新对话"
@@ -171,9 +171,9 @@ export default function ChatHistoryPanel({
 
                 return (
                   <section key={bucket.key} className="mb-4 last:mb-0">
-                    <button
+                    {bucket.sessions.length ? (<button
                       type="button"
-                      className="flex w-full items-center justify-between rounded-[12px] px-1 py-1 text-left transition-colors hover:bg-[#eef4fb] dark:hover:bg-[#222225]"
+                      className="flex w-full items-center justify-between rounded-lg px-4 py-4 text-left transition-colors border border-[#e5edf7] dark:border-[#2f3136] dark:bg-[#202024]"
                       aria-expanded={!isCollapsed}
                       onClick={() => {
                         setMenuState(null);
@@ -193,7 +193,8 @@ export default function ChatHistoryPanel({
                           isCollapsed && '-rotate-90',
                         )}
                       />
-                    </button>
+                    </button>) : null}
+                    
 
                     {!isCollapsed ? (
                       <ul className="mt-2 space-y-2">
@@ -207,9 +208,9 @@ export default function ChatHistoryPanel({
                                 <button
                                   type="button"
                                   className={cx(
-                                    'flex w-full items-center gap-2 rounded-[14px] px-3 py-3 pr-11 text-left text-[12px] transition-all',
+                                    'flex w-full items-center gap-2 rounded-lg px-3 py-3 pr-11 text-left text-[12px] transition-all',
                                     isActive
-                                      ? 'border border-[#e5edf7] bg-white text-[#111827] shadow-[0_4px_14px_rgba(15,23,42,0.06)] dark:border-[#2f3136] dark:bg-[#202024] dark:text-gray-50'
+                                      ? 'text-[#111827] shadow-[0_4px_14px_rgba(15,23,42,0.06)] dark:text-gray-50'
                                       : 'border border-transparent text-[#5b6472] hover:border-[#e5edf7] hover:bg-white hover:text-[#111827] hover:shadow-[0_4px_14px_rgba(15,23,42,0.05)] dark:text-gray-400 dark:hover:border-[#2a2a2d] dark:hover:bg-[#202024] dark:hover:text-gray-100',
                                   )}
                                   onClick={() => {
@@ -293,12 +294,6 @@ export default function ChatHistoryPanel({
                 );
               })
             : null}
-
-          {isCompact && hasSessions ? (
-            <div className="mt-4 rounded-[18px] border border-dashed border-[#dbe7f4] bg-white px-3 py-4 text-center text-xs text-[#94a3b8] shadow-[0_4px_14px_rgba(15,23,42,0.04)] dark:border-[#2a2a2d] dark:bg-[#202024] dark:text-gray-500">
-              已收起历史
-            </div>
-          ) : null}
         </div>
       </div>
     </aside>