Chat
An AI assistant chat screen: replies stream in word by word with a soft fade and a blinking caret, a shimmering “Thinking…” waits for the first token, and the send button morphs into Stop. Light markdown (bold, inline code, lists, scrollable code blocks), suggestion chips, copy / regenerate / thumbs actions and a prompt field that grows to five lines and stays above the keyboard.
Installation
Copies the screen into src/components/blocks along with every component it uses.
Props
| Prop | Type | Default |
|---|---|---|
| messages The conversation. Controlled when onSend is set; otherwise the starting messages for the built-in simulation. | { id, role: 'user' | 'assistant', text, streaming?, feedback? }[] | [] |
| onSend The user sent a prompt (trimmed). Append it and the reply to messages yourself. Without it, replies are simulated from a canned list so the screen works as-is. | (text: string) => void | — |
| streaming A reply is in flight: “Thinking…” until the last message is an assistant one with text, a caret while it grows, and Send becomes Stop. | boolean | false |
| onStop Stop pressed while streaming. | () => void | — |
| suggestions Chips above the input until the user sends something; tapping one sends it. [] hides them. | string[] | 4 prompts |
| assistantName Used in the header, the placeholder and screen reader labels. | string | 'Assistant' |
| title / subtitle Header text. The subtitle shows “Thinking…” / “Typing…” while streaming. | string | assistantName / 'Ask me anything' |
| header Replace the header; null hides it. | ReactNode | null | built-in |
| avatar Replace the assistant mark beside replies, in the header and the empty state. | ReactNode | sparkle mark |
| emptyTitle / emptySubtitle Empty state copy. | string | 'How can I help today?' |
| placeholder Prompt placeholder and accessibility label. | string | `Message ${assistantName}` |
| variant plain: assistant text sits on the page. bubbles: assistant replies in muted bubbles too (support bots). | 'plain' | 'bubbles' | 'plain' |
| thinkingIndicator What shows before the first token. | 'shimmer' | 'dots' | 'shimmer' |
| onAttach Shows a + button left of the input. | () => void | — |
| onCopy Copy pressed or a message long-pressed — write message.text to the clipboard here. The icon turns into a check. | (message) => void | — |
| onRegenerate Regenerate pressed on the latest reply. | (message) => void | — |
| onFeedback Thumbs toggled; null when cleared. Initial state comes from message.feedback. | (message, 'up' | 'down' | null) => void | — |
| onNewChat Shows a new-chat button in the header (the simulation also clears itself). | () => void | — |
| bottomInset Extra padding under the input, e.g. useSafeAreaInsets().bottom. Ignored while the keyboard is open. | number | 0 |
| keyboardVerticalOffset Height above the screen (navigator header) so the input clears the keyboard exactly. | number | 0 |
| haptics Light haptics on send, stop, copy and feedback. | boolean | true |
| accent User bubbles, send button, focus ring and the assistant mark. | string | theme accent |
| style Root style. | StyleProp<ViewStyle> | — |
Source
Did you like the content?