02 / 122 · Reasoning

Thinking indicator

A live status line that names what the agent is doing right now, with elapsed time.

Thinking

Installation

npx shadcn@latest add "@assistant-ui/elements-thinking-indicator"

Usage

import { ThinkingIndicator } from "@/components/elements/thinking-indicator";

<ThinkingIndicator label="Reading thread.tsx" elapsed="12s" />

Props

PropTypeDefaultDescription

label*string–What the agent is doing right now. Swapping it replays the entrance animation.

elapsedstring–Elapsed time rendered in mono next to the label. Omit to hide the timer.

classNamestring–Extra classes merged onto the root row.

Source

thinking-indicator.tsx

"use client";

import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";
import { mono, ShimmerLabel } from "./surfaces";

export function ThinkingIndicator({
  label,
  elapsed,
  className,
  ...props
}: Omit<ComponentProps<"div">, "children" | "label" | "elapsed"> & {
  label: string;
  elapsed?: string;
}) {
  return (
    <div
      data-slot="thinking-indicator"
      className={cn(
        "text-foreground/55 flex items-center gap-2.5 text-sm",
        className,
      )}

      {...props}
    >
      <span
        aria-hidden
        className="size-1.5 shrink-0 animate-pulse rounded-full bg-blue-500 motion-reduce:animate-none dark:bg-blue-400"
      />
      <ShimmerLabel
        key={label}
        className="fade-in slide-in-from-bottom-1 animate-in relative inline-block leading-none duration-300"
      >
        {label}
      </ShimmerLabel>
      {elapsed !== undefined && (
        <span className={cn(mono, "text-foreground/30 tabular-nums")}>
          {elapsed}
        </span>
      )}
    </div>
  );
}