ThinkingBlock

Collapsible chain-of-thought display for AI reasoning. Shows the model's thinking process with auto-collapse on completion.

ThinkingBlock — Live Demo

Let me analyze this question... First, I need to consider the key factors involved. Looking at the available data, there are several patterns worth noting. The most relevant approach would be to compare historical trends with current metrics. Based on this analysis, I can now form a comprehensive answer.

ThinkingBlock — All States

Analyzing the request and considering multiple approaches...

Import

tsx

import { ThinkingBlock } from "@arc-lo/ui";

Basic usage

tsx

<ThinkingBlock.Root state="thinking" duration={4}>
  <ThinkingBlock.Trigger />
  <ThinkingBlock.Content>
    <p>Analyzing the request...</p>
  </ThinkingBlock.Content>
</ThinkingBlock.Root>

With streaming content

tsx

function ThinkingMessage({ thinking, state, duration }) {
  return (
    <ThinkingBlock.Root
      state={state}
      duration={duration}
      collapseOnDone
    >
      <ThinkingBlock.Trigger />
      <ThinkingBlock.Content>
        <StreamingText.Root text={thinking} speed={15}>
          <StreamingText.Content className="text-sm italic text-gray-600" />
          <StreamingText.Cursor />
        </StreamingText.Root>
      </ThinkingBlock.Content>
    </ThinkingBlock.Root>
  );
}

Parts

Part	Description
`Root`	Container with state management and context
`Trigger`	Clickable header with icon, label, and chevron
`Content`	Collapsible content area

Props

Root

Prop	Type	Default	Description
`state`	`"thinking" \| "done" \| "error"`	`"thinking"`	Current thinking state
`defaultOpen`	`boolean`	`true`	Start expanded
`collapseOnDone`	`boolean`	`true`	Auto-collapse when done
`duration`	`number \| null`	`null`	Thinking duration in seconds

States

State	Icon	Border	Behavior
`thinking`	Spinner	Purple tint	Expanded, content updating
`done`	Sparkle	Gray	Auto-collapses after 500ms
`error`	X circle	Red tint	Stays expanded