Generation Status

A single breathing dot with an optional label, for the gap between sending a message and the first token.

ThinkingSearchingCompiling registry

Installation

npx shadcn@latest add miskibin/chat-components/generation-status

Usage

import { GenerationStatus } from "@/components/ui/generation-status"

export function Pending({ busy }: { busy: boolean }) {
  return <GenerationStatus active={busy} label="Thinking" />
}

Examples

Recolor, resize, hold it still

size scales the box and the dot together, and the wrapper and the dot each carry a slot. The pulse is a CSS animation behind motion-safe, so it is already off for readers who asked for less motion — no timer, no frame state; drop it for everyone by overriding the animation.

Compiling registryHeld stillSearching

Notes

Where it appears

MessageList renders this for you: while isGenerating is true and the last assistant turn is still empty, the dot sits where the answer will land. You only mount it yourself in custom layouts.

API reference

GenerationStatus

activeboolean: Shows the indicator. Prefer this over stage; when both are omitted nothing renders.
stage"thinking" | "searching" | "responding" | "idle" = "idle": Legacy stage. Any non-idle stage shows the indicator and supplies a default label.
labelstring: Overrides the stage label. Omit for a bare dot.
sizenumber = 16: Indicator box size in pixels; the dot fills half of it.

Data slots

Every part below is addressable from a parent, so you can restyle internals without forking the component.

generation-statusgeneration-status-spinnergeneration-status-label