Overview
Reading the latest message...
Checking available tools and context...
Drafting a concise response.
Installation
pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/reasoning-disclosure.json"
Usage
<script setup lang="ts">
import { ReasoningDisclosure } from '@/components/reasoning-disclosure'
const reasoning = ref('Compare the user request with the current chat state.')
const isStreaming = ref(false)
</script>
<template>
<ReasoningDisclosure :text="reasoning" :is-streaming="isStreaming" />
</template>App-Owned Reasoning
ReasoningDisclosure renders reasoning text that your app already has. Your app owns model output, streaming state, message schemas, persistence, and whether reasoning should be shown.
The component performs light text cleanup for simple markdown markers. It is not a full markdown renderer.
Examples
Default
Reading the latest message...
Checking available tools and context...
Drafting a concise response.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | Reasoning text supplied by the consuming app. |
isStreaming | boolean | false | Opens the disclosure and shows the streaming label while reasoning is streaming. |
streamingLabel | string | 'Thinking...' | Label shown while streaming. |
completeLabel | string | 'Thoughts' | Label shown after streaming is complete. |
defaultOpen | boolean | false | Initial open state when not streaming. |
class | string | — | Additional CSS classes. |