Agent timelineNew

$pnpm dlx shadcn@latest add @nextui/agent-timeline

1{
2  "registries": {
3    "@nextui": {
4      "url": "https://nextui.dev/r/{name}.json",
5      "headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }
6    }
7  }
8}

1"use client";
2
3import type { UIMessage } from "ai";
4import { AgentTimeline, type TimelineEvent } from "@/components/nextui/agent-timeline";
5
6// Turn the tool parts of one assistant turn into timeline rows.
7export function TurnActivity({ message }: { message: UIMessage }) {
8  const events: TimelineEvent[] = message.parts.flatMap((part): TimelineEvent[] => {
9    if (part.type === "reasoning") {
10      return [{ kind: "think", title: "Thought it through", status: part.state === "streaming" ? "running" : "done" }];
11    }
12    if (part.type.startsWith("tool-") && "state" in part) {
13      const name = part.type.slice(5);
14      const status = part.state === "output-error" ? "error" : part.state === "output-available" ? "done" : "running";
15      return [{ kind: name.startsWith("search") ? "search" : "tool", title: name, status }];
16    }
17    return [];
18  });
19
20  return <AgentTimeline events={events} />;
21}