"use client"; import { useEffect, useState, type ReactElement } from "react"; import { GREP_SEARCH_DELAY_MS } from "@/constants"; import { Collapsible } from "../ui/collapsible"; import { GrepToolCallBlock } from "./grep-tool-call-block"; interface ExploredHeaderProps { completedCount: number; } export const ExploredHeader = ({ completedCount, }: ExploredHeaderProps): ReactElement => { const isExploring = completedCount === 0; const label = `${completedCount} search${completedCount === 1 ? "" : "es"}`; return (

{isExploring ? ( "Exploring" ) : ( <> Explored {label} )}

); }; interface GrepSearchGroupProps { searches: string[]; onComplete?: () => void; } export const GrepSearchGroup = ({ searches, onComplete, }: GrepSearchGroupProps): ReactElement => { const [phase, setPhase] = useState(0); useEffect(() => { if (phase > searches.length) return; const timeout = setTimeout(() => { const nextPhase = phase + 1; setPhase(nextPhase); if (nextPhase > searches.length) { onComplete?.(); } }, GREP_SEARCH_DELAY_MS); return () => clearTimeout(timeout); }, [phase, searches.length, onComplete]); const visibleCount = Math.min(phase, searches.length); const streamingIndex = phase <= searches.length ? phase - 1 : null; const isStreaming = streamingIndex !== null && streamingIndex >= 0; return ( } defaultExpanded isStreaming={isStreaming} >

{searches.slice(0, visibleCount).map((search, index) => ( ))}

); }; GrepSearchGroup.displayName = "GrepSearchGroup";