style(side-panel): 调整样式和布局

- 修改 ChatInput 组件的边框颜色和按钮样式
- 更新 SidePanel 组件的头部边框颜色
-调整 TemplateList 组件的标题文本
- 优化 SidePanel 组件的整体布局

pages/side-panel/src/SidePanel.css

@@ -60,13 +60,13 @@ code {
   align-items: center;
   padding: 0.75rem;
   background-color: transparent;
-  border-bottom: 1px solid rgba(14, 165, 233, 0.2);
+  border-bottom: 1px solid rgba(199,204,207, 0.5);
 }
 
 /* Dark mode header border */
 @media (prefers-color-scheme: dark) {
   .header {
-    border-bottom: 1px solid rgba(14, 165, 233, 0.3);
+    border-bottom: 1px solid rgba(199,204,207, 0.6);
   }
 }
 

pages/side-panel/src/SidePanel.tsx

@@ -10,6 +10,8 @@ import ChatInput from './components/ChatInput';
 import ChatHistoryList from './components/ChatHistoryList';
 import { EventType, type AgentEvent, ExecutionState } from './types/event';
 import './SidePanel.css';
+import TemplateList from './components/TemplateList';
+import { defaultTemplates } from './templates';
 
 const SidePanel = () => {
   const [messages, setMessages] = useState<Message[]>([]);
@@ -537,7 +539,7 @@ const SidePanel = () => {
   return (
     <div>
       <div
-        className={`flex h-screen flex-col ${isDarkMode ? 'bg-slate-900' : ''} overflow-hidden border ${isDarkMode ? 'border-sky-800' : 'border-[rgb(186,230,253)]'} rounded-2xl`}>
+        className={`flex h-screen flex-col ${isDarkMode ? 'bg-slate-900' : ''} overflow-hidden border ${isDarkMode ? 'border-sky-800' : 'border-[rgb(199,204,207)]'} rounded-2xl`}>
         {showHistory ? (
           <div className="flex-1 overflow-hidden">
             <ChatHistoryList
@@ -561,6 +563,13 @@ const SidePanel = () => {
                     {/*<span className="text-black">作为你的智能伙伴，我既能写文案、想点子，又能陪你聊天、答疑解惑。</span>*/}
                   </div>
                 </div>
+                {/*<div>*/}
+                {/*  <TemplateList*/}
+                {/*    templates={defaultTemplates}*/}
+                {/*    onTemplateSelect={handleTemplateSelect}*/}
+                {/*    isDarkMode={isDarkMode}*/}
+                {/*  />*/}
+                {/*</div>*/}
               </>
             )}
             <div
@@ -580,7 +589,7 @@ const SidePanel = () => {
                       className={`header-icon ${isDarkMode ? 'text-sky-400 hover:text-sky-300' : 'text-sky-400 hover:text-sky-500'} cursor-pointer`}
                       aria-label="New Chat"
                       tabIndex={0}>
-                      <PiPlusBold size={20} />
+                      <PiPlusBold size={18} color={isDarkMode ? '#fff' : '#808080'} />
                     </button>
                     <button
                       type="button"
@@ -589,7 +598,7 @@ const SidePanel = () => {
                       className={`header-icon ${isDarkMode ? 'text-sky-400 hover:text-sky-300' : 'text-sky-400 hover:text-sky-500'} cursor-pointer`}
                       aria-label="Load History"
                       tabIndex={0}>
-                      <GrHistory size={20} />
+                      <GrHistory size={17} color={isDarkMode ? '#fff' : '#808080'} />
                     </button>
                   </>
                 )}
@@ -600,7 +609,7 @@ const SidePanel = () => {
                   className={`header-icon ${isDarkMode ? 'text-sky-400 hover:text-sky-300' : 'text-sky-400 hover:text-sky-500'} cursor-pointer`}
                   aria-label="Settings"
                   tabIndex={0}>
-                  <FiSettings size={20} />
+                  <FiSettings size={18} color={isDarkMode ? '#fff' : '#808080'} />
                 </button>
               </div>
             </header>

pages/side-panel/src/components/ChatInput.tsx

@@ -74,7 +74,7 @@ export default function ChatInput({
   return (
     <form
       onSubmit={handleSubmit}
-      className={`overflow-hidden rounded-lg border transition-colors ${disabled ? 'cursor-not-allowed' : 'focus-within:border-sky-400 hover:border-sky-400'} ${isDarkMode ? 'border-slate-700' : ''}`}
+      className={`overflow-hidden rounded-lg border transition-colors ${disabled ? 'cursor-not-allowed' : 'focus-within:border-gray-400 hover:border '} ${isDarkMode ? 'border-slate-700' : ''}`}
       aria-label="Chat input form">
       <div className="flex flex-col">
         <textarea
@@ -116,7 +116,7 @@ export default function ChatInput({
               type="submit"
               disabled={isSendButtonDisabled}
               aria-disabled={isSendButtonDisabled}
-              className={`rounded-md bg-[#19C2FF] px-3 py-1 text-white transition-colors hover:enabled:bg-[#0073DC] ${isSendButtonDisabled ? 'cursor-not-allowed opacity-50' : ''}`}>
+              className={`rounded-md bg-[#746a6a] px-3 py-1 text-white transition-colors hover:enabled:bg-[#000000] ${isSendButtonDisabled ? 'cursor-not-allowed opacity-50' : ''}`}>
               发送
             </button>
           )}

pages/side-panel/src/components/TemplateList.tsx

@@ -14,7 +14,7 @@ interface TemplateListProps {
 const TemplateList: React.FC<TemplateListProps> = ({ templates, onTemplateSelect, isDarkMode = false }) => {
   return (
     <div className="p-2">
-      <h3 className={`mb-3 text-sm font-medium ${isDarkMode ? 'text-gray-200' : 'text-gray-700'}`}>Quick Start</h3>
+      <h3 className={`mb-3 text-sm font-medium ${isDarkMode ? 'text-gray-200' : 'text-gray-700'}`}>快速入门</h3>
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
         {templates.map(template => (
           <button