A collapsible timeline that shows an AI agent's run step by step, with streaming labels, source chips, expandable details, and inline images.
"use client";
import { useReducedMotion } from "motion/react";
import AgentActivity, {
type AgentActivityEntry,
} from "@/components/ui/agent-activity";
import { DemoPlaybackProvider } from "@/components/ui/agent-activity-utils/demo-playback";
import { useDemoSequence } from "@/components/ui/agent-activity-utils/use-demo-sequence";
import { StreamingDescription } from "@/components/ui/agent-activity-utils/streaming-description";
const timings = [
{ hold: 900 },
{ hold: 1600, reveals: [300, 900] },
{ hold: 1200 },
];
const sources = ["docs.stripe.com", "github.com/vercel"];
function StreamingDemoInner() {
const reduceMotion = useReducedMotion();
const { visible } = useDemoSequence(timings, reduceMotion);
const entries: AgentActivityEntry[] = [
{
id: "search",
label: "Searched the web",
activeLabel: "Searching the web",
status: visible > 0 ? (visible === 1 ? "active" : "complete") : "pending",
icon: "search",
sources,
},
{
id: "read",
label: "Read documentation",
activeLabel: "Reading documentation",
status: visible > 1 ? (visible === 2 ? "active" : "complete") : "pending",
icon: "reasoning",
isStreamingText: true,
description: (
<StreamingDescription
text="Found the webhook signature verification steps and the retry backoff policy for failed events."
active={visible === 2}
complete={visible > 2}
/>
),
},
{
id: "respond",
label: "Drafted a response",
activeLabel: "Drafting a response",
status: visible > 2 ? "complete" : visible === 3 ? "active" : "pending",
icon: "tool",
},
];
return <AgentActivity entries={entries} />;
}
export default function Demo() {
return (
<DemoPlaybackProvider isPlaying={true}>
<div className="flex w-full items-center justify-center p-8">
<StreamingDemoInner />
</div>
</DemoPlaybackProvider>
);
}
