|
@@ -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>
|