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

@@ -8,10 +8,10 @@ import { type Message, Actors, chatHistoryStore } from '@extension/storage';
 import MessageList from './components/MessageList';
 import ChatInput from './components/ChatInput';
 import ChatHistoryList from './components/ChatHistoryList';
-import TemplateList from './components/TemplateList';
 import { EventType, type AgentEvent, ExecutionState } from './types/event';
-import { defaultTemplates } from './templates';
 import './SidePanel.css';
+import TemplateList from './components/TemplateList';
+import { defaultTemplates } from './templates';
 
 const SidePanel = () => {
   const [messages, setMessages] = useState<Message[]>([]);
@@ -539,61 +539,14 @@ 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`}>
-        <header className="header relative">
-          <div className="header-logo">
-            {showHistory ? (
-              <button
-                type="button"
-                onClick={handleBackToChat}
-                className={`${isDarkMode ? 'text-sky-400 hover:text-sky-300' : 'text-sky-400 hover:text-sky-500'} cursor-pointer`}
-                aria-label="返回聊天">
-                ← 返回
-              </button>
-            ) : (
-              <img src="/icon.png" alt="Extension Logo" className="size-6" />
-            )}
-          </div>
-          <div className="header-icons">
-            {!showHistory && (
-              <>
-                <button
-                  type="button"
-                  onClick={handleNewChat}
-                  onKeyDown={e => e.key === 'Enter' && handleNewChat()}
-                  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} />
-                </button>
-                <button
-                  type="button"
-                  onClick={handleLoadHistory}
-                  onKeyDown={e => e.key === 'Enter' && handleLoadHistory()}
-                  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} />
-                </button>
-              </>
-            )}
-            <button
-              type="button"
-              onClick={() => chrome.runtime.openOptionsPage()}
-              onKeyDown={e => e.key === 'Enter' && chrome.runtime.openOptionsPage()}
-              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} />
-            </button>
-          </div>
-        </header>
+        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
               sessions={chatSessions}
               onSessionSelect={handleSessionSelect}
               onSessionDelete={handleSessionDelete}
+              handleBackToChat={handleBackToChat}
               visible={true}
               isDarkMode={isDarkMode}
             />
@@ -602,18 +555,13 @@ const SidePanel = () => {
           <>
             {messages.length === 0 && (
               <>
-                <div
-                  className={`border-t ${isDarkMode ? 'border-sky-900' : 'border-sky-100'} mb-2 p-2 shadow-sm backdrop-blur-sm`}>
-                  <ChatInput
-                    onSendMessage={handleSendMessage}
-                    onStopTask={handleStopTask}
-                    disabled={!inputEnabled || isHistoricalSession}
-                    showStopButton={showStopButton}
-                    setContent={setter => {
-                      setInputTextRef.current = setter;
-                    }}
-                    isDarkMode={isDarkMode}
-                  />
+                <div className="w-full h-full pt-20">
+                  <div className="max-w-[720px] text-left m-auto p-5">
+                    <p className="font-black text-4xl mb-4 text-black">你好,</p>
+                    <p className="font-black text-3xl mb-4 text-black">我是PVS智能助手,</p>
+                    <p className="font-black text-2xl mb-4 text-black">我今天能帮你什么？</p>
+                    {/*<span className="text-black">作为你的智能伙伴，我既能写文案、想点子，又能陪你聊天、答疑解惑。</span>*/}
+                  </div>
                 </div>
                 {/*<div>*/}
                 {/*  <TemplateList*/}
@@ -629,21 +577,55 @@ const SidePanel = () => {
               <MessageList messages={messages} isDarkMode={isDarkMode} />
               <div ref={messagesEndRef} />
             </div>
-            {messages.length > 0 && (
-              <div
-                className={`border-t ${isDarkMode ? 'border-sky-900' : 'border-sky-100'} p-2 shadow-sm backdrop-blur-sm`}>
-                <ChatInput
-                  onSendMessage={handleSendMessage}
-                  onStopTask={handleStopTask}
-                  disabled={!inputEnabled || isHistoricalSession}
-                  showStopButton={showStopButton}
-                  setContent={setter => {
-                    setInputTextRef.current = setter;
-                  }}
-                  isDarkMode={isDarkMode}
-                />
+            <header className="header relative">
+              <div className="header-logo"></div>
+              <div className="header-icons">
+                {!showHistory && (
+                  <>
+                    <button
+                      type="button"
+                      onClick={handleNewChat}
+                      onKeyDown={e => e.key === 'Enter' && handleNewChat()}
+                      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={18} color={isDarkMode ? '#fff' : '#808080'} />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleLoadHistory}
+                      onKeyDown={e => e.key === 'Enter' && handleLoadHistory()}
+                      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={17} color={isDarkMode ? '#fff' : '#808080'} />
+                    </button>
+                  </>
+                )}
+                <button
+                  type="button"
+                  onClick={() => chrome.runtime.openOptionsPage()}
+                  onKeyDown={e => e.key === 'Enter' && chrome.runtime.openOptionsPage()}
+                  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={18} color={isDarkMode ? '#fff' : '#808080'} />
+                </button>
               </div>
-            )}
+            </header>
+            <div
+              className={`border-t ${isDarkMode ? 'border-sky-900' : 'border-sky-100'} p-2 shadow-sm backdrop-blur-sm`}>
+              <ChatInput
+                onSendMessage={handleSendMessage}
+                onStopTask={handleStopTask}
+                disabled={!inputEnabled || isHistoricalSession}
+                showStopButton={showStopButton}
+                setContent={setter => {
+                  setInputTextRef.current = setter;
+                }}
+                isDarkMode={isDarkMode}
+              />
+            </div>
           </>
         )}
       </div>

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

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import { FaTrash } from 'react-icons/fa';
 
 interface ChatSession {
@@ -11,19 +10,22 @@ interface ChatHistoryListProps {
   sessions: ChatSession[];
   onSessionSelect: (sessionId: string) => void;
   onSessionDelete: (sessionId: string) => void;
+  handleBackToChat: () => void;
   visible: boolean;
   isDarkMode?: boolean;
 }
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
 const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
   sessions,
   onSessionSelect,
   onSessionDelete,
+  handleBackToChat,
   visible,
   isDarkMode = false,
 }) => {
   if (!visible) return null;
-
   const formatDate = (timestamp: number) => {
     const date = new Date(timestamp);
     return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
@@ -31,7 +33,17 @@ const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
 
   return (
     <div className="h-full overflow-y-auto p-4">
-      <h2 className={`mb-4 text-lg font-semibold ${isDarkMode ? 'text-gray-200' : 'text-gray-800'}`}>历史对话</h2>
+      <h2
+        className={`mb-4 flex  justify-between text-lg font-semibold ${isDarkMode ? 'text-gray-200' : 'text-gray-800'}`}>
+        <span>历史对话</span>
+        <button
+          type="button"
+          onClick={handleBackToChat}
+          className={`${isDarkMode ? 'text-sky-400 hover:text-sky-300' : 'text-sky-400 hover:text-sky-500'} cursor-pointer text-xs font-normal`}
+          aria-label="返回聊天">
+          返回
+        </button>
+      </h2>
       {sessions.length === 0 ? (
         <div
           className={`rounded-lg ${isDarkMode ? 'bg-slate-800 text-gray-400' : 'bg-white/30 text-gray-500'} p-4 text-center backdrop-blur-sm`}>

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