AgentChat

1"use client";
2 
3import {
4  ArrowRight01Icon,
5  Loading03Icon,
6  SentIcon,
7} from "@hugeicons/core-free-icons";
8import { HugeiconsIcon } from "@hugeicons/react";
9import type { ChatStatus, UIMessage } from "ai";
10import { domAnimation, LazyMotion, m, useReducedMotion } from "motion/react";
11import type {
12  ComponentProps,
13  FormEvent,
14  KeyboardEvent,
15  ReactNode,
16} from "react";
17import { useCallback, useRef, useState } from "react";
18import { Streamdown } from "streamdown";
19 
20import { EmptyState } from "@/components/empty-state/empty-state";
21import { NeonMarkShimmer } from "@/components/neon-loader/neon-loader";
22import { ToolCallChip } from "@/components/tool-call-chip/tool-call-chip";
23import type { ToolCallState } from "@/components/tool-call-chip/tool-call-chip";
24import { Button } from "@/components/ui/button";
25import { Marker, MarkerContent } from "@/components/ui/marker";
26import {
27  MessageScroller,
28  MessageScrollerButton,
29  MessageScrollerContent,
30  MessageScrollerItem,
31  MessageScrollerProvider,
32  MessageScrollerViewport,
33} from "@/components/ui/message-scroller";
34import { cn } from "@/lib/utils";
35 
36/* ─────────────────────────────────────────────────────────
37 * BLOCK STORYBOARD
38 *
39 * A full agent chat pane.
40 *
41 *  entrance   each new turn rises 8px on a quick spring
42 *  rhythm     a reply sits tight under its prompt; turns
43 *             breathe with more air between exchanges
44 *  streaming  the scroller follows while pinned, backs off
45 *             when the reader scrolls up, and offers a
46 *             jump-to-latest button
47 *  busy       the Neon mark and status line shimmer in sync
48 *             "Agent is working" until tokens arrive
49 *  switches   a user turn whose metadata carries a new
50 *             model/effort gets a quiet "switched to"
51 *             marker above it
52 *  composer   flush foot of the pane: textarea on top,
53 *             model controls + send below, the top border
54 *             warms to primary on focus
55 * ───────────────────────────────────────────────────────── */
56const TURN_SPRING = {
57  damping: 32,
58  stiffness: 420,
59  type: "spring" as const,
60};
61 
62const TURN_RISE_PX = 8;
63 
64/** Rises new turns in; static under reduced motion. */
65const TurnEntrance = ({ children }: { children: ReactNode }) => {
66// … truncated