Package Structure

For production integrations — especially inside admin templates such as Elstar or Metronic — RealtimeX recommends separating credentials, UI overrides, and layout toggles into their own config files. That keeps secrets out of layout code and makes customization reviewable in isolation.

src/
|-- configs/
|   |-- chat.config.ts               # credentials only
|   |-- chat.customization.config.ts # components + classNames
|   |-- chat.layout.config.ts        # layout section toggles
|-- components/chat/custom/
|   |-- ElstarMembersDrawer.tsx      # custom drawer example
|   |-- ElstarChatAvatar.tsx
|   |-- index.ts
|-- views/Chat.tsx                   # wires up ChatMain

Import the three config modules into your chat page and spread them onto ChatMain. Layout and customization stay optional — start with credentials alone, then layer overrides as your design requires.

import ChatMain from "@realtimexsco/live-chat";
import { chatConfig } from "@/configs/chat.config";
import { chatCustomization } from "@/configs/chat.customization.config";
import { chatLayoutConfig } from "@/configs/chat.layout.config";

export default function ChatPage() {
  return (
    <ChatMain
      {...chatConfig}
      layout={chatLayoutConfig}
      components={chatCustomization.components}
      classNames={chatCustomization.classNames}
      features={chatCustomization.features}
      viewportHeight="calc(100dvh - 4rem)"
    />
  );
}

High-level exports you will import most often. The full slot map — including drawers, message parts, and call buttons — is documented in Components.

Prefer these hooks inside custom slots and layouts. Full signatures and examples are on the Hooks page.

• useChatStore — Zustand store for messages, conversations, and socket actions
• useChatController — state and handlers for building a custom ChatLayout
• useChatContext — low-level chat provider context
• useChatCustomization / useChatCustomizationOptional — current components and classNames
• useChatFeatures / useChatFeaturesOptional — phone/video flags and callbacks
• useChatTheme — themeColor, isDark, and CSS variables
• useChatLocale — date/time formatting helpers using the active locale
• useChatAlerts — error/info alert state

Helpers for layout/customization merges, imperative credential setup, and query-param configuration. See Configuration and API Integration for how they map to ChatMain props.

import {
  mergeChatLayoutConfig,
  defaultChatLayoutConfig,
} from "@realtimexsco/live-chat";

export const chatLayoutConfig = mergeChatLayoutConfig({
  ...defaultChatLayoutConfig,
  sidebar: true,
  input: true,
});

• mergeChatLayoutConfig, defaultChatLayoutConfig — layout section helpers
• mergeChatCustomization, defaultChatClassNames, defaultChatComponents, defaultChatFeatures
• setChatClientId, setChatAccessToken, setChatBaseURL, setChatSocketUrl — imperative API setup
• setChatQueryParams / getChatQueryParams, setChatQueryParamApis / getChatQueryParamApis, setChatQueryParamsByApi / getChatQueryParamsByApi
• CHAT_API_KEYS, CHAT_GET_API_KEYS, resolveChatApiKey
• socketService, getSocketConfig
• showNotification, downloadFile