Add search functionality to Independent Panel chat history

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/es/main.json

@@ -97,6 +97,8 @@
   "Delete Conversation": "Eliminar conversación",
   "Clear conversations": "Borrar todas las conversaciones",
   "Settings": "Configuración",
+  "Search": "Buscar",
+  "Search conversations...": "Buscar conversaciones...",
   "Feature Pages": "Páginas de características",
   "Keyboard Shortcuts": "Atajos de teclado",
   "Open Conversation Page": "Abrir página de conversación independiente",

src/_locales/fr/main.json

@@ -97,6 +97,8 @@
   "Delete Conversation": "Supprimer la conversation",
   "Clear conversations": "Effacer les conversations",
   "Settings": "Paramètres",
+  "Search": "Rechercher",
+  "Search conversations...": "Rechercher dans les conversations...",
   "Feature Pages": "Pages de fonctionnalités",
   "Keyboard Shortcuts": "Raccourcis clavier",
   "Open Conversation Page": "Ouvrir la page de conversation",

src/_locales/ja/main.json

@@ -97,6 +97,8 @@
   "Delete Conversation": "会話を削除",
   "Clear conversations": "会話をクリア",
   "Settings": "設定",
+  "Search": "検索",
+  "Search conversations...": "会話を検索...",
   "Feature Pages": "機能ページ",
   "Keyboard Shortcuts": "キーボードショートカット",
   "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/_locales/zh-hant/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

@@ -6,7 +6,7 @@ import {
   getSession,
   deleteSession,
 } from '../../services/local-session.mjs'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, useMemo } from 'react'
 import './styles.scss'
 import { useConfig } from '../../hooks/use-config.mjs'
 import { useTranslation } from 'react-i18next'
@@ -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,30 @@ function App() {
     await setSessionIdSafe(sessions[0].sessionId)
   }
 
+  // Filter sessions based on search query (memoized for performance)
+  const filteredSessions = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase()
+    if (!query) return sessions
+
+    return sessions.filter((session) => {
+      // Search in session name
+      if (session.sessionName && session.sessionName.toLowerCase().includes(query)) {
+        return true
+      }
+
+      // Search in conversation records
+      if (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
+    })
+  }, [sessions, searchQuery])
+
   return (
     <div className="IndependentPanel">
       <div className="chat-container">
@@ -119,36 +144,46 @@ function App() {
             </button>
           </div>
           <hr />
+          <div className="search-container">
+            <input
+              type="search"
+              placeholder={t('Search conversations...')}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="search-input"
+              aria-label={t('Search')}
+              autoComplete="off"
+            />
+          </div>
           <div className="chat-list">
-            {sessions.map(
-              (
-                session,
-                index, // TODO editable session name
-              ) => (
-                <button
-                  key={index}
-                  className={`normal-button ${sessionId === session.sessionId ? 'active' : ''}`}
-                  style="display: flex; align-items: center; justify-content: space-between;"
-                  onClick={() => {
-                    setSessionIdSafe(session.sessionId)
-                  }}
-                >
-                  {session.sessionName}
-                  <span className="gpt-util-group">
-                    <DeleteButton
-                      size={14}
-                      text={t('Delete Conversation')}
-                      onConfirm={() =>
-                        deleteSession(session.sessionId).then((sessions) => {
-                          setSessions(sessions)
-                          setSessionIdSafe(sessions[0].sessionId)
-                        })
-                      }
-                    />
-                  </span>
-                </button>
-              ),
-            )}
+            {filteredSessions.map((session) => (
+              <button
+                key={session.sessionId}
+                className={`normal-button ${sessionId === session.sessionId ? 'active' : ''}`}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+                onClick={() => {
+                  setSessionIdSafe(session.sessionId)
+                }}
+              >
+                {session.sessionName}
+                <span className="gpt-util-group">
+                  <DeleteButton
+                    size={14}
+                    text={t('Delete Conversation')}
+                    onConfirm={() =>
+                      deleteSession(session.sessionId).then((sessions) => {
+                        setSessions(sessions)
+                        setSessionIdSafe(sessions[0].sessionId)
+                      })
+                    }
+                  />
+                </span>
+              </button>
+            ))}
           </div>
           <hr />
           <div className="chat-sidebar-button-group">
@@ -165,7 +200,7 @@ function App() {
         </div>
         <div className="chat-content">
           {renderContent && currentSession && currentSession.conversationRecords && (
-            <div className="chatgptbox-container" style="height:100%;">
+            <div className="chatgptbox-container" style={{ height: '100%' }}>
               <ConversationCard
                 session={currentSession}
                 notClampSize={true}

src/pages/IndependentPanel/styles.scss

@@ -71,6 +71,10 @@
     width: 60px;
   }
 
+  .chat-sidebar.collapsed .search-container {
+    display: none;
+  }
+
   .chat-sidebar:hover,
   .chat-sidebar:not(.collapsed) {
     min-width: 250px;
@@ -85,6 +89,39 @@
     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;
+    box-sizing: border-box;
+    line-height: 1.2;
+  }
+
+  .search-input::placeholder {
+    color: var(--font-color);
+    opacity: 0.6;
+  }
+
+  .search-input:focus {
+    border-color: var(--font-active-color);
+  }
+
+  .search-input:focus-visible {
+    outline: 2px solid var(--font-active-color);
+    outline-offset: 2px;
+  }
+
   .chat-list {
     display: flex;
     flex-direction: column;