fix(widget): add brodcastChannel HOC

frontend/src/hooks/useBroadcastChannel.ts

@@ -13,7 +13,7 @@ import {
   BroadcastChannelContext,
   BroadcastChannelData,
   IBroadcastChannelContext,
-} from "@/contexts/broadcast-channel";
+} from "@/contexts/broadcast-channel.context";
 
 export const useBroadcast = <
   T extends BroadcastChannelData = BroadcastChannelData,

frontend/src/pages/_app.tsx

@@ -19,7 +19,7 @@ import { ReactQueryDevtools } from "react-query/devtools";
 import { SnackbarCloseButton } from "@/app-components/displays/Toast/CloseButton";
 import { ApiClientProvider } from "@/contexts/apiClient.context";
 import { AuthProvider } from "@/contexts/auth.context";
-import BroadcastChannelProvider from "@/contexts/broadcast-channel";
+import BroadcastChannelProvider from "@/contexts/broadcast-channel.context";
 import { ConfigProvider } from "@/contexts/config.context";
 import { PermissionProvider } from "@/contexts/permission.context";
 import { SettingsProvider } from "@/contexts/setting.context";

widget/src/UiChatWidget.tsx

@@ -10,6 +10,7 @@ import { PropsWithChildren } from "react";
 
 import Launcher from "./components/Launcher";
 import UserSubscription from "./components/UserSubscription";
+import BroadcastChannelProvider from "./providers/BroadcastChannelProvider";
 import ChatProvider from "./providers/ChatProvider";
 import { ColorProvider } from "./providers/ColorProvider";
 import { ConfigProvider } from "./providers/ConfigProvider";
@@ -41,17 +42,19 @@ function UiChatWidget({
         <SocketProvider>
           <SettingsProvider>
             <ColorProvider>
-              <WidgetProvider defaultScreen="chat">
-                <ChatProvider
-                  defaultConnectionState={ConnectionState.connected}
-                >
-                  <Launcher
-                    CustomHeader={CustomHeader}
-                    CustomAvatar={CustomAvatar}
-                    PreChat={UserSubscription}
-                  />
-                </ChatProvider>
-              </WidgetProvider>
+              <BroadcastChannelProvider>
+                <WidgetProvider defaultScreen="chat">
+                  <ChatProvider
+                    defaultConnectionState={ConnectionState.connected}
+                  >
+                    <Launcher
+                      CustomHeader={CustomHeader}
+                      CustomAvatar={CustomAvatar}
+                      PreChat={UserSubscription}
+                    />
+                  </ChatProvider>
+                </WidgetProvider>
+              </BroadcastChannelProvider>
             </ColorProvider>
           </SettingsProvider>
         </SocketProvider>

widget/src/hooks/useBroadcastChannel.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2025 Hexastack. All rights reserved.
+ * Copyright © 2024 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
@@ -7,27 +7,21 @@
  */
 
 import * as React from "react";
+import { useContext } from "react";
 
-export type BroadcastChannelData = {
-  uuid: string;
-  value: string | number | boolean | Record<string, unknown> | undefined | null;
-};
+import {
+  BroadcastChannelContext,
+  BroadcastChannelData,
+  IBroadcastChannelContext,
+} from "../providers/BroadcastChannelProvider";
 
-/**
- * React hook to create and manage a Broadcast Channel across multiple browser windows.
- *
- * @param channelName Static name of channel used across the browser windows.
- * @param handleMessage Callback to handle the event generated when `message` is received.
- * @param handleMessageError [optional] Callback to handle the event generated when `error` is received.
- * @returns A function to send/post message on the channel.
- */
-export function useBroadcastChannel<
+export const useBroadcast = <
   T extends BroadcastChannelData = BroadcastChannelData,
 >(
   channelName: string,
   handleMessage?: (event: MessageEvent<T>) => void,
   handleMessageError?: (event: MessageEvent<T>) => void,
-): (data: T) => void {
+): ((data: T) => void) => {
   const channelRef = React.useRef<BroadcastChannel | null>(
     typeof window !== "undefined" && "BroadcastChannel" in window
       ? new BroadcastChannel(channelName + "-channel")
@@ -42,26 +36,17 @@ export function useBroadcastChannel<
   );
 
   return (data: T) => channelRef.current?.postMessage(data);
-}
+};
 
-/**
- * React hook to manage state across browser windows. Has the similar signature as `React.useState`.
- *
- * @param channelName Static name of channel used across the browser windows.
- * @param initialState Initial state.
- * @returns Tuple of state and setter for the state.
- */
-export function useBroadcastState<
+export const useBroadcastState = <
   T extends BroadcastChannelData = BroadcastChannelData,
 >(
   channelName: string,
   initialState: T,
-): [T, React.Dispatch<React.SetStateAction<T>>, boolean] {
+): [T, React.Dispatch<React.SetStateAction<T>>, boolean] => {
   const [isPending, startTransition] = React.useTransition();
   const [state, setState] = React.useState<T>(initialState);
-  const broadcast = useBroadcastChannel<T>(channelName, (ev) =>
-    setState(ev.data),
-  );
+  const broadcast = useBroadcast<T>(channelName, (ev) => setState(ev.data));
   const updateState: React.Dispatch<React.SetStateAction<T>> =
     React.useCallback(
       (input) => {
@@ -77,16 +62,13 @@ export function useBroadcastState<
     );
 
   return [state, updateState, isPending];
-}
+};
 
-// Helpers
-
-/** Hook to subscribe/unsubscribe from channel events. */
-function useChannelEventListener<K extends keyof BroadcastChannelEventMap>(
+const useChannelEventListener = <K extends keyof BroadcastChannelEventMap>(
   channel: BroadcastChannel | null,
   event: K,
   handler?: (e: BroadcastChannelEventMap[K]) => void,
-) {
+) => {
   const callbackRef = React.useRef(handler);
 
   if (callbackRef.current !== handler) {
@@ -107,4 +89,16 @@ function useChannelEventListener<K extends keyof BroadcastChannelEventMap>(
       channel.removeEventListener(event, callback);
     };
   }, [channel, event]);
-}
+};
+
+export const useBroadcastChannel = (): IBroadcastChannelContext => {
+  const context = useContext(BroadcastChannelContext);
+
+  if (!context) {
+    throw new Error(
+      "useBroadcastChannel must be used within an BroadcastChannelContext",
+    );
+  }
+
+  return context;
+};

widget/src/providers/BroadcastChannelProvider.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright © 2025 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { createContext } from "react";
+
+import { useBroadcast } from "../hooks/useBroadcastChannel";
+
+export interface IBroadcastChannelContext {
+  useBroadcast: (
+    channelName: string,
+    handleMessage?: (event: MessageEvent<BroadcastChannelData>) => void,
+    handleMessageError?: (event: MessageEvent<BroadcastChannelData>) => void,
+  ) => (data: BroadcastChannelData) => void;
+}
+
+export type BroadcastChannelData = {
+  uuid: string;
+  value: string | number | boolean | Record<string, unknown> | undefined | null;
+};
+
+export interface IBroadcastChannelProps {
+  children?: React.ReactNode;
+}
+
+export const BroadcastChannelContext = createContext<IBroadcastChannelContext>({
+  useBroadcast: () => () => {},
+});
+
+export const BroadcastChannelProvider: React.FC<IBroadcastChannelProps> = ({
+  // eslint-disable-next-line react/prop-types
+  children,
+}) => {
+  return (
+    <BroadcastChannelContext.Provider
+      value={{
+        useBroadcast,
+      }}
+    >
+      {children}
+    </BroadcastChannelContext.Provider>
+  );
+};
+
+export default BroadcastChannelProvider;

widget/src/providers/ChatProvider.tsx

@@ -454,10 +454,10 @@ const ChatProvider: React.FC<{
     handleSubscription,
   };
   const tabUuidRef = useTabUuid();
-  const tabUuid = tabUuidRef.current;
+  const { useBroadcast } = useBroadcastChannel();
 
-  useBroadcastChannel("session", ({ data }) => {
-    if (data.value === "logout" && data.uuid !== tabUuid) {
+  useBroadcast("session", ({ data }) => {
+    if (data.value === "logout" && data.uuid !== tabUuidRef.current) {
       socketCtx.socket.disconnect();
     }
   });