Add search functionality to Independent Panel chat history, close #550

PeterDaveHello · Copilot · qodo-merge-pro[bot] · PeterDaveHello · commit c2bdd0086bd7 · 2025-08-31T04:17:01.000+08:00
Co-authored-by: copilot-swe-agent[bot] &lt;198982749+Copilot@users.noreply.github.com&gt;
Co-authored-by: qodo-merge-pro[bot] &lt;151058649+qodo-merge-pro[bot]@users.noreply.github.com&gt;
diff --git a/src/_locales/de/main.json b/src/_locales/de/main.json
@@ -97,6 +97,9 @@
   "Delete Conversation": "Konversation löschen",
   "Clear conversations": "Konversationen löschen",
   "Settings": "Einstellungen",
+  "Search": "Suchen",
+  "Search conversations...": "In Gesprächen suchen...",
+  "No conversations found": "Keine passenden Konversationen gefunden",
   "Feature Pages": "Funktionsseiten",
   "Keyboard Shortcuts": "Tastenkombinationen",
   "Open Conversation Page": "Konversationsseite öffnen",
diff --git a/src/_locales/en/main.json b/src/_locales/en/main.json
@@ -97,6 +97,9 @@
   "Delete Conversation": "Delete Conversation",
   "Clear conversations": "Clear conversations",
   "Settings": "Settings",
+  "Search": "Search",
+  "Search conversations...": "Search conversations...",
+  "No conversations found": "No conversations found",
   "Feature Pages": "Feature Pages",
   "Keyboard Shortcuts": "Keyboard Shortcuts",
   "Open Conversation Page": "Open Conversation Page",
diff --git a/src/_locales/es/main.json b/src/_locales/es/main.json
@@ -97,6 +97,9 @@
   "Delete Conversation": "Eliminar conversación",
   "Clear conversations": "Borrar todas las conversaciones",
   "Settings": "Configuración",
+  "Search": "Buscar",
+  "Search conversations...": "Buscar en las conversaciones...",
+  "No conversations found": "No se encontraron conversaciones coincidentes",
   "Feature Pages": "Páginas de características",
   "Keyboard Shortcuts": "Atajos de teclado",
   "Open Conversation Page": "Abrir página de conversación independiente",
diff --git a/src/_locales/fr/main.json b/src/_locales/fr/main.json
@@ -97,6 +97,9 @@
   "Delete Conversation": "Supprimer la conversation",
   "Clear conversations": "Effacer les conversations",
   "Settings": "Paramètres",
+  "Search": "Rechercher",
+  "Search conversations...": "Rechercher dans les conversations...",
+  "No conversations found": "Aucune conversation correspondante",
   "Feature Pages": "Pages de fonctionnalités",
   "Keyboard Shortcuts": "Raccourcis clavier",
   "Open Conversation Page": "Ouvrir la page de conversation",
diff --git a/src/_locales/in/main.json b/src/_locales/in/main.json
@@ -97,6 +97,9 @@
   "Delete Conversation": "Hapus Percakapan",
   "Clear conversations": "Hapus Percakapan",
   "Settings": "Pengaturan",
+  "Search": "Cari",
+  "Search conversations...": "Cari di percakapan...",
+  "No conversations found": "Tidak ditemukan percakapan yang cocok",
   "Feature Pages": "Halaman Fitur",
   "Keyboard Shortcuts": "Pintasan Keyboard",
   "Open Conversation Page": "Buka Halaman Percakapan",
diff --git a/src/_locales/it/main.json b/src/_locales/it/main.json
@@ -97,6 +97,9 @@
   "Delete Conversation": "Elimina la conversazione",
   "Clear conversations": "Pulisci le conversazioni",
   "Settings": "Impostazioni",
+  "Search": "Cerca",
+  "Search conversations...": "Cerca nelle conversazioni...",
+  "No conversations found": "Nessuna conversazione corrispondente",
   "Feature Pages": "Pagine delle funzionalità",
   "Keyboard Shortcuts": "Scorciatoie da tastiera",
   "Open Conversation Page": "Apri la pagina della conversazione",
diff --git a/src/_locales/ja/main.json b/src/_locales/ja/main.json
@@ -97,6 +97,9 @@
   "Delete Conversation": "会話を削除",
   "Clear conversations": "会話をクリア",
   "Settings": "設定",
+  "Search": "検索",
+  "Search conversations...": "会話内を検索...",
+  "No conversations found": "一致する会話が見つかりません",
   "Feature Pages": "機能ページ",
   "Keyboard Shortcuts": "キーボードショートカット",
   "Open Conversation Page": "会話ページを開く",
diff --git a/src/_locales/ko/main.json b/src/_locales/ko/main.json
@@ -97,6 +97,9 @@
   "Delete Conversation": "대화 삭제",
   "Clear conversations": "대화 기록 지우기",
   "Settings": "설정",
+  "Search": "검색",
+  "Search conversations...": "대화에서 검색...",
+  "No conversations found": "일치하는 대화가 없습니다",
   "Feature Pages": "기능 페이지",
   "Keyboard Shortcuts": "키보드 단축키 설정",
   "Open Conversation Page": "대화 페이지 열기",
diff --git a/src/_locales/pt/main.json b/src/_locales/pt/main.json
@@ -97,6 +97,9 @@
   "Delete Conversation": "Excluir Conversa",
   "Clear conversations": "Limpar conversas",
   "Settings": "Configurações",
+  "Search": "Pesquisar",
+  "Search conversations...": "Pesquisar nas conversas...",
+  "No conversations found": "Nenhuma conversa correspondente",
   "Feature Pages": "Páginas de Recursos",
   "Keyboard Shortcuts": "Atalhos de Teclado",
   "Open Conversation Page": "Abrir Página de Conversa",
diff --git a/src/_locales/ru/main.json b/src/_locales/ru/main.json
@@ -97,6 +97,9 @@
   "Delete Conversation": "Удалить беседу",
   "Clear conversations": "Очистить историю бесед",
   "Settings": "Настройки",
+  "Search": "Поиск",
+  "Search conversations...": "Искать в беседах...",
+  "No conversations found": "Подходящих бесед не найдено",
   "Feature Pages": "Страницы функций",
   "Keyboard Shortcuts": "Горячие клавиши",
   "Open Conversation Page": "Открыть страницу бесед",
diff --git a/src/_locales/tr/main.json b/src/_locales/tr/main.json
@@ -97,6 +97,9 @@
   "Delete Conversation": "Konuşmayı Sil",
   "Clear conversations": "Konuşmaları temizle",
   "Settings": "Ayarlar",
+  "Search": "Ara",
+  "Search conversations...": "Konuşmalarda ara...",
+  "No conversations found": "Eşleşen konuşma bulunamadı",
   "Feature Pages": "Özellik Sayfaları",
   "Keyboard Shortcuts": "Klavye Kısayolları",
   "Open Conversation Page": "Konuşma Sayfasını Aç",
diff --git a/src/_locales/zh-hans/main.json b/src/_locales/zh-hans/main.json
@@ -97,6 +97,9 @@
   "Delete Conversation": "删除对话",
   "Clear conversations": "清空记录",
   "Settings": "设置",
+  "Search": "搜索",
+  "Search conversations...": "搜索对话内容...",
+  "No conversations found": "未找到匹配的聊天记录",
   "Feature Pages": "功能页",
   "Keyboard Shortcuts": "快捷键设置",
   "Open Conversation Page": "打开独立对话页",
diff --git a/src/_locales/zh-hant/main.json b/src/_locales/zh-hant/main.json
@@ -97,6 +97,9 @@
   "Delete Conversation": "刪除對話",
   "Clear conversations": "清空對話記錄",
   "Settings": "設定",
+  "Search": "搜尋",
+  "Search conversations...": "搜尋對話內容...",
+  "No conversations found": "沒有符合的對話紀錄",
   "Feature Pages": "功能頁面",
   "Keyboard Shortcuts": "快速鍵設定",
   "Open Conversation Page": "開啟獨立對話頁面",
diff --git a/src/components/DeleteButton/index.jsx b/src/components/DeleteButton/index.jsx
@@ -35,7 +35,9 @@ function DeleteButton({ onConfirm, size, text }) {
         onBlur={() => {
           setWaitConfirm(false)
         }}
-        onClick={() => {
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
           setWaitConfirm(false)
           onConfirm()
         }}
@@ -46,7 +48,8 @@ function DeleteButton({ onConfirm, size, text }) {
         title={text}
         className="gpt-util-icon"
         style={waitConfirm ? { display: 'none' } : {}}
-        onClick={() => {
+        onClick={(e) => {
+          e.stopPropagation()
           setWaitConfirm(true)
         }}
       >
diff --git a/src/config/index.mjs b/src/config/index.mjs
@@ -475,6 +475,7 @@ export const defaultConfig = {
   selectionToolsNextToInputBox: false,
   alwaysPinWindow: false,
   focusAfterAnswer: true,
+  independentPanelCollapsed: true,
 
   apiKey: '', // openai ApiKey
 
diff --git a/src/pages/IndependentPanel/App.jsx b/src/pages/IndependentPanel/App.jsx
@@ -6,9 +6,10 @@ 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 { setUserConfig } from '../../config/index.mjs'
 import { useTranslation } from 'react-i18next'
 import ConfirmButton from '../../components/ConfirmButton'
 import ConversationCard from '../../components/ConversationCard'
@@ -25,7 +26,10 @@ function App() {
   const [sessionId, setSessionId] = useState(null)
   const [currentSession, setCurrentSession] = useState(null)
   const [renderContent, setRenderContent] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [debouncedQuery, setDebouncedQuery] = useState('')
   const currentPort = useRef(null)
+  const searchInputRef = useRef(null)
 
   const setSessionIdSafe = async (sessionId) => {
     if (currentPort.current) {
@@ -68,6 +72,13 @@ function App() {
     if ('sessions' in config && config['sessions']) setSessions(config['sessions'])
   }, [config])
 
+  // Sync collapsed state from persisted config
+  useEffect(() => {
+    if ('independentPanelCollapsed' in config) {
+      setCollapsed(!!config.independentPanelCollapsed)
+    }
+  }, [config.independentPanelCollapsed])
+
   useEffect(() => {
     // eslint-disable-next-line
     ;(async () => {
@@ -82,7 +93,9 @@ function App() {
   }, [sessionId])
 
   const toggleSidebar = () => {
-    setCollapsed(!collapsed)
+    const next = !collapsed
+    setCollapsed(next)
+    setUserConfig({ independentPanelCollapsed: next })
   }
 
   const createNewChat = async () => {
@@ -103,6 +116,77 @@ function App() {
     await setSessionIdSafe(sessions[0].sessionId)
   }
 
+  const handleSearchChange = (e) => setSearchQuery(e.target.value)
+
+  // Debounce search input for performance
+  useEffect(() => {
+    const id = setTimeout(() => setDebouncedQuery(searchQuery), 200)
+    return () => clearTimeout(id)
+  }, [searchQuery])
+
+  // Keyboard shortcuts: Ctrl/Cmd+F and '/' to focus search
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      const target = e.target
+      const isTypingField =
+        target &&
+        (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)
+
+      if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === 'f') {
+        e.preventDefault()
+        if (searchInputRef.current) {
+          searchInputRef.current.focus()
+          searchInputRef.current.select()
+        }
+        return
+      }
+
+      if (!isTypingField && !e.ctrlKey && !e.metaKey && !e.altKey && e.key === '/') {
+        e.preventDefault()
+        if (searchInputRef.current) searchInputRef.current.focus()
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [])
+
+  // Utility function to safely convert any value to a string
+  const toSafeString = (value) =>
+    typeof value === 'string' ? value : value == null ? '' : String(value)
+
+  // Filter sessions based on search query (memoized for performance)
+  const normalizeForSearch = (value) =>
+    toSafeString(value)
+      .toLowerCase()
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .replace(/\s+/g, ' ')
+      .trim()
+
+  const filteredSessions = useMemo(() => {
+    const query = normalizeForSearch(debouncedQuery).trim()
+    if (!query) return sessions
+
+    return sessions.filter((session) => {
+      // Search in session name
+      const sessionName = normalizeForSearch(session.sessionName)
+      if (sessionName.includes(query)) {
+        return true
+      }
+
+      // Search in conversation records
+      if (Array.isArray(session.conversationRecords)) {
+        return session.conversationRecords.some((record) => {
+          const question = normalizeForSearch(record?.question)
+          const answer = normalizeForSearch(record?.answer)
+          return question.includes(query) || answer.includes(query)
+        })
+      }
+
+      return false
+    })
+  }, [sessions, debouncedQuery])
+
   return (
     <div className="IndependentPanel">
       <div className="chat-container">
@@ -118,37 +202,66 @@ function App() {
               {t('Export')}
             </button>
           </div>
+          <div className="search-container">
+            <input
+              type="search"
+              placeholder={t('Search conversations...')}
+              value={searchQuery}
+              onChange={handleSearchChange}
+              className="search-input"
+              aria-label={t('Search')}
+              autoComplete="off"
+              ref={searchInputRef}
+            />
+          </div>
           <hr />
           <div className="chat-list">
-            {sessions.map(
-              (
-                session,
-                index, // TODO editable session name
-              ) => (
+            {filteredSessions.length === 0 && (
+              <div className="no-results">{t('No conversations found')}</div>
+            )}
+            {filteredSessions
+              .filter((session) => Boolean(session.sessionId))
+              .map((session) => (
                 <button
-                  key={index}
-                  className={`normal-button ${sessionId === session.sessionId ? 'active' : ''}`}
-                  style="display: flex; align-items: center; justify-content: space-between;"
+                  key={session.sessionId}
+                  className={`normal-button chat-list-item ${
+                    sessionId === session.sessionId ? 'active' : ''
+                  }`}
                   onClick={() => {
                     setSessionIdSafe(session.sessionId)
                   }}
                 >
                   {session.sessionName}
-                  <span className="gpt-util-group">
+                  <span
+                    className="gpt-util-group"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') e.stopPropagation()
+                    }}
+                  >
                     <DeleteButton
                       size={14}
                       text={t('Delete Conversation')}
-                      onConfirm={() =>
-                        deleteSession(session.sessionId).then((sessions) => {
-                          setSessions(sessions)
-                          setSessionIdSafe(sessions[0].sessionId)
-                        })
-                      }
+                      onConfirm={async () => {
+                        const deletedId = session.sessionId
+                        const updatedSessions = await deleteSession(deletedId)
+                        setSessions(updatedSessions)
+                        if (!updatedSessions || updatedSessions.length === 0) {
+                          setSessionId(null)
+                          setCurrentSession(null)
+                          return
+                        }
+                        // Only change active session if the deleted one was active
+                        if (sessionId === deletedId) {
+                          await setSessionIdSafe(updatedSessions[0].sessionId)
+                        }
+                      }}
                     />
                   </span>
                 </button>
-              ),
-            )}
+              ))}
           </div>
           <hr />
           <div className="chat-sidebar-button-group">
@@ -165,7 +278,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}
diff --git a/src/pages/IndependentPanel/styles.scss b/src/pages/IndependentPanel/styles.scss
