import { AppEvents } from '../../constants/events'; import React, { useEffect, useState, useRef, useCallback, useMemo, startTransition } from 'react'; import { defineMessages, useIntl } from '../../i18n'; import { MessageSquareText, Target, AlertCircle, Calendar, Folder, Edit2, Trash2, Download, Upload, ExternalLink, Copy, Puzzle, } from 'lucide-react'; import { Card } from '../ui/card'; import { Button } from '../ui/button'; import { ScrollArea } from '../ui/scroll-area'; import { formatMessageTimestamp } from '../../utils/timeUtils'; import { SearchView } from '../conversation/SearchView'; import { SearchHighlighter } from '../../utils/searchHighlighter'; import { MainPanelLayout } from '../Layout/MainPanelLayout'; import { groupSessionsByDate, type DateGroup } from '../../utils/dateUtils'; import { errorMessage } from '../../utils/conversionUtils'; import { Skeleton } from '../ui/skeleton'; import { toast } from 'react-toastify'; import { ConfirmationModal } from '../ui/ConfirmationModal'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/Tooltip'; import { deleteSession, exportSession, forkSession, importSession, listSessions, searchSessions, Session, updateSessionName, ExtensionConfig, ExtensionData, } from '../../api'; import { formatExtensionName } from '../settings/extensions/subcomponents/ExtensionList'; import { getSearchShortcutText } from '../../utils/keyboardShortcuts'; import { shouldShowNewChatTitle } from '../../sessions'; import { DEFAULT_CHAT_TITLE } from '../../contexts/ChatContext'; const i18n = defineMessages({ editSessionTitle: { id: 'sessions.edit.title', defaultMessage: 'Edit Session Description' }, editSessionPlaceholder: { id: 'sessions.edit.placeholder', defaultMessage: 'Enter session description' }, cancel: { id: 'sessions.cancel', defaultMessage: 'Cancel' }, save: { id: 'sessions.save', defaultMessage: 'Save' }, saving: { id: 'sessions.saving', defaultMessage: 'Saving...' }, sessionUpdated: { id: 'sessions.toast.updated', defaultMessage: 'Session description updated successfully' }, sessionUpdateFailed: { id: 'sessions.toast.updateFailed', defaultMessage: 'Failed to update session description: {error}' }, chatHistory: { id: 'sessions.chatHistory', defaultMessage: 'Chat history' }, importSession: { id: 'sessions.import', defaultMessage: 'Import Session' }, chatHistoryDesc: { id: 'sessions.chatHistoryDesc', defaultMessage: 'View and search your past conversations with Goose. {shortcut} to search.' }, searchPlaceholder: { id: 'sessions.searchPlaceholder', defaultMessage: 'Search history...' }, errorLoading: { id: 'sessions.error.loading', defaultMessage: 'Error Loading Sessions' }, tryAgain: { id: 'sessions.error.tryAgain', defaultMessage: 'Try Again' }, noSessions: { id: 'sessions.empty.title', defaultMessage: 'No chat sessions found' }, noSessionsDesc: { id: 'sessions.empty.description', defaultMessage: 'Your chat history will appear here' }, noMatching: { id: 'sessions.search.noResults', defaultMessage: 'No matching sessions found' }, noMatchingDesc: { id: 'sessions.search.noResultsDesc', defaultMessage: 'Try adjusting your search terms' }, loadingMore: { id: 'sessions.loadingMore', defaultMessage: 'Loading more sessions...' }, deleteTitle: { id: 'sessions.delete.title', defaultMessage: 'Delete Session' }, deleteMessage: { id: 'sessions.delete.message', defaultMessage: 'Are you sure you want to delete the session "{name}"? This action cannot be undone.' }, duplicateSuccess: { id: 'sessions.toast.duplicated', defaultMessage: 'Session "{name}" duplicated successfully' }, duplicateFailed: { id: 'sessions.toast.duplicateFailed', defaultMessage: 'Failed to duplicate session: {error}' }, deleteSuccess: { id: 'sessions.toast.deleted', defaultMessage: 'Session deleted successfully' }, deleteFailed: { id: 'sessions.toast.deleteFailed', defaultMessage: 'Failed to delete session "{name}": {error}' }, importSuccess: { id: 'sessions.toast.imported', defaultMessage: 'Session imported successfully' }, importFailed: { id: 'sessions.toast.importFailed', defaultMessage: 'Failed to import session: {error}' }, exportSuccess: { id: 'sessions.toast.exported', defaultMessage: 'Session exported successfully' }, openInNewWindow: { id: 'sessions.action.openNewWindow', defaultMessage: 'Open in new window' }, editSessionName: { id: 'sessions.action.editName', defaultMessage: 'Edit session name' }, duplicateSession: { id: 'sessions.action.duplicate', defaultMessage: 'Duplicate session' }, deleteSession: { id: 'sessions.action.delete', defaultMessage: 'Delete session' }, exportSession: { id: 'sessions.action.export', defaultMessage: 'Export session' }, extensions: { id: 'sessions.extensions', defaultMessage: 'Extensions:' }, }); function getSessionExtensionNames(extensionData: ExtensionData): string[] { try { const enabledExtensionData = extensionData?.['enabled_extensions.v0'] as | { extensions?: ExtensionConfig[] } | undefined; if (!enabledExtensionData?.extensions) return []; return enabledExtensionData.extensions.map((ext) => formatExtensionName(ext.name)); } catch { return []; } } interface EditSessionModalProps { session: Session | null; isOpen: boolean; onClose: () => void; onSave: (sessionId: string, newDescription: string) => Promise; disabled?: boolean; } const EditSessionModal = React.memo( ({ session, isOpen, onClose, onSave, disabled = false }) => { const intl = useIntl(); const [description, setDescription] = useState(''); const [isUpdating, setIsUpdating] = useState(false); useEffect(() => { if (session && isOpen) { setDescription(session.name); } else if (!isOpen) { setDescription(''); setIsUpdating(false); } }, [session, isOpen]); const handleSave = useCallback(async () => { if (!session || disabled) return; const trimmedDescription = description.trim(); if (trimmedDescription === session.name) { onClose(); return; } setIsUpdating(true); try { await updateSessionName({ path: { session_id: session.id }, body: { name: trimmedDescription }, throwOnError: true, }); await onSave(session.id, trimmedDescription); onClose(); setTimeout(() => { toast.success(intl.formatMessage(i18n.sessionUpdated)); }, 300); } catch (error) { const errMsg = errorMessage(error, 'Unknown error occurred'); console.error('Failed to update session description:', errMsg); toast.error(intl.formatMessage(i18n.sessionUpdateFailed, { error: errMsg })); setDescription(session.name); } finally { setIsUpdating(false); } }, [session, description, onSave, onClose, disabled, intl]); const handleCancel = useCallback(() => { if (!isUpdating) { onClose(); } }, [onClose, isUpdating]); const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { if (e.key === 'Enter' && !isUpdating) { handleSave(); } else if (e.key === 'Escape' && !isUpdating) { handleCancel(); } }, [handleSave, handleCancel, isUpdating] ); const handleInputChange = useCallback((e: React.ChangeEvent) => { setDescription(e.target.value); }, []); if (!isOpen || !session) return null; return (

{intl.formatMessage(i18n.editSessionTitle)}

); } ); EditSessionModal.displayName = 'EditSessionModal'; // Debounce hook for search function useDebounce(value: T, delay: number): T { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(value); }, delay); return () => { window.clearTimeout(handler); }; }, [value, delay]); return debouncedValue; } interface SearchContainerElement extends HTMLDivElement { _searchHighlighter: SearchHighlighter | null; } interface SessionListViewProps { onSelectSession: (sessionId: string) => void; selectedSessionId?: string | null; } const SessionListView: React.FC = React.memo( ({ onSelectSession, selectedSessionId }) => { const intl = useIntl(); const [sessions, setSessions] = useState([]); const [filteredSessions, setFilteredSessions] = useState([]); const [dateGroups, setDateGroups] = useState([]); const [isLoading, setIsLoading] = useState(true); const [showSkeleton, setShowSkeleton] = useState(true); const [showContent, setShowContent] = useState(false); const [isInitialLoad, setIsInitialLoad] = useState(true); const [error, setError] = useState(null); const [searchResults, setSearchResults] = useState<{ count: number; currentIndex: number; } | null>(null); const [visibleGroupsCount, setVisibleGroupsCount] = useState(15); // Edit modal state const [showEditModal, setShowEditModal] = useState(false); const [editingSession, setEditingSession] = useState(null); // Delete confirmation modal state const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false); const [sessionToDelete, setSessionToDelete] = useState(null); // Search state for debouncing const [searchTerm, setSearchTerm] = useState(''); const [caseSensitive, setCaseSensitive] = useState(false); const debouncedSearchTerm = useDebounce(searchTerm, 300); // 300ms debounce const containerRef = useRef(null); // Track session to element ref const sessionRefs = useRef>({}); const setSessionRefs = (itemId: string, element: HTMLDivElement | null) => { if (element) { sessionRefs.current[itemId] = element; } else { delete sessionRefs.current[itemId]; } }; const fileInputRef = useRef(null); const visibleDateGroups = useMemo(() => { return dateGroups.slice(0, visibleGroupsCount); }, [dateGroups, visibleGroupsCount]); const handleScroll = useCallback( (target: HTMLDivElement) => { const { scrollTop, scrollHeight, clientHeight } = target; const threshold = 200; if ( scrollHeight - scrollTop - clientHeight < threshold && visibleGroupsCount < dateGroups.length ) { setVisibleGroupsCount((prev) => Math.min(prev + 5, dateGroups.length)); } }, [visibleGroupsCount, dateGroups.length] ); useEffect(() => { if (debouncedSearchTerm) { setVisibleGroupsCount(dateGroups.length); } else { setVisibleGroupsCount(15); } }, [debouncedSearchTerm, dateGroups.length]); const loadSessions = useCallback(async () => { setIsLoading(true); setShowSkeleton(true); setShowContent(false); setError(null); try { const resp = await listSessions({ throwOnError: true }); const sessions = resp.data.sessions; // Use startTransition to make state updates non-blocking startTransition(() => { setSessions(sessions); setFilteredSessions(sessions); }); } catch (err) { console.error('Failed to load sessions:', err); setError('Failed to load sessions. Please try again later.'); setSessions([]); setFilteredSessions([]); } finally { setIsLoading(false); } }, []); useEffect(() => { loadSessions(); }, [loadSessions]); // Timing logic to prevent flicker between skeleton and content on initial load useEffect(() => { if (!isLoading && showSkeleton) { setShowSkeleton(false); // Use startTransition for non-blocking content show startTransition(() => { setTimeout(() => { setShowContent(true); if (isInitialLoad) { setIsInitialLoad(false); } }, 10); }); } return () => void 0; }, [isLoading, showSkeleton, isInitialLoad]); // Memoize date groups calculation to prevent unnecessary recalculations const memoizedDateGroups = useMemo(() => { if (filteredSessions.length > 0) { return groupSessionsByDate(filteredSessions); } return []; }, [filteredSessions]); // Update date groups when filtered sessions change useEffect(() => { startTransition(() => { setDateGroups(memoizedDateGroups); }); }, [memoizedDateGroups]); // Scroll to the selected session when returning from session history view useEffect(() => { if (selectedSessionId) { const element = sessionRefs.current[selectedSessionId]; if (element) { element.scrollIntoView({ block: 'center', }); } } }, [selectedSessionId, sessions]); // Debounced search effect - performs content search via API useEffect(() => { if (!debouncedSearchTerm) { startTransition(() => { setFilteredSessions(sessions); setSearchResults(null); }); return; } // Call the backend search API for content search const performSearch = async () => { const resp = await searchSessions({ query: { query: debouncedSearchTerm }, }); if (resp.data) { // Response is Vec - sessions that match the search const matchedSessionIds = new Set(resp.data.map((s: { id: string }) => s.id)); const filtered = sessions.filter((session) => matchedSessionIds.has(session.id)); startTransition(() => { setFilteredSessions(filtered); setSearchResults( filtered.length > 0 ? { count: filtered.length, currentIndex: 1 } : null ); }); } }; performSearch(); }, [debouncedSearchTerm, caseSensitive, sessions]); // Handle immediate search input (updates search term for debouncing) const handleSearch = useCallback((term: string, caseSensitive: boolean) => { setSearchTerm(term); setCaseSensitive(caseSensitive); }, []); // Handle search result navigation const handleSearchNavigation = (direction: 'next' | 'prev') => { if (!searchResults || filteredSessions.length === 0) return; let newIndex: number; if (direction === 'next') { newIndex = (searchResults.currentIndex % filteredSessions.length) + 1; } else { newIndex = searchResults.currentIndex === 1 ? filteredSessions.length : searchResults.currentIndex - 1; } setSearchResults({ ...searchResults, currentIndex: newIndex }); // Find the SearchView's container element const searchContainer = containerRef.current?.querySelector('.search-container'); if (searchContainer?._searchHighlighter) { // Update the current match in the highlighter searchContainer._searchHighlighter.setCurrentMatch(newIndex - 1, true); } }; // Handle modal close const handleModalClose = useCallback(() => { setShowEditModal(false); setEditingSession(null); }, []); const handleModalSave = useCallback(async (sessionId: string, newDescription: string) => { // Update state immediately for optimistic UI setSessions((prevSessions) => prevSessions.map((s) => (s.id === sessionId ? { ...s, name: newDescription } : s)) ); window.dispatchEvent( new CustomEvent(AppEvents.SESSION_RENAMED, { detail: { sessionId, newName: newDescription }, }) ); }, []); const handleEditSession = useCallback((session: Session) => { setEditingSession(session); setShowEditModal(true); }, []); const handleDeleteSession = useCallback((session: Session) => { setSessionToDelete(session); setShowDeleteConfirmation(true); }, []); const handleDuplicateSession = useCallback( async (session: Session) => { try { await forkSession({ path: { session_id: session.id }, body: { truncate: false, copy: true }, throwOnError: true, }); toast.success(intl.formatMessage(i18n.duplicateSuccess, { name: session.name })); await loadSessions(); } catch (error) { console.error('Error duplicating session:', error); toast.error(intl.formatMessage(i18n.duplicateFailed, { error: errorMessage(error, 'Unknown error') })); } }, [loadSessions, intl] ); const handleConfirmDelete = useCallback(async () => { if (!sessionToDelete) return; setShowDeleteConfirmation(false); const sessionToDeleteId = sessionToDelete.id; const sessionName = sessionToDelete.name; setSessionToDelete(null); try { await deleteSession({ path: { session_id: sessionToDeleteId }, throwOnError: true, }); toast.success(intl.formatMessage(i18n.deleteSuccess)); window.dispatchEvent( new CustomEvent(AppEvents.SESSION_DELETED, { detail: { sessionId: sessionToDeleteId } }) ); } catch (error) { console.error('Error deleting session:', error); toast.error(intl.formatMessage(i18n.deleteFailed, { name: sessionName, error: errorMessage(error, 'Unknown error') })); } await loadSessions(); }, [sessionToDelete, loadSessions, intl]); const handleCancelDelete = useCallback(() => { setShowDeleteConfirmation(false); setSessionToDelete(null); }, []); const handleExportSession = useCallback(async (session: Session, e: React.MouseEvent) => { e.stopPropagation(); const response = await exportSession({ path: { session_id: session.id }, throwOnError: true, }); const json = response.data; const blob = new Blob([json], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${session.name}.json`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); toast.success(intl.formatMessage(i18n.exportSuccess)); }, [intl]); const handleImportClick = useCallback(() => { fileInputRef.current?.click(); }, []); const handleImportSession = useCallback( async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; try { const json = await file.text(); await importSession({ body: { json }, throwOnError: true, }); toast.success(intl.formatMessage(i18n.importSuccess)); await loadSessions(); } catch (error) { toast.error(intl.formatMessage(i18n.importFailed, { error: String(error) })); } finally { if (fileInputRef.current) { fileInputRef.current.value = ''; } } }, [loadSessions, intl] ); const handleOpenInNewWindow = useCallback((session: Session, e: React.MouseEvent) => { e.stopPropagation(); window.electron.createChatWindow({ dir: session.working_dir, resumeSessionId: session.id, viewType: 'pair', }); }, []); const SessionItem = React.memo(function SessionItem({ session, onEditClick, onDuplicateClick, onDeleteClick, onExportClick, onOpenInNewWindow, }: { session: Session; onEditClick: (session: Session) => void; onDuplicateClick: (session: Session) => void; onDeleteClick: (session: Session) => void; onExportClick: (session: Session, e: React.MouseEvent) => void; onOpenInNewWindow: (session: Session, e: React.MouseEvent) => void; }) { const handleEditClick = useCallback( (e: React.MouseEvent) => { e.stopPropagation(); onEditClick(session); }, [onEditClick, session] ); const handleDuplicateClick = useCallback( (e: React.MouseEvent) => { e.stopPropagation(); onDuplicateClick(session); }, [onDuplicateClick, session] ); const handleDeleteClick = useCallback( (e: React.MouseEvent) => { e.stopPropagation(); onDeleteClick(session); }, [onDeleteClick, session] ); const handleCardClick = useCallback(() => { onSelectSession(session.id); }, [session.id]); const handleExportClick = useCallback( (e: React.MouseEvent) => { onExportClick(session, e); }, [onExportClick, session] ); const handleOpenInNewWindowClick = useCallback( (e: React.MouseEvent) => { onOpenInNewWindow(session, e); }, [onOpenInNewWindow, session] ); const displayName = shouldShowNewChatTitle(session) ? DEFAULT_CHAT_TITLE : session.name; // Get extension names for this session const extensionNames = useMemo( () => getSessionExtensionNames(session.extension_data), [session.extension_data] ); return ( setSessionRefs(session.id, el)} >

{displayName}

{formatMessageTimestamp(Date.parse(session.updated_at) / 1000)}

{session.working_dir}

{session.message_count}

{session.total_tokens !== null && (

{(session.total_tokens || 0).toLocaleString()}

)} {extensionNames.length > 0 && (

e.stopPropagation()}> {extensionNames.length}

{intl.formatMessage(i18n.extensions)}

{name}

)}

); }); const SessionSkeleton = React.memo(({ variant = 0 }: { variant?: number }) => { const titleWidths = ['w-3/4', 'w-2/3', 'w-4/5', 'w-1/2']; const pathWidths = ['w-32', 'w-28', 'w-36', 'w-24']; const tokenWidths = ['w-12', 'w-10', 'w-14', 'w-8']; return (

); }); SessionSkeleton.displayName = 'SessionSkeleton'; const renderActualContent = () => { if (error) { return (

{intl.formatMessage(i18n.errorLoading)}

{error}

); } if (sessions.length === 0) { return (

{intl.formatMessage(i18n.noSessions)}

{intl.formatMessage(i18n.noSessionsDesc)}

); } if (dateGroups.length === 0 && searchResults !== null) { return (

{intl.formatMessage(i18n.noMatching)}

{intl.formatMessage(i18n.noMatchingDesc)}

); } return (

{visibleDateGroups.map((group) => (

{group.label}

{group.sessions.map((session) => ( ))}

))} {visibleGroupsCount < dateGroups.length && (

{intl.formatMessage(i18n.loadingMore)}

)}

); }; return ( <>

{intl.formatMessage(i18n.chatHistory)}

{intl.formatMessage(i18n.chatHistoryDesc, { shortcut: getSearchShortcutText() })}

{/* Skeleton layer - always rendered but conditionally visible */}

{/* Today section */}

{/* Yesterday section */}

{/* Additional section */}

{/* Content layer - always rendered but conditionally visible */}

{renderActualContent()}

); } ); SessionListView.displayName = 'SessionListView'; export default SessionListView;