diff --git a/ui/desktop/src/components/sessions/SessionListView.tsx b/ui/desktop/src/components/sessions/SessionListView.tsx index b86aae5934..d3c2ef1b25 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([]); @@ -182,6 +183,16 @@ const SessionListView: React.FC = React.memo(({ onSelectSe 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 loadSessions = useCallback(async () => { setIsLoading(true); setShowSkeleton(true); @@ -240,6 +251,18 @@ const SessionListView: React.FC = React.memo(({ onSelectSe }); }, [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 actual filtering useEffect(() => { if (!debouncedSearchTerm) { @@ -350,6 +373,7 @@ const SessionListView: React.FC = React.memo(({ onSelectSe setSessionRefs(session.id, el)} >