turbodesk-livechat-react-native 0.1.0-alpha.0

package/src/navigation/panel-router-context.tsx

@@ -0,0 +1,89 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import type { WidgetPanelView } from "./router-types";
+
+export type { WidgetPanelView } from "./router-types";
+
+export type PanelRouterContextValue = {
+  view: WidgetPanelView;
+  conversationId: string | null;
+  goHome: (opts?: { replace?: boolean }) => void;
+  goConversation: (conversationId?: string | null, opts?: { replace?: boolean }) => void;
+  goPreviousChats: (opts?: { replace?: boolean }) => void;
+  goBack: () => void;
+};
+
+type RouteEntry = {
+  view: WidgetPanelView;
+  conversationId: string | null;
+};
+
+const PanelRouterContext = createContext<PanelRouterContextValue | null>(null);
+
+export function PanelRouterProvider({ children }: { children: ReactNode }) {
+  const [view, setView] = useState<WidgetPanelView>("home");
+  const [conversationId, setConversationId] = useState<string | null>(null);
+
+  const stack = useRef<RouteEntry[]>([{ view: "home", conversationId: null }]);
+
+  const navigate = useCallback((entry: RouteEntry, replace: boolean) => {
+    if (replace) {
+      stack.current[stack.current.length - 1] = entry;
+    } else {
+      stack.current.push(entry);
+    }
+    setView(entry.view);
+    setConversationId(entry.conversationId);
+  }, []);
+
+  const goHome = useCallback(
+    (opts?: { replace?: boolean }) =>
+      navigate({ view: "home", conversationId: null }, opts?.replace ?? false),
+    [navigate]
+  );
+
+  const goConversation = useCallback(
+    (id?: string | null, opts?: { replace?: boolean }) =>
+      navigate({ view: "conversation", conversationId: id ?? "new" }, opts?.replace ?? false),
+    [navigate]
+  );
+
+  const goPreviousChats = useCallback(
+    (opts?: { replace?: boolean }) =>
+      navigate({ view: "previousChats", conversationId: null }, opts?.replace ?? false),
+    [navigate]
+  );
+
+  const goBack = useCallback(() => {
+    if (stack.current.length > 1) {
+      stack.current.pop();
+      const prev = stack.current[stack.current.length - 1];
+      setView(prev.view);
+      setConversationId(prev.conversationId);
+    }
+  }, []);
+
+  const value = useMemo(
+    () => ({ view, conversationId, goHome, goConversation, goPreviousChats, goBack }),
+    [view, conversationId, goHome, goConversation, goPreviousChats, goBack]
+  );
+
+  return (
+    <PanelRouterContext.Provider value={value}>
+      {children}
+    </PanelRouterContext.Provider>
+  );
+}
+
+export function usePanelRouter(): PanelRouterContextValue {
+  const ctx = useContext(PanelRouterContext);
+  if (!ctx) throw new Error("usePanelRouter must be used within PanelRouterProvider");
+  return ctx;
+}

package/src/navigation/router-types.ts

@@ -0,0 +1 @@
+export type WidgetPanelView = "home" | "conversation" | "previousChats";

package/src/provider/LiveChatContext.ts

@@ -0,0 +1,33 @@
+import { createContext, useContext } from "react";
+import type { LiveChatContextValue } from "./types";
+import { defaultTheme } from "../ui/theme";
+
+export const LiveChatContext = createContext<LiveChatContextValue>({
+  widgetId: "",
+  userId: "",
+  userToken: undefined,
+  setToken: () => undefined,
+  logout: () => undefined,
+  visitorProfile: undefined,
+  visitorQueryParams: null,
+  widgetConfig: null,
+  widgetName: "Chat with us",
+  widgetGreeting: "Hi! How can we help you today?",
+  embedLoadState: "loading",
+  embedLoadError: null,
+  totalUnread: 0,
+  setTotalUnread: () => undefined,
+  isOpen: false,
+  open: () => undefined,
+  close: () => undefined,
+  isVisible: true,
+  show: () => undefined,
+  hide: () => undefined,
+  wsClient: null,
+  connectionState: { isConnected: false, isConnecting: false, isAwaitingRetry: false, lastError: null },
+  theme: defaultTheme,
+});
+
+export function useLiveChatContext(): LiveChatContextValue {
+  return useContext(LiveChatContext);
+}

package/src/provider/LiveChatProvider.tsx

@@ -0,0 +1,380 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useColorScheme, unstable_batchedUpdates } from "react-native";
+import { LiveChatContext } from "./LiveChatContext";
+import type { EmbedConfigLoadState, LiveChatProviderProps } from "./types";
+import {
+  setApiBaseUrl,
+  setTokenGetter,
+  registerAuthRefresh,
+  unregisterAuthRefresh,
+} from "../axios/axios";
+import {
+  getOrCreateDeviceUserId,
+  clearStoredDeviceUserId,
+} from "../core/identity";
+import { buildVisitorQueryParams } from "../core/visitor-params";
+import { widgetApi } from "../api/widget-api";
+import { conversationApi } from "../api/conversation-api";
+import { WsClient } from "../realtime/ws-client";
+import type { WsConnectionState } from "../realtime/ws-client";
+import {
+  buildThemeFromBrand,
+  defaultTheme,
+  mergeTheme,
+} from "../ui/theme";
+
+function getWidgetName(config: any): string {
+  return config?.widgetName?.trim() || "Chat with us";
+}
+
+function getWidgetGreeting(config: any): string {
+  const s = config?.widgetSettings;
+  const g = (s?.greetings ?? s?.greeting ?? "").toString().trim();
+  return g || "Hi! How can we help you today?";
+}
+
+function getWidgetBrandColor(config: any): string | null {
+  const color = config?.widgetSettings?.brandColor?.trim();
+  return color || null;
+}
+
+function pickUnread(raw: any): number | null {
+  const body = raw?.data ?? raw;
+  const inner = body?.data ?? body;
+  const v = inner?.totalUnread ?? inner?.unread;
+  const n = typeof v === "string" ? parseInt(v, 10) : Number(v);
+  return Number.isFinite(n) ? n : null;
+}
+
+export function LiveChatProvider({
+  widgetId: widgetIdProp,
+  apiBaseUrl: apiBaseUrlProp,
+  userId: userIdProp,
+  userToken: userTokenProp,
+  authCallback,
+  visitorProfile,
+  appearance: appearanceProp,
+  useBrandThemingForChat: useBrandThemingProp = false,
+  theme: themeProp,
+  children,
+}: LiveChatProviderProps) {
+  const systemColorScheme = useColorScheme();
+
+  const cfg = useMemo(
+    () => ({
+      widgetId: widgetIdProp?.trim() ?? "",
+      apiBaseUrl: apiBaseUrlProp?.replace(/\/+$/, "") ?? "",
+    }),
+    [widgetIdProp, apiBaseUrlProp]
+  );
+
+  const [userId, setUserId] = useState<string>(userIdProp ?? "");
+  const [userIdReady, setUserIdReady] = useState<boolean>(
+    !!(userIdProp?.trim() || userTokenProp?.trim())
+  );
+  const [userToken, setUserTokenState] = useState<string | undefined>(
+    userTokenProp
+  );
+  const [widgetConfig, setWidgetConfig] = useState<any>(null);
+  const [embedLoadState, setEmbedLoadState] =
+    useState<EmbedConfigLoadState>("loading");
+  const [embedLoadError, setEmbedLoadError] = useState<string | null>(null);
+  const [totalUnread, setTotalUnread] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
+  const [connectionState, setConnectionState] = useState<WsConnectionState>({
+    isConnected: false,
+    isConnecting: false,
+    isAwaitingRetry: false,
+    lastError: null,
+  });
+
+  const wsClientRef = useRef<WsClient | null>(null);
+  const userTokenRef = useRef(userToken);
+  userTokenRef.current = userToken;
+
+  // ── HTTP client bootstrap ──────────────────────────────────────────────
+  useEffect(() => {
+    setApiBaseUrl(cfg.apiBaseUrl);
+    setTokenGetter(() => userTokenRef.current ?? null);
+  }, [cfg.apiBaseUrl]);
+
+  // ── auth refresh registration ──────────────────────────────────────────
+  useEffect(() => {
+    if (!authCallback) return;
+    registerAuthRefresh(authCallback, (newToken) => {
+      setToken(typeof newToken === "string" ? newToken : null);
+    });
+    return () => unregisterAuthRefresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [authCallback]);
+
+  // ── resolve userId ─────────────────────────────────────────────────────
+  useEffect(() => {
+    if (userTokenProp) {
+      setUserId(userIdProp ?? "");
+      setUserTokenState(userTokenProp.trim());
+      setUserIdReady(true);
+      return;
+    }
+    const uid = userIdProp?.trim();
+    if (uid) {
+      setUserId(uid);
+      setUserIdReady(true);
+      return;
+    }
+    let cancelled = false;
+    getOrCreateDeviceUserId(cfg.widgetId).then((id) => {
+      if (!cancelled) {
+        setUserId(id);
+        setUserIdReady(true);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [cfg.widgetId, userIdProp, userTokenProp]);
+
+  // ── propagate token changes from parent ───────────────────────────────
+  useEffect(() => {
+    setUserTokenState(userTokenProp?.trim() || undefined);
+  }, [userTokenProp]);
+
+  // ── widget config fetch ────────────────────────────────────────────────
+  useEffect(() => {
+    if (!cfg.widgetId) return;
+    setEmbedLoadState("loading");
+    setEmbedLoadError(null);
+    let cancelled = false;
+    (async () => {
+      try {
+        const raw = await widgetApi.getWidget(cfg.widgetId);
+        if (cancelled) return;
+        const config = raw?.data ?? raw;
+        unstable_batchedUpdates(() => {
+          setWidgetConfig(config);
+          setEmbedLoadError(null);
+          setEmbedLoadState("ready");
+        });
+      } catch (e) {
+        if (cancelled) return;
+        unstable_batchedUpdates(() => {
+          setEmbedLoadError(
+            e instanceof Error ? e.message : "Failed to load widget config"
+          );
+          setEmbedLoadState("error");
+        });
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [cfg.widgetId]);
+
+  // ── load initial unread count ──────────────────────────────────────────
+  const visitorQueryParams = useMemo(
+    () =>
+      buildVisitorQueryParams({
+        widgetId: cfg.widgetId,
+        userId,
+        userToken,
+        visitorProfile,
+      }),
+    [cfg.widgetId, userId, userToken, visitorProfile]
+  );
+
+  useEffect(() => {
+    if (!visitorQueryParams) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const raw = await conversationApi.getTotalUnread({
+          params: visitorQueryParams,
+        });
+        if (cancelled) return;
+        const n = pickUnread(raw);
+        if (n !== null) setTotalUnread(Math.max(0, n));
+      } catch {
+        /* best-effort */
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [visitorQueryParams]);
+
+  // ── WsClient lifecycle ─────────────────────────────────────────────────
+  useEffect(() => {
+    if (!cfg.widgetId || !userId || !userIdReady) return;
+
+    const client = new WsClient({
+      widgetId: cfg.widgetId,
+      userId,
+      userToken,
+    });
+
+    const unsub = client.onStateChange((s) => setConnectionState({ ...s }));
+
+    const unsubMsg = client.subscribe("new_livechat_message", (payload: any) => {
+      const data = payload?.data ?? payload;
+      const msg = data?.message;
+      if (msg?.senderType === "contact") return;
+      setTotalUnread((n) => n + 1);
+    });
+
+    const unsubRead = client.subscribe(
+      "visitor_conversation_messages_marked_as_read",
+      (payload: any) => {
+        const data = payload?.data ?? payload;
+        const raw = data?.visitorUnreadCount;
+        const parsed =
+          typeof raw === "string" ? parseInt(raw, 10) : Number(raw);
+        if (Number.isFinite(parsed)) {
+          setTotalUnread(Math.max(0, parsed));
+          return;
+        }
+        const deltaRaw = data?.messageCount;
+        const delta =
+          typeof deltaRaw === "string"
+            ? parseInt(deltaRaw, 10)
+            : Number(deltaRaw);
+        if (Number.isFinite(delta) && delta > 0)
+          setTotalUnread((n) => Math.max(0, n - delta));
+      }
+    );
+
+    client.start();
+    wsClientRef.current = client;
+
+    return () => {
+      unsub();
+      unsubMsg();
+      unsubRead();
+      client.destroy();
+      wsClientRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cfg.widgetId, cfg.apiBaseUrl, userId, userIdReady]);
+
+  useEffect(() => {
+    wsClientRef.current?.updateIdentity({ userId, userToken });
+  }, [userId, userToken]);
+
+  // ── public actions ─────────────────────────────────────────────────────
+  const setToken = useCallback(
+    (token: string | null | undefined) => {
+      const trimmed = typeof token === "string" ? token.trim() : "";
+      if (trimmed) {
+        setUserTokenState(trimmed);
+        setUserId("");
+        setUserIdReady(true);
+        return;
+      }
+      setUserTokenState(undefined);
+      getOrCreateDeviceUserId(cfg.widgetId).then((id) => {
+        setUserId(id);
+        setUserIdReady(true);
+      });
+    },
+    [cfg.widgetId]
+  );
+
+  const logout = useCallback(() => {
+    setUserTokenState(undefined);
+    clearStoredDeviceUserId(cfg.widgetId).then(() =>
+      getOrCreateDeviceUserId(cfg.widgetId).then((id) => {
+        setUserId(id);
+        setUserIdReady(true);
+      })
+    );
+  }, [cfg.widgetId]);
+
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+  const show = useCallback(() => setIsVisible(true), []);
+  const hide = useCallback(() => {
+    setIsOpen(false);
+    setIsVisible(false);
+  }, []);
+
+  // ── theme resolution ───────────────────────────────────────────────────
+  const theme = useMemo(() => {
+    const brandColor =
+      getWidgetBrandColor(widgetConfig) ?? defaultTheme.colors.brand;
+
+    const resolvedAppearance =
+      appearanceProp === "system"
+        ? systemColorScheme === "dark"
+          ? "dark"
+          : "light"
+        : appearanceProp ?? "light";
+
+    return buildThemeFromBrand(
+      brandColor,
+      resolvedAppearance,
+      useBrandThemingProp,
+      themeProp
+    );
+  }, [widgetConfig, appearanceProp, systemColorScheme, useBrandThemingProp, themeProp]);
+
+  const contextValue = useMemo(
+    () => ({
+      widgetId: cfg.widgetId,
+      userId,
+      userToken,
+      setToken,
+      logout,
+      visitorProfile,
+      visitorQueryParams,
+      widgetConfig,
+      widgetName: getWidgetName(widgetConfig),
+      widgetGreeting: getWidgetGreeting(widgetConfig),
+      embedLoadState,
+      embedLoadError,
+      totalUnread,
+      setTotalUnread,
+      isOpen,
+      open,
+      close,
+      isVisible,
+      show,
+      hide,
+      wsClient: wsClientRef.current,
+      connectionState,
+      theme,
+    }),
+    [
+      cfg.widgetId,
+      userId,
+      userToken,
+      setToken,
+      logout,
+      visitorProfile,
+      visitorQueryParams,
+      widgetConfig,
+      embedLoadState,
+      embedLoadError,
+      totalUnread,
+      isOpen,
+      open,
+      close,
+      isVisible,
+      show,
+      hide,
+      connectionState,
+      theme,
+    ]
+  );
+
+  return (
+    <LiveChatContext.Provider value={contextValue}>
+      {children}
+    </LiveChatContext.Provider>
+  );
+}

package/src/provider/types.ts

@@ -0,0 +1,57 @@
+import type { VisitorProfile } from "../core/visitor-params";
+import type { WsConnectionState } from "../realtime/ws-client";
+import type { AppearanceMode, ThemeConfig } from "../ui/theme";
+
+export type EmbedConfigLoadState = "loading" | "ready" | "error";
+
+export type LiveChatProviderProps = {
+  widgetId: string;
+  apiBaseUrl: string;
+  userId?: string;
+  userToken?: string;
+  authCallback?: () => Promise<string | null | undefined>;
+  visitorProfile?: VisitorProfile;
+  appearance?: AppearanceMode;
+  useBrandThemingForChat?: boolean;
+  theme?: Partial<ThemeConfig>;
+  children: React.ReactNode;
+};
+
+export type LiveChatContextValue = {
+  // identity
+  widgetId: string;
+  userId: string;
+  userToken: string | undefined;
+  setToken: (token: string | null | undefined) => void;
+  logout: () => void;
+
+  // visitor query params
+  visitorProfile: VisitorProfile | undefined;
+  visitorQueryParams: Record<string, string> | null;
+
+  // widget config
+  widgetConfig: any;
+  widgetName: string;
+  widgetGreeting: string;
+  embedLoadState: EmbedConfigLoadState;
+  embedLoadError: string | null;
+
+  // unread
+  totalUnread: number;
+  setTotalUnread: React.Dispatch<React.SetStateAction<number>>;
+
+  // chat open/visible state
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  isVisible: boolean;
+  show: () => void;
+  hide: () => void;
+
+  // WS
+  wsClient: import("../realtime/ws-client").WsClient | null;
+  connectionState: WsConnectionState;
+
+  // theme
+  theme: ThemeConfig;
+};