# Reasoning

A collapsible block that surfaces a model's chain-of-thought — auto-expands while streaming, collapses when done.

<p class="kai-tag-sub">kai-reasoning</p>

A collapsible thinking block that auto-expands while the model's thought streams in and collapses when streaming stops — no wiring required.

## Preview

> **tip:** 
Place `<kai-reasoning>` between the assistant message content and any tool calls whenever the model produces a chain-of-thought trace. Set `streaming` while the thought arrives and clear it when the stream ends — the element handles expand/collapse automatically. Use `open` for programmatic control, for instance to re-open a block from a parent UI button.

## Usage

Set `text` in JavaScript; toggle `streaming` to drive the auto-expand/collapse behaviour:

```html
<kai-reasoning id="reason" label="Reasoning"></kai-reasoning>

<script type="module">

  await customElements.whenDefined('kai-reasoning');

  const reason = document.getElementById('reason');
  reason.text = 'First I parse the request, then I plan the steps, then I execute.';

  // Set while thought arrives; clear when stream ends.
  // reason.streaming = true;

  reason.addEventListener('kai-open-change', (e) => {
    console.log('open:', e.detail.open);
  });
</script>
```

- **`text`** — assign it with `el.text = '...'`.
- **`streaming`** — set `true` while the thought arrives; the block auto-expands. Clear it when done; the block collapses.
- **`open`** — leave unset for uncontrolled behaviour; set explicitly when a parent needs to drive the open state.
- **`label`** overrides the default trigger text (`"Reasoning"`) — e.g. `"Thinking"` or `"Chain of thought"`.

## Examples

### Default

A collapsed block with uncontrolled open state. Click the trigger to expand and collapse.

### Streaming

`streaming` set to `true` auto-expands the block immediately, as it would while a model generates its chain-of-thought.

### Custom Label

Override the trigger label with the `label` attribute to match your product's terminology.

### Markdown Rendering

With `markdown` enabled (default), the text renders as styled markdown — headings, bold, code spans, and paragraphs.

### Markdown Disabled

`markdown="false"` renders the text as plain pre-formatted content — useful for raw log output or content with literal backticks.

## Props

## Events

## Methods

## Composed from