Agent Activity

1"use client";
2 
3import { useId, useState, type ComponentType, type ReactNode } from "react";
4import {
5  CheckIcon,
6  ChevronDownIcon,
7  CircleIcon,
8  FileTextIcon,
9  GlobeIcon,
10  ImageIcon,
11  SearchIcon,
12  SquareTerminalIcon,
13} from "lucide-react";
14import { AnimatePresence, motion, useReducedMotion } from "motion/react";
15 
16import { spring } from "@/lib/springs";
17import { cn } from "@/lib/utils";
18 
19export type AgentActivityStatus = "pending" | "active" | "complete";
20 
21export type AgentActivityIcon = "thinking" | "reasoning" | "search" | "tool" | "image";
22 
23export interface AgentActivityImage {
24  src: string;
25  alt: string;
26  caption?: ReactNode;
27}
28 
29export interface AgentActivityDetails {
30  summary: ReactNode;
31  items: readonly ReactNode[];
32  defaultOpen?: boolean;
33}
34 
35export interface AgentActivityEntry {
36  id: string;
37  /** The completed label shown after the step resolves. */
38  label: ReactNode;
39  /** Optional in-progress label, such as "Reading…" before "Read…". */
40  activeLabel?: ReactNode;
41  status: AgentActivityStatus;
42  /** Marks a description that changes token by token while its step is active. */
43  isStreamingText?: boolean;
44  /** A compact secondary line, including text that may update while streaming. */
45  description?: ReactNode;
46  icon?: AgentActivityIcon;
47  /** Defaults to an understated dot when false. */
48  showIcon?: boolean;
49  sources?: readonly ReactNode[];
50  details?: AgentActivityDetails;
51  image?: AgentActivityImage;
52}
53 
54export interface AgentActivityProps {
55  entries: readonly AgentActivityEntry[];
56  /** The interactive run label; it remains the stable anchor while steps arrive. */
57  title?: ReactNode;
58  defaultOpen?: boolean;
59  open?: boolean;
60  onOpenChange?: (open: boolean) => void;
61  className?: string;
62}
63 
64const ICONS: Record<AgentActivityIcon, ComponentType<{ className?: string }>> = {
65  thinking: CircleIcon,
66  reasoning: FileTextIcon,
67  search: SearchIcon,
68  tool: SquareTerminalIcon,
69  image: ImageIcon,
70};
71 
72const railDrawTransition = { ...spring.moderate.enter, bounce: 0.06 };
73// Output is append-only trace data, so it should simply arrive in place rather
74// than competing with the structural step and rail motion.
75const evidenceRevealTransition = spring.quick.exit;
76const reducedFadeTransition = spring.quick.exit;
77 
78function AgentActivityDetails({ details }: { details: AgentActivityDetails }) {
79  const [isOpen, setIsOpen] = useState(details.defaultOpen ?? false);
80  const id = useId();
81  const reduceMotion = useReducedMotion();
82 
83// … truncated