2e:"/_next/static/immutable/chunks/02uj9wr740ifu.js" 2f:"AgentThinkingDemo" 30:I[65023,["$2","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$2e"],"$2f"] 31:I[48147,["$2","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$2e"],"SourcePanel"] 32:T20d2,"use client"; import { useState } from "react"; import type { ComponentType, CSSProperties } from "react"; import { cx } from "@/lib/utils"; import { useMountEffect } from "@/lib/use-mount-effect"; export type AgentThinkingVariant = "wave" | "spin" | "bloom" | "sweep" | "stars" | "infinity" | "orbs"; export type AgentThinkingTone = "subtle" | "default" | "primary" | "accent"; export interface AgentThinkingProps { variant?: AgentThinkingVariant; label?: string; tone?: AgentThinkingTone; shimmer?: boolean; showTimer?: boolean; pill?: boolean; className?: string; labelClassName?: string; } const TONE_COLORS: Record = { subtle: "var(--ink-3)", default: "var(--ink-2)", primary: "var(--ink)", accent: "var(--color-accent-500)", }; const VARIANT_TONE: Record = { wave: "default", spin: "default", bloom: "default", sweep: "default", stars: "subtle", infinity: "default", orbs: "default", }; const WAVE_DOT_COUNT = 4; const WAVE_PERIOD_MS = 1100; function WaveIndicator() { return ( {Array.from({ length: WAVE_DOT_COUNT }, (_, i) => ( ))} ); } function SpinIndicator() { return ( ); } const BLOOM_RING_PERIOD_S = 1.8; const BLOOM_RING_REST = [ { scale: 0.45, opacity: 0.3 }, { scale: 0.95, opacity: 0.12 }, ]; function BloomIndicator() { return ( {BLOOM_RING_REST.map((rest, i) => ( ))} ); } function SweepIndicator() { return ( ); } const STAR_PERIOD_S = 1.4; const STAR_SIZE = 14; const STAR_COUNT = 5; const STAR_LAYOUT = [ { x: 50, y: 46, scale: 1 }, { x: 18, y: 22, scale: 0.55 }, { x: 82, y: 26, scale: 0.45 }, { x: 78, y: 76, scale: 0.55 }, { x: 22, y: 78, scale: 0.4 }, ]; const STAR_PATH = "M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z"; function StarsIndicator() { const box = STAR_SIZE * 1.5; return ( {STAR_LAYOUT.slice(0, STAR_COUNT).map((star, i) => { const size = STAR_SIZE * star.scale; return ( ); })} ); } const INFINITY_WIDTH = 32; const INFINITY_TRAIL = 11; const INFINITY_STROKE = 2.75; const INFINITY_DURATION_S = 1.2; const INFINITY_PATH = "M28 14C33 5 47 5 47 14C47 23 33 23 28 14C23 5 9 5 9 14C9 23 23 23 28 14Z"; function InfinityIndicator() { return ( ); } const ORB_BOX = 16; const ORB_LAYOUT = [ { size: 4, orbit: 6, durationS: 1.7, delayS: 0 }, { size: 3, orbit: 4.5, durationS: 2.3, delayS: -0.9 }, { size: 3.5, orbit: 3, durationS: 2.9, delayS: -1.6 }, ]; export function AgentThinkingOrbs({ className }: { className?: string }) { return ( {ORB_LAYOUT.map((orb, index) => ( ))} ); } function ElapsedTimer() { const [elapsed, setElapsed] = useState(0); useMountEffect(() => { const started = performance.now(); const id = window.setInterval( () => setElapsed((performance.now() - started) / 1000), 100, ); return () => window.clearInterval(id); }); return ( {elapsed.toFixed(1)}s ); } const INDICATOR: Record = { wave: WaveIndicator, spin: SpinIndicator, bloom: BloomIndicator, sweep: SweepIndicator, stars: StarsIndicator, infinity: InfinityIndicator, orbs: AgentThinkingOrbs, }; export function AgentThinking({ variant = "wave", label = "Thinking", tone, shimmer = true, showTimer = true, pill = false, className, labelClassName, }: AgentThinkingProps) { const color = TONE_COLORS[tone ?? VARIANT_TONE[variant]]; const Indicator = INDICATOR[variant]; return (

{label} {showTimer && }

); } 2b:["$","article",null,{"className":"doc-article","children":[["$","header",null,{"className":"doc-article-header","children":[["$","p",null,{"className":"doc-article-kicker","children":["Primitives"," · ","Agent"]}],["$","h1",null,{"className":"doc-article-title","children":"Agent thinking"}],["$","p",null,{"className":"doc-article-lead","children":"Thinking indicator with six motions, a shimmering label, and a timer."}]]}],["$","section",null,{"className":"doc-demo","aria-label":"Agent thinking demo","children":["$","div",null,{"className":"doc-demo-stage","children":["$","$L30",null,{}]}]}],null,["$","$L31",null,{"source":"$32","deps":"$undefined"}],"$L33"]}]