diff --git a/app/components/demo/ReasoningDisclosureDemo.vue b/app/components/demo/ReasoningDisclosureDemo.vue new file mode 100644 index 0000000..6414c6d --- /dev/null +++ b/app/components/demo/ReasoningDisclosureDemo.vue @@ -0,0 +1,21 @@ + + + diff --git a/app/registry/blocks/reasoning-disclosure/ReasoningDisclosure.vue b/app/registry/blocks/reasoning-disclosure/ReasoningDisclosure.vue new file mode 100644 index 0000000..dd77b65 --- /dev/null +++ b/app/registry/blocks/reasoning-disclosure/ReasoningDisclosure.vue @@ -0,0 +1,80 @@ + + + diff --git a/app/registry/blocks/reasoning-disclosure/index.ts b/app/registry/blocks/reasoning-disclosure/index.ts new file mode 100644 index 0000000..0926bd6 --- /dev/null +++ b/app/registry/blocks/reasoning-disclosure/index.ts @@ -0,0 +1 @@ +export { default as ReasoningDisclosure, type ReasoningDisclosureProps } from "./ReasoningDisclosure.vue"; diff --git a/content/docs/2.components/1.chat.md b/content/docs/2.components/1.chat.md index 76bfbd7..1e9ccc1 100644 --- a/content/docs/2.components/1.chat.md +++ b/content/docs/2.components/1.chat.md @@ -16,6 +16,7 @@ Unlike an integrated UI module, these registry items are installed as source cod | [ChatMessage](/docs/components/chat-message) | Individual message bubble component with content slots, leading content, and action buttons. | | [ChatPrompt](/docs/components/chat-prompt) | Prompt input wrapper for composing text areas, errors, and footer controls. | | [ChatPromptSubmit](/docs/components/chat-prompt-submit) | Status-aware submit, stop, and retry button for prompt workflows. | +| [ReasoningDisclosure](/docs/components/reasoning-disclosure) | Collapsible disclosure for app-owned AI reasoning text. | ## Install @@ -32,6 +33,12 @@ npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-prompt.json" npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-prompt-submit.json" ``` +Install reasoning disclosure when you want to show app-owned reasoning text. + +```bash +npx shadcn-vue@latest add "https://ui.stackhacker.io/r/reasoning-disclosure.json" +``` + ## Basic Composition ```vue diff --git a/content/docs/2.components/8.reasoning-disclosure.md b/content/docs/2.components/8.reasoning-disclosure.md new file mode 100644 index 0000000..63fd239 --- /dev/null +++ b/content/docs/2.components/8.reasoning-disclosure.md @@ -0,0 +1,61 @@ +--- +title: ReasoningDisclosure +description: Show app-owned AI reasoning text in a compact collapsible disclosure. +category: chat +--- + +::component-preview +--- +name: ReasoningDisclosureDemo +--- +:: + +## Installation + +```bash +npx shadcn-vue@latest add "https://ui.stackhacker.io/r/reasoning-disclosure.json" +``` + +## Usage + +```vue + + + +``` + +## 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 + +::component-preview +--- +name: ReasoningDisclosureDemo +--- +:: + +## 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. | diff --git a/scripts/registry-verify.ts b/scripts/registry-verify.ts index fae4e56..7742e1f 100644 --- a/scripts/registry-verify.ts +++ b/scripts/registry-verify.ts @@ -99,6 +99,10 @@ const expectedItems: Record = { dependencies: ["@lucide/vue"], registryDependencies: ["badge", "button", "card"], }, + "reasoning-disclosure": { + dependencies: ["@lucide/vue"], + registryDependencies: ["button", "collapsible"], + }, }; if (registryIndex) {