Reusable chat experience extracted from the ClubMed USG project. Everything is published as ESM-only output so it can be consumed by any Vite/Next/CRA-style React host.

Installation

npm install @clubmed/usg-chat-ui

Provider setup

Drop the ready-made <Chat /> organism into your page and pass the minimal props (apiUrl, accessToken, user, optional logout). Internally it wires the chat provider, HTTP client, and feature contexts so you don’t need to juggle multiple wrappers.

import type {ChatUser} from "@clubmed/usg-chat-ui";
import {Chat} from "@clubmed/usg-chat-ui/organisms/Chat";;

const session = useSession(); // host-specific auth hook

export function ChatPanel() {
  const user: ChatUser | null = session
    ? {
      userId: session.userId,
      userName: session.name,
      userEmail: session.email,
    }
    : null;

  return (
    <ChatProvider>
      apiUrl={process.env.API_URL!}
      accessToken={session.accessToken}
      user={user}
      logout={session.logout}
    >
      <Chat />
    </ChatProvider>
  );
}

Configuration keys

| Field | Description | |----------------------|-----------------------------------------------------------------------------------------| | config.apiUrl | Base URL for server-to-server requests (e.g. https://backend.internal). | | config.fetcher | Optional custom fetch implementation (for SSR polyfills, logging, etc.). | | config.accessToken | Latest access token. When omitted/null, requests are sent anonymously. | | config.user | Lightweight { userId, userName, userEmail } object propagated via headers. | | logout | Optional handler wired into settings so users can disconnect directly from the chat UI. |

If you need to customize HTTP transport or headers, provide a fetcher override or extend the HTTP client directly—ChatProvider keeps the config surface minimal (apiUrl, fetcher, accessToken, user).

Storybook

Storybook v10 is configured at the workspace root (usg-ui/.storybook). Run yarn storybook from usg-ui/ to browse molecules and verify appearance tokens in isolation. The build output (storybook-static) can be published alongside the npm package for visual regression if desired.