fix: add brodcastChannel HOC

frontend/src/contexts/auth.context.tsx

@@ -110,10 +110,10 @@ export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
   }, []);
 
   const tabUuidRef = useTabUuid();
-  const tabUuid = tabUuidRef.current;
+  const { useBroadcast } = useBroadcastChannel();
 
-  useBroadcastChannel("session", (e) => {
+  useBroadcast("session", (e) => {
-    if (e.data.value === "logout" && e.data.uuid !== tabUuid) {
+    if (e.data.value === "logout" && e.data.uuid !== tabUuidRef.current) {
       router.reload();
     }
   });

frontend/src/contexts/broadcast-channel.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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> = ({
+  children,
+}) => {
+  return (
+    <BroadcastChannelContext.Provider
+      value={{
+        useBroadcast,
+      }}
+    >
+      {children}
+    </BroadcastChannelContext.Provider>
+  );
+};
+
+export default BroadcastChannelProvider;

frontend/src/hooks/entities/auth-hooks.ts

@@ -60,7 +60,8 @@ export const useLogout = (
   const { logoutRedirection } = useLogoutRedirection();
   const { toast } = useToast();
   const { t } = useTranslate();
-  const broadcastLogoutAcrossTabs = useBroadcastChannel("session");
+  const { useBroadcast } = useBroadcastChannel();
+  const broadcastLogoutAcrossTabs = useBroadcast("session");
   const tabUuidRef = useTabUuid();
   const tabUuid = tabUuidRef.current;
 

frontend/src/hooks/useBroadcastChannel.tsx

@@ -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 = {
+import {
-  uuid: string;
+  BroadcastChannelContext,
-  value: string | number | boolean | Record<string, unknown> | undefined | null;
+  BroadcastChannelData,
-};
+  IBroadcastChannelContext,
+} from "@/contexts/broadcast-channel";
 
-/**
+export const useBroadcast = <
- * 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<
   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);
-}
+};
 
-/**
+export const useBroadcastState = <
- * 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<
   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) =>
+  const broadcast = useBroadcast<T>(channelName, (ev) => setState(ev.data));
-    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
+const useChannelEventListener = <K extends keyof BroadcastChannelEventMap>(
-
-/** Hook to subscribe/unsubscribe from channel events. */
-function 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;
+};

frontend/src/pages/_app.tsx

@@ -19,6 +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 { ConfigProvider } from "@/contexts/config.context";
 import { PermissionProvider } from "@/contexts/permission.context";
 import { SettingsProvider } from "@/contexts/setting.context";
@@ -83,15 +84,17 @@ const App = ({ Component, pageProps }: TAppPropsWithLayout) => {
                 <QueryClientProvider client={queryClient}>
                   <CssBaseline />
                   <ApiClientProvider>
-                    <AuthProvider>
+                    <BroadcastChannelProvider>
-                      <PermissionProvider>
+                      <AuthProvider>
-                        <SettingsProvider>
+                        <PermissionProvider>
-                          <SocketProvider>
+                          <SettingsProvider>
-                            {getLayout(<Component {...pageProps} />)}
+                            <SocketProvider>
-                          </SocketProvider>
+                              {getLayout(<Component {...pageProps} />)}
-                        </SettingsProvider>
+                            </SocketProvider>
-                      </PermissionProvider>
+                          </SettingsProvider>
-                    </AuthProvider>
+                        </PermissionProvider>
+                      </AuthProvider>
+                    </BroadcastChannelProvider>
                   </ApiClientProvider>
                   <ReactQueryDevtools initialIsOpen={false} />
                 </QueryClientProvider>