Introduction

@realtimexsco/live-chat drops a finished chat experience into your app: direct messages, groups, reactions, replies, forwarding, pins, stars, attachments, search, light/dark theme and locale/timezone - and lets you replace the whole chat or any single component.

1. Install the package plus its peers react and react-dom. Lexical, DOMPurify and every other chat dependency install automatically. Tailwind is not required.
2. Import the CSS once, globally: @import "@realtimexsco/live-chat/styles.css". No @source, no Tailwind config.
3. Create chat.config.ts with clientId, accessToken, loggedUserDetails, apiUrl and socketUrl.
4. Render <ChatMain {...chatConfig} /> - it includes its own viewport wrapper.
5. Optionally pass components, classNames or features. Omit any slot and the package default is used.

1// Full page2<ChatMain {...chatConfig} viewportHeight="screen" />3 4// Admin shell with a 4rem header (Elstar, Metronic, …)5<ChatMain {...chatConfig} viewportHeight="calc(100dvh - 4rem)" />6 7// Inside your own bounded flex column (parent needs a height + min-h-0)8<div className="flex min-h-0 flex-1 overflow-hidden">9  <ChatMain {...chatConfig} viewportHeight="full" />10</div>

Socket.IO client, REST client, Zustand store, Radix UI, Lexical (rich-text composer and message viewer), DOMPurify, the emoji picker, Firebase (push), VideoSDK (calling) and all chat UI ship as regular dependencies of the package - they install and uninstall with it. Your app only installs the few peers it must own a single copy of, like React. See Prerequisites.