ChatSplit
Talking to Okami beside what it builds, as setup does: from 1024px the chat on the left with its composer at the foot and the work beside both; under it two panes in one swipe under the Chat | Preview tabs (PaneTabs, the app's own switch), with the one composer pinned under both.
Example
Held in a box here; in setup it is the whole screen. Narrow this window to see the tabs, and swipe or tap between the panes. Say a name and the preview takes it.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | [PaneTab, PaneTab] | — | The chat's tab, then the work's: { id, label }. Each pane is the element with id pane-<id>, which the tab controls. |
| chat | ReactNode | — | The chat's column: its bar, if any, and the thread, scrolling itself. It's the page's main landmark. |
| work | ReactNode | — | What Okami builds (setup's booking page), filling its pane: 16px in from the screen side by side, 16px from the edges on a phone. |
| composer | ReactNode | — | Pinned to the foot: under the chat side by side, under both panes on a phone, the thread fading out under it. Left out where the chat holds its own (setup's opening). |
| className | string | — | The whole screen (h-dvh) by default; a height to hold it in a box. |
Guidelines
- As the whole screen (no
className), it keeps to the part in view: a phone's keyboard shrinks it instead of panning the page up, and the composer sits 16px over the keyboard (useVisibleViewport, thekeyboard:variant). Given a height to sit in a box, as here, it leaves the page alone. - One composer, never one per pane: on a phone Okami is a sentence away from either.
- The tabs are the app's Chat | App switch (PaneTabs): the thumb rides the swipe, a tap slides to the pane.
- For one card that talks (the booking page, joining), keep the composer in the card instead: BookingStage, not a split.