thinking-block
AI extended thinking with pulse animation and expand/collapse
AIthinking-block.cssthinking-block.htmlthinking-block.js
Installation
$
npx skeehn add thinking-blockPreview
Analyzing the user's request to understand the optimal approach for implementing a dither shader in CSS...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| state | 'thinking' | 'done' | 'error' | 'thinking' | Current thinking state |
| label | string | 'Thinking...' | Header label text |
| meta | string | — | Metadata string (e.g. duration) |
| expanded | boolean | — | Controlled expanded state |
| defaultExpanded | boolean | auto | Default expanded state |
| onExpandedChange | (expanded: boolean) => void | — | Expanded state change callback |
Usage
thinking-block.tsx
1import { ThinkingBlock } from '@skeehn/react';23export function AIThinking() {4 return (5 <ThinkingBlock6 state="thinking"7 label="Thinking..."8 meta="2.1s"9 >10 Analyzing the code structure and identifying potential11 performance improvements in the render pipeline...12 </ThinkingBlock>13 );14}