Package Reference

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

import ChatMain, {
  useChatController,
  DefaultChatLayout,
  type ChatLayoutSlotProps,
} from "@realtimexsco/live-chat";

// Option A: wrap the default layout
function MyChatShell(props: ChatLayoutSlotProps) {
  return (
    <div className="flex h-full flex-col">
      <header className="shrink-0 border-b px-4 py-2 font-semibold">My App Chat</header>
      <div className="min-h-0 flex-1">
        <DefaultChatLayout {...props} shellClassName="rounded-none shadow-none" />
      </div>
    </div>
  );
}

// Option B: build entirely from scratch
function MyFullChatUI(_props: ChatLayoutSlotProps) {
  const { activeChannel, conversationMessages, handleSendMessage } = useChatController();
  return <div className="flex h-full">{/* your sidebar, header, messages, input */}</div>;
}

<ChatMain {...chatConfig} components={{ ChatLayout: MyChatShell }} />;

import ChatMain, { useChatController, DefaultChatLayout, type ChatLayoutSlotProps, } from "@realtimexsco/live-chat"; // Option A: wrap the default layout function MyChatShell(props: ChatLayoutSlotProps) { return ( <div className="flex h-full flex-col"> <header className="shrink-0 border-b px-4 py-2 font-semibold">My App Chat</header> <div className="min-h-0 flex-1"> <DefaultChatLayout {...props} shellClassName="rounded-none shadow-none" /> </div> </div> ); } // Option B: build entirely from scratch function MyFullChatUI(_props: ChatLayoutSlotProps) { const { activeChannel, conversationMessages, handleSendMessage } = useChatController(); return <div className="flex h-full">{/* your sidebar, header, messages, input */}</div>; } <ChatMain {...chatConfig} components={{ ChatLayout: MyChatShell }} />;