{({ part }) => {
if (part.type === "text") return ;
if (part.type === "image") return ;
return null;
}}
Edit
);
}
function EditComposer() {
return (
Cancel
Save
);
}
function AssistantMessage() {
return (
{({ part }) => {
switch (part.type) {
case "text":
return
;
case "image":
return ;
case "file":
return (
{part.filename ?? part.mimeType}
);
case "reasoning":
return (
Thinking
{part.text}
);
case "source":
return part.sourceType === "url" ? (
{part.title ?? part.url}
) : (
{part.title}
);
case "tool-call":
return part.toolUI ??
{part.toolName}
;
case "data":
return part.dataRendererUI ?? null;
case "generative-ui":
return ;
default:
return null; // registered tool and data UIs still render when you return null
}
}}
← / →CopyRegenerate
);
}
```
The assistant message's `.Parts` callback above handles all eight part types the pipeline can hand you: the three modality parts (`text`, `image`, `file`), the four provider channel parts (`reasoning`, `source`, `tool-call`, `generative-ui`), and the open ended `data` part. Returning `null` from the `default` case still lets a tool UI registered by name, or a data renderer registered by `name`, take over automatically; return `<>` instead when you want to suppress that part entirely.
## Branch picker
`BranchPickerPrimitive` reads branch state from the nearest `MessagePrimitive.Root`, so it must render inside one. `Previous` and `Next` auto disable at the boundaries (and while a run is in flight, unless the runtime supports `switchBranchDuringRun`); `hideWhenSingleBranch` removes the whole picker until a message actually has alternatives, which keeps the action row from jumping around on the common case of one branch.
```tsx
← / →
```
A new branch appears when a user message is edited and resent, or when `ActionBarPrimitive.Reload` (or `aui.message.reload()`) regenerates an assistant message. See [messages.md](./references/messages.md) for programmatic branch navigation with `aui.message.switchToBranch`.
## Common Gotchas
**Primitive renders nothing, or a hook throws outside a provider**
- Every primitive reads from the nearest runtime context. Wrap the tree in `AssistantRuntimeProvider runtime={...}` (from a runtime hook like `useChatRuntime` or `useLocalRuntime`), or nest an `AuiProvider extends={aui} config={AuiConfig({...})}` for an isolated scope.
- `ActionBarPrimitive`, `BranchPickerPrimitive`, and `ErrorPrimitive` additionally need a `MessagePrimitive.Root` ancestor; `SelectionToolbarPrimitive` needs a `ThreadPrimitive.Root` ancestor but must sit outside `ThreadPrimitive.Viewport`.
**Nothing is styled**
- Primitives render bare native elements (`