@assistant-ui/mcp-docs-server 0.1.29 → 0.1.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.docs/organized/code-examples/waterfall.md +15 -7
- package/.docs/organized/code-examples/with-a2a.md +9 -21
- package/.docs/organized/code-examples/with-ag-ui.md +11 -8
- package/.docs/organized/code-examples/with-ai-sdk-v6.md +10 -10
- package/.docs/organized/code-examples/with-artifacts.md +12 -10
- package/.docs/organized/code-examples/with-assistant-transport.md +11 -12
- package/.docs/organized/code-examples/with-chain-of-thought.md +83 -54
- package/.docs/organized/code-examples/with-cloud-standalone.md +14 -11
- package/.docs/organized/code-examples/with-cloud.md +9 -10
- package/.docs/organized/code-examples/with-custom-thread-list.md +61 -16
- package/.docs/organized/code-examples/with-elevenlabs-conversational.md +17 -12
- package/.docs/organized/code-examples/with-elevenlabs-scribe.md +13 -13
- package/.docs/organized/code-examples/with-expo.md +25 -21
- package/.docs/organized/code-examples/with-external-store.md +8 -8
- package/.docs/organized/code-examples/with-ffmpeg.md +17 -12
- package/.docs/organized/code-examples/with-generative-ui.md +9 -9
- package/.docs/organized/code-examples/with-google-adk.md +8 -8
- package/.docs/organized/code-examples/with-heat-graph.md +5 -5
- package/.docs/organized/code-examples/with-interactables.md +10 -25
- package/.docs/organized/code-examples/with-langchain.md +437 -0
- package/.docs/organized/code-examples/with-langgraph.md +16 -16
- package/.docs/organized/code-examples/with-livekit.md +18 -13
- package/.docs/organized/code-examples/with-opencode.md +105 -62
- package/.docs/organized/code-examples/with-parent-id-grouping.md +10 -10
- package/.docs/organized/code-examples/with-react-hook-form.md +220 -148
- package/.docs/organized/code-examples/with-react-ink.md +2 -2
- package/.docs/organized/code-examples/with-react-router.md +12 -12
- package/.docs/organized/code-examples/with-store.md +8 -5
- package/.docs/organized/code-examples/with-tanstack.md +10 -10
- package/.docs/organized/code-examples/with-tap-runtime.md +10 -6
- package/.docs/raw/docs/(docs)/cli.mdx +2 -1
- package/.docs/raw/docs/(docs)/copilots/assistant-frame.mdx +1 -0
- package/.docs/raw/docs/(docs)/copilots/make-assistant-tool-ui.mdx +10 -3
- package/.docs/raw/docs/(docs)/copilots/make-assistant-tool.mdx +8 -3
- package/.docs/raw/docs/(docs)/copilots/make-assistant-visible.mdx +1 -0
- package/.docs/raw/docs/(docs)/copilots/model-context.mdx +1 -0
- package/.docs/raw/docs/(docs)/copilots/motivation.mdx +1 -0
- package/.docs/raw/docs/(docs)/copilots/use-assistant-instructions.mdx +1 -0
- package/.docs/raw/docs/(docs)/devtools.mdx +1 -0
- package/.docs/raw/docs/(docs)/index.mdx +1 -0
- package/.docs/raw/docs/(docs)/installation.mdx +1 -0
- package/.docs/raw/docs/(docs)/rtl.mdx +80 -0
- package/.docs/raw/docs/(reference)/api-reference/adapters/attachments.mdx +34 -0
- package/.docs/raw/docs/(reference)/api-reference/adapters/feedback-speech.mdx +41 -0
- package/.docs/raw/docs/(reference)/api-reference/adapters/index.mdx +26 -0
- package/.docs/raw/docs/(reference)/api-reference/adapters/persistence.mdx +34 -0
- package/.docs/raw/docs/(reference)/api-reference/adapters/runtime.mdx +31 -0
- package/.docs/raw/docs/(reference)/api-reference/context-providers/index.mdx +20 -0
- package/.docs/raw/docs/(reference)/api-reference/hooks/index.mdx +26 -0
- package/.docs/raw/docs/(reference)/api-reference/hooks/model-context.mdx +72 -0
- package/.docs/raw/docs/(reference)/api-reference/hooks/runtimes.mdx +41 -0
- package/.docs/raw/docs/(reference)/api-reference/hooks/state.mdx +48 -0
- package/.docs/raw/docs/(reference)/api-reference/hooks/utilities.mdx +30 -0
- package/.docs/raw/docs/(reference)/api-reference/integrations/index.mdx +23 -0
- package/.docs/raw/docs/(reference)/api-reference/overview.mdx +21 -0
- package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-if.mdx +7 -0
- package/.docs/raw/docs/(reference)/api-reference/primitives/composer.mdx +149 -40
- package/.docs/raw/docs/(reference)/api-reference/primitives/index.mdx +65 -0
- package/.docs/raw/docs/(reference)/api-reference/primitives/message-part.mdx +2 -0
- package/.docs/raw/docs/(reference)/api-reference/primitives/message.mdx +50 -6
- package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list.mdx +15 -0
- package/.docs/raw/docs/(reference)/api-reference/primitives/thread.mdx +36 -1
- package/.docs/raw/docs/(reference)/api-reference/runtimes/index.mdx +38 -0
- package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-runtime.mdx +9 -0
- package/.docs/raw/docs/(reference)/migrations/v0-14.mdx +144 -6
- package/.docs/raw/docs/cloud/ai-sdk-assistant-ui.mdx +231 -3
- package/.docs/raw/docs/cloud/ai-sdk.mdx +221 -3
- package/.docs/raw/docs/cloud/langgraph.mdx +274 -2
- package/.docs/raw/docs/{(docs)/guides → guides}/attachments.mdx +41 -36
- package/.docs/raw/docs/guides/branching.mdx +76 -0
- package/.docs/raw/docs/guides/chain-of-thought.mdx +166 -0
- package/.docs/raw/docs/{(docs)/guides → guides}/context-api.mdx +50 -22
- package/.docs/raw/docs/{(docs)/guides → guides}/dictation.mdx +2 -0
- package/.docs/raw/docs/guides/editing.mdx +102 -0
- package/.docs/raw/docs/guides/index.mdx +103 -0
- package/.docs/raw/docs/{(docs)/guides → guides}/interactables.mdx +49 -0
- package/.docs/raw/docs/{(docs)/guides → guides}/latex.mdx +51 -8
- package/.docs/raw/docs/guides/mentions.mdx +520 -0
- package/.docs/raw/docs/{(docs)/guides → guides}/message-timing.mdx +8 -2
- package/.docs/raw/docs/{(docs)/guides → guides}/multi-agent.mdx +64 -4
- package/.docs/raw/docs/{(docs)/guides → guides}/quoting.mdx +10 -17
- package/.docs/raw/docs/guides/slash-commands.mdx +361 -0
- package/.docs/raw/docs/guides/speech.mdx +156 -0
- package/.docs/raw/docs/{(docs)/guides → guides}/suggestions.mdx +21 -83
- package/.docs/raw/docs/{(docs)/guides → guides}/tool-ui.mdx +108 -36
- package/.docs/raw/docs/{(docs)/guides → guides}/tools.mdx +131 -35
- package/.docs/raw/docs/{(docs)/guides → guides}/voice.mdx +39 -0
- package/.docs/raw/docs/ink/index.mdx +1 -3
- package/.docs/raw/docs/ink/migration.mdx +1 -3
- package/.docs/raw/docs/ink/primitives.mdx +37 -1
- package/.docs/raw/docs/integrations/attachments/custom-adapter.mdx +520 -0
- package/.docs/raw/docs/integrations/auth/better-auth.mdx +191 -0
- package/.docs/raw/docs/integrations/auth/clerk.mdx +172 -0
- package/.docs/raw/docs/integrations/auth/next-auth.mdx +196 -0
- package/.docs/raw/docs/integrations/frameworks/ai-sdk.mdx +79 -0
- package/.docs/raw/docs/integrations/frameworks/mastra/full-stack.mdx +188 -0
- package/.docs/raw/docs/integrations/frameworks/mastra/overview.mdx +57 -0
- package/.docs/raw/docs/integrations/frameworks/mastra/separate-server.mdx +201 -0
- package/.docs/raw/docs/integrations/gateways/index.mdx +157 -0
- package/.docs/raw/docs/integrations/index.mdx +173 -0
- package/.docs/raw/docs/integrations/observability/helicone.mdx +130 -0
- package/.docs/raw/docs/integrations/observability/langfuse.mdx +156 -0
- package/.docs/raw/docs/integrations/observability/langsmith.mdx +146 -0
- package/.docs/raw/docs/integrations/persistence/custom-adapter.mdx +712 -0
- package/.docs/raw/docs/integrations/tools/mcp.mdx +267 -0
- package/.docs/raw/docs/primitives/action-bar.mdx +1 -0
- package/.docs/raw/docs/primitives/assistant-modal.mdx +1 -0
- package/.docs/raw/docs/primitives/attachment.mdx +1 -0
- package/.docs/raw/docs/primitives/branch-picker.mdx +1 -0
- package/.docs/raw/docs/primitives/chain-of-thought.mdx +90 -85
- package/.docs/raw/docs/primitives/composer.mdx +96 -63
- package/.docs/raw/docs/primitives/error.mdx +1 -0
- package/.docs/raw/docs/primitives/index.mdx +2 -1
- package/.docs/raw/docs/primitives/message.mdx +68 -5
- package/.docs/raw/docs/primitives/selection-toolbar.mdx +1 -0
- package/.docs/raw/docs/primitives/suggestion.mdx +1 -0
- package/.docs/raw/docs/primitives/thread-list.mdx +39 -0
- package/.docs/raw/docs/primitives/thread.mdx +16 -13
- package/.docs/raw/docs/react-native/index.mdx +1 -3
- package/.docs/raw/docs/react-native/migration.mdx +1 -3
- package/.docs/raw/docs/runtimes/a2a/client-and-hooks.mdx +396 -0
- package/.docs/raw/docs/runtimes/a2a/overview.mdx +60 -0
- package/.docs/raw/docs/runtimes/a2a/quickstart.mdx +216 -0
- package/.docs/raw/docs/runtimes/ag-ui/overview.mdx +70 -0
- package/.docs/raw/docs/runtimes/ag-ui/quickstart.mdx +243 -0
- package/.docs/raw/docs/runtimes/ag-ui/runtime-options.mdx +123 -0
- package/.docs/raw/docs/runtimes/ai-sdk/overview.mdx +52 -0
- package/.docs/raw/docs/runtimes/ai-sdk/v4-legacy.mdx +71 -131
- package/.docs/raw/docs/runtimes/ai-sdk/v5-legacy.mdx +69 -63
- package/.docs/raw/docs/runtimes/ai-sdk/v6.mdx +365 -101
- package/.docs/raw/docs/runtimes/concepts/adapters.mdx +265 -0
- package/.docs/raw/docs/runtimes/concepts/architecture.mdx +125 -0
- package/.docs/raw/docs/runtimes/concepts/stability.mdx +67 -0
- package/.docs/raw/docs/runtimes/concepts/threads.mdx +428 -0
- package/.docs/raw/docs/runtimes/custom/assistant-transport.mdx +703 -0
- package/.docs/raw/docs/runtimes/custom/data-stream.mdx +323 -0
- package/.docs/raw/docs/runtimes/custom/external-store.mdx +253 -1236
- package/.docs/raw/docs/runtimes/custom/local-runtime.mdx +746 -0
- package/.docs/raw/docs/runtimes/custom/overview.mdx +71 -0
- package/.docs/raw/docs/runtimes/google-adk/api.mdx +256 -0
- package/.docs/raw/docs/runtimes/google-adk/hooks.mdx +717 -0
- package/.docs/raw/docs/runtimes/google-adk/overview.mdx +69 -0
- package/.docs/raw/docs/runtimes/google-adk/quickstart.mdx +229 -0
- package/.docs/raw/docs/runtimes/langchain.mdx +533 -0
- package/.docs/raw/docs/runtimes/langgraph/generative-ui.mdx +305 -0
- package/.docs/raw/docs/runtimes/langgraph/interrupts.mdx +104 -0
- package/.docs/raw/docs/runtimes/langgraph/overview.mdx +84 -0
- package/.docs/raw/docs/runtimes/langgraph/quickstart.mdx +496 -0
- package/.docs/raw/docs/runtimes/langgraph/streaming.mdx +127 -0
- package/.docs/raw/docs/runtimes/langgraph/threads.mdx +113 -0
- package/.docs/raw/docs/runtimes/langgraph/tutorial/introduction.mdx +3 -3
- package/.docs/raw/docs/runtimes/langgraph/tutorial/part-1.mdx +0 -23
- package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +1 -1
- package/.docs/raw/docs/runtimes/opencode/hooks.mdx +191 -0
- package/.docs/raw/docs/runtimes/opencode/overview.mdx +48 -0
- package/.docs/raw/docs/runtimes/opencode/quickstart.mdx +119 -0
- package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +74 -198
- package/.docs/raw/docs/ui/accordion.mdx +1 -0
- package/.docs/raw/docs/ui/assistant-modal.mdx +1 -0
- package/.docs/raw/docs/ui/assistant-sidebar.mdx +1 -0
- package/.docs/raw/docs/ui/attachment.mdx +1 -0
- package/.docs/raw/docs/ui/badge.mdx +1 -0
- package/.docs/raw/docs/ui/composer-trigger-popover.mdx +200 -0
- package/.docs/raw/docs/ui/context-display.mdx +1 -0
- package/.docs/raw/docs/ui/diff-viewer.mdx +1 -0
- package/.docs/raw/docs/ui/directive-text.mdx +114 -0
- package/.docs/raw/docs/ui/file.mdx +1 -0
- package/.docs/raw/docs/ui/image.mdx +1 -0
- package/.docs/raw/docs/ui/markdown.mdx +2 -14
- package/.docs/raw/docs/ui/mermaid.mdx +1 -0
- package/.docs/raw/docs/ui/message-timing.mdx +3 -2
- package/.docs/raw/docs/ui/model-selector.mdx +1 -0
- package/.docs/raw/docs/ui/part-grouping.mdx +325 -313
- package/.docs/raw/docs/ui/quote.mdx +1 -0
- package/.docs/raw/docs/ui/reasoning.mdx +69 -32
- package/.docs/raw/docs/ui/scrollbar.mdx +1 -0
- package/.docs/raw/docs/ui/select.mdx +1 -0
- package/.docs/raw/docs/ui/sources.mdx +1 -0
- package/.docs/raw/docs/ui/streamdown.mdx +1 -0
- package/.docs/raw/docs/ui/syntax-highlighting.mdx +1 -0
- package/.docs/raw/docs/ui/tabs.mdx +1 -0
- package/.docs/raw/docs/ui/thread-list.mdx +17 -0
- package/.docs/raw/docs/ui/thread.mdx +56 -1
- package/.docs/raw/docs/ui/tool-fallback.mdx +1 -0
- package/.docs/raw/docs/ui/tool-group.mdx +39 -11
- package/.docs/raw/docs/ui/voice.mdx +1 -0
- package/.docs/raw/docs/utilities/heat-graph.mdx +1 -0
- package/.docs/raw/docs/utilities/react-o11y.mdx +278 -0
- package/.docs/raw/docs/utilities/tw-shimmer.mdx +1 -0
- package/dist/utils/logger.js +1 -1
- package/dist/utils/logger.js.map +1 -1
- package/package.json +4 -4
- package/src/tools/tests/path-traversal.test.ts +1 -1
- package/src/utils/logger.ts +1 -1
- package/.docs/raw/docs/(docs)/guides/branching.mdx +0 -65
- package/.docs/raw/docs/(docs)/guides/chain-of-thought.mdx +0 -164
- package/.docs/raw/docs/(docs)/guides/editing.mdx +0 -66
- package/.docs/raw/docs/(docs)/guides/mentions.mdx +0 -406
- package/.docs/raw/docs/(docs)/guides/slash-commands.mdx +0 -275
- package/.docs/raw/docs/(docs)/guides/speech.mdx +0 -38
- package/.docs/raw/docs/runtimes/a2a/index.mdx +0 -298
- package/.docs/raw/docs/runtimes/assistant-transport.mdx +0 -1033
- package/.docs/raw/docs/runtimes/custom/custom-thread-list.mdx +0 -268
- package/.docs/raw/docs/runtimes/custom/local.mdx +0 -1464
- package/.docs/raw/docs/runtimes/data-stream.mdx +0 -422
- package/.docs/raw/docs/runtimes/google-adk/index.mdx +0 -686
- package/.docs/raw/docs/runtimes/helicone.mdx +0 -61
- package/.docs/raw/docs/runtimes/langgraph/index.mdx +0 -607
- package/.docs/raw/docs/runtimes/langgraph/tutorial/index.mdx +0 -12
- package/.docs/raw/docs/runtimes/langserve.mdx +0 -116
- package/.docs/raw/docs/runtimes/mastra/full-stack-integration.mdx +0 -218
- package/.docs/raw/docs/runtimes/mastra/overview.mdx +0 -18
- package/.docs/raw/docs/runtimes/mastra/separate-server-integration.mdx +0 -217
- package/.docs/raw/docs/ui/mention.mdx +0 -168
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Utility Hooks
|
|
3
|
+
description: Focused helpers for message parts, quotes, timing, and viewport behavior.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Utility hooks expose commonly needed slices of assistant-ui behavior without requiring a full primitive.
|
|
7
|
+
|
|
8
|
+
## Message Helpers
|
|
9
|
+
|
|
10
|
+
- `useMessageQuote` reads the quote state for the current message.
|
|
11
|
+
- `useMessageTiming` reads timing metadata for the current message.
|
|
12
|
+
|
|
13
|
+
## Message Part Helpers
|
|
14
|
+
|
|
15
|
+
- `useMessagePartText`
|
|
16
|
+
- `useMessagePartReasoning`
|
|
17
|
+
- `useMessagePartSource`
|
|
18
|
+
- `useMessagePartFile`
|
|
19
|
+
- `useMessagePartImage`
|
|
20
|
+
- `useMessagePartData`
|
|
21
|
+
|
|
22
|
+
These hooks are intended for custom message part renderers. They read the nearest message part context established by `MessagePrimitive.Parts`, `MessagePartPrimitive`, or the lower-level providers.
|
|
23
|
+
|
|
24
|
+
## Viewport Helpers
|
|
25
|
+
|
|
26
|
+
- `useThreadViewport` reads and controls the thread viewport.
|
|
27
|
+
- `useThreadViewportAutoScroll` wires auto-scroll behavior for custom viewport compositions.
|
|
28
|
+
- `useScrollLock` helps reasoning and grouped-part UIs preserve scroll behavior while content changes.
|
|
29
|
+
|
|
30
|
+
For primitive-specific prop APIs, see [Primitives](/docs/api-reference/primitives).
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Overview
|
|
3
|
+
description: Package-level API reference for assistant-ui React integrations.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
{/* AUTO-GENERATED by scripts/generate-api-reference-overviews.mts */}
|
|
7
|
+
{/* Do not edit manually. */}
|
|
8
|
+
|
|
9
|
+
Integration packages adapt assistant-ui to framework libraries and adjacent React ecosystems. Use these pages when you need package-specific hook names, options, and helper exports.
|
|
10
|
+
|
|
11
|
+
## Pages
|
|
12
|
+
|
|
13
|
+
<Cards>
|
|
14
|
+
<Card title={"@assistant-ui/react-ai-sdk"} href={"/docs/api-reference/integrations/vercel-ai-sdk"}>
|
|
15
|
+
{"Vercel AI SDK integration with chat runtime hooks and transport utilities."}
|
|
16
|
+
</Card>
|
|
17
|
+
<Card title={"@assistant-ui/react-data-stream"} href={"/docs/api-reference/integrations/react-data-stream"}>
|
|
18
|
+
{"Hooks for connecting to data stream protocol endpoints and Assistant Cloud."}
|
|
19
|
+
</Card>
|
|
20
|
+
<Card title={"@assistant-ui/react-hook-form"} href={"/docs/api-reference/integrations/react-hook-form"}>
|
|
21
|
+
{"React Hook Form integration for AI-assisted form filling."}
|
|
22
|
+
</Card>
|
|
23
|
+
</Cards>
|
|
@@ -16,6 +16,27 @@ export const contextColors = {
|
|
|
16
16
|
"ThreadListItem Context": "#c678dd",
|
|
17
17
|
};
|
|
18
18
|
|
|
19
|
+
## Start Here
|
|
20
|
+
|
|
21
|
+
The React API reference is organized by how you build with assistant-ui:
|
|
22
|
+
|
|
23
|
+
<Cards>
|
|
24
|
+
<Card title="Primitives" href="/docs/api-reference/primitives">
|
|
25
|
+
Composable React components such as `ThreadPrimitive`, `MessagePrimitive`, and `ComposerPrimitive`. These pages are generated from the package source where possible.
|
|
26
|
+
</Card>
|
|
27
|
+
<Card title="Hooks" href="/docs/api-reference/hooks">
|
|
28
|
+
Reactive state hooks, runtime hooks, model context hooks, and utility hooks.
|
|
29
|
+
</Card>
|
|
30
|
+
<Card title="Adapters" href="/docs/api-reference/adapters">
|
|
31
|
+
Runtime extension points for attachments, persistence, feedback, speech, dictation, and suggestions.
|
|
32
|
+
</Card>
|
|
33
|
+
<Card title="Runtime State" href="/docs/api-reference/runtimes/assistant-runtime">
|
|
34
|
+
Runtime action and state shapes used by `useAui` and `useAuiState`.
|
|
35
|
+
</Card>
|
|
36
|
+
</Cards>
|
|
37
|
+
|
|
38
|
+
The lower sections on this page show how the contexts nest and where each primitive, hook, and runtime object is available.
|
|
39
|
+
|
|
19
40
|
## Cloud
|
|
20
41
|
|
|
21
42
|
- [`AssistantCloud`](#assistant-cloud)
|
|
@@ -111,6 +111,13 @@ The condition function receives an `AssistantState` object with the following pr
|
|
|
111
111
|
<Disclaimer />
|
|
112
112
|
</AuiIf>
|
|
113
113
|
|
|
114
|
+
// Render content only after the assistant finishes streaming
|
|
115
|
+
<AuiIf condition={(s) =>
|
|
116
|
+
s.message.role === "assistant" && s.message.status?.type === "complete"
|
|
117
|
+
}>
|
|
118
|
+
<FollowUpCard />
|
|
119
|
+
</AuiIf>
|
|
120
|
+
|
|
114
121
|
// Toggle copy icon based on copied state
|
|
115
122
|
<ActionBarPrimitive.Copy>
|
|
116
123
|
<AuiIf condition={(s) => !s.message.isCopied}>
|
|
@@ -416,76 +416,124 @@ import { AuiIf } from "@assistant-ui/react";
|
|
|
416
416
|
</AuiIf>
|
|
417
417
|
```
|
|
418
418
|
|
|
419
|
-
##
|
|
419
|
+
## Trigger Popover Primitives (Unstable)
|
|
420
420
|
|
|
421
421
|
<Callout type="warn">
|
|
422
422
|
These primitives are under the `Unstable_` prefix and may change without notice.
|
|
423
423
|
</Callout>
|
|
424
424
|
|
|
425
|
-
|
|
425
|
+
Unified primitives for any character-triggered popover (`@` mentions, `/` slash commands, `:` emoji, etc.). Multiple triggers coexist under a single `TriggerPopoverRoot`. See the [Mentions guide](/docs/guides/mentions) and [Slash Commands guide](/docs/guides/slash-commands) for full documentation and the [ComposerTriggerPopover component](/docs/ui/composer-trigger-popover) for a pre-built implementation.
|
|
426
426
|
|
|
427
427
|
### Anatomy
|
|
428
428
|
|
|
429
429
|
```tsx
|
|
430
430
|
import { ComposerPrimitive } from "@assistant-ui/react";
|
|
431
|
+
import { unstable_defaultDirectiveFormatter } from "@assistant-ui/core";
|
|
431
432
|
|
|
432
433
|
const Composer = () => (
|
|
433
|
-
<ComposerPrimitive.
|
|
434
|
+
<ComposerPrimitive.Unstable_TriggerPopoverRoot>
|
|
434
435
|
<ComposerPrimitive.Root>
|
|
435
436
|
<ComposerPrimitive.Input />
|
|
436
|
-
|
|
437
|
-
|
|
437
|
+
|
|
438
|
+
<ComposerPrimitive.Unstable_TriggerPopover
|
|
439
|
+
char="@"
|
|
440
|
+
adapter={mention.adapter}
|
|
441
|
+
>
|
|
442
|
+
<ComposerPrimitive.Unstable_TriggerPopover.Directive
|
|
443
|
+
{...mention.directive}
|
|
444
|
+
/>
|
|
445
|
+
<ComposerPrimitive.Unstable_TriggerPopoverCategories>
|
|
438
446
|
{(categories) =>
|
|
439
447
|
categories.map((cat) => (
|
|
440
|
-
<ComposerPrimitive.
|
|
448
|
+
<ComposerPrimitive.Unstable_TriggerPopoverCategoryItem
|
|
441
449
|
key={cat.id}
|
|
442
450
|
categoryId={cat.id}
|
|
443
451
|
>
|
|
444
452
|
{cat.label}
|
|
445
|
-
</ComposerPrimitive.
|
|
453
|
+
</ComposerPrimitive.Unstable_TriggerPopoverCategoryItem>
|
|
446
454
|
))
|
|
447
455
|
}
|
|
448
|
-
</ComposerPrimitive.
|
|
449
|
-
<ComposerPrimitive.
|
|
456
|
+
</ComposerPrimitive.Unstable_TriggerPopoverCategories>
|
|
457
|
+
<ComposerPrimitive.Unstable_TriggerPopoverItems>
|
|
450
458
|
{(items) =>
|
|
451
459
|
items.map((item) => (
|
|
452
|
-
<ComposerPrimitive.
|
|
460
|
+
<ComposerPrimitive.Unstable_TriggerPopoverItem
|
|
453
461
|
key={item.id}
|
|
454
462
|
item={item}
|
|
455
463
|
>
|
|
456
464
|
{item.label}
|
|
457
|
-
</ComposerPrimitive.
|
|
465
|
+
</ComposerPrimitive.Unstable_TriggerPopoverItem>
|
|
458
466
|
))
|
|
459
467
|
}
|
|
460
|
-
</ComposerPrimitive.
|
|
461
|
-
<ComposerPrimitive.
|
|
468
|
+
</ComposerPrimitive.Unstable_TriggerPopoverItems>
|
|
469
|
+
<ComposerPrimitive.Unstable_TriggerPopoverBack>
|
|
462
470
|
Back
|
|
463
|
-
</ComposerPrimitive.
|
|
464
|
-
</ComposerPrimitive.
|
|
471
|
+
</ComposerPrimitive.Unstable_TriggerPopoverBack>
|
|
472
|
+
</ComposerPrimitive.Unstable_TriggerPopover>
|
|
465
473
|
</ComposerPrimitive.Root>
|
|
466
|
-
</ComposerPrimitive.
|
|
474
|
+
</ComposerPrimitive.Unstable_TriggerPopoverRoot>
|
|
467
475
|
);
|
|
468
476
|
```
|
|
469
477
|
|
|
470
|
-
###
|
|
478
|
+
### Unstable_TriggerPopoverRoot
|
|
479
|
+
|
|
480
|
+
Root provider that groups one or more `TriggerPopover` declarations. Owns the shared `ComposerInputPluginRegistry` that routes cursor and keyboard events to each registered trigger.
|
|
481
|
+
|
|
482
|
+
No props.
|
|
483
|
+
|
|
484
|
+
### Unstable_TriggerPopover
|
|
485
|
+
|
|
486
|
+
Declares a trigger and renders its popover container. Only renders its DOM (and children) while this trigger is active in the composer input. Each declaration has an isolated scope — sub-primitives placed inside read state from this declaration only.
|
|
487
|
+
|
|
488
|
+
| Prop | Type | Default | Description |
|
|
489
|
+
| --- | --- | --- | --- |
|
|
490
|
+
| `char` | `string` | — | Character(s) that activate the trigger (e.g. `"@"`, `"/"`) — unique within the root |
|
|
491
|
+
| `adapter` | `Unstable_TriggerAdapter` | — | Provides categories, items, and search |
|
|
492
|
+
|
|
493
|
+
Selection behavior is declared by rendering **exactly one** behavior sub-primitive inside the `TriggerPopover`:
|
|
494
|
+
|
|
495
|
+
- [`Unstable_TriggerPopover.Directive`](#unstable_triggerpopoverdirective) — inserts `:type[label]{name=id}` into the composer on selection (mention behavior).
|
|
496
|
+
- [`Unstable_TriggerPopover.Action`](#unstable_triggerpopoveraction) — fires `onExecute` on selection; leaves a directive chip as an audit trail by default.
|
|
497
|
+
|
|
498
|
+
Renders a `<div>` with `role="listbox"` when open.
|
|
499
|
+
|
|
500
|
+
### Unstable_TriggerPopover.Directive
|
|
501
|
+
|
|
502
|
+
Behavior sub-primitive. Placed inside a `<Unstable_TriggerPopover>`. Renders nothing — registers an `"directive"` behavior with its parent. Exactly one behavior sub-primitive is allowed per `TriggerPopover`.
|
|
503
|
+
|
|
504
|
+
| Prop | Type | Default | Description |
|
|
505
|
+
| --- | --- | --- | --- |
|
|
506
|
+
| `formatter` | `Unstable_DirectiveFormatter` | `unstable_defaultDirectiveFormatter` | Serializes the selected item into composer text (and parses it back). |
|
|
507
|
+
| `onInserted` | `(item) => void` | — | Fires after the directive text has been inserted. |
|
|
508
|
+
|
|
509
|
+
### Unstable_TriggerPopover.Action
|
|
471
510
|
|
|
472
|
-
|
|
511
|
+
Behavior sub-primitive. Placed inside a `<Unstable_TriggerPopover>`. Renders nothing — registers an `"action"` behavior with its parent. Exactly one behavior sub-primitive is allowed per `TriggerPopover`.
|
|
473
512
|
|
|
474
513
|
| Prop | Type | Default | Description |
|
|
475
514
|
| --- | --- | --- | --- |
|
|
476
|
-
| `
|
|
477
|
-
| `
|
|
478
|
-
| `
|
|
515
|
+
| `formatter` | `Unstable_DirectiveFormatter` | `unstable_defaultDirectiveFormatter` | Serializes the audit-trail chip (unused when `removeOnExecute` is true). |
|
|
516
|
+
| `onExecute` | `(item) => void` | — | Called the moment an item is selected — typically routes to a handler map. Required. |
|
|
517
|
+
| `removeOnExecute` | `boolean` | `false` | When `true`, strips the trigger text from the composer instead of leaving a chip. |
|
|
479
518
|
|
|
480
|
-
###
|
|
519
|
+
### Unstable_TriggerBehavior
|
|
481
520
|
|
|
482
|
-
|
|
521
|
+
Union type returned by the two behavior sub-primitives and consumed internally by the popover resources. Exported for advanced use cases (e.g. custom sub-primitives).
|
|
483
522
|
|
|
484
|
-
|
|
523
|
+
```ts
|
|
524
|
+
import type { Unstable_TriggerBehavior } from "@assistant-ui/react";
|
|
525
|
+
|
|
526
|
+
// Equivalent shape:
|
|
527
|
+
// Unstable_TriggerBehavior =
|
|
528
|
+
// | { kind: "directive"; formatter: Unstable_DirectiveFormatter; onInserted?: (item) => void }
|
|
529
|
+
// | { kind: "action"; formatter: Unstable_DirectiveFormatter; onExecute: (item) => void; removeOnExecute?: boolean }
|
|
530
|
+
```
|
|
531
|
+
|
|
532
|
+
### Unstable_TriggerPopoverCategories
|
|
485
533
|
|
|
486
534
|
Renders the top-level category list. Accepts a render function `(categories) => ReactNode`. Hidden when a category is selected or when in search mode.
|
|
487
535
|
|
|
488
|
-
###
|
|
536
|
+
### Unstable_TriggerPopoverCategoryItem
|
|
489
537
|
|
|
490
538
|
A button that drills into a category. Renders `role="option"` with automatic `data-highlighted` and `aria-selected` when keyboard-navigated.
|
|
491
539
|
|
|
@@ -493,25 +541,26 @@ A button that drills into a category. Renders `role="option"` with automatic `da
|
|
|
493
541
|
| --- | --- | --- |
|
|
494
542
|
| `categoryId` | `string` | The category to select on click |
|
|
495
543
|
|
|
496
|
-
###
|
|
544
|
+
### Unstable_TriggerPopoverItems
|
|
497
545
|
|
|
498
546
|
Renders the item list for the active category or search results. Accepts a render function `(items) => ReactNode`. Hidden when no category is selected and not in search mode.
|
|
499
547
|
|
|
500
|
-
###
|
|
548
|
+
### Unstable_TriggerPopoverItem
|
|
501
549
|
|
|
502
|
-
A button that
|
|
550
|
+
A button that selects an item. Renders `role="option"` with automatic `data-highlighted` and `aria-selected` when keyboard-navigated.
|
|
503
551
|
|
|
504
552
|
| Prop | Type | Description |
|
|
505
553
|
| --- | --- | --- |
|
|
506
|
-
| `item` | `
|
|
554
|
+
| `item` | `Unstable_TriggerItem` | The item to select on click |
|
|
555
|
+
| `index` | `number` | Optional index override for highlight matching |
|
|
507
556
|
|
|
508
|
-
###
|
|
557
|
+
### Unstable_TriggerPopoverBack
|
|
509
558
|
|
|
510
559
|
A button that navigates back from items to the category list. Only renders when a category is active.
|
|
511
560
|
|
|
512
|
-
###
|
|
561
|
+
### unstable_useTriggerPopoverScopeContext
|
|
513
562
|
|
|
514
|
-
Hook to access the
|
|
563
|
+
Hook to access the popover state and actions for the nearest enclosing `Unstable_TriggerPopover`.
|
|
515
564
|
|
|
516
565
|
```tsx
|
|
517
566
|
const {
|
|
@@ -527,19 +576,79 @@ const {
|
|
|
527
576
|
goBack,
|
|
528
577
|
close,
|
|
529
578
|
handleKeyDown,
|
|
530
|
-
|
|
531
|
-
} = unstable_useMentionContext();
|
|
579
|
+
} = unstable_useTriggerPopoverScopeContext();
|
|
532
580
|
```
|
|
533
581
|
|
|
534
|
-
###
|
|
582
|
+
### unstable_useTriggerPopoverTriggers
|
|
583
|
+
|
|
584
|
+
Hook to iterate every trigger registered under the current `Unstable_TriggerPopoverRoot`. Intended for input-level integrations (e.g. Lexical `DirectivePlugin`). Returns `ReadonlyMap<string, Unstable_RegisteredTrigger>`.
|
|
585
|
+
|
|
586
|
+
### unstable_useMentionAdapter
|
|
535
587
|
|
|
536
|
-
|
|
588
|
+
Returns a spreadable `{ adapter, directive }` bundle for `@` mentions. Reads tools registered via `useAssistantTool`, accepts explicit `items`, and supports multi-category drill-down.
|
|
537
589
|
|
|
538
590
|
```tsx
|
|
539
|
-
import {
|
|
591
|
+
import {
|
|
592
|
+
unstable_useMentionAdapter,
|
|
593
|
+
type Unstable_Mention,
|
|
594
|
+
} from "@assistant-ui/react";
|
|
595
|
+
|
|
596
|
+
function MyComposer() {
|
|
597
|
+
// Default: tools from model context as a single "Tools" category
|
|
598
|
+
const mention = unstable_useMentionAdapter();
|
|
599
|
+
|
|
600
|
+
return (
|
|
601
|
+
<ComposerTriggerPopover char="@" {...mention} />
|
|
602
|
+
);
|
|
603
|
+
}
|
|
604
|
+
```
|
|
540
605
|
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
606
|
+
```tsx
|
|
607
|
+
// Multi-category + tools appended as their own category
|
|
608
|
+
const mention = unstable_useMentionAdapter({
|
|
609
|
+
categories: [
|
|
610
|
+
{ id: "users", label: "Users", items: [/* ... */] },
|
|
611
|
+
{ id: "files", label: "Files", items: [/* ... */] },
|
|
612
|
+
],
|
|
613
|
+
includeModelContextTools: true,
|
|
544
614
|
});
|
|
545
615
|
```
|
|
616
|
+
|
|
617
|
+
Options:
|
|
618
|
+
|
|
619
|
+
| Option | Type | Description |
|
|
620
|
+
| --- | --- | --- |
|
|
621
|
+
| `items` | `Unstable_Mention[]` | Flat list; ignored when `categories` is set. |
|
|
622
|
+
| `categories` | `{ id, label, items: Unstable_Mention[] }[]` | Drill-down groups. |
|
|
623
|
+
| `includeModelContextTools` | `boolean \| { category?, formatLabel?, icon? }` | Tools integration. Defaults to `true` iff neither `items` nor `categories`. |
|
|
624
|
+
| `formatter` | `Unstable_DirectiveFormatter` | Override directive serialization. |
|
|
625
|
+
| `onInserted` | `(item) => void` | Fires after the directive is inserted. |
|
|
626
|
+
| `iconMap` | `Record<string, Unstable_IconComponent>` | `metadata.icon` / category id → React component. |
|
|
627
|
+
| `fallbackIcon` | `Unstable_IconComponent` | Fallback when no `iconMap` entry matches. |
|
|
628
|
+
|
|
629
|
+
Returns `{ adapter, directive, iconMap?, fallbackIcon? }`.
|
|
630
|
+
|
|
631
|
+
### unstable_useSlashCommandAdapter
|
|
632
|
+
|
|
633
|
+
Returns a spreadable `{ adapter, action }` bundle for slash commands. Commands are declared as data + inline `execute` callbacks; `execute` lives in the hook closure and is never attached to the returned `Unstable_TriggerItem`, keeping items JSON-serializable.
|
|
634
|
+
|
|
635
|
+
```tsx
|
|
636
|
+
import {
|
|
637
|
+
unstable_useSlashCommandAdapter,
|
|
638
|
+
type Unstable_SlashCommand,
|
|
639
|
+
} from "@assistant-ui/react";
|
|
640
|
+
|
|
641
|
+
const SLASH_COMMANDS: readonly Unstable_SlashCommand[] = [
|
|
642
|
+
{ id: "summarize", execute: () => runSummarize(), icon: "FileText" },
|
|
643
|
+
{ id: "translate", execute: () => runTranslate(), icon: "Languages" },
|
|
644
|
+
];
|
|
645
|
+
|
|
646
|
+
function MyComposer() {
|
|
647
|
+
const slash = unstable_useSlashCommandAdapter({ commands: SLASH_COMMANDS });
|
|
648
|
+
return (
|
|
649
|
+
<ComposerTriggerPopover char="/" {...slash} />
|
|
650
|
+
);
|
|
651
|
+
}
|
|
652
|
+
```
|
|
653
|
+
|
|
654
|
+
Pass `removeOnExecute: true` on the hook options to strip the trigger text from the composer after executing. The hook also accepts `iconMap` / `fallbackIcon` options that flow into the returned bundle — `{...slash}` spreads them into `ComposerTriggerPopover`.
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Overview
|
|
3
|
+
description: Generated API reference for assistant-ui React primitive namespaces and parts.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
{/* AUTO-GENERATED by scripts/generate-api-reference-overviews.mts */}
|
|
7
|
+
{/* Do not edit manually. */}
|
|
8
|
+
|
|
9
|
+
Primitives are the composable React components exported from `@assistant-ui/react`. These pages focus on parts, props, rendered elements, and composition behavior.
|
|
10
|
+
|
|
11
|
+
## Pages
|
|
12
|
+
|
|
13
|
+
<Cards>
|
|
14
|
+
<Card title={"ActionBarPrimitive"} href={"/docs/api-reference/primitives/action-bar"}>
|
|
15
|
+
{"Buttons for message actions like copy, edit, reload, speak, and feedback."}
|
|
16
|
+
</Card>
|
|
17
|
+
<Card title={"ActionBarMorePrimitive"} href={"/docs/api-reference/primitives/action-bar-more"}>
|
|
18
|
+
{"API reference for ActionBarMorePrimitive."}
|
|
19
|
+
</Card>
|
|
20
|
+
<Card title={"AuiIf"} href={"/docs/api-reference/primitives/assistant-if"}>
|
|
21
|
+
{"Conditional rendering component based on thread, message, or composer state."}
|
|
22
|
+
</Card>
|
|
23
|
+
<Card title={"AssistantModalPrimitive"} href={"/docs/api-reference/primitives/assistant-modal"}>
|
|
24
|
+
{"A popover chat interface for floating assistant UI in the corner of the screen."}
|
|
25
|
+
</Card>
|
|
26
|
+
<Card title={"AttachmentPrimitive"} href={"/docs/api-reference/primitives/attachment"}>
|
|
27
|
+
{"Components for displaying and managing file attachments in messages and composer."}
|
|
28
|
+
</Card>
|
|
29
|
+
<Card title={"BranchPickerPrimitive"} href={"/docs/api-reference/primitives/branch-picker"}>
|
|
30
|
+
{"Navigate between conversation branches with previous/next controls."}
|
|
31
|
+
</Card>
|
|
32
|
+
<Card title={"ComposerPrimitive"} href={"/docs/api-reference/primitives/composer"}>
|
|
33
|
+
{"Primitives for the text input, send button, and attachments."}
|
|
34
|
+
</Card>
|
|
35
|
+
<Card title={"ErrorPrimitive"} href={"/docs/api-reference/primitives/error"}>
|
|
36
|
+
{"Components for displaying error messages in the chat interface."}
|
|
37
|
+
</Card>
|
|
38
|
+
<Card title={"MessagePrimitive"} href={"/docs/api-reference/primitives/message"}>
|
|
39
|
+
{"Components for rendering message content, parts, and attachments."}
|
|
40
|
+
</Card>
|
|
41
|
+
<Card title={"MessagePartPrimitive"} href={"/docs/api-reference/primitives/message-part"}>
|
|
42
|
+
{"Primitives for text, images, tool calls, and other message content."}
|
|
43
|
+
</Card>
|
|
44
|
+
<Card title={"SelectionToolbarPrimitive"} href={"/docs/api-reference/primitives/selection-toolbar"}>
|
|
45
|
+
{"A floating toolbar that appears when text is selected within a message."}
|
|
46
|
+
</Card>
|
|
47
|
+
<Card title={"SuggestionPrimitive"} href={"/docs/api-reference/primitives/suggestion"}>
|
|
48
|
+
{"API reference for SuggestionPrimitive."}
|
|
49
|
+
</Card>
|
|
50
|
+
<Card title={"ThreadPrimitive"} href={"/docs/api-reference/primitives/thread"}>
|
|
51
|
+
{"Primitives for the message list, viewport, and welcome screen."}
|
|
52
|
+
</Card>
|
|
53
|
+
<Card title={"ThreadListPrimitive"} href={"/docs/api-reference/primitives/thread-list"}>
|
|
54
|
+
{"Display and manage multiple conversation threads with create and archive actions."}
|
|
55
|
+
</Card>
|
|
56
|
+
<Card title={"ThreadListItemPrimitive"} href={"/docs/api-reference/primitives/thread-list-item"}>
|
|
57
|
+
{"Individual thread item with title, archive, and delete controls."}
|
|
58
|
+
</Card>
|
|
59
|
+
<Card title={"ThreadListItemMorePrimitive"} href={"/docs/api-reference/primitives/thread-list-item-more"}>
|
|
60
|
+
{"Dropdown menu for additional thread actions like archive and delete."}
|
|
61
|
+
</Card>
|
|
62
|
+
<Card title={"Composition"} href={"/docs/api-reference/primitives/composition"}>
|
|
63
|
+
{"How to compose primitives with custom components using asChild."}
|
|
64
|
+
</Card>
|
|
65
|
+
</Cards>
|
|
@@ -187,6 +187,8 @@ function MyComponent() {
|
|
|
187
187
|
|
|
188
188
|
Each data component receives the full data part as props: `{ type: "data", name: string, data: T, status: MessagePartStatus }`.
|
|
189
189
|
|
|
190
|
+
For a catch-all renderer (e.g. LangSmith's [`LoadExternalComponent`](/docs/runtimes/langgraph#dynamic-loading-with-fallback) loaded at runtime), pass `Fallback` via the inline `data` config on `MessagePrimitive.Parts`, or use the LangGraph adapter's [`uiComponents.fallback`](/docs/runtimes/langgraph#dynamic-loading-with-fallback) option.
|
|
191
|
+
|
|
190
192
|
### Messages (Sub-Agent)
|
|
191
193
|
|
|
192
194
|
Renders nested messages from a tool call part's `messages` field. This is used in multi-agent setups where a sub-agent's conversation is embedded inside a tool call.
|
|
@@ -3,6 +3,8 @@ title: MessagePrimitive
|
|
|
3
3
|
description: Components for rendering message content, parts, and attachments.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
+
import { MessagePrimitive as MessagePrimitiveDocs } from "@/generated/primitiveDocs";
|
|
7
|
+
|
|
6
8
|
A single message in a conversation. Messages may consist of multiple parts.
|
|
7
9
|
|
|
8
10
|
|
|
@@ -95,13 +97,13 @@ The content of the message. This renders a separate component for each message p
|
|
|
95
97
|
name: "Reasoning",
|
|
96
98
|
type: "ReasoningMessagePartComponent",
|
|
97
99
|
description:
|
|
98
|
-
"
|
|
100
|
+
"Deprecated components-map renderer for each reasoning message part. Prefer the children render function or MessagePrimitive.GroupedParts.",
|
|
99
101
|
},
|
|
100
102
|
{
|
|
101
103
|
name: "tools",
|
|
102
104
|
type: "object",
|
|
103
105
|
description:
|
|
104
|
-
"
|
|
106
|
+
"Deprecated components-map configuration for tool call rendering. Prefer part.toolUI in the children render function or MessagePrimitive.GroupedParts.",
|
|
105
107
|
children: [
|
|
106
108
|
{
|
|
107
109
|
parameters: [
|
|
@@ -155,7 +157,7 @@ The content of the message. This renders a separate component for each message p
|
|
|
155
157
|
name: "ToolGroup",
|
|
156
158
|
type: "ComponentType<PropsWithChildren<{ startIndex: number; endIndex: number }>>",
|
|
157
159
|
description:
|
|
158
|
-
"Deprecated
|
|
160
|
+
"Deprecated legacy wrapper for grouped consecutive tool calls. Prefer MessagePrimitive.GroupedParts with groupBy returning \"group-tool\".",
|
|
159
161
|
children: [
|
|
160
162
|
{
|
|
161
163
|
type: "ToolGroupProps",
|
|
@@ -187,7 +189,7 @@ The content of the message. This renders a separate component for each message p
|
|
|
187
189
|
name: "ReasoningGroup",
|
|
188
190
|
type: "ReasoningGroupComponent",
|
|
189
191
|
description:
|
|
190
|
-
"
|
|
192
|
+
"Deprecated legacy wrapper for grouped consecutive reasoning parts. Prefer MessagePrimitive.GroupedParts with groupBy returning \"group-reasoning\".",
|
|
191
193
|
children: [
|
|
192
194
|
{
|
|
193
195
|
type: "ReasoningGroupProps",
|
|
@@ -219,7 +221,7 @@ The content of the message. This renders a separate component for each message p
|
|
|
219
221
|
name: "ChainOfThought",
|
|
220
222
|
type: "ComponentType",
|
|
221
223
|
description:
|
|
222
|
-
"
|
|
224
|
+
"Deprecated legacy grouping path. Prefer MessagePrimitive.GroupedParts for grouped reasoning and tool calls.",
|
|
223
225
|
},
|
|
224
226
|
{
|
|
225
227
|
name: "Empty",
|
|
@@ -400,9 +402,51 @@ type QuoteInfo = {
|
|
|
400
402
|
See the [Quoting guide](/docs/guides/quoting) for a complete walkthrough.
|
|
401
403
|
</Callout>
|
|
402
404
|
|
|
405
|
+
### GroupedParts
|
|
406
|
+
|
|
407
|
+
Renders adjacent message parts through a hierarchical grouping tree. Use this for grouped Chain of Thought, consecutive tool calls, or any other adjacent grouping where each part stays in chronological order.
|
|
408
|
+
|
|
409
|
+
```tsx
|
|
410
|
+
<MessagePrimitive.GroupedParts
|
|
411
|
+
groupBy={(part) => {
|
|
412
|
+
if (part.type === "reasoning")
|
|
413
|
+
return ["group-chainOfThought", "group-reasoning"];
|
|
414
|
+
if (part.type === "tool-call")
|
|
415
|
+
return ["group-chainOfThought", "group-tool"];
|
|
416
|
+
return null;
|
|
417
|
+
}}
|
|
418
|
+
>
|
|
419
|
+
{({ part, children }) => {
|
|
420
|
+
switch (part.type) {
|
|
421
|
+
case "group-chainOfThought":
|
|
422
|
+
return <div>{children}</div>;
|
|
423
|
+
case "group-reasoning":
|
|
424
|
+
return <ReasoningRoot>{children}</ReasoningRoot>;
|
|
425
|
+
case "group-tool":
|
|
426
|
+
return <ToolGroupRoot>{children}</ToolGroupRoot>;
|
|
427
|
+
case "text":
|
|
428
|
+
return <MarkdownText />;
|
|
429
|
+
case "reasoning":
|
|
430
|
+
return <Reasoning {...part} />;
|
|
431
|
+
case "tool-call":
|
|
432
|
+
return part.toolUI ?? <ToolFallback {...part} />;
|
|
433
|
+
case "data":
|
|
434
|
+
return part.dataRendererUI;
|
|
435
|
+
default:
|
|
436
|
+
return null;
|
|
437
|
+
}
|
|
438
|
+
}}
|
|
439
|
+
</MessagePrimitive.GroupedParts>
|
|
440
|
+
```
|
|
441
|
+
|
|
442
|
+
<ParametersTable
|
|
443
|
+
type="MessagePrimitiveGroupedPartsProps"
|
|
444
|
+
parameters={MessagePrimitiveDocs.GroupedParts.props}
|
|
445
|
+
/>
|
|
446
|
+
|
|
403
447
|
### Unstable_PartsGrouped
|
|
404
448
|
|
|
405
|
-
Renders the parts of a message grouped by a custom grouping function. Use this
|
|
449
|
+
Renders the parts of a message grouped by a custom grouping function. Use this unstable API only when you need non-adjacent clustering, such as collecting parts that share a common parent ID across different positions. For adjacent grouping, prefer `MessagePrimitive.GroupedParts`.
|
|
406
450
|
|
|
407
451
|
The `groupingFunction` prop controls how parts are grouped. It receives the full array of message parts and must return an array of group descriptors, each with a `groupKey` (or `undefined` for ungrouped parts) and an array of `indices` into the message parts array. The optional `components.Group` component is then rendered once per group and receives the `groupKey`, `indices`, and the rendered part children.
|
|
408
452
|
|
|
@@ -124,3 +124,18 @@ Renders a single thread list item at the specified index.
|
|
|
124
124
|
},
|
|
125
125
|
]}
|
|
126
126
|
/>
|
|
127
|
+
|
|
128
|
+
### LoadMore
|
|
129
|
+
|
|
130
|
+
A button that calls `aui.threads().loadMore()` to append the next page. See the [LoadMore primitive reference](/docs/primitives/thread-list#loadmore) for usage and [Threads concepts](/docs/runtimes/concepts/threads#paginating-the-thread-list) for the adapter contract.
|
|
131
|
+
|
|
132
|
+
This primitive renders a `<button>` element unless `asChild` is set.
|
|
133
|
+
|
|
134
|
+
<ParametersTable
|
|
135
|
+
type="ThreadListPrimitiveLoadMoreProps"
|
|
136
|
+
parameters={[
|
|
137
|
+
{
|
|
138
|
+
name: "asChild",
|
|
139
|
+
},
|
|
140
|
+
]}
|
|
141
|
+
/>
|
|
@@ -67,6 +67,33 @@ This primitive renders a `<div>` element unless `asChild` is set.
|
|
|
67
67
|
description:
|
|
68
68
|
'Controls scroll anchoring behavior for new messages. "bottom" is the classic chat behavior where messages anchor at the bottom. "top" anchors new user messages at the top of the viewport for a focused reading experience.',
|
|
69
69
|
},
|
|
70
|
+
{
|
|
71
|
+
name: "topAnchorMessageClamp",
|
|
72
|
+
type: '{ tallerThan?: string; visibleHeight?: string }',
|
|
73
|
+
default: '{ tallerThan: "10em", visibleHeight: "6em" }',
|
|
74
|
+
description:
|
|
75
|
+
'Clamps tall user messages so the assistant response stays in view when turnAnchor is "top". Messages up to `tallerThan` stay fully visible; taller messages show only `visibleHeight` of their bottom edge above the assistant response.',
|
|
76
|
+
children: [
|
|
77
|
+
{
|
|
78
|
+
type: '{ tallerThan?: string; visibleHeight?: string }',
|
|
79
|
+
parameters: [
|
|
80
|
+
{
|
|
81
|
+
name: "tallerThan",
|
|
82
|
+
type: "string",
|
|
83
|
+
default: '"10em"',
|
|
84
|
+
description: "Clamp messages taller than this CSS length.",
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
name: "visibleHeight",
|
|
88
|
+
type: "string",
|
|
89
|
+
default: '"6em"',
|
|
90
|
+
description:
|
|
91
|
+
"Visible portion of a clamped message's bottom edge.",
|
|
92
|
+
},
|
|
93
|
+
],
|
|
94
|
+
},
|
|
95
|
+
],
|
|
96
|
+
},
|
|
70
97
|
{
|
|
71
98
|
name: "scrollToBottomOnRunStart",
|
|
72
99
|
type: "boolean",
|
|
@@ -90,9 +117,17 @@ This primitive renders a `<div>` element unless `asChild` is set.
|
|
|
90
117
|
]}
|
|
91
118
|
/>
|
|
92
119
|
|
|
120
|
+
<Callout type="info">
|
|
121
|
+
`ThreadPrimitive.ViewportSlack` has been removed. When `turnAnchor="top"` is
|
|
122
|
+
set, `MessagePrimitive.Root` handles top-anchor registration automatically. If
|
|
123
|
+
you previously customized `fillClampThreshold` or `fillClampOffset` on
|
|
124
|
+
`ViewportSlack` or `MessagePrimitive.Root`, use `topAnchorMessageClamp`
|
|
125
|
+
instead.
|
|
126
|
+
</Callout>
|
|
127
|
+
|
|
93
128
|
### ViewportFooter
|
|
94
129
|
|
|
95
|
-
A footer container placed inside `ThreadPrimitive.Viewport` that measures its own height (including top margin) and reports it to the viewport context. The viewport uses this measurement in scroll calculations
|
|
130
|
+
A footer container placed inside `ThreadPrimitive.Viewport` that measures its own height (including top margin) and reports it to the viewport context. The viewport uses this measurement in scroll calculations so the scroll-to-bottom behaviour accounts for any sticky footer overlapping the message list.
|
|
96
131
|
|
|
97
132
|
Multiple `ViewportFooter` components may be used; their heights are summed.
|
|
98
133
|
|