Agent Activity

A collapsible timeline that shows an AI agent's run step by step, with streaming labels, source chips, expandable details, and inline images.

trove/cn

byPurbayan Pramanik

"use client";

import { useEffect, useState } from "react";

import AgentActivity, {
  type AgentActivityEntry,
} from "@/components/ui/agent-activity";
import { StreamingDescription } from "@/components/ui/agent-activity-utils/streaming-description";

const text =
  "Searching recent releases, comparing changelogs, and summarizing the notable breaking changes.";

export default function AgentActivityDemo() {
  const [complete, setComplete] = useState(false);

  useEffect(() => {
    const timer = window.setTimeout(
      () => setComplete(true),
      text.length * 6 + 800,
    );
    return () => window.clearTimeout(timer);
  }, []);

  const entries: AgentActivityEntry[] = [
    {
      id: "reasoning",
      label: "Reasoned about the request",
      status: "complete",
      icon: "reasoning",
    },
    {
      id: "search",
      label: "Searched the web",
      activeLabel: "Searching the web",
      status: complete ? "complete" : "active",
      icon: "search",
      isStreamingText: true,
      description: (
        <StreamingDescription
          text={text}
          active={!complete}
          complete={complete}
        />
      ),
    },
  ];

  return <AgentActivity title="Thinking" entries={entries} defaultOpen />;
}