Primitives

import { AuiIf, ThreadPrimitive } from "@assistant-ui/react-native";

<ThreadPrimitive.Root style={{ flex: 1 }}>
  {children}
</ThreadPrimitive.Root>

<ThreadPrimitive.Messages>
  {() => <MyMessage />}
</ThreadPrimitive.Messages>

<ThreadPrimitive.Messages>
  {({ message }) => {
    if (message.role === "user") return <MyUserMessage />;
    return <MyAssistantMessage />;
  }}
</ThreadPrimitive.Messages>

<ThreadPrimitive.MessagesFlatList autoScroll>
  {() => <MyMessage />}
</ThreadPrimitive.MessagesFlatList>

<ThreadPrimitive.MessageByIndex
  index={0}
  components={{
    UserMessage: MyUserMessage,
    AssistantMessage: MyAssistantMessage,
  }}
/>

<ThreadPrimitive.Empty>
  <Text>Send a message to get started</Text>
</ThreadPrimitive.Empty>

// preferred
<AuiIf condition={(s) => s.thread.isEmpty}>
  <Text>Send a message to get started</Text>
</AuiIf>

<ThreadPrimitive.If empty>
  <Text>No messages yet</Text>
</ThreadPrimitive.If>

// preferred
<AuiIf condition={(s) => s.thread.isEmpty}>
  <Text>No messages yet</Text>
</AuiIf>

<AuiIf condition={(s) => s.thread.isRunning}>
  <ActivityIndicator />
</AuiIf>

<ThreadPrimitive.Suggestion prompt="What can you help me with?" send>
  <Text>What can you help me with?</Text>
</ThreadPrimitive.Suggestion>

<ThreadPrimitive.Suggestions>
  {() => <MySuggestion />}
</ThreadPrimitive.Suggestions>

<ThreadPrimitive.SuggestionByIndex
  index={0}
  components={{ Suggestion: MySuggestion }}
/>

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>

import {
  ComposerPrimitive,
  QueueItemPrimitive,
} from "@assistant-ui/react-native";

<ComposerPrimitive.Root style={styles.composerContainer}>
  {children}
</ComposerPrimitive.Root>

<ComposerPrimitive.Input
  placeholder="Message..."
  multiline
  style={styles.input}
/>

<ComposerPrimitive.Send style={styles.sendButton}>
  <Text>Send</Text>
</ComposerPrimitive.Send>

<ComposerPrimitive.Cancel style={styles.cancelButton}>
  <Text>Stop</Text>
</ComposerPrimitive.Cancel>

<ComposerPrimitive.Attachments>
  {({ attachment }) => {
    if (attachment.type === "image") return <MyImageAttachment />;
    if (attachment.type === "document") return <MyDocumentAttachment />;
    return <MyFallbackAttachment />;
  }}
</ComposerPrimitive.Attachments>

import { useAui } from "@assistant-ui/react-native";
import * as ImagePicker from "expo-image-picker";
import { Text } from "react-native";

const aui = useAui();

<ComposerPrimitive.AddAttachment
  onPress={async () => {
    const result = await ImagePicker.launchImageLibraryAsync({ base64: true });
    if (result.canceled) return;
    for (const asset of result.assets) {
      if (!asset.base64 || !asset.mimeType) continue;
      await aui.composer.addAttachment({
        name: asset.fileName ?? `image.${asset.mimeType.split("/")[1]}`,
        contentType: asset.mimeType,
        type: "image",
        content: [
          {
            type: "image",
            image: `data:${asset.mimeType};base64,${asset.base64}`,
          },
        ],
      });
    }
  }}
>
  <Text>Attach</Text>
</ComposerPrimitive.AddAttachment>

<ComposerPrimitive.Queue>
  {({ queueItem }) => (
    <View>
      <QueueItemPrimitive.Text />
      <QueueItemPrimitive.Steer>
        <Text>Run now</Text>
      </QueueItemPrimitive.Steer>
      <QueueItemPrimitive.Remove>
        <Text>Remove</Text>
      </QueueItemPrimitive.Remove>
    </View>
  )}
</ComposerPrimitive.Queue>

<ComposerPrimitive.Quote>
  <View>
    <Text>Quoting:</Text>
    <ComposerPrimitive.QuoteText />
    <ComposerPrimitive.QuoteDismiss>
      <Text>Clear</Text>
    </ComposerPrimitive.QuoteDismiss>
  </View>
</ComposerPrimitive.Quote>

<ComposerPrimitive.QuoteText />

<ComposerPrimitive.QuoteDismiss>
  <Text>Clear</Text>
</ComposerPrimitive.QuoteDismiss>

<ComposerPrimitive.AttachmentByIndex
  index={0}
  components={{
    Image: MyImageAttachment,
    Attachment: MyFallbackAttachment,
  }}
/>

import { Text, View } from "react-native";
import {
  ComposerPrimitive,
  MessagePrimitive,
  useAuiState,
} from "@assistant-ui/react-native";

function MessageRow() {
  const isEditing = useAuiState((s) => s.message.composer.isEditing);
  if (isEditing) return <EditComposer />;
  return <MessageBubble />;
}

function EditComposer() {
  return (
    <MessagePrimitive.Root>
      <ComposerPrimitive.Root style={styles.editComposer}>
        <ComposerPrimitive.Input multiline autoFocus style={styles.input} />
        <View style={styles.editActions}>
          <ComposerPrimitive.Cancel style={styles.cancelButton}>
            <Text>Cancel</Text>
          </ComposerPrimitive.Cancel>
          <ComposerPrimitive.Send style={styles.sendButton}>
            <Text>Update</Text>
          </ComposerPrimitive.Send>
        </View>
      </ComposerPrimitive.Root>
    </MessagePrimitive.Root>
  );
}

<AuiIf condition={(s) => s.composer.isEditing}>
  <Text>Currently editing</Text>
</AuiIf>

<AuiIf condition={(s) => s.composer.dictation != null}>
  <Text>Dictation active</Text>
</AuiIf>

import { MessagePrimitive } from "@assistant-ui/react-native";

<MessagePrimitive.Root style={styles.messageBubble}>
  {children}
</MessagePrimitive.Root>

<MessagePrimitive.Content
  renderText={({ part }) => <Text>{part.text}</Text>}
  renderToolCall={({ part, index }) => (
    <Text>Tool: {part.toolName}</Text>
  )}
  renderImage={({ part }) => (
    <Image source={{ uri: part.image }} />
  )}
/>

import Markdown from "react-native-markdown-display";
import { MessagePrimitive } from "@assistant-ui/react-native";

const AssistantMessage = () => {
  return (
    <MessagePrimitive.Root>
      <MessagePrimitive.Content
        renderText={({ part }) => (
          <Markdown>{part.text}</Markdown>
        )}
      />
    </MessagePrimitive.Root>
  );
};

<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>

<MessagePrimitive.PartByIndex
  index={0}
  components={{
    Text: ({ text }) => <Text>{text}</Text>,
    tools: { Fallback: MyToolComponent },
  }}
/>

<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>
  {({ attachment }) => {
    if (attachment.type === "image") return <MyImageAttachment />;
    return <MyFallbackAttachment />;
  }}
</MessagePrimitive.Attachments>

<MessagePrimitive.AttachmentByIndex
  index={0}
  components={{
    Image: MyImageAttachment,
    Attachment: MyFallbackAttachment,
  }}
/>

import { AttachmentPrimitive } from "@assistant-ui/react-native";

<AttachmentPrimitive.Root style={styles.attachment}>
  {children}
</AttachmentPrimitive.Root>

<AttachmentPrimitive.Name style={styles.filename} />

<AttachmentPrimitive.Thumb style={styles.extension} />

<AttachmentPrimitive.Remove>
  <Text>Remove</Text>
</AttachmentPrimitive.Remove>

import { QueueItemPrimitive } from "@assistant-ui/react-native";

<QueueItemPrimitive.Text />

<QueueItemPrimitive.Remove>
  <Text>Remove</Text>
</QueueItemPrimitive.Remove>

<QueueItemPrimitive.Steer>
  <Text>Run now</Text>
</QueueItemPrimitive.Steer>

import { ActionBarPrimitive } from "@assistant-ui/react-native";

import * as Clipboard from "expo-clipboard";

const copyToClipboard = async (text: string) => {
  const didCopy = await Clipboard.setStringAsync(text);
  if (!didCopy) throw new Error("Clipboard write failed");
};

<ActionBarPrimitive.Copy
  copiedDuration={3000}
  copyToClipboard={copyToClipboard}
>
  {({ isCopied }) => <Text>{isCopied ? "Copied!" : "Copy"}</Text>}
</ActionBarPrimitive.Copy>

<ActionBarPrimitive.Edit>
  <Text>Edit</Text>
</ActionBarPrimitive.Edit>

<ActionBarPrimitive.Reload>
  <Text>Retry</Text>
</ActionBarPrimitive.Reload>

<ActionBarPrimitive.FeedbackPositive>
  {({ isSubmitted }) => <Text>{isSubmitted ? "Liked" : "Like"}</Text>}
</ActionBarPrimitive.FeedbackPositive>

<ActionBarPrimitive.FeedbackNegative>
  {({ isSubmitted }) => <Text>{isSubmitted ? "Disliked" : "Dislike"}</Text>}
</ActionBarPrimitive.FeedbackNegative>

import { BranchPickerPrimitive } from "@assistant-ui/react-native";

<View style={{ flexDirection: "row", alignItems: "center" }}>
  <BranchPickerPrimitive.Previous>
    <Text>-</Text>
  </BranchPickerPrimitive.Previous>
  <BranchPickerPrimitive.Number />
  <Text>/</Text>
  <BranchPickerPrimitive.Count />
  <BranchPickerPrimitive.Next>
    <Text>+</Text>
  </BranchPickerPrimitive.Next>
</View>

import { ThreadListPrimitive } from "@assistant-ui/react-native";

<ThreadListPrimitive.Root style={styles.threadList}>
  {children}
</ThreadListPrimitive.Root>

<ThreadListPrimitive.Items
  renderItem={({ threadId }) => (
    <ThreadListEntry threadId={threadId} />
  )}
/>

<ThreadListPrimitive.New style={styles.newThreadButton}>
  <Text>New Chat</Text>
</ThreadListPrimitive.New>

import { ThreadListItemPrimitive } from "@assistant-ui/react-native";

<ThreadListItemPrimitive.Root style={styles.threadItem}>
  {children}
</ThreadListItemPrimitive.Root>

<ThreadListItemPrimitive.Title fallback="New Chat" />

<ThreadListItemPrimitive.Trigger>
  <ThreadListItemPrimitive.Title fallback="New Chat" />
</ThreadListItemPrimitive.Trigger>

<ThreadListItemPrimitive.Delete>
  <Text>Delete</Text>
</ThreadListItemPrimitive.Delete>

<ThreadListItemPrimitive.Archive>
  <Text>Archive</Text>
</ThreadListItemPrimitive.Archive>

<ThreadListItemPrimitive.Unarchive>
  <Text>Unarchive</Text>
</ThreadListItemPrimitive.Unarchive>

import { SuggestionPrimitive } from "@assistant-ui/react-native";

<SuggestionPrimitive.Title style={styles.suggestionTitle} />

<SuggestionPrimitive.Description style={styles.suggestionDescription} />

<SuggestionPrimitive.Trigger send>
  <SuggestionPrimitive.Title />
</SuggestionPrimitive.Trigger>

import { ChainOfThoughtPrimitive } from "@assistant-ui/react-native";

<ChainOfThoughtPrimitive.Root style={styles.chainOfThought}>
  {children}
</ChainOfThoughtPrimitive.Root>

<ChainOfThoughtPrimitive.AccordionTrigger>
  <Text>Toggle reasoning</Text>
</ChainOfThoughtPrimitive.AccordionTrigger>

<ChainOfThoughtPrimitive.Parts>
  {({ part }) => {
    if (part.type === "reasoning") return <Text>{part.text}</Text>;
    if (part.type === "tool-call") return <MyToolComponent {...part} />;
    return null;
  }}
</ChainOfThoughtPrimitive.Parts>