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.

1src/2|-- configs/3|   |-- chat.config.ts               # credentials only4|   |-- chat.customization.config.ts # components + classNames5|   |-- chat.layout.config.ts        # layout section toggles6|-- components/chat/custom/7|   |-- ElstarMembersDrawer.tsx      # custom drawer example8|   |-- ElstarChatAvatar.tsx9|   |-- index.ts10|-- 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.

1import ChatMain from "@realtimexsco/live-chat";2import { chatConfig } from "@/configs/chat.config";3import { chatCustomization } from "@/configs/chat.customization.config";4import { chatLayoutConfig } from "@/configs/chat.layout.config";5 6export default function ChatPage() {7  return (8    <ChatMain9      {...chatConfig}10      layout={chatLayoutConfig}11      components={chatCustomization.components}12      classNames={chatCustomization.classNames}13      features={chatCustomization.features}14      viewportHeight="calc(100dvh - 4rem)"15    />16  );17}

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.

1import {2  mergeChatLayoutConfig,3  defaultChatLayoutConfig,4} from "@realtimexsco/live-chat";5 6export const chatLayoutConfig = mergeChatLayoutConfig({7  ...defaultChatLayoutConfig,8  sidebar: true,9  input: true,10});

• 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