diff --git a/ui/desktop/src/components/sessions/SessionListView.tsx b/ui/desktop/src/components/sessions/SessionListView.tsx index 0d4597088099..2475187a57d8 100644 --- a/ui/desktop/src/components/sessions/SessionListView.tsx +++ b/ui/desktop/src/components/sessions/SessionListView.tsx @@ -155,9 +155,10 @@ interface SearchContainerElement extends HTMLDivElement { interface SessionListViewProps { setView: (view: View, viewOptions?: ViewOptions) => void; onSelectSession: (sessionId: string) => void; + selectedSessionId?: string | null; } -const SessionListView: React.FC = React.memo(({ onSelectSession }) => { +const SessionListView: React.FC = React.memo(({ onSelectSession, selectedSessionId }) => { const [sessions, setSessions] = useState([]); const [filteredSessions, setFilteredSessions] = useState([]); const [dateGroups, setDateGroups] = useState([]); @@ -278,6 +279,23 @@ const SessionListView: React.FC = React.memo(({ onSelectSe }); }, [debouncedSearchTerm, caseSensitive, sessions]); + // Scroll to the selected session when returning from session history view + useEffect(() => { + if (selectedSessionId && showContent && !isLoading) { + const sessionElement = containerRef.current?.querySelector( + `[session-item-id="${selectedSessionId}"]` + ) as HTMLElement; + + if (sessionElement) { + sessionElement.scrollIntoView({ + behavior: 'smooth', + block: 'center', + inline: 'nearest', + }); + } + } + }, [selectedSessionId, showContent, isLoading]); + // Handle immediate search input (updates search term for debouncing) const handleSearch = useCallback((term: string, caseSensitive: boolean) => { setSearchTerm(term); @@ -348,8 +366,9 @@ const SessionListView: React.FC = React.memo(({ onSelectSe return ( onSelectSession(session.id)} className="session-item h-full py-3 px-4 hover:shadow-default cursor-pointer transition-all duration-150 flex flex-col justify-between relative group" + session-item-id={session.id} >