Reasoning

1'use client';
2
3import { Reasoning } from '@/components/ui/reasoning';
4
5export function Default() {
6  return (
7    <div className="w-full max-w-md">
8      <Reasoning duration={4}>
9        <Reasoning.Trigger />
10        <Reasoning.Content>
11          The user wants a copy-paste component, so an npm package is off the table. I will read the
12          registry first, then write the primitive with no runtime dependencies beyond the ones the
13          library already ships.
14        </Reasoning.Content>
15      </Reasoning>
16    </div>
17  );
18}

1'use client';
2
3import { useState } from 'react';
4import { Reasoning } from '@/components/ui/reasoning';
5
6export function Streaming() {
7  const [streaming, setStreaming] = useState(false);
8
9  return (
10    <div className="flex w-full max-w-md flex-col gap-4">
11      <button
12        type="button"
13        onClick={() => setStreaming((previous) => !previous)}
14        className="border-border hover:bg-muted w-fit rounded-full border px-3 py-1.5 text-xs transition-colors"
15      >
16        {streaming ? 'Stop streaming' : 'Start streaming'}
17      </button>
18      <Reasoning isStreaming={streaming} defaultOpen={false}>
19        <Reasoning.Trigger />
20        <Reasoning.Content>
21          The panel opens on its own while the model is thinking and closes once the answer starts,
22          keeping the reasoning one click away instead of in the way.
23        </Reasoning.Content>
24      </Reasoning>
25    </div>
26  );
27}