"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { ChevronDownIcon } from "@kineticui/icons"; export type ThinkingBlockProps = { /** True while the model is still reasoning. */ active?: boolean; /** Seconds spent; shown once finished. Counted live when omitted. */ duration?: number; children: React.ReactNode; defaultOpen?: boolean; className?: string; }; /** Collapsible reasoning trace: shimmering "Thinking…" while active, "Thought for 8s" after. */ export function ThinkingBlock({ active, duration, children, defaultOpen = false, className }: ThinkingBlockProps) { const [open, setOpen] = React.useState(defaultOpen); const [elapsed, setElapsed] = React.useState(0); React.useEffect(() => { if (!active) return; const start = Date.now(); const t = window.setInterval(() => setElapsed(Math.round((Date.now() - start) / 1000)), 500); return () => window.clearInterval(t); }, [active]); const secs = duration ?? elapsed; return (

{open ? (

{children}

) : null}

); }

Thinking Block

Installation

Exports