# Agent thinking chat
> A live, interactive agent chat: a working composer (message field, model picker, attach, send) plays a full turn that narrates itself, with a thinking-orb avatar, shimmering thinking-state text, a Sonner-style stack of context sources (file reads and MCP tool calls), a spinning-reel counter inside a live liquid-metal border, and a blur-streamed answer under the chosen model's avatar.
- **Category:** Feedback
- **Source (best-in-class):** [transitions.dev](https://transitions.dev/)
- **Tags:** chat, agent, ai, composer, model-picker, interactive, thinking, streaming, shimmer, context, retrieval, mcp, tool-calls, stack, counter, reel, liquid-metal, orb, feedback, animation
- **Dependencies:** react, tailwindcss
- **Status:** stable
- **Live demo:** https://eito.me/ui/agent-thinking-chat
## Problem
An agent that streams for ten seconds needs to show its work, not a bare spinner, and a demo of it should be a real chat you can drive, not a canned loop. This is a working surface: type a message or pick a starter chip, choose a model, attach files, hit send, and one turn plays end to end. It composes five best-in-class micro-interactions into one honest status surface: the thinking-orb avatar names the current activity, a shimmer line swaps through what it's doing ('Collecting context…' to 'Calling connected tools…' to 'Reading relevant files…'), a banner stack ticks up the sources it pulls in (file reads shown with a teal dot, interleaved with MCP tool calls that carry their own marks: the Model Context Protocol glyph, plus connected apps like Gmail and Sealgate), a reel counter spins to the file count it scanned, and the answer arrives word by word with a soft blur as a left-side assistant message under a 'Thought for Ns' line and the model you picked. The working card is framed by the liquid-metal ring, so the whole lifecycle (think, research, compose, answer) reads at a glance. Every part honours prefers-reduced-motion (it jumps straight to the finished answer) and reuses the glossary's own ThinkingOrb and LiquidMetal snippets rather than reinventing them.
## When to use
- You want a real, drivable agent-chat surface for a demo or landing page, not a looping mock: a working composer with a model picker, attachments and send that plays a turn on submit.
- A chat or agent UI streams multi-step turns and you want the status to say what it's doing (thinking, researching, composing) not just 'loading'.
- You're showing a 'collecting context' / retrieval phase and want the sources it touches, file reads and MCP tool calls alike, to visibly accumulate with a live count.
- You want the composer, the working indicator, the streamed reply and a premium metal frame to feel like one coherent motion system.
## Code — snippet.tsx
```tsx
import {
useCallback,
useEffect,
useId,
useMemo,
useRef,
useState,
type ReactNode,
} from "react";
import ThinkingOrb, { type OrbState } from "../thinking-orbs/snippet";
import LiquidMetal from "../liquid-metal/snippet";
/**
* AgentThinkingChat — a live agent-chat surface that narrates its own thinking.
*
* It is a real, interactive chat: type a message (or pick a starter), choose a
* model, attach files, hit send — and the agent plays one full turn. That turn
* stitches together five best-in-class micro-interactions so the whole
* lifecycle of a streamed answer — think → research → compose → answer — reads
* at a glance:
*
* 1. ThinkingOrb the dotted status avatar, re-tuned per phase
* (weaving while thinking, searching while
* researching, composing while it writes).
* 2. ThinkingStates transitions.dev shimmer text that swaps one line
* for the next ("Collecting context…" → "Reading
* relevant files…") — the outgoing copy blurs up as
* the incoming one rises from below.
* 3. ToolCallStack every tool call collapses into one stacked
* surface — the latest call plus a count of the
* rest; click to expand the full trace, newest first.
* 4. SpinningReel transitions.dev digit reel: a counter that spins
* up to the number of files scanned, with a
* vertical-only motion blur that decays per column.
* 5. StreamingText transitions.dev word-by-word reveal: the final
* answer resolves through opacity + a small blur,
* delivered as a left-side assistant message under
* the chosen model's avatar and a "Thought for Ns".
*
* …with the working card framed by the LiquidMetal ring while the agent works.
*
* The shell around it — the composer (message field, attach, model picker,
* send), the starter chips, the attachment chips and the Replay control — is a
* working chat UI, not a mock: send interrupts a turn in flight, the model you
* pick becomes the reply's avatar, and Replay re-plays the last prompt.
*
* Companion snippets: this composes the glossary's own `ThinkingOrb`
* (thinking-orbs) and `LiquidMetal` (liquid-metal). Copy those two first, then
* fix the two import paths at the top. Everything else — the four
* transitions.dev interactions, the chat shell and the phase controller —
* lives in this file.
*
* It honours prefers-reduced-motion by skipping straight to the finished
* answer.
*
* Deps: react + tailwindcss (plus the two companion snippets).
*/
/* ---- tunables (transitions.dev defaults) ---------------------------------- */
const THINK_HOLD = 1650; // how long each shimmer line holds before it swaps
const THINK_SWAP = 150;
const STREAM_GAP = 55; // ms between streamed words
const STREAM_FADE = 350;
const REEL_DUR = 1400;
const REEL_CELL = 28; // px per digit cell
const REEL_STAGGER = 90;
const REEL_SPIN_BLUR = 3;
const REEL_EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
/* turn timeline (ms) — the scripted phase durations */
const T_THINK = 2600; // think phase before research begins
const T_STEP = 620; // gap between each context banner
const T_LEAD = 350; // delay before the first banner appears
const T_TAIL = 500; // hold after the last banner before composing
const T_COMPOSE = 1100; // compose phase before the answer streams
const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v);
const cx = (...parts: (string | false | null | undefined)[]) =>
parts.filter(Boolean).join(" ");
/* ---- scripted turn -------------------------------------------------------- */
export interface ContextSource {
/** File / resource name shown in the stacked banner. */
name: string;
/** Short action tag, e.g. "read", "grep" or "mcp". */
tag: string;
/**
* Optional leading icon. Omit for a plain file read (a teal dot); set to
* "mcp" for a Model Context Protocol tool call (a mono accent glyph), or an
* app key ("gmail" / "seal") for a connected-tool call (a white app badge).
*/
icon?: keyof typeof TOOL_ICONS;
}
/**
* Inline SVG marks for MCP tool calls. `mcp` is the Model Context Protocol
* glyph (drawn in currentColor so it tints to the accent); `gmail` and `seal`
* are connected-app logos rendered on a white badge.
*/
export const TOOL_ICONS = {
mcp: '',
gmail:
'',
seal: '',
} as const;
export interface AgentTurn {
/** Shimmer lines shown while the agent "thinks" (before research). */
thinking: string[];
/** Shimmer lines shown while it "researches" / collects context. */
researching: string[];
/** Context sources that stack up during research. */
context: ContextSource[];
/** Number the reel spins to (e.g. files scanned). */
scanned: number;
/** The final answer, streamed word by word. */
answer: string;
}
export const DEFAULT_TURN: AgentTurn = {
thinking: ["Thinking…", "Reading your message…", "Planning the approach…"],
researching: [
"Collecting context…",
"Searching the codebase…",
"Calling connected tools…",
"Reading relevant files…",
"Connecting the pieces…",
],
context: [
{ name: "registry.ts", tag: "read" },
{ name: "App.tsx", tag: "read" },
{ name: "gmail · search", tag: "mcp", icon: "gmail" },
{ name: "export-ui-patterns.ts", tag: "grep" },
{ name: "sealgate · call_tool", tag: "mcp", icon: "seal" },
{ name: "PatternDetail.tsx", tag: "read" },
{ name: "mcp · list_tools", tag: "mcp", icon: "mcp" },
],
scanned: 128,
answer:
"Drop a folder under src/ui-patterns// with three files — meta.ts, snippet.tsx and Demo.tsx. The registry auto-discovers it, so the /ui page picks it up with no wiring, and the build-time export re-derives the agent artifacts from the same folder.",
};
/** The default prompt used when a turn plays without a typed message. */
export const DEFAULT_PROMPT = "How do I add a new pattern to the /ui glossary?";
/** Starter chips shown in the empty state. */
export const EXAMPLES = [
"Summarize the auth flow in this repo",
"Add a dark-mode toggle to the header",
"Find and fix the failing tests",
];
/**
* Selectable models for the composer's picker. Each `icon` is an inline SVG
* (external images are blocked in copy-paste contexts). The picked model
* becomes the reply's avatar.
*/
export interface ModelOption {
name: string;
icon: string;
}
export const MODELS: ModelOption[] = [
{
name: "Claude Opus 4.8",
icon: '',
},
{
name: "GPT-5",
icon: '',
},
{
name: "Grok 4",
icon: '',
},
];
type Phase = "idle" | "thinking" | "research" | "composing" | "answer";
const ORB_FOR: Record, OrbState> = {
thinking: "weaving",
research: "searching",
composing: "composing",
};
/* ---- scoped styles (one