@assistant-ui/mcp-docs-server 0.1.23 → 0.1.25

package/.docs/raw/docs/react-native/primitives.mdx

@@ -5,98 +5,193 @@ description: Composable React Native components for building chat UIs.
 
 Primitives are thin wrappers around React Native components (`View`, `TextInput`, `FlatList`, `Pressable`) that integrate with the assistant-ui runtime. They accept all standard React Native props and add runtime-aware behavior.
 
+Primitives are accessed via namespace imports (e.g. `ThreadPrimitive.Root`, `ComposerPrimitive.Input`), matching the pattern used in `@assistant-ui/react`.
+
 Many primitives share their core logic with `@assistant-ui/react` via `@assistant-ui/core/react` — only the UI layer (View/Pressable/Text vs DOM elements) differs.
 
 ## Thread
 
-### ThreadRoot
+```tsx
+import { ThreadPrimitive } from "@assistant-ui/react-native";
+```
+
+### ThreadPrimitive.Root
 
 Container `View` for the thread area.
 
 ```tsx
-import { ThreadRoot } from "@assistant-ui/react-native";
-
-<ThreadRoot style={{ flex: 1 }}>
+<ThreadPrimitive.Root style={{ flex: 1 }}>
   {children}
-</ThreadRoot>
+</ThreadPrimitive.Root>
 ```
 
 | Prop | Type | Description |
 |------|------|-------------|
 | `...rest` | `ViewProps` | Standard React Native View props |
 
-### ThreadMessages
+### ThreadPrimitive.Messages
 
-`FlatList`-based message list with automatic runtime integration. Each message is wrapped in a scoped context so that `useAuiState((s) => s.message)` works inside `renderMessage`.
+`FlatList`-based message list with automatic runtime integration. Each message is wrapped in a scoped context so that `useAuiState((s) => s.message)` works inside the rendered component.
 
 ```tsx
-import { ThreadMessages } from "@assistant-ui/react-native";
+<ThreadPrimitive.Messages>
+  {() => <MyMessage />}
+</ThreadPrimitive.Messages>
+```
 
-<ThreadMessages
-  renderMessage={({ message }) => <MessageBubble message={message} />}
-/>
+You can also provide role-specific components:
+
+```tsx
+<ThreadPrimitive.Messages>
+  {({ message }) => {
+    if (message.role === "user") return <MyUserMessage />;
+    return <MyAssistantMessage />;
+  }}
+</ThreadPrimitive.Messages>
 ```
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `renderMessage` | `(info: { message: ThreadMessage; index: number }) => ReactElement` | Message renderer |
+| `components` | `MessageComponents` | Component map — provide either a `Message` component (used for all roles) or role-specific `UserMessage`, `AssistantMessage`, and optionally `SystemMessage`. Edit composers can be set via `EditComposer` or role-specific variants (`UserEditComposer`, `AssistantEditComposer`, `SystemEditComposer`). |
 | `...rest` | `FlatListProps` | Standard FlatList props (except `data`, `renderItem`) |
 
-### ThreadEmpty
+### ThreadPrimitive.MessageByIndex
 
-Renders children only when the thread has no messages.
+Renders a single message at a specific index in the thread. Provides message context so that `useAuiState((s) => s.message)` works inside the rendered component. This component is shared from `@assistant-ui/core/react`.
 
 ```tsx
-import { ThreadEmpty } from "@assistant-ui/react-native";
+<ThreadPrimitive.MessageByIndex
+  index={0}
+  components={{
+    UserMessage: MyUserMessage,
+    AssistantMessage: MyAssistantMessage,
+  }}
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `index` | `number` | Zero-based index of the message to render |
+| `components` | `MessageComponents` | Same component map as `ThreadPrimitive.Messages` |
+
+### ThreadPrimitive.Empty
+
+Renders its children only when the thread has no messages. Deprecated in favor of `AuiIf`.
 
-<ThreadEmpty>
+```tsx
+<ThreadPrimitive.Empty>
   <Text>Send a message to get started</Text>
-</ThreadEmpty>
+</ThreadPrimitive.Empty>
 ```
 
-### ThreadIf
+### ThreadPrimitive.If
 
-Conditional rendering based on thread state.
+Conditional rendering based on thread state. Deprecated in favor of `AuiIf`.
 
 ```tsx
-import { ThreadIf } from "@assistant-ui/react-native";
-
-<ThreadIf empty>
+<ThreadPrimitive.If empty>
   <Text>No messages yet</Text>
-</ThreadIf>
+</ThreadPrimitive.If>
 
-<ThreadIf running>
+<ThreadPrimitive.If running>
   <ActivityIndicator />
-</ThreadIf>
+</ThreadPrimitive.If>
 ```
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `empty` | `boolean` | Render when thread is empty |
-| `running` | `boolean` | Render when thread is running |
+| `empty` | `boolean` | Renders children when thread emptiness matches this value |
+| `running` | `boolean` | Renders children when thread running state matches this value |
+
+### ThreadPrimitive.Suggestion
+
+`Pressable` that inserts or sends a hard-coded suggestion prompt. Unlike `SuggestionPrimitive.Trigger`, this component does not require a suggestion context — the prompt is passed directly as a prop.
+
+```tsx
+<ThreadPrimitive.Suggestion prompt="What can you help me with?" send>
+  <Text>What can you help me with?</Text>
+</ThreadPrimitive.Suggestion>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `prompt` | `string` | The text to send or insert into the composer |
+| `send` | `boolean` | When true, sends the prompt immediately; when false, inserts into composer (default: false) |
+| `clearComposer` | `boolean` | Whether to replace composer text (default: true) |
+| `...rest` | `PressableProps` | Standard Pressable props (except `onPress`) |
+
+### ThreadPrimitive.Suggestions
+
+Renders all suggestions using the provided component configuration. This component is shared from `@assistant-ui/core/react`.
+
+```tsx
+<ThreadPrimitive.Suggestions>
+  {() => <MySuggestion />}
+</ThreadPrimitive.Suggestions>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `components` | `{ Suggestion: ComponentType }` | Component to render for each suggestion |
+
+### ThreadPrimitive.SuggestionByIndex
+
+Renders a single suggestion at the specified index, providing suggestion context. This component is shared from `@assistant-ui/core/react`.
+
+```tsx
+<ThreadPrimitive.SuggestionByIndex
+  index={0}
+  components={{ Suggestion: MySuggestion }}
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `index` | `number` | Zero-based index of the suggestion to render |
+| `components` | `{ Suggestion: ComponentType }` | Component to render for the suggestion |
+
+### AuiIf
+
+Conditional rendering based on assistant state. Replaces the deprecated `ThreadPrimitive.Empty`, `ThreadPrimitive.If`, `MessagePrimitive.If`, and `ComposerPrimitive.If`.
+
+```tsx
+import { AuiIf } from "@assistant-ui/react-native";
+
+<AuiIf condition={(s) => s.thread.isEmpty}>
+  <Text>Send a message to get started</Text>
+</AuiIf>
+
+<AuiIf condition={(s) => s.thread.isRunning}>
+  <ActivityIndicator />
+</AuiIf>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `condition` | `(state) => boolean` | Selector that determines whether children are rendered |
 
 ## Composer
 
-### ComposerRoot
+```tsx
+import { ComposerPrimitive } from "@assistant-ui/react-native";
+```
+
+### ComposerPrimitive.Root
 
 Container `View` for the composer area.
 
 ```tsx
-import { ComposerRoot } from "@assistant-ui/react-native";
-
-<ComposerRoot style={styles.composerContainer}>
+<ComposerPrimitive.Root style={styles.composerContainer}>
   {children}
-</ComposerRoot>
+</ComposerPrimitive.Root>
 ```
 
-### ComposerInput
+### ComposerPrimitive.Input
 
 `TextInput` wired to the composer runtime. Value and `onChangeText` are managed automatically.
 
 ```tsx
-import { ComposerInput } from "@assistant-ui/react-native";
-
-<ComposerInput
+<ComposerPrimitive.Input
   placeholder="Message..."
   multiline
   style={styles.input}
@@ -105,120 +200,260 @@ import { ComposerInput } from "@assistant-ui/react-native";
 
 | Prop | Type | Description |
 |------|------|-------------|
+| `submitMode` | `"enter" \| "none"` | Whether Enter sends the message on web (default: `"enter"`) |
 | `...rest` | `TextInputProps` | Standard TextInput props (except `value`, `onChangeText`) |
 
-### ComposerSend
+### ComposerPrimitive.Send
 
 `Pressable` that sends the current message. Automatically disabled when the composer is empty.
 
 ```tsx
-import { ComposerSend } from "@assistant-ui/react-native";
-
-<ComposerSend style={styles.sendButton}>
+<ComposerPrimitive.Send style={styles.sendButton}>
   <Text>Send</Text>
-</ComposerSend>
+</ComposerPrimitive.Send>
 ```
 
-### ComposerCancel
+### ComposerPrimitive.Cancel
 
 `Pressable` that cancels the current run. Automatically disabled when no run is active.
 
 ```tsx
-import { ComposerCancel } from "@assistant-ui/react-native";
-
-<ComposerCancel style={styles.cancelButton}>
+<ComposerPrimitive.Cancel style={styles.cancelButton}>
   <Text>Stop</Text>
-</ComposerCancel>
+</ComposerPrimitive.Cancel>
 ```
 
-### ComposerAttachments
+### ComposerPrimitive.Attachments
 
 Renders composer attachments using the provided component configuration.
 
 ```tsx
-import { ComposerAttachments } from "@assistant-ui/react-native";
+<ComposerPrimitive.Attachments>
+  {({ attachment }) => {
+    if (attachment.type === "image") return <MyImageAttachment />;
+    if (attachment.type === "document") return <MyDocumentAttachment />;
+    return <MyFallbackAttachment />;
+  }}
+</ComposerPrimitive.Attachments>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `components` | `{ Image?, Document?, File?, Attachment? }` | Component renderers by attachment type |
+
+### ComposerPrimitive.AddAttachment
+
+`Pressable` for triggering attachment addition. The actual file picker must be implemented by the consumer (e.g. using `expo-document-picker` or `expo-image-picker`).
 
-<ComposerAttachments
+```tsx
+<ComposerPrimitive.AddAttachment>
+  <Text>Attach</Text>
+</ComposerPrimitive.AddAttachment>
+```
+
+### ComposerPrimitive.AttachmentByIndex
+
+Renders a single composer attachment at the specified index. Useful for building custom attachment layouts.
+
+```tsx
+<ComposerPrimitive.AttachmentByIndex
+  index={0}
   components={{
     Image: MyImageAttachment,
-    Document: MyDocumentAttachment,
-    Attachment: MyFallbackAttachment, // fallback for all types
+    Attachment: MyFallbackAttachment,
   }}
 />
 ```
 
 | Prop | Type | Description |
 |------|------|-------------|
+| `index` | `number` | Zero-based index of the attachment to render |
 | `components` | `{ Image?, Document?, File?, Attachment? }` | Component renderers by attachment type |
 
+### ComposerPrimitive.EditInput
+
+`TextInput` wired to the edit composer runtime. Used inside an edit composer to allow editing an existing message. Value and `onChangeText` are managed automatically.
+
+```tsx
+<ComposerPrimitive.EditInput
+  placeholder="Edit message..."
+  multiline
+  style={styles.input}
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `...rest` | `TextInputProps` | Standard TextInput props (except `value`, `onChangeText`) |
+
+### ComposerPrimitive.EditSend
+
+`Pressable` that confirms and submits a message edit. Automatically disabled when the composer is empty.
+
+```tsx
+<ComposerPrimitive.EditSend style={styles.sendButton}>
+  <Text>Save</Text>
+</ComposerPrimitive.EditSend>
+```
+
+### ComposerPrimitive.EditCancel
+
+`Pressable` that cancels an in-progress message edit and returns to the original message.
+
+```tsx
+<ComposerPrimitive.EditCancel style={styles.cancelButton}>
+  <Text>Cancel</Text>
+</ComposerPrimitive.EditCancel>
+```
+
+### Conditional Rendering (Composer)
+
+Use `AuiIf` for conditional rendering based on composer state:
+
+```tsx
+<AuiIf condition={(s) => s.composer.isEditing}>
+  <Text>Currently editing</Text>
+</AuiIf>
+
+<AuiIf condition={(s) => s.composer.dictation != null}>
+  <Text>Dictation active</Text>
+</AuiIf>
+```
+
 ## Message
 
-### MessageRoot
+```tsx
+import { MessagePrimitive } from "@assistant-ui/react-native";
+```
+
+### MessagePrimitive.Root
 
 Container `View` for a single message.
 
 ```tsx
-import { MessageRoot } from "@assistant-ui/react-native";
-
-<MessageRoot style={styles.messageBubble}>
+<MessagePrimitive.Root style={styles.messageBubble}>
   {children}
-</MessageRoot>
+</MessagePrimitive.Root>
 ```
 
-### MessageContent
+### MessagePrimitive.Content
 
-Renders message content parts. Tool call and data parts automatically render registered tool UIs (via `useAssistantTool` / `useAssistantDataUI`), falling back to render props if provided.
+Renders message content parts using render-prop functions instead of the component-map approach used by `MessagePrimitive.Parts`. Each part type receives a `part` object and its `index`. Registered tool UIs (via `useAssistantTool`) are automatically dispatched and take priority over `renderToolCall`.
 
 ```tsx
-import { MessageContent } from "@assistant-ui/react-native";
-
-<MessageContent
+<MessagePrimitive.Content
   renderText={({ part }) => <Text>{part.text}</Text>}
-  renderImage={({ part }) => <Image source={{ uri: part.image }} />}
+  renderToolCall={({ part, index }) => (
+    <Text>Tool: {part.toolName}</Text>
+  )}
+  renderImage={({ part }) => (
+    <Image source={{ uri: part.image }} />
+  )}
 />
 ```
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `renderText` | `(props: { part; index }) => ReactElement` | Text part renderer |
-| `renderToolCall` | `(props: { part; index }) => ReactElement` | Tool call fallback (used when no tool UI is registered) |
-| `renderImage` | `(props: { part; index }) => ReactElement` | Image part renderer |
-| `renderReasoning` | `(props: { part; index }) => ReactElement` | Reasoning part renderer |
-| `renderSource` | `(props: { part; index }) => ReactElement` | Source part renderer |
-| `renderFile` | `(props: { part; index }) => ReactElement` | File part renderer |
-| `renderData` | `(props: { part; index }) => ReactElement` | Data part fallback (used when no data UI is registered) |
+| `renderText` | `(props: { part, index }) => ReactElement` | Renderer for text parts (default: React Native `<Text>`) |
+| `renderToolCall` | `(props: { part, index }) => ReactElement` | Fallback renderer for tool-call parts not handled by registered tool UIs |
+| `renderImage` | `(props: { part, index }) => ReactElement` | Renderer for image parts |
+| `renderReasoning` | `(props: { part, index }) => ReactElement` | Renderer for reasoning parts |
+| `renderSource` | `(props: { part, index }) => ReactElement` | Renderer for source parts |
+| `renderFile` | `(props: { part, index }) => ReactElement` | Renderer for file parts |
+| `renderData` | `(props: { part, index }) => ReactElement` | Fallback renderer for data parts not handled by registered data UIs |
 
-### MessageIf
+### MessagePrimitive.Parts
 
-Conditional rendering based on message properties.
+Renders message content parts via a `components` prop. Tool call and data parts automatically render registered tool UIs (via `useAssistantTool` / `useAssistantDataUI`), falling back to components provided here. A default `Text` component using React Native's `<Text>` is provided out of the box.
 
 ```tsx
-import { MessageIf } from "@assistant-ui/react-native";
+<MessagePrimitive.Parts>
+  {({ part }) => {
+    if (part.type === "text") return <Text>{part.text}</Text>;
+    if (part.type === "image") return <Image source={{ uri: part.image }} />;
+    if (part.type === "tool-call") return <MyToolCallComponent {...part} />;
+    return null;
+  }}
+</MessagePrimitive.Parts>
+```
 
-<MessageIf user>
-  <Text>You said:</Text>
-</MessageIf>
+| Prop | Type | Description |
+|------|------|-------------|
+| `components` | `object` | Component map for rendering each part type. See below. |
 
-<MessageIf assistant last>
-  <ActivityIndicator />
-</MessageIf>
+**`components` fields:**
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `Text` | `TextMessagePartComponent` | Text part renderer (default: React Native `<Text>`) |
+| `Image` | `ImageMessagePartComponent` | Image part renderer |
+| `Reasoning` | `ReasoningMessagePartComponent` | Reasoning part renderer |
+| `Source` | `SourceMessagePartComponent` | Source part renderer |
+| `File` | `FileMessagePartComponent` | File part renderer |
+| `Unstable_Audio` | `AudioMessagePartComponent` | Audio part renderer (experimental) |
+| `tools` | `{ by_name?, Fallback? }` or `{ Override }` | Tool call rendering config — use `by_name` to map tool names to components, `Fallback` for unregistered tools, or `Override` to handle all tool calls |
+| `data` | `{ by_name?, Fallback? }` | Data part rendering config — use `by_name` to map data event names, `Fallback` for unmatched events |
+| `Empty` | `EmptyMessagePartComponent` | Component shown for empty messages |
+| `Quote` | `QuoteMessagePartComponent` | Component for rendering quoted message references |
+| `ChainOfThought` | `ComponentType` | Groups all reasoning and tool-call parts into a single component (mutually exclusive with `Reasoning`/`tools`/`ToolGroup`/`ReasoningGroup`) |
+
+### MessagePrimitive.PartByIndex
+
+Renders a single message part at the specified index, providing part context. Useful for building custom part layouts outside of `MessagePrimitive.Parts`. This component is shared from `@assistant-ui/core/react`.
+
+```tsx
+<MessagePrimitive.PartByIndex
+  index={0}
+  components={{
+    Text: ({ text }) => <Text>{text}</Text>,
+    tools: { Fallback: MyToolComponent },
+  }}
+/>
 ```
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `user` | `boolean` | Render for user messages |
-| `assistant` | `boolean` | Render for assistant messages |
-| `running` | `boolean` | Render when message is being generated |
-| `last` | `boolean` | Render for the last message |
+| `index` | `number` | Zero-based index of the message part to render |
+| `components` | `object` | Same component map as `MessagePrimitive.Parts` |
 
-### MessageAttachments
+### Conditional Rendering (Message)
+
+Use `AuiIf` for conditional rendering based on message properties:
+
+```tsx
+<AuiIf condition={(s) => s.message.role === "user"}>
+  <Text>You said:</Text>
+</AuiIf>
+
+<AuiIf condition={(s) => s.message.role === "assistant" && s.message.isLast}>
+  <ActivityIndicator />
+</AuiIf>
+```
+
+### MessagePrimitive.Attachments
 
 Renders user message attachments using the provided component configuration.
 
 ```tsx
-import { MessageAttachments } from "@assistant-ui/react-native";
+<MessagePrimitive.Attachments>
+  {({ attachment }) => {
+    if (attachment.type === "image") return <MyImageAttachment />;
+    return <MyFallbackAttachment />;
+  }}
+</MessagePrimitive.Attachments>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `components` | `{ Image?, Document?, File?, Attachment? }` | Component renderers by attachment type |
 
-<MessageAttachments
+### MessagePrimitive.AttachmentByIndex
+
+Renders a single message attachment at the specified index. Useful for building custom attachment layouts outside of `MessagePrimitive.Attachments`.
+
+```tsx
+<MessagePrimitive.AttachmentByIndex
+  index={0}
   components={{
     Image: MyImageAttachment,
     Attachment: MyFallbackAttachment,
@@ -228,68 +463,67 @@ import { MessageAttachments } from "@assistant-ui/react-native";
 
 | Prop | Type | Description |
 |------|------|-------------|
+| `index` | `number` | Zero-based index of the attachment to render |
 | `components` | `{ Image?, Document?, File?, Attachment? }` | Component renderers by attachment type |
 
 ## Attachment
 
-Primitives for rendering individual attachments (inside `ComposerAttachments` or `MessageAttachments`).
+```tsx
+import { AttachmentPrimitive } from "@assistant-ui/react-native";
+```
+
+Primitives for rendering individual attachments (inside `ComposerPrimitive.Attachments` or `MessagePrimitive.Attachments`).
 
-### AttachmentRoot
+### AttachmentPrimitive.Root
 
 Container `View` for an attachment.
 
 ```tsx
-import { AttachmentRoot } from "@assistant-ui/react-native";
-
-<AttachmentRoot style={styles.attachment}>
+<AttachmentPrimitive.Root style={styles.attachment}>
   {children}
-</AttachmentRoot>
+</AttachmentPrimitive.Root>
 ```
 
-### AttachmentName
+### AttachmentPrimitive.Name
 
 `Text` component displaying the attachment filename.
 
 ```tsx
-import { AttachmentName } from "@assistant-ui/react-native";
-
-<AttachmentName style={styles.filename} />
+<AttachmentPrimitive.Name style={styles.filename} />
 ```
 
-### AttachmentThumb
+### AttachmentPrimitive.Thumb
 
 `Text` component displaying the file extension (e.g. `.pdf`).
 
 ```tsx
-import { AttachmentThumb } from "@assistant-ui/react-native";
-
-<AttachmentThumb style={styles.extension} />
+<AttachmentPrimitive.Thumb style={styles.extension} />
 ```
 
-### AttachmentRemove
+### AttachmentPrimitive.Remove
 
 `Pressable` that removes the attachment from the composer.
 
 ```tsx
-import { AttachmentRemove } from "@assistant-ui/react-native";
-
-<AttachmentRemove>
+<AttachmentPrimitive.Remove>
   <Text>Remove</Text>
-</AttachmentRemove>
+</AttachmentPrimitive.Remove>
 ```
 
 ## ActionBar
 
-### ActionBarCopy
+```tsx
+import { ActionBarPrimitive } from "@assistant-ui/react-native";
+```
+
+### ActionBarPrimitive.Copy
 
 `Pressable` that copies the message content. Supports function-as-children for copy state feedback.
 
 ```tsx
-import { ActionBarCopy } from "@assistant-ui/react-native";
-
-<ActionBarCopy copiedDuration={3000}>
+<ActionBarPrimitive.Copy copiedDuration={3000}>
   {({ isCopied }) => <Text>{isCopied ? "Copied!" : "Copy"}</Text>}
-</ActionBarCopy>
+</ActionBarPrimitive.Copy>
 ```
 
 | Prop | Type | Description |
@@ -297,102 +531,90 @@ import { ActionBarCopy } from "@assistant-ui/react-native";
 | `copiedDuration` | `number` | Duration in ms to show "copied" state (default: 3000) |
 | `copyToClipboard` | `(text: string) => void` | Custom clipboard function |
 
-### ActionBarEdit
+### ActionBarPrimitive.Edit
 
 `Pressable` that enters edit mode for a message.
 
 ```tsx
-import { ActionBarEdit } from "@assistant-ui/react-native";
-
-<ActionBarEdit>
+<ActionBarPrimitive.Edit>
   <Text>Edit</Text>
-</ActionBarEdit>
+</ActionBarPrimitive.Edit>
 ```
 
-### ActionBarReload
+### ActionBarPrimitive.Reload
 
 `Pressable` that regenerates an assistant message.
 
 ```tsx
-import { ActionBarReload } from "@assistant-ui/react-native";
-
-<ActionBarReload>
+<ActionBarPrimitive.Reload>
   <Text>Retry</Text>
-</ActionBarReload>
+</ActionBarPrimitive.Reload>
 ```
 
-### ActionBarFeedbackPositive / ActionBarFeedbackNegative
+### ActionBarPrimitive.FeedbackPositive / ActionBarPrimitive.FeedbackNegative
 
 `Pressable` buttons for submitting message feedback.
 
 ```tsx
-import {
-  ActionBarFeedbackPositive,
-  ActionBarFeedbackNegative,
-} from "@assistant-ui/react-native";
-
-<ActionBarFeedbackPositive>
-  {({ isSubmitted }) => <Text>{isSubmitted ? "👍" : "👍🏻"}</Text>}
-</ActionBarFeedbackPositive>
+<ActionBarPrimitive.FeedbackPositive>
+  {({ isSubmitted }) => <Text>{isSubmitted ? "Liked" : "Like"}</Text>}
+</ActionBarPrimitive.FeedbackPositive>
 
-<ActionBarFeedbackNegative>
-  {({ isSubmitted }) => <Text>{isSubmitted ? "👎" : "👎🏻"}</Text>}
-</ActionBarFeedbackNegative>
+<ActionBarPrimitive.FeedbackNegative>
+  {({ isSubmitted }) => <Text>{isSubmitted ? "Disliked" : "Dislike"}</Text>}
+</ActionBarPrimitive.FeedbackNegative>
 ```
 
 ## BranchPicker
 
-### BranchPickerPrevious / BranchPickerNext
+```tsx
+import { BranchPickerPrimitive } from "@assistant-ui/react-native";
+```
+
+### BranchPickerPrimitive.Previous / BranchPickerPrimitive.Next
 
 `Pressable` buttons to navigate between message branches.
 
 ```tsx
-import {
-  BranchPickerPrevious,
-  BranchPickerNext,
-  BranchPickerNumber,
-  BranchPickerCount,
-} from "@assistant-ui/react-native";
-
 <View style={{ flexDirection: "row", alignItems: "center" }}>
-  <BranchPickerPrevious>
-    <Text>←</Text>
-  </BranchPickerPrevious>
-  <BranchPickerNumber />
+  <BranchPickerPrimitive.Previous>
+    <Text>-</Text>
+  </BranchPickerPrimitive.Previous>
+  <BranchPickerPrimitive.Number />
   <Text>/</Text>
-  <BranchPickerCount />
-  <BranchPickerNext>
-    <Text>→</Text>
-  </BranchPickerNext>
+  <BranchPickerPrimitive.Count />
+  <BranchPickerPrimitive.Next>
+    <Text>+</Text>
+  </BranchPickerPrimitive.Next>
 </View>
 ```
 
-### BranchPickerNumber / BranchPickerCount
+### BranchPickerPrimitive.Number / BranchPickerPrimitive.Count
 
 `Text` components displaying the current branch number and total count.
 
 ## ThreadList
 
-### ThreadListRoot
+```tsx
+import { ThreadListPrimitive } from "@assistant-ui/react-native";
+```
+
+### ThreadListPrimitive.Root
 
 Container `View` for the thread list.
 
 ```tsx
-import { ThreadListRoot } from "@assistant-ui/react-native";
-
-<ThreadListRoot style={styles.threadList}>
+<ThreadListPrimitive.Root style={styles.threadList}>
   {children}
-</ThreadListRoot>
+</ThreadListPrimitive.Root>
 ```
 
-### ThreadListItems
+### ThreadListPrimitive.Items
 
 `FlatList` of thread IDs with runtime integration.
 
 ```tsx
-import { ThreadListItems } from "@assistant-ui/react-native";
-
-<ThreadListItems
+<ThreadListPrimitive.Items
   renderItem={({ threadId }) => (
     <ThreadListEntry threadId={threadId} />
   )}
@@ -404,125 +626,112 @@ import { ThreadListItems } from "@assistant-ui/react-native";
 | `renderItem` | `(props: { threadId: string; index: number }) => ReactElement` | Thread item renderer |
 | `...rest` | `FlatListProps` | Standard FlatList props (except `data`, `renderItem`) |
 
-### ThreadListNew
+### ThreadListPrimitive.New
 
 `Pressable` that creates a new thread.
 
 ```tsx
-import { ThreadListNew } from "@assistant-ui/react-native";
-
-<ThreadListNew style={styles.newThreadButton}>
+<ThreadListPrimitive.New style={styles.newThreadButton}>
   <Text>New Chat</Text>
-</ThreadListNew>
+</ThreadListPrimitive.New>
 ```
 
 ## ThreadListItem
 
-Primitives for rendering individual thread list items. Use inside a `ThreadListItemByIndexProvider` or within `ThreadListPrimitiveItems` components.
+```tsx
+import { ThreadListItemPrimitive } from "@assistant-ui/react-native";
+```
+
+Primitives for rendering individual thread list items.
 
-### ThreadListItemRoot
+### ThreadListItemPrimitive.Root
 
 Container `View` for a thread list item.
 
 ```tsx
-import { ThreadListItemRoot } from "@assistant-ui/react-native";
-
-<ThreadListItemRoot style={styles.threadItem}>
+<ThreadListItemPrimitive.Root style={styles.threadItem}>
   {children}
-</ThreadListItemRoot>
+</ThreadListItemPrimitive.Root>
 ```
 
-### ThreadListItemTitle
+### ThreadListItemPrimitive.Title
 
 Renders the thread title text. Falls back to the provided fallback when title is empty. This component is shared from `@assistant-ui/core/react`.
 
 ```tsx
-import { ThreadListItemTitle } from "@assistant-ui/react-native";
-
-<ThreadListItemTitle fallback="New Chat" />
+<ThreadListItemPrimitive.Title fallback="New Chat" />
 ```
 
 | Prop | Type | Description |
 |------|------|-------------|
 | `fallback` | `ReactNode` | Content to show when title is empty |
 
-### ThreadListItemTrigger
+### ThreadListItemPrimitive.Trigger
 
 `Pressable` that switches to the thread.
 
 ```tsx
-import { ThreadListItemTrigger } from "@assistant-ui/react-native";
-
-<ThreadListItemTrigger>
-  <ThreadListItemTitle fallback="New Chat" />
-</ThreadListItemTrigger>
+<ThreadListItemPrimitive.Trigger>
+  <ThreadListItemPrimitive.Title fallback="New Chat" />
+</ThreadListItemPrimitive.Trigger>
 ```
 
-### ThreadListItemDelete
+### ThreadListItemPrimitive.Delete
 
 `Pressable` that deletes the thread.
 
 ```tsx
-import { ThreadListItemDelete } from "@assistant-ui/react-native";
-
-<ThreadListItemDelete>
+<ThreadListItemPrimitive.Delete>
   <Text>Delete</Text>
-</ThreadListItemDelete>
+</ThreadListItemPrimitive.Delete>
 ```
 
-### ThreadListItemArchive / ThreadListItemUnarchive
+### ThreadListItemPrimitive.Archive / ThreadListItemPrimitive.Unarchive
 
 `Pressable` buttons that archive or unarchive the thread.
 
 ```tsx
-import {
-  ThreadListItemArchive,
-  ThreadListItemUnarchive,
-} from "@assistant-ui/react-native";
-
-<ThreadListItemArchive>
+<ThreadListItemPrimitive.Archive>
   <Text>Archive</Text>
-</ThreadListItemArchive>
+</ThreadListItemPrimitive.Archive>
 
-<ThreadListItemUnarchive>
+<ThreadListItemPrimitive.Unarchive>
   <Text>Unarchive</Text>
-</ThreadListItemUnarchive>
+</ThreadListItemPrimitive.Unarchive>
 ```
 
 ## Suggestion
 
+```tsx
+import { SuggestionPrimitive } from "@assistant-ui/react-native";
+```
+
 Primitives for rendering suggestions. Use inside a `SuggestionByIndexProvider` (from `@assistant-ui/core/react`).
 
-### SuggestionTitle
+### SuggestionPrimitive.Title
 
 `Text` component displaying the suggestion title.
 
 ```tsx
-import { SuggestionTitle } from "@assistant-ui/react-native";
-
-<SuggestionTitle style={styles.suggestionTitle} />
+<SuggestionPrimitive.Title style={styles.suggestionTitle} />
 ```
 
-### SuggestionDescription
+### SuggestionPrimitive.Description
 
 `Text` component displaying the suggestion description/label.
 
 ```tsx
-import { SuggestionDescription } from "@assistant-ui/react-native";
-
-<SuggestionDescription style={styles.suggestionDescription} />
+<SuggestionPrimitive.Description style={styles.suggestionDescription} />
 ```
 
-### SuggestionTrigger
+### SuggestionPrimitive.Trigger
 
 `Pressable` that triggers the suggestion action (send or insert into composer).
 
 ```tsx
-import { SuggestionTrigger } from "@assistant-ui/react-native";
-
-<SuggestionTrigger send>
-  <SuggestionTitle />
-</SuggestionTrigger>
+<SuggestionPrimitive.Trigger send>
+  <SuggestionPrimitive.Title />
+</SuggestionPrimitive.Trigger>
 ```
 
 | Prop | Type | Description |
@@ -530,124 +739,44 @@ import { SuggestionTrigger } from "@assistant-ui/react-native";
 | `send` | `boolean` | When true, sends immediately; when false, inserts into composer |
 | `clearComposer` | `boolean` | Whether to clear/replace composer text (default: true) |
 
-### ThreadSuggestion
-
-Inline `Pressable` that triggers a suggestion with a specified prompt. Use this when you want to hardcode suggestion text.
-
-```tsx
-import { ThreadSuggestion } from "@assistant-ui/react-native";
-
-<ThreadSuggestion prompt="Tell me a joke" send>
-  <Text>Tell me a joke</Text>
-</ThreadSuggestion>
-```
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `prompt` | `string` | The suggestion text |
-| `send` | `boolean` | When true, sends immediately |
-| `clearComposer` | `boolean` | Whether to clear/replace composer text (default: true) |
-
-### ThreadPrimitiveSuggestions
-
-Renders all suggestions from the store. Shared from `@assistant-ui/core/react`.
+## ChainOfThought
 
 ```tsx
-import { ThreadPrimitiveSuggestions } from "@assistant-ui/react-native";
-
-<ThreadPrimitiveSuggestions
-  components={{ Suggestion: MySuggestionComponent }}
-/>
+import { ChainOfThoughtPrimitive } from "@assistant-ui/react-native";
 ```
 
-## ChainOfThought
-
 Primitives for rendering chain of thought content (grouped reasoning and tool-call parts).
 
-### ChainOfThoughtRoot
+### ChainOfThoughtPrimitive.Root
 
 Container `View` for chain of thought content.
 
 ```tsx
-import { ChainOfThoughtRoot } from "@assistant-ui/react-native";
-
-<ChainOfThoughtRoot style={styles.chainOfThought}>
+<ChainOfThoughtPrimitive.Root style={styles.chainOfThought}>
   {children}
-</ChainOfThoughtRoot>
+</ChainOfThoughtPrimitive.Root>
 ```
 
-### ChainOfThoughtAccordionTrigger
+### ChainOfThoughtPrimitive.AccordionTrigger
 
 `Pressable` that toggles the collapsed state of the chain of thought.
 
 ```tsx
-import { ChainOfThoughtAccordionTrigger } from "@assistant-ui/react-native";
-
-<ChainOfThoughtAccordionTrigger>
+<ChainOfThoughtPrimitive.AccordionTrigger>
   <Text>Toggle reasoning</Text>
-</ChainOfThoughtAccordionTrigger>
+</ChainOfThoughtPrimitive.AccordionTrigger>
 ```
 
-### ChainOfThoughtPrimitiveParts
+### ChainOfThoughtPrimitive.Parts
 
 Renders the parts within a chain of thought. Shared from `@assistant-ui/core/react`.
 
 ```tsx
-import { ChainOfThoughtPrimitiveParts } from "@assistant-ui/react-native";
-
-<ChainOfThoughtPrimitiveParts
-  components={{
-    Reasoning: ({ text }) => <Text>{text}</Text>,
-    tools: { Fallback: MyToolComponent },
+<ChainOfThoughtPrimitive.Parts>
+  {({ part }) => {
+    if (part.type === "reasoning") return <Text>{part.text}</Text>;
+    if (part.type === "tool-call") return <MyToolComponent {...part} />;
+    return null;
   }}
-/>
-```
-
-## Additional Composer Primitives
-
-### ComposerAddAttachment
-
-`Pressable` for triggering attachment addition. The actual file picker must be implemented by the consumer (e.g. using `expo-document-picker` or `expo-image-picker`).
-
-```tsx
-import { ComposerAddAttachment } from "@assistant-ui/react-native";
-
-<ComposerAddAttachment onPress={handlePickFile}>
-  <Text>📎</Text>
-</ComposerAddAttachment>
-```
-
-### ComposerIf
-
-Conditional rendering based on composer state. Shared from `@assistant-ui/core/react`.
-
-```tsx
-import { ComposerIf } from "@assistant-ui/react-native";
-
-<ComposerIf editing>
-  <Text>Currently editing</Text>
-</ComposerIf>
-```
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `editing` | `boolean` | Render when composer is in editing mode |
-| `dictation` | `boolean` | Render when dictation is active |
-
-## Shared Primitives from core/react
-
-The following primitives are shared with `@assistant-ui/react` via `@assistant-ui/core/react` and work identically on both platforms:
-
-- **`ThreadPrimitiveMessages`** / **`ThreadPrimitiveMessageByIndex`** — Component-composition pattern for rendering messages (alternative to the FlatList-based `ThreadMessages`)
-- **`MessagePrimitiveParts`** / **`MessagePrimitivePartByIndex`** — Renders message parts with grouping, ChainOfThought, and Empty support (alternative to the render-props-based `MessageContent`). Uses `<Text>` as default text renderer on RN.
-- **`ThreadPrimitiveSuggestions`** / **`ThreadPrimitiveSuggestionByIndex`** — Renders suggestions from the store
-- **`ThreadListPrimitiveItems`** / **`ThreadListPrimitiveItemByIndex`** — Component-composition pattern for thread list items (alternative to the FlatList-based `ThreadListItems`)
-- **`ChainOfThoughtPrimitiveParts`** — Renders chain of thought parts
-
-```tsx
-import {
-  ThreadPrimitiveMessages,
-  MessagePrimitiveParts,
-  ThreadPrimitiveSuggestions,
-} from "@assistant-ui/react-native";
+</ChainOfThoughtPrimitive.Parts>
 ```