Skip to content

🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.

Chat - Split layout

Render the message list and composer in separate regions of the page while keeping them connected to a single chat store.

MUI Assistant

The message list (left) and the composer (right) are siblings in the DOM — neither is nested inside the other.

You

What connects them?

MUI Assistant

Only ChatRoot. Both components read from the same ChatProvider context, so they stay in sync regardless of where they live in the layout.

ComposerSeparate DOM zone — connected only via ChatRoot

Connecting components through `ChatRoot`

ChatRoot sets up a ChatProvider context. Any descendant can read from that context via hooks—regardless of where it sits in the DOM tree.

This means ChatMessageList and ChatComposer don't need to be siblings or share a parent component. Place them wherever the layout requires:

<ChatRoot adapter={adapter}>
  {/* Could be in main content, a drawer, or a modal */}
  <MessagePane /> {/* calls useMessageIds() */}
  {/* Could be in a toolbar, sidebar, or page footer */}
  <InputPane /> {/* ChatComposer uses useChatComposer() */}
</ChatRoot>

Both components stay in sync automatically because they share the same store.

Choosing the split layout

Use the split layout when ChatBox's default two-pane structure doesn't fit the product layout:

The chat input lives in the app toolbar or page footer.
Message history is displayed in one panel while the send area is in another.
Chat is embedded into a layout that already manages its own structure.

See also

API

ChatRoot