Implement search functionality for chat history in independent panel

Co-authored-by: PeterDaveHello <[email protected]>

Author: Copilot

src/_locales/en/main.json

@@ -97,6 +97,8 @@
   "Delete Conversation": "Delete Conversation",
   "Clear conversations": "Clear conversations",
   "Settings": "Settings",
+  "Search": "Search",
+  "Search conversations...": "Search conversations...",
   "Feature Pages": "Feature Pages",
   "Keyboard Shortcuts": "Keyboard Shortcuts",
   "Open Conversation Page": "Open Conversation Page",

src/_locales/zh-hans/main.json

@@ -97,6 +97,8 @@
   "Delete Conversation": "删除对话",
   "Clear conversations": "清空记录",
   "Settings": "设置",
+  "Search": "搜索",
+  "Search conversations...": "搜索聊天记录...",
   "Feature Pages": "功能页",
   "Keyboard Shortcuts": "快捷键设置",
   "Open Conversation Page": "打开独立对话页",

src/pages/IndependentPanel/App.jsx

@@ -25,6 +25,7 @@ function App() {
   const [sessionId, setSessionId] = useState(null)
   const [currentSession, setCurrentSession] = useState(null)
   const [renderContent, setRenderContent] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
   const currentPort = useRef(null)
 
   const setSessionIdSafe = async (sessionId) => {
@@ -103,6 +104,29 @@ function App() {
     await setSessionIdSafe(sessions[0].sessionId)
   }
 
+  // Filter sessions based on search query
+  const filteredSessions = sessions.filter((session) => {
+    if (!searchQuery.trim()) return true
+
+    const query = searchQuery.toLowerCase()
+
+    // Search in session name
+    if (session.sessionName && session.sessionName.toLowerCase().includes(query)) {
+      return true
+    }
+
+    // Search in conversation records
+    if (session.conversationRecords && Array.isArray(session.conversationRecords)) {
+      return session.conversationRecords.some((record) => {
+        const questionMatch = record.question && record.question.toLowerCase().includes(query)
+        const answerMatch = record.answer && record.answer.toLowerCase().includes(query)
+        return questionMatch || answerMatch
+      })
+    }
+
+    return false
+  })
+
   return (
     <div className="IndependentPanel">
       <div className="chat-container">
@@ -119,8 +143,17 @@ function App() {
             </button>
           </div>
           <hr />
+          <div className="search-container">
+            <input
+              type="text"
+              placeholder={t('Search conversations...')}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="search-input"
+            />
+          </div>
           <div className="chat-list">
-            {sessions.map(
+            {filteredSessions.map(
               (
                 session,
                 index, // TODO editable session name

src/pages/IndependentPanel/styles.scss

@@ -85,6 +85,33 @@
     gap: 15px;
   }
 
+  .search-container {
+    padding: 0;
+    background-color: var(--theme-color);
+  }
+
+  .search-input {
+    width: 100%;
+    min-height: 40px;
+    padding: 8px 12px;
+    border: 1px solid var(--theme-border-color);
+    border-radius: 5px;
+    background-color: var(--theme-color);
+    color: var(--font-color);
+    font-size: 14px;
+    font-family: 'Cairo', sans-serif;
+  }
+
+  .search-input::placeholder {
+    color: var(--font-color);
+    opacity: 0.6;
+  }
+
+  .search-input:focus {
+    outline: none;
+    border-color: var(--font-active-color);
+  }
+
   .chat-list {
     display: flex;
     flex-direction: column;