Patterns · Pages
Chat
ChatPageChatScreen
An assistant conversation: messages, streaming, thinking state, and a composer with stop.
Web
Live, at a real viewport width. Switch to Phone to see the responsive layout.
Usage
import { ChatPage } from '@nexub/patterns';
<ChatPage messages={messages} onSend={send} onStop={stop} thinking={streaming} title="Payub assistant" />On iOS & Android: ChatScreen
@nexub/react-native/patternsAlpha
import { ChatScreen } from '@nexub/react-native/patterns';
<ChatScreen messages={messages} onSend={send} thinking={streaming} />Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Composer | PromptInput with keyboard shortcuts. | Pinned above the keyboard; send on return. |
Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
ChatScreen props
| Prop | Type | Default | Description |
|---|---|---|---|
| messagesrequired | ChatMessage[] | — | — |
| onSendrequired | (text: string) => void | — | — |
| thinking | boolean | — | Assistant is thinking (before the first token). |
| placeholder | string | — | — |
| empty | React.ReactNode | — | — |