Reasoning
The Reasoning component displays AI reasoning content, automatically opening during streaming and closing when finished.
Installation
If you prefer using jsrepo, please install via the command below:
Usage
Usage with AI SDK
Build a chatbot with reasoning using Deepseek R1.
Add the following component to your frontend:
+page.svelte
Add the following route to your backend:
api/chat/+server.ts
Features
- Automatically opens when streaming content and closes when finished
- Manual toggle control for user interaction
- Smooth animations and transitions powered by Radix UI
- Visual streaming indicator with pulsing animation
- Composable architecture with separate trigger and content components
- Built with accessibility in mind including keyboard navigation
- Responsive design that works across different screen sizes
- Seamlessly integrates with both light and dark themes
- Built on top of shadcn-svelte Collapsible primitives
- TypeScript support with proper type definitions
Props
Reasoning
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the reasoning container |
isStreaming | boolean | false | Whether the AI is currently streaming reasoning content |
open | boolean | - | Controlled state for whether the reasoning content is expanded (bindable) |
defaultOpen | boolean | true | Default open state when not controlled |
onOpenChange | (open: boolean) => void | - | Callback fired when the open state changes |
duration | number | - | Duration in seconds that the AI spent reasoning (bindable) |
children | Snippet | - | Child components (typically ReasoningTrigger and ReasoningContent) |
...props | CollapsibleProps | - | All other Collapsible component props are supported |
ReasoningTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the trigger button |
children | Snippet | - | Custom trigger content (defaults to brain icon with thinking message) |
...props | CollapsibleTriggerProps | - | All other CollapsibleTrigger component props are supported |
ReasoningContent
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the content container |
children | Snippet | - | The reasoning content to display when expanded |
...props | CollapsibleContentProps | - | All other CollapsibleContent component props are supported |
Response
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the response container |
children | Snippet | - | Response content to render |
...props | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |