Agent Activity

1"use client";
2// beui.dev/components/agents/agent-activity
3 
4import { ChevronDown } from "lucide-react";
5import { AnimatePresence, motion, useReducedMotion } from "motion/react";
6import {
7  type ReactNode,
8  useCallback,
9  useEffect,
10  useId,
11  useLayoutEffect,
12  useRef,
13  useState,
14} from "react";
15import { ThinkingShimmer } from "@/components/agents/loading-states/thinking-shimmer";
16import { AgentDisclosure } from "@/components/agents/agent-disclosure";
17import {
18  EASE_OUT,
19  SPRING_LAYOUT,
20  SPRING_SWAP,
21} from "@/lib/ease";
22import { cn } from "@/lib/utils";
23import { ActivityRow } from "./activity-row";
24import type {
25  AgentActivityContentType,
26  AgentActivityItem,
27  AgentActivityProps,
28} from "./types";
29 
30export type {
31  AgentActivityContentType,
32  AgentActivityItem,
33  AgentActivityProps,
34  AgentActivitySearch,
35  AgentActivityStatus,
36  AgentActivityStep,
37  AgentActivityText,
38  AgentActivityTool,
39  AgentActivityTrace,
40  AgentSearchResult,
41  AgentStepStatus,
42  AgentTraceKind,
43} from "./types";
44 
45function formatDuration(duration: number) {
46  const seconds = Math.max(0, Math.round(duration));
47  if (seconds < 60) return `${seconds}s`;
48 
49  const minutes = Math.floor(seconds / 60);
50  const remainder = seconds % 60;
51  return remainder === 0 ? `${minutes}m` : `${minutes}m ${remainder}s`;
52}
53 
54function useControllableOpen({
55  open,
56  defaultOpen,
57  onOpenChange,
58}: {
59  open?: boolean;
60  defaultOpen: boolean;
61  onOpenChange?: (open: boolean) => void;
62}) {
63  const [internalOpen, setInternalOpen] = useState(defaultOpen);
64  const controlled = open !== undefined;
65  const currentOpen = open ?? internalOpen;
66 
67  const setOpen = useCallback(
68    (next: boolean) => {
69      if (!controlled) setInternalOpen(next);
70      onOpenChange?.(next);
71    },
72    [controlled, onOpenChange],
73  );
74 
75  return [currentOpen, setOpen] as const;
76}
77 
78function getContentType(items: AgentActivityItem[]): AgentActivityContentType {
79  const first = items[0]?.type;
80  return first && items.every((item) => item.type === first) ? first : "mixed";
81}
82 
83function getActiveLabel(type: AgentActivityContentType) {
84  if (type === "search") return "Searching the web…";
85  if (type === "tool") return "Running tools…";
86  if (type === "trace") return "Working through the run…";
87  if (type === "mixed") return "Working through it…";
88  return "Thinking…";
89}
90 
91function getSummary(
92  type: AgentActivityContentType,
93  items: AgentActivityItem[],
94  duration: number,
95): ReactNode {
96// … truncated