aljaz/goose
1
0
Fork 0
mirror of https://github.com/aljazceru/goose.git synced 2025-12-18 22:54:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add search to sessions list (#2439)

Browse Source
This commit is contained in:
Zane
2025-05-06 16:34:11 -07:00
committed by GitHub
parent 392a101078
commit 9417e54593
5 changed files with 565 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
ui/desktop/src/components/conversation/SearchBar.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, KeyboardEvent, useState, useCallback } from 'react';
import React, { useEffect, useState, useRef, KeyboardEvent } from 'react';
import { Search as SearchIcon } from 'lucide-react';
import { ArrowDown, ArrowUp, Close } from '../icons';
import { debounce } from 'lodash';
@@ -26,13 +26,6 @@ interface SearchBarProps {
/**
* SearchBar provides a search input with case-sensitive toggle and result navigation.
* Features:
* - Case-sensitive search toggle
* - Result count display
* - Navigation between results with arrows
* - Keyboard shortcuts (↑/↓ for navigation, Esc to close)
* - Smooth animations for enter/exit
* - Debounced search for better performance
*/
export const SearchBar: React.FC<SearchBarProps> = ({
onSearch,
@@ -41,23 +34,26 @@ export const SearchBar: React.FC<SearchBarProps> = ({
searchResults,
inputRef: externalInputRef,
initialSearchTerm = '',
}) => {
}: SearchBarProps) => {
const [searchTerm, setSearchTerm] = useState(initialSearchTerm);
const [displayTerm, setDisplayTerm] = useState(initialSearchTerm); // For immediate visual feedback
const [caseSensitive, setCaseSensitive] = useState(false);
const [isExiting, setIsExiting] = useState(false);
const internalInputRef = React.useRef<HTMLInputElement>(null);
const inputRef = externalInputRef || internalInputRef;
const debouncedSearchRef = useRef<ReturnType<typeof debounce>>();
// Create debounced search function
const debouncedSearch = useCallback(
(term: string, isCaseSensitive: boolean) => {
debounce((searchTerm: string, caseSensitive: boolean) => {
onSearch(searchTerm, caseSensitive);
}, 150)(term, isCaseSensitive);
},
[onSearch]
);
useEffect(() => {
const debouncedFn = debounce((term: string, caseSensitive: boolean) => {
onSearch(term, caseSensitive);
}, 200);
debouncedSearchRef.current = debouncedFn;
return () => {
debouncedFn.cancel();
};
}, [onSearch]);
useEffect(() => {
inputRef.current?.focus();
@@ -67,29 +63,48 @@ export const SearchBar: React.FC<SearchBarProps> = ({
useEffect(() => {
if (initialSearchTerm) {
setSearchTerm(initialSearchTerm);
setDisplayTerm(initialSearchTerm);
debouncedSearch(initialSearchTerm, caseSensitive);
if (initialSearchTerm.length >= 2) {
debouncedSearchRef.current?.(initialSearchTerm, caseSensitive);
}
}
}, [initialSearchTerm, caseSensitive, debouncedSearch]);
}, [initialSearchTerm, caseSensitive, debouncedSearchRef]);
// Cleanup debounced function on unmount
const [localSearchResults, setLocalSearchResults] = useState<typeof searchResults>(null);
// Sync external search results with local state
useEffect(() => {
return () => {
debouncedSearch.cancel?.();
};
}, [debouncedSearch]);
// Only set results if we have a search term
if (!searchTerm) {
setLocalSearchResults(null);
} else {
setLocalSearchResults(searchResults);
}
}, [searchResults, searchTerm]);
const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
setDisplayTerm(value); // Update display immediately
setSearchTerm(value); // Update actual term
debouncedSearch(value, caseSensitive);
// Always cancel pending searches first
if (debouncedSearchRef.current) {
debouncedSearchRef.current.cancel();
}
// Update display term immediately for UI feedback
setSearchTerm(value);
// Only trigger search if we have 2 or more characters
if (value.length >= 2) {
debouncedSearchRef.current?.(value, caseSensitive);
} else {
// Clear results if less than 2 characters
onSearch('', caseSensitive);
}
};
const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
if (event.key === 'ArrowUp') {
handleNavigate('prev', event);
} else if (event.key === 'ArrowDown') {
} else if (event.key === 'ArrowDown' || event.key === 'Enter') {
handleNavigate('next', event);
} else if (event.key === 'Escape') {
event.preventDefault();
@@ -99,26 +114,32 @@ export const SearchBar: React.FC<SearchBarProps> = ({
const handleNavigate = (direction: 'next' | 'prev', e?: React.MouseEvent | KeyboardEvent) => {
e?.preventDefault();
onNavigate?.(direction);
inputRef.current?.focus();
if (searchResults && searchResults.count > 0) {
inputRef.current?.focus();
onNavigate?.(direction);
}
};
const toggleCaseSensitive = () => {
const newCaseSensitive = !caseSensitive;
setCaseSensitive(newCaseSensitive);
// Immediately trigger a new search with updated case sensitivity
debouncedSearch(searchTerm, newCaseSensitive);
if (searchTerm) {
debouncedSearchRef.current?.(searchTerm, newCaseSensitive);
}
inputRef.current?.focus();
};
const handleClose = () => {
setIsExiting(true);
debouncedSearch.cancel?.(); // Cancel any pending searches
debouncedSearchRef.current?.cancel(); // Cancel any pending searches
setTimeout(() => {
onClose();
}, 150); // Match animation duration
};
const hasResults = searchResults && searchResults.count > 0;
return (
<div
className={`sticky top-0 bg-bgAppInverse text-textProminentInverse z-50 ${
@@ -133,60 +154,74 @@ export const SearchBar: React.FC<SearchBarProps> = ({
ref={inputRef}
id="search-input"
type="text"
value={displayTerm}
value={searchTerm}
onChange={handleSearch}
onKeyDown={handleKeyDown}
placeholder="Search conversation..."
className="w-full text-sm pl-9 pr-10 py-3 bg-bgAppInverse
className="w-full text-sm pl-9 pr-24 py-3 bg-bgAppInverse
placeholder:text-textSubtleInverse focus:outline-none
active:border-borderProminent"
/>
</div>
<div className="absolute right-3 flex h-full items-center justify-center text-sm text-textStandardInverse">
{searchResults && searchResults.count}
<div className="absolute right-3 flex h-full items-center justify-end">
<div className="flex items-center gap-1">
<div className="w-16 text-right text-sm text-textStandardInverse flex items-center justify-end">
{(() => {
return localSearchResults?.count > 0 && searchTerm
? `${localSearchResults.currentIndex}/${localSearchResults.count}`
: null;
})()}
</div>
</div>
</div>
</div>
<div className="flex items-center justify-center h-auto px-4 gap-2">
<button
onClick={toggleCaseSensitive}
className={`flex items-center justify-center case-sensitive-btn px-2 ${
className={`flex items-center justify-center min-w-[32px] h-[28px] rounded transition-all duration-150 ${
caseSensitive
? 'text-textStandardInverse bg-bgHover'
: 'text-textSubtleInverse hover:text-textStandardInverse'
? 'bg-white/20 shadow-[inset_0_1px_2px_rgba(0,0,0,0.2)]'
: 'text-textSubtleInverse hover:text-textStandardInverse hover:bg-white/5'
}`}
title="Case Sensitive"
>
<span className="text-md font-medium">Aa</span>
<span className="text-md font-normal">Aa</span>
</button>
<button
onClick={(e) => handleNavigate('prev', e)}
className={`p-1 text-textSubtleInverse ${!searchResults || searchResults.count === 0 ? '' : 'hover:text-textStandardInverse'}`}
title="Previous (↑)"
disabled={!searchResults || searchResults.count === 0}
>
<ArrowUp className="h-5 w-5" />
</button>
<button
onClick={(e) => handleNavigate('next', e)}
className={`p-1 text-textSubtleInverse ${!searchResults || searchResults.count === 0 ? '' : 'hover:text-textStandardInverse'}`}
title="Next (↓)"
disabled={!searchResults || searchResults.count === 0}
>
<ArrowDown className="h-5 w-5" />
</button>
<div className="flex items-center gap-2">
<button onClick={(e) => handleNavigate('prev', e)} className="p-1" title="Previous (↑)">
<ArrowUp
className={`h-5 w-5 transition-opacity ${
!hasResults
? 'opacity-30'
: 'text-textSubtleInverse hover:text-textStandardInverse'
}`}
/>
</button>
<button
onClick={(e) => handleNavigate('next', e)}
className="p-1"
title="Next (↓ or Enter)"
>
<ArrowDown
className={`h-5 w-5 transition-opacity ${
!hasResults
? 'opacity-30'
: 'text-textSubtleInverse hover:text-textStandardInverse'
}`}
/>
</button>
</div>
<button
onClick={handleClose}
className="p-1 text-textSubtleInverse hover:text-textStandardInverse"
title="Close (Esc)"
>
<Close className="h-5 w-5" />
<button onClick={handleClose} className="p-1" title="Close (Esc)">
<Close className="h-5 w-5 text-textSubtleInverse hover:text-textStandardInverse" />
</button>
</div>
</div>
</div>
);
};
export default SearchBar;

210
ui/desktop/src/components/conversation/SearchView.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect, PropsWithChildren, useCallback } from 'react';
import { SearchBar } from './SearchBar';
import SearchBar from './SearchBar';
import { SearchHighlighter } from '../../utils/searchHighlighter';
import { debounce } from 'lodash';
import '../../styles/search.css';
@@ -10,6 +10,19 @@ import '../../styles/search.css';
interface SearchViewProps {
/** Optional CSS class name */
className?: string;
/** Optional callback for search term changes */
onSearch?: (term: string, caseSensitive: boolean) => void;
/** Optional callback for navigating between search results */
onNavigate?: (direction: 'next' | 'prev') => void;
/** Current search results state */
searchResults?: {
count: number;
currentIndex: number;
} | null;
}
interface SearchContainerElement extends HTMLDivElement {
_searchHighlighter: SearchHighlighter | null;
}
/**
@@ -20,17 +33,20 @@ interface SearchViewProps {
export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
className = '',
children,
onSearch,
onNavigate,
searchResults,
}) => {
const [isSearchVisible, setIsSearchVisible] = useState(false);
const [initialSearchTerm, setInitialSearchTerm] = useState('');
const [searchResults, setSearchResults] = useState<{
const [internalSearchResults, setInternalSearchResults] = useState<{
currentIndex: number;
count: number;
} | null>(null);
const searchInputRef = React.useRef<HTMLInputElement>(null);
const highlighterRef = React.useRef<SearchHighlighter | null>(null);
const containerRef = React.useRef<HTMLDivElement | null>(null);
const containerRef = React.useRef<SearchContainerElement | null>(null);
const lastSearchRef = React.useRef<{ term: string; caseSensitive: boolean }>({
term: '',
caseSensitive: false,
@@ -39,23 +55,37 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
// Create debounced highlight function
const debouncedHighlight = useCallback(
(term: string, caseSensitive: boolean, highlighter: SearchHighlighter) => {
debounce(
(searchTerm: string, isCaseSensitive: boolean, searchHighlighter: SearchHighlighter) => {
const highlights = searchHighlighter.highlight(searchTerm, isCaseSensitive);
const count = highlights.length;
const performHighlight = () => {
const highlights = highlighter.highlight(term, caseSensitive);
const count = highlights.length;
if (count > 0) {
setSearchResults({
currentIndex: 1,
count,
});
searchHighlighter.setCurrentMatch(0, true); // Explicitly scroll when setting initial match
} else {
setSearchResults(null);
}
},
150
)(term, caseSensitive, highlighter);
if (count > 0) {
setInternalSearchResults({
currentIndex: 1,
count,
});
highlighter.setCurrentMatch(0, true);
} else {
setInternalSearchResults(null);
}
};
// If this is a case sensitivity change (same term, different case setting),
// execute immediately
if (
term === lastSearchRef.current.term &&
caseSensitive !== lastSearchRef.current.caseSensitive
) {
performHighlight();
return;
}
// Create a debounced version of performHighlight
const debouncedFn = debounce(performHighlight, 150);
debouncedFn();
// Store the debounced function for potential cancellation
return debouncedFn;
},
[]
);
@@ -69,10 +99,18 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
const handleSearch = useCallback(
(term: string, caseSensitive: boolean) => {
// Store the latest search parameters
const isCaseChange =
term === lastSearchRef.current.term &&
caseSensitive !== lastSearchRef.current.caseSensitive;
lastSearchRef.current = { term, caseSensitive };
// Call the onSearch callback if provided
onSearch?.(term, caseSensitive);
// If empty, clear everything and return
if (!term) {
setSearchResults(null);
setInternalSearchResults(null);
if (highlighterRef.current) {
highlighterRef.current.clearHighlights();
}
@@ -82,62 +120,73 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
const container = containerRef.current;
if (!container) return;
if (!highlighterRef.current) {
highlighterRef.current = new SearchHighlighter(container, (count) => {
// Only update if this is still the latest search
if (
lastSearchRef.current.term === term &&
lastSearchRef.current.caseSensitive === caseSensitive
) {
if (count > 0) {
setSearchResults((prev) => ({
currentIndex: prev?.currentIndex || 1,
count,
}));
} else {
setSearchResults(null);
}
}
});
// For case sensitivity changes, reuse existing highlighter
if (isCaseChange && highlighterRef.current) {
debouncedHighlight(term, caseSensitive, highlighterRef.current);
return;
}
// Debounce the highlight operation
// Otherwise create new highlighter
if (highlighterRef.current) {
highlighterRef.current.clearHighlights();
highlighterRef.current.destroy();
}
highlighterRef.current = new SearchHighlighter(container, (count) => {
// Only update if this is still the latest search
if (
lastSearchRef.current.term === term &&
lastSearchRef.current.caseSensitive === caseSensitive
) {
if (count > 0) {
setInternalSearchResults({
currentIndex: 1,
count,
});
} else {
setInternalSearchResults(null);
}
}
});
debouncedHighlight(term, caseSensitive, highlighterRef.current);
},
[debouncedHighlight]
[debouncedHighlight, onSearch]
);
/**
* Navigates between search results in the specified direction.
* @param direction - Direction to navigate ('next' or 'prev')
*/
const navigateResults = useCallback(
const handleNavigate = useCallback(
(direction: 'next' | 'prev') => {
if (!searchResults || searchResults.count === 0 || !highlighterRef.current) return;
let newIndex: number;
const currentIdx = searchResults.currentIndex - 1; // Convert to 0-based
if (direction === 'next') {
newIndex = currentIdx + 1;
if (newIndex >= searchResults.count) {
newIndex = 0;
}
} else {
newIndex = currentIdx - 1;
if (newIndex < 0) {
newIndex = searchResults.count - 1;
}
// If external navigation is provided, use that
if (onNavigate) {
onNavigate(direction);
return;
}
setSearchResults({
...searchResults,
currentIndex: newIndex + 1,
// Otherwise use internal navigation
if (!internalSearchResults || !highlighterRef.current) return;
let newIndex: number;
if (direction === 'next') {
newIndex = (internalSearchResults.currentIndex % internalSearchResults.count) + 1;
} else {
newIndex =
internalSearchResults.currentIndex === 1
? internalSearchResults.count
: internalSearchResults.currentIndex - 1;
}
setInternalSearchResults({
...internalSearchResults,
currentIndex: newIndex,
});
highlighterRef.current.setCurrentMatch(newIndex, true); // Explicitly scroll when navigating
highlighterRef.current.setCurrentMatch(newIndex - 1, true);
},
[searchResults]
[internalSearchResults, onNavigate]
);
const handleFindCommand = useCallback(() => {
@@ -151,15 +200,15 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
const handleFindNext = useCallback(() => {
if (isSearchVisible) {
navigateResults('next');
handleNavigate('next');
}
}, [isSearchVisible, navigateResults]);
}, [isSearchVisible, handleNavigate]);
const handleFindPrevious = useCallback(() => {
if (isSearchVisible) {
navigateResults('prev');
handleNavigate('prev');
}
}, [isSearchVisible, navigateResults]);
}, [isSearchVisible, handleNavigate]);
const handleUseSelectionFind = useCallback(() => {
const selection = window.getSelection()?.toString().trim();
@@ -173,13 +222,21 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
*/
const handleCloseSearch = useCallback(() => {
setIsSearchVisible(false);
setSearchResults(null);
setInternalSearchResults(null);
lastSearchRef.current = { term: '', caseSensitive: false };
if (highlighterRef.current) {
highlighterRef.current.clearHighlights();
highlighterRef.current.destroy();
highlighterRef.current = null;
}
// Cancel any pending highlight operations
debouncedHighlight.cancel?.();
}, [debouncedHighlight]);
// Clear search when closing
onSearch?.('', false);
}, [debouncedHighlight, onSearch]);
// Clean up highlighter and debounced functions on unmount
useEffect(() => {
@@ -228,10 +285,10 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
e.preventDefault();
if (e.shiftKey) {
// ⇧⌘G - Find Previous
navigateResults('prev');
handleNavigate('prev');
} else {
// ⌘G - Find Next
navigateResults('next');
handleNavigate('next');
}
}
};
@@ -240,7 +297,7 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [isSearchVisible, navigateResults, handleSearch, handleUseSelectionFind]);
}, [isSearchVisible, handleNavigate, handleSearch, handleUseSelectionFind]);
// Listen for Find menu commands
useEffect(() => {
@@ -258,13 +315,22 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
}, [handleFindCommand, handleFindNext, handleFindPrevious, handleUseSelectionFind]);
return (
<div ref={containerRef} className={`search-container ${className}`}>
<div
ref={(el) => {
if (el) {
containerRef.current = el;
// Expose the highlighter instance
containerRef.current._searchHighlighter = highlighterRef.current;
}
}}
className={`search-container ${className}`}
>
{isSearchVisible && (
<SearchBar
onSearch={handleSearch}
onClose={handleCloseSearch}
onNavigate={navigateResults}
searchResults={searchResults}
onNavigate={handleNavigate}
searchResults={searchResults || internalSearchResults}
inputRef={searchInputRef}
initialSearchTerm={initialSearchTerm}
/>

329
ui/desktop/src/components/sessions/SessionListView.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useRef } from 'react';
import {
MessageSquareText,
Target,
@@ -16,129 +16,288 @@ import { ScrollArea } from '../ui/scroll-area';
import { View, ViewOptions } from '../../App';
import { formatMessageTimestamp } from '../../utils/timeUtils';
import MoreMenuLayout from '../more_menu/MoreMenuLayout';
import { SearchView } from '../conversation/SearchView';
import { SearchHighlighter } from '../../utils/searchHighlighter';
interface SearchContainerElement extends HTMLDivElement {
_searchHighlighter: SearchHighlighter | null;
}
interface SessionListViewProps {
setView: (view: View, viewOptions?: ViewOptions) => void;
onSelectSession: (sessionId: string) => void;
}
const ITEM_HEIGHT = 90; // Adjust based on your card height
const BUFFER_SIZE = 5; // Number of items to render above/below viewport
const SessionListView: React.FC<SessionListViewProps> = ({ setView, onSelectSession }) => {
const [sessions, setSessions] = useState<Session[]>([]);
const [filteredSessions, setFilteredSessions] = useState<Session[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [searchResults, setSearchResults] = useState<{
count: number;
currentIndex: number;
} | null>(null);
const containerRef = useRef<HTMLDivElement>(null);
const [visibleRange, setVisibleRange] = useState({ start: 0, end: 20 });
useEffect(() => {
// Load sessions on component mount
loadSessions();
}, []);
// Handle scroll events to update visible range
useEffect(() => {
const viewportEl = containerRef.current?.closest('[data-radix-scroll-area-viewport]');
if (!viewportEl) return;
const handleScroll = () => {
const scrollTop = viewportEl.scrollTop;
const viewportHeight = viewportEl.clientHeight;
const start = Math.max(0, Math.floor(scrollTop / ITEM_HEIGHT) - BUFFER_SIZE);
const end = Math.min(
filteredSessions.length,
Math.ceil((scrollTop + viewportHeight) / ITEM_HEIGHT) + BUFFER_SIZE
);
setVisibleRange({ start, end });
};
handleScroll(); // Initial calculation
viewportEl.addEventListener('scroll', handleScroll);
const resizeObserver = new ResizeObserver(handleScroll);
resizeObserver.observe(viewportEl);
return () => {
viewportEl.removeEventListener('scroll', handleScroll);
resizeObserver.disconnect();
};
}, [filteredSessions.length]);
// Filter sessions when search term or case sensitivity changes
const handleSearch = (term: string, caseSensitive: boolean) => {
if (!term) {
setFilteredSessions(sessions);
setSearchResults(null);
return;
}
const searchTerm = caseSensitive ? term : term.toLowerCase();
const filtered = sessions.filter((session) => {
const description = session.metadata.description || session.id;
const path = session.path;
const workingDir = session.metadata.working_dir;
if (caseSensitive) {
return (
description.includes(searchTerm) ||
path.includes(searchTerm) ||
workingDir.includes(searchTerm)
);
} else {
return (
description.toLowerCase().includes(searchTerm) ||
path.toLowerCase().includes(searchTerm) ||
workingDir.toLowerCase().includes(searchTerm)
);
}
});
setFilteredSessions(filtered);
setSearchResults(filtered.length > 0 ? { count: filtered.length, currentIndex: 1 } : null);
// Reset scroll position when search changes
const viewportEl = containerRef.current?.closest('[data-radix-scroll-area-viewport]');
if (viewportEl) {
viewportEl.scrollTop = 0;
}
setVisibleRange({ start: 0, end: 20 });
};
const loadSessions = async () => {
setIsLoading(true);
setError(null);
try {
const sessions = await fetchSessions();
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);
}
};
return (
<div className="h-screen w-full">
<MoreMenuLayout showMenu={false} />
// Handle search result navigation
const handleSearchNavigation = (direction: 'next' | 'prev') => {
if (!searchResults || filteredSessions.length === 0) return;
<ScrollArea className="h-full w-full">
<div className="flex flex-col pb-24">
<div className="px-8 pt-6 pb-4">
<BackButton onClick={() => setView('chat')} />
</div>
let newIndex: number;
if (direction === 'next') {
newIndex = (searchResults.currentIndex % filteredSessions.length) + 1;
} else {
newIndex =
searchResults.currentIndex === 1 ? filteredSessions.length : searchResults.currentIndex - 1;
}
{/* Content Area */}
<div className="flex flex-col mb-6 px-8">
<h1 className="text-3xl font-medium text-textStandard">Previous goose sessions</h1>
<h3 className="text-sm text-textSubtle mt-2">
View previous goose sessions and their contents to pick up where you left off.
setSearchResults({ ...searchResults, currentIndex: newIndex });
// Find the SearchView's container element
const searchContainer =
containerRef.current?.querySelector<SearchContainerElement>('.search-container');
if (searchContainer?._searchHighlighter) {
// Update the current match in the highlighter
searchContainer._searchHighlighter.setCurrentMatch(newIndex - 1, true);
}
};
// Render a session item
const SessionItem = React.memo(function SessionItem({ session }: { session: Session }) {
return (
<Card
onClick={() => onSelectSession(session.id)}
className="p-2 mx-4 mb-2 bg-bgSecondary hover:bg-bgSubtle cursor-pointer transition-all duration-150"
>
<div className="flex justify-between items-start gap-4">
<div className="min-w-0 flex-1">
<h3 className="text-base font-medium text-textStandard truncate max-w-[50vw]">
{session.metadata.description || session.id}
</h3>
<div className="flex gap-3 min-w-0">
<div className="flex items-center text-textSubtle text-sm shrink-0">
<Calendar className="w-3 h-3 mr-1 flex-shrink-0" />
<span>{formatMessageTimestamp(Date.parse(session.modified) / 1000)}</span>
</div>
<div className="flex items-center text-textSubtle text-sm min-w-0">
<Folder className="w-3 h-3 mr-1 flex-shrink-0" />
<span className="truncate">{session.metadata.working_dir}</span>
</div>
</div>
</div>
<div className="flex-1 overflow-y-auto p-4">
{isLoading ? (
<div className="flex justify-center items-center h-full">
<LoaderCircle className="h-8 w-8 animate-spin text-textPrimary" />
</div>
) : error ? (
<div className="flex flex-col items-center justify-center h-full text-textSubtle">
<AlertCircle className="h-12 w-12 text-red-500 mb-4" />
<p className="text-lg mb-2">Error Loading Sessions</p>
<p className="text-sm text-center mb-4">{error}</p>
<Button onClick={loadSessions} variant="default">
Try Again
</Button>
</div>
) : sessions.length > 0 ? (
<div className="grid gap-2">
{sessions.map((session) => (
<Card
key={session.id}
onClick={() => onSelectSession(session.id)}
className="p-2 bg-bgSecondary hover:bg-bgSubtle cursor-pointer transition-all duration-150"
>
<div className="flex justify-between items-start gap-4">
<div className="min-w-0 flex-1">
<h3 className="text-base font-medium text-textStandard truncate max-w-[50vw]">
{session.metadata.description || session.id}
</h3>
<div className="flex gap-3 min-w-0">
<div className="flex items-center text-textSubtle text-sm shrink-0">
<Calendar className="w-3 h-3 mr-1 flex-shrink-0" />
<span>
{formatMessageTimestamp(Date.parse(session.modified) / 1000)}
</span>
</div>
<div className="flex items-center text-textSubtle text-sm min-w-0">
<Folder className="w-3 h-3 mr-1 flex-shrink-0" />
<span className="truncate">{session.metadata.working_dir}</span>
</div>
</div>
</div>
<div className="flex items-center gap-3 shrink-0">
<div className="flex flex-col items-end">
<div className="flex items-center text-sm text-textSubtle">
<span>{session.path.split('/').pop() || session.path}</span>
</div>
<div className="flex items-center mt-1 space-x-3 text-sm text-textSubtle">
<div className="flex items-center">
<MessageSquareText className="w-3 h-3 mr-1" />
<span>{session.metadata.message_count}</span>
</div>
{session.metadata.total_tokens !== null && (
<div className="flex items-center">
<Target className="w-3 h-3 mr-1" />
<span>{session.metadata.total_tokens.toLocaleString()}</span>
</div>
)}
</div>
</div>
<ChevronRight className="w-8 h-5 text-textSubtle" />
</div>
</div>
</Card>
))}
<div className="flex items-center gap-3 shrink-0">
<div className="flex flex-col items-end">
<div className="flex items-center text-sm text-textSubtle">
<span>{session.path.split('/').pop() || session.path}</span>
</div>
) : (
<div className="flex flex-col items-center justify-center h-full text-textSubtle">
<MessageSquareText className="h-12 w-12 mb-4" />
<p className="text-lg mb-2">No chat sessions found</p>
<p className="text-sm">Your chat history will appear here</p>
<div className="flex items-center mt-1 space-x-3 text-sm text-textSubtle">
<div className="flex items-center">
<MessageSquareText className="w-3 h-3 mr-1" />
<span>{session.metadata.message_count}</span>
</div>
{session.metadata.total_tokens !== null && (
<div className="flex items-center">
<Target className="w-3 h-3 mr-1" />
<span>{session.metadata.total_tokens.toLocaleString()}</span>
</div>
)}
</div>
)}
</div>
<ChevronRight className="w-8 h-5 text-textSubtle" />
</div>
</div>
</ScrollArea>
</Card>
);
});
const renderContent = () => {
if (isLoading) {
return (
<div className="flex justify-center items-center h-full">
<LoaderCircle className="h-8 w-8 animate-spin text-textPrimary" />
</div>
);
}
if (error) {
return (
<div className="flex flex-col items-center justify-center h-full text-textSubtle">
<AlertCircle className="h-12 w-12 text-red-500 mb-4" />
<p className="text-lg mb-2">Error Loading Sessions</p>
<p className="text-sm text-center mb-4">{error}</p>
<Button onClick={loadSessions} variant="default">
Try Again
</Button>
</div>
);
}
if (filteredSessions.length === 0) {
if (searchResults === null && sessions.length > 0) {
return (
<div className="flex flex-col items-center justify-center h-full text-textSubtle mt-4">
<MessageSquareText className="h-12 w-12 mb-4" />
<p className="text-lg mb-2">No matching sessions found</p>
<p className="text-sm">Try adjusting your search terms</p>
</div>
);
}
return (
<div className="flex flex-col items-center justify-center h-full text-textSubtle">
<MessageSquareText className="h-12 w-12 mb-4" />
<p className="text-lg mb-2">No chat sessions found</p>
<p className="text-sm">Your chat history will appear here</p>
</div>
);
}
const visibleSessions = filteredSessions.slice(visibleRange.start, visibleRange.end);
return (
<div style={{ height: filteredSessions.length * ITEM_HEIGHT }} className="relative">
<div
style={{
position: 'absolute',
top: visibleRange.start * ITEM_HEIGHT,
width: '100%',
}}
>
{visibleSessions.map((session) => (
<SessionItem key={session.id} session={session} />
))}
</div>
</div>
);
};
return (
<div className="h-screen w-full flex flex-col">
<MoreMenuLayout showMenu={false} />
<div className="flex-1 flex flex-col min-h-0">
<div className="px-8 pt-6 pb-4">
<BackButton onClick={() => setView('chat')} />
</div>
{/* Content Area */}
<div className="flex flex-col mb-6 px-8">
<h1 className="text-3xl font-medium text-textStandard">Previous goose sessions</h1>
<h3 className="text-sm text-textSubtle mt-2">
View previous goose sessions and their contents to pick up where you left off.
</h3>
</div>
<div className="flex-1 min-h-0 relative">
<ScrollArea className="h-full" data-search-scroll-area>
<div ref={containerRef} className="h-full relative">
<SearchView
onSearch={handleSearch}
onNavigate={handleSearchNavigation}
searchResults={searchResults}
className="relative"
>
{renderContent()}
</SearchView>
</div>
</ScrollArea>
</div>
</div>
</div>
);
};

2
ui/desktop/src/components/sessions/SharedSessionView.tsx
View File

@@ -21,7 +21,7 @@ const SharedSessionView: React.FC<SharedSessionViewProps> = ({
}) => {
return (
<div className="h-screen w-full flex flex-col">
<div className="relative flex items-center h-[36px] w-full"></div>
<div className="relative flex items-center h-14 w-full"></div>
{/* Top Row - back, info (fixed) */}
<SessionHeaderCard onBack={onBack}>

246
ui/desktop/src/utils/searchHighlighter.ts
View File

@@ -11,18 +11,10 @@ export class SearchHighlighter {
private scrollContainer: HTMLElement | null = null;
private currentTerm: string = '';
private caseSensitive: boolean = false;
private scrollHandler: (() => void) | null = null;
private onMatchesChange?: (count: number) => void;
private currentMatchIndex: number = -1;
private isUpdatingPositions: boolean = false;
private updatePending: boolean = false;
private shouldScrollToMatch: boolean = false;
private isScrollingProgrammatically: boolean = false;
/**
* Creates a new SearchHighlighter instance.
* @param container - The root HTML element to search within
* @param onMatchesChange - Optional callback that receives the count of matches when changed
*/
constructor(container: HTMLElement, onMatchesChange?: (count: number) => void) {
this.container = container;
this.onMatchesChange = onMatchesChange;
@@ -40,55 +32,37 @@ export class SearchHighlighter {
z-index: 1;
`;
// Find scroll container (usually the radix scroll area viewport)
this.scrollContainer = container.closest('[data-radix-scroll-area-viewport]');
// Find scroll container (look for our custom data attribute first, then fallback to radix)
this.scrollContainer =
container
.closest('[data-search-scroll-area]')
?.querySelector('[data-radix-scroll-area-viewport]') ||
container.closest('[data-radix-scroll-area-viewport]');
if (this.scrollContainer) {
this.scrollContainer.style.position = 'relative';
this.scrollContainer.appendChild(this.overlay);
// Add scroll handler with debouncing to prevent performance issues
this.scrollHandler = () => {
if (this.isUpdatingPositions) {
this.updatePending = true;
return;
}
this.isUpdatingPositions = true;
requestAnimationFrame(() => {
this.updateHighlightPositions();
this.isUpdatingPositions = false;
if (this.updatePending) {
this.updatePending = false;
this.scrollHandler?.();
// Add scroll end detection
this.scrollContainer.addEventListener(
'scroll',
() => {
if (!this.isScrollingProgrammatically) {
// User is manually scrolling, update highlight positions
this.updateHighlightPositions();
}
});
};
this.scrollContainer.addEventListener('scroll', this.scrollHandler);
},
{ passive: true }
);
} else {
container.style.position = 'relative';
container.appendChild(this.overlay);
}
// Handle content changes with debouncing
// Handle content changes
this.resizeObserver = new ResizeObserver(() => {
if (this.highlights.length > 0) {
if (this.isUpdatingPositions) {
this.updatePending = true;
return;
}
this.isUpdatingPositions = true;
requestAnimationFrame(() => {
this.updateHighlightPositions();
this.isUpdatingPositions = false;
if (this.updatePending) {
this.updatePending = false;
// Re-run the update
requestAnimationFrame(() => this.updateHighlightPositions());
}
});
this.updateHighlightPositions();
}
});
this.resizeObserver.observe(container);
@@ -103,36 +77,16 @@ export class SearchHighlighter {
}
}
if (shouldUpdate && this.currentTerm) {
if (this.isUpdatingPositions) {
this.updatePending = true;
return;
}
this.isUpdatingPositions = true;
requestAnimationFrame(() => {
this.highlight(this.currentTerm, this.caseSensitive);
this.isUpdatingPositions = false;
if (this.updatePending) {
this.updatePending = false;
// Re-run the update
requestAnimationFrame(() => this.highlight(this.currentTerm, this.caseSensitive));
}
});
this.highlight(this.currentTerm, this.caseSensitive);
}
});
this.mutationObserver.observe(container, { childList: true, subtree: true });
}
/**
* Highlights all occurrences of a search term within the container.
* @param term - The text to search for
* @param caseSensitive - Whether to perform a case-sensitive search
* @returns Array of highlight elements created
*/
highlight(term: string, caseSensitive = false) {
// Store the current match index before clearing
// Store the current match index and count before clearing
const currentIndex = this.currentMatchIndex;
const oldHighlightCount = this.highlights.length;
this.clearHighlights();
this.currentTerm = term;
@@ -191,16 +145,20 @@ export class SearchHighlighter {
const highlightRect = document.createElement('div');
highlightRect.className = 'search-highlight';
const scrollTop = this.scrollContainer ? this.scrollContainer.scrollTop : window.scrollY;
const scrollLeft = this.scrollContainer ? this.scrollContainer.scrollLeft : window.scrollX;
const containerTop = this.scrollContainer?.getBoundingClientRect().top || 0;
const containerLeft = this.scrollContainer?.getBoundingClientRect().left || 0;
// Get the scroll container's position
const containerRect = this.scrollContainer?.getBoundingClientRect() || { top: 0, left: 0 };
const scrollTop = this.scrollContainer?.scrollTop || 0;
const scrollLeft = this.scrollContainer?.scrollLeft || 0;
// Calculate the highlight position relative to the scroll container
const top = rect.top + scrollTop - containerRect.top;
const left = rect.left + scrollLeft - containerRect.left;
highlightRect.style.cssText = `
position: absolute;
pointer-events: none;
top: ${rect.top + scrollTop - containerTop}px;
left: ${rect.left + scrollLeft - containerLeft}px;
top: ${top}px;
left: ${left}px;
width: ${rect.width}px;
height: ${rect.height}px;
`;
@@ -211,135 +169,97 @@ export class SearchHighlighter {
return highlight;
});
// Notify about updated match count
this.onMatchesChange?.(this.highlights.length);
// Only notify about count changes if the number of matches has actually changed
if (this.highlights.length !== oldHighlightCount) {
this.onMatchesChange?.(this.highlights.length);
}
// Restore current match if it was set
if (currentIndex >= 0 && this.highlights.length > 0) {
// Use the stored index, not this.currentMatchIndex which was reset in clearHighlights
this.setCurrentMatch(currentIndex, false); // Don't scroll when restoring highlight
// Restore current match if we have the same number of highlights
if (currentIndex >= 0 && this.highlights.length === oldHighlightCount) {
this.setCurrentMatch(currentIndex, false);
}
// Otherwise, if we have highlights but the count changed, start from the beginning
else if (this.highlights.length > 0) {
this.setCurrentMatch(0, false);
}
return this.highlights;
}
/**
* Sets the current match and optionally scrolls to it.
* @param index - Zero-based index of the match to set as current
* @param shouldScroll - Whether to scroll to the match (true for explicit navigation)
*/
setCurrentMatch(index: number, shouldScroll = true) {
// Store the current match index
this.currentMatchIndex = index;
if (!this.highlights.length) return;
// Save the scroll flag
this.shouldScrollToMatch = shouldScroll;
// Ensure index wraps around
const wrappedIndex =
((index % this.highlights.length) + this.highlights.length) % this.highlights.length;
// Store the current match index
this.currentMatchIndex = wrappedIndex;
// Remove current class from all highlights
this.overlay.querySelectorAll('.search-highlight').forEach((el) => {
el.classList.remove('current');
});
// Add current class to the matched highlight
if (this.highlights.length > 0) {
// Ensure index wraps around
const wrappedIndex =
((index % this.highlights.length) + this.highlights.length) % this.highlights.length;
// Add current class to all parts of the highlight
const currentHighlight = this.highlights[wrappedIndex];
const highlightElements = currentHighlight.querySelectorAll('.search-highlight');
highlightElements.forEach((el) => {
el.classList.add('current');
});
// Find all highlight elements within the current highlight container
const highlightElements = this.highlights[wrappedIndex].querySelectorAll('.search-highlight');
// Only scroll if explicitly requested
if (shouldScroll && this.scrollContainer) {
const firstHighlight = highlightElements[0] as HTMLElement;
if (firstHighlight) {
// Calculate the target scroll position
const containerRect = this.scrollContainer.getBoundingClientRect();
const highlightRect = firstHighlight.getBoundingClientRect();
// Add 'current' class to all parts of the highlight (for multi-line matches)
highlightElements.forEach((el) => {
el.classList.add('current');
});
// Calculate the target position that would center the highlight
const targetScrollTop =
this.scrollContainer.scrollTop +
(highlightRect.top - containerRect.top) -
(containerRect.height - highlightRect.height) / 2;
// Only scroll if explicitly requested (e.g., when navigating)
if (shouldScroll) {
// Ensure we call scrollToMatch with the correct index
setTimeout(() => this.scrollToMatch(wrappedIndex), 0);
// Set flag before scrolling
this.isScrollingProgrammatically = true;
// Perform the scroll
this.scrollContainer.scrollTop = targetScrollTop;
// Clear flag after a short delay
setTimeout(() => {
this.isScrollingProgrammatically = false;
}, 100);
}
}
}
/**
* Scrolls to center the specified match in the viewport.
* @param index - Zero-based index of the match to scroll to
*/
private scrollToMatch(index: number) {
if (!this.scrollContainer || !this.highlights[index]) return;
const currentHighlight = this.highlights[index].querySelector(
'.search-highlight'
) as HTMLElement;
if (!currentHighlight) return;
const rect = currentHighlight.getBoundingClientRect();
const containerRect = this.scrollContainer.getBoundingClientRect();
// Calculate how far the element is from the top of the viewport
const elementRelativeToViewport = rect.top - containerRect.top;
// Calculate the new scroll position that would center the element
const currentScrollTop = this.scrollContainer.scrollTop;
const targetPosition =
currentScrollTop + elementRelativeToViewport - (containerRect.height - rect.height) / 2;
// Ensure we don't scroll past the bottom
const maxScroll = this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight;
const finalPosition = Math.max(0, Math.min(targetPosition, maxScroll));
this.scrollContainer.scrollTo({
top: finalPosition,
behavior: 'smooth',
});
}
/**
* Updates the positions of all highlights after content changes.
* This preserves the current match selection but doesn't scroll.
*/
private updateHighlightPositions() {
if (this.currentTerm) {
// Store the current index for restoration
const currentIndex = this.currentMatchIndex;
// Clear and recreate all highlights
this.overlay.innerHTML = '';
this.highlights = [];
// Re-highlight with the current term
const oldHighlights = this.highlights.length; // Store the current count
this.highlight(this.currentTerm, this.caseSensitive);
// Ensure the current match is still highlighted, but don't scroll
if (currentIndex >= 0 && this.highlights.length > 0) {
// If we still have the same number of highlights, restore the current index
if (this.highlights.length === oldHighlights && currentIndex >= 0) {
this.setCurrentMatch(currentIndex, false);
}
}
}
/**
* Removes all search highlights from the container.
*/
clearHighlights() {
this.highlights.forEach((h) => h.remove());
this.highlights = [];
this.currentTerm = '';
this.currentMatchIndex = -1;
this.shouldScrollToMatch = false;
this.overlay.innerHTML = ''; // Ensure all highlights are removed
this.overlay.innerHTML = '';
}
/**
* Cleans up all resources used by the highlighter.
* Should be called when the component using this highlighter unmounts.
*/
destroy() {
this.resizeObserver.disconnect();
this.mutationObserver.disconnect();
if (this.scrollHandler && this.scrollContainer) {
this.scrollContainer.removeEventListener('scroll', this.scrollHandler);
}
this.overlay.remove();
}
}