turbodesk-livechat-react-native 0.1.0-alpha.24 → 0.1.0-alpha.25

package/src/provider/LiveChatProvider.tsx

@@ -1,397 +1,392 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { useColorScheme, unstable_batchedUpdates, Platform } 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, deviceTokenApi } from "../api/conversation-api";
-import { WsClient } from "../realtime/ws-client";
-import type { WsConnectionState } from "../realtime/ws-client";
-import {
-  buildThemeFromBrand,
-  defaultTheme,
-} 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,
-  fcmToken,
-  fcmTokenPlatform,
-  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 [activeConversationId, setActiveConversationId] = useState<string | null>(null);
-  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]);
-
-  // ── FCM token registration ─────────────────────────────────────────────
-  useEffect(() => {
-    if (!fcmToken || !visitorQueryParams) return;
-    const platform = fcmTokenPlatform ?? (Platform.OS === "ios" ? "ios" : "android");
-    deviceTokenApi.register({ token: fcmToken, platform }, { params: visitorQueryParams }).catch(() => {});
-  }, [fcmToken, fcmTokenPlatform, 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(() => {
-    // Unregister FCM token before clearing identity
-    if (fcmToken && visitorQueryParams) {
-      deviceTokenApi.unregister({ token: fcmToken }, { params: visitorQueryParams }).catch(() => {});
-    }
-    setUserTokenState(undefined);
-    clearStoredDeviceUserId(cfg.widgetId).then(() =>
-      getOrCreateDeviceUserId(cfg.widgetId).then((id) => {
-        setUserId(id);
-        setUserIdReady(true);
-      })
-    );
-  }, [cfg.widgetId, fcmToken, visitorQueryParams]);
-
-  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,
-      activeConversationId,
-      setActiveConversationId,
-      theme,
-    }),
-    [
-      cfg.widgetId,
-      userId,
-      userToken,
-      setToken,
-      logout,
-      visitorProfile,
-      visitorQueryParams,
-      widgetConfig,
-      embedLoadState,
-      embedLoadError,
-      totalUnread,
-      isOpen,
-      open,
-      close,
-      isVisible,
-      show,
-      hide,
-      connectionState,
-      activeConversationId,
-      setActiveConversationId,
-      theme,
-    ]
-  );
-
-  return (
-    <LiveChatContext.Provider value={contextValue}>
-      {children}
-    </LiveChatContext.Provider>
-  );
-}
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useColorScheme, unstable_batchedUpdates, Platform } 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, deviceTokenApi } from "../api/conversation-api";
+import { WsClient } from "../realtime/ws-client";
+import type { WsConnectionState } from "../realtime/ws-client";
+import {
+  buildThemeFromBrand,
+  defaultTheme,
+} 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,
+  fcmToken,
+  fcmTokenPlatform,
+  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]);
+
+  // ── FCM token registration ─────────────────────────────────────────────
+  useEffect(() => {
+    if (!fcmToken || !visitorQueryParams) return;
+    const platform = fcmTokenPlatform ?? (Platform.OS === "ios" ? "ios" : "android");
+    deviceTokenApi.register({ token: fcmToken, platform }, { params: visitorQueryParams }).catch(() => {});
+  }, [fcmToken, fcmTokenPlatform, 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(() => {
+    // Unregister FCM token before clearing identity
+    if (fcmToken && visitorQueryParams) {
+      deviceTokenApi.unregister({ token: fcmToken }, { params: visitorQueryParams }).catch(() => {});
+    }
+    setUserTokenState(undefined);
+    clearStoredDeviceUserId(cfg.widgetId).then(() =>
+      getOrCreateDeviceUserId(cfg.widgetId).then((id) => {
+        setUserId(id);
+        setUserIdReady(true);
+      })
+    );
+  }, [cfg.widgetId, fcmToken, visitorQueryParams]);
+
+  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>
+  );
+}