Components
Reasoning
A collapsible AI reasoning / "thinking" block that reveals the chain-of-thought behind an answer.
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>