Replace entire UI

When to use

Use this when your product needs a custom chrome around chat - for example an admin template header, extra side panels, or a layout that does not match the default two-column shell. Pass components={{ ChatLayout: MyChatShell }} on ChatMain.

For smaller changes, prefer replacing individual components or classNames instead of rebuilding the whole shell.

Wrap or rebuild

You can wrap DefaultChatLayout to keep all built-in behavior, or call useChatController() and compose sidebar, header, messages, and input yourself.

Pitfall: a custom layout that never calls useChatController will render empty - that hook is how your UI receives channels, messages, and send handlers. See Hooks for the full return shape.

tsx

1import ChatMain, {2  useChatController,3  DefaultChatLayout,4  type ChatLayoutSlotProps,5} from "@realtimexsco/live-chat";6 7// Option A: wrap the default layout8function MyChatShell(props: ChatLayoutSlotProps) {9  return (10    <div className="flex h-full flex-col">11      <header className="shrink-0 border-b px-4 py-2 font-semibold">My App Chat</header>12      <div className="min-h-0 flex-1">13        <DefaultChatLayout {...props} shellClassName="rounded-none shadow-none" />14      </div>15    </div>16  );17}18 19// Option B: build entirely from scratch20function MyFullChatUI(_props: ChatLayoutSlotProps) {21  const { activeChannel, conversationMessages, handleSendMessage } = useChatController();22  return <div className="flex h-full">{/* your sidebar, header, messages, input */}</div>;23}24 25<ChatMain {...chatConfig} components={{ ChatLayout: MyChatShell }} />;

Replace entire UI

When to use

For smaller changes, prefer replacing individual components or classNames instead of rebuilding the whole shell.

Wrap or rebuild

You can wrap DefaultChatLayout to keep all built-in behavior, or call useChatController() and compose sidebar, header, messages, and input yourself.

Pitfall: a custom layout that never calls useChatController will render empty - that hook is how your UI receives channels, messages, and send handlers. See Hooks for the full return shape.

tsx

1import ChatMain, {2  useChatController,3  DefaultChatLayout,4  type ChatLayoutSlotProps,5} from "@realtimexsco/live-chat";6 7// Option A: wrap the default layout8function MyChatShell(props: ChatLayoutSlotProps) {9  return (10    <div className="flex h-full flex-col">11      <header className="shrink-0 border-b px-4 py-2 font-semibold">My App Chat</header>12      <div className="min-h-0 flex-1">13        <DefaultChatLayout {...props} shellClassName="rounded-none shadow-none" />14      </div>15    </div>16  );17}18 19// Option B: build entirely from scratch20function MyFullChatUI(_props: ChatLayoutSlotProps) {21  const { activeChannel, conversationMessages, handleSendMessage } = useChatController();22  return <div className="flex h-full">{/* your sidebar, header, messages, input */}</div>;23}24 25<ChatMain {...chatConfig} components={{ ChatLayout: MyChatShell }} />;