FAQ

No. @realtimexsco/live-chat is published on the public npm registry, so no .npmrc file or private token is required. Install with npm, yarn, or pnpm like any other public package.

Unstyled UI almost always means Tailwind never scanned the package classes or the package stylesheet was never imported. Check this list in order:

• Import @import "@realtimexsco/live-chat/styles.css" in your global CSS.
• Add @source entries for dist/index.mjs and dist/index.cjs with the correct depth (../ for Vite, ../../ for Next.js src/app/globals.css).
• Confirm --chat-theme (and related tokens) exist under :root.

Full CSS samples live in Project Setup; common symptoms are listed in Troubleshooting.

No — the bundled UI is built with Tailwind v4 utility classes, and Tailwind v4 is a required peer dependency. You can still replace individual slots with your own components, but the default shell expects Tailwind to be configured.

No. Customization is entirely opt-in per slot. If you pass no components prop at all, the full default chat UI renders. Override only the slots you need — for example just Avatar or MembersDrawer — and leave the rest unchanged.

It is treated as if the key were not passed at all, and the package default drawer renders. To keep a slot at its default, omit the key entirely — do not pass undefined, null, or an empty placeholder component.

Pass components={{ ChatLayout: MyChatShell }} and either wrap DefaultChatLayout or build entirely from scratch using useChatController(). See Replace entire UI for both patterns.

This is caused by loggedUserDetails._id not matching the _id encoded in your JWT. The package uses that id to decide which bubbles are “mine” versus “theirs,” so a mismatch makes your own messages look like they came from someone else as well.

Decode the token (or use the id returned by your login API) and set loggedUserDetails._id to the same value. Project Setup includes a userIdFromToken helper you can copy into chat.config.ts.

Yes. Use queryParams for shared values, queryParamApis to choose which APIs receive them, and queryParamsByApi for per-endpoint overrides. Equivalent imperative helpers are also available.

<ChatMain
  {...chatConfig}
  queryParams={{ tenant: "acme" }}
  queryParamApis={["get"]}
  queryParamsByApi={{
    conversations: { includeArchived: false },
  }}
/>

Full patterns are documented in API Integration.

The socket connection's own query string is never modified by queryParams / queryParamsByApi. File uploads are different: shared GET params do not automatically attach to presigned URL requests, but you can customize uploads explicitly with the presignedUrls key inside queryParamsByApi.

queryParamsByApi={{
  presignedUrls: { folder: "chat-uploads" },
}}

Version 1.1.55 introduced wiring for drawer slots through resolveComponent; version 1.1.56 hardened the default-fallback logic. Use 1.1.56 or later whenever you replace MembersDrawer or related header drawers.

Call buttons appear only in direct-message conversations (hidden for groups). The package renders the buttons and invokes your callbacks — you own the WebRTC / VideoSDK integration.

features={{
  showPhoneCall: true,
  showVideoCall: true,
  onPhoneCall: ({ activeChannel, conversationId }) => {
    yourVoiceSDK.start(activeChannel.id, conversationId);
  },
  onVideoCall: ({ activeChannel, conversationId }) => {
    yourVideoSDK.start(activeChannel.id, conversationId);
  },
}}

More options (replace the whole button group, or hide calls) are in Phone & video calling.

Yes — it works with Vite-based React apps as well as Next.js App Router projects. Follow Project Setup for framework-specific CSS and bundler config, then Quick Start for a working page.