search-tool

1import { memo } from "react";
2import type { TimelineStep, StepState } from "../types/timeline";
3import type { SourceType } from "../icons/source-icons";
4import { IconFileText } from "@tabler/icons-react";
5import { ToolRowBase } from "./tool-row-base";
6import { useToolComplete } from "../hooks/use-tool-complete";
7import {
8  mapToolInvocationToStep,
9  mapToolStateToStepState,
10} from "../utils/tool-adapters";
11import { cn } from "../utils/cn";
12 
13export type SearchResult = { source: SourceType; title: string; date: string };
14 
15export type SearchGroupRichProps = {
16  toolSteps: Extract<TimelineStep, { type: "tool-call" }>[];
17  stepStates: Record<string, StepState>;
18  onStepComplete: (id: string) => void;
19  results?: SearchResult[];
20  defaultOpen?: boolean;
21};
22 
23export function SearchGroupRich({
24  toolSteps,
25  stepStates,
26  onStepComplete,
27  results = [],
28  defaultOpen,
29}: SearchGroupRichProps) {
30  const anyAnimating = toolSteps.some((s) => stepStates[s.id] === "animating");
31  const searchQuery =
32    toolSteps.find((s) => s.searchQuery)?.searchQuery ?? "searching...";
33  const totalResults = results.length;
34  // Only expose the expand affordance once there is something useful to show.
35  // While the search is still streaming we have no results yet and the panel
36  // header is just "Searched for <same query>" — redundant with the row
37  // label. Once results arrive the panel becomes meaningful.
38  const hasExpandableContent = totalResults > 0;
39 
40  function CompleteTracker({
41    step,
42  }: {
43    step: Extract<TimelineStep, { type: "tool-call" }>;
44  }) {
45    useToolComplete(stepStates[step.id] === "animating", step.duration, () =>
46      onStepComplete(step.id),
47    );
48    return null;
49  }
50 
51  return (
52    <>
53      {toolSteps.map((step) => (
54        <CompleteTracker key={step.id} step={step} />
55      ))}
56      <ToolRowBase
57        shimmerLabel="Searching..."
58        completeLabel={`Found ${totalResults} results`}
59        isAnimating={anyAnimating}
60        expandable={hasExpandableContent}
61        defaultOpen={defaultOpen}
62      >
63        <div className="rounded-an-tool-border-radius overflow-hidden bg-an-tool-background border border-border">
64          <div className="flex items-center px-2.5 py-0 border-b border-an-tool-border-color h-7 text-xs gap-1">
65            <span className="text-foreground font-medium">Searched for</span>{" "}
66            <span className="text-muted-foreground truncate">
67              &ldquo;{searchQuery}&rdquo;
68            </span>
69// … truncated