Thinking Block

The ThinkingBlock component provides a visual representation of AI Models’ reasoning process during message generation. It features a collapsible accordion interface, auto-scrolling for real-time content updates, and clear state indicators for active thinking vs completed thoughts.

Installation

Install the ThinkingBlock component using the shadcn CLI:

pnpm dlx shadcn@latest add https://registry.intface.io/thinking-block.json

npx shadcn@latest add https://registry.intface.io/thinking-block.json

yarn shadcn@latest add https://registry.intface.io/thinking-block.json

bunx --bun shadcn@latest add https://registry.intface.io/thinking-block.json

Usage

import ThinkingBlock from "@/components/chat/thinking-block";

export default function ChatMessage() {
  const message = {
    id: "1",
    role: "assistant",
    parts: [
      {
        type: "reasoning",
        text: "Let me think about this problem step by step..."
      },
      {
        type: "text", 
        text: "Here's my response based on my reasoning."
      }
    ]
  };

  const isThinkingDone = true;

  return (
    <div className="chat-message">
      <ThinkingBlock 
        message={message}
        isThinkingDone={isThinkingDone}
      />
    </div>
  );
}

Props

UIMessage

required

The message object containing reasoning parts. The component extracts and displays text from parts with type “reasoning”.

boolean

required

Controls the accordion trigger text and state. Shows “Thinking” when false (active) and “Thoughts” when true (completed).

Getting started

Components

Thinking Block

Installation

Usage

Props

​Installation

​Usage

​Props

Installation

Usage

Props