Collapsible UI component that displays AI "thinking" or reasoning text with a muted markdown aesthetic, supporting both streaming and completed states. ## Key Components - **`ThinkingDisplay`** — `forwardRef` component rendering AI thought content inside a bordered card with expand/collapse behavior - **`thoughtMdClasses`** — Tailwind override class string that tunes `SimpleMarkdownRenderer` output to a quieter secondary-tone aesthetic (muted text, tighter spacing, flat code chips) - **`useCollapsible`** — Hook managing overflow detection, container height animation, and collapsed/expanded state - **`ExpandChevron`** — Chevron indicator shown only when content overflows or is already expanded - **`SimpleMarkdownRenderer`** — Underlying markdown renderer wrapped with thought-specific style overrides ## Props (`ThinkingDisplayProps`) | Prop | Type | Default | Description | |------|------|---------|-------------| | `text` | `string` | — | Markdown content to render | | `isStreaming` | `boolean` | `false` | Shows animated dots loader and "Thinking" label when `true` | | `className` | `string` | — | Additional classes for the outer card | ## Usage Example ```typescript import { ThinkingDisplay } from "./thinking-display" // Streaming state (model is still generating) // Completed thought (collapsible if content overflows) ``` ## Behavior Notes - Label switches between `"Thinking"` (streaming) and `"Thought"` (complete) - Collapsed height is `19px` (~one line of `text-sm leading-snug`); transitions are disabled while streaming to avoid layout thrashing - Toggle is keyboard-accessible (`Enter`/`Space`) with proper `aria-expanded`; `tabIndex` is `-1` when content fits in one line