Components

Reasoning

A collapsible AI reasoning / "thinking" block that reveals the chain-of-thought behind an answer.

php artisan blatui:add reasoning

The user is asking for the capital of Australia. A common mistake is to assume it's Sydney or Melbourne since those are the largest cities. However, the capital is actually Canberra, which was purpose-built as a compromise between the two rival cities. I'll answer with Canberra.

<x-ui.reasoning class="max-w-md">
    <p>
        The user is asking for the capital of Australia. A common mistake is to assume
        it's Sydney or Melbourne since those are the largest cities. However, the capital
        is actually Canberra, which was purpose-built as a compromise between the two rival
        cities. I'll answer with Canberra.
    </p>
</x-ui.reasoning>

Open

First, let me break the problem into steps. The request is to sum the even numbers from 1 to 10.

The even numbers are 2, 4, 6, 8, and 10. Adding them: 2 + 4 = 6, + 6 = 12, + 8 = 20, + 10 = 30. So the answer is 30.

<x-ui.reasoning :open="true" class="max-w-md">
    <p class="mb-2">
        First, let me break the problem into steps. The request is to sum the even numbers
        from 1 to 10.
    </p>
    <p>
        The even numbers are 2, 4, 6, 8, and 10. Adding them: 2 + 4 = 6, + 6 = 12, + 8 = 20,
        + 10 = 30. So the answer is 30.
    </p>
</x-ui.reasoning>

With Duration

Considering several phrasings for the greeting, weighing tone and brevity. A simple, warm "Hello! How can I help you today?" strikes the right balance, so I'll go with that.

<x-ui.reasoning :duration="'4s'" :open="true" class="max-w-md">
    <p>
        Considering several phrasings for the greeting, weighing tone and brevity. A simple,
        warm "Hello! How can I help you today?" strikes the right balance, so I'll go with that.
    </p>
</x-ui.reasoning>

API Reference

Props, slots and exposed methods for <x-ui.reasoning>.

Props

Prop	Type	Default	Description
`open`	`bool`	`false`	Whether the reasoning content is expanded on first render.
`label`	`string`	`'Reasoning'`	Text shown on the toggle button. Ignored when a duration is set.
`duration`	`string`	—	When set, the trigger reads "Thought for {duration}" instead of the label (e.g. "12s").
`id`	`string`	—	Explicit id for the collapsible content region. Defaults to an auto-generated id used for aria-controls.

Slots

Slot	Description
`default`	The reasoning text or markup revealed when the disclosure is expanded.