fix: add useSubscribeBroadcastChannel

widget/src/hooks/useSubscribeBroadcastChannel.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 { useEffect } from "react";
+
+import {
+  IBroadcastChannelContext,
+  useBroadcastChannel,
+} from "../providers/BroadcastChannelProvider";
+
+export const useSubscribeBroadcastChannel: IBroadcastChannelContext["subscribe"] =
+  (...props) => {
+    const { subscribe } = useBroadcastChannel();
+
+    useEffect(() => {
+      subscribe(...props);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [subscribe, ...props]);
+  };

widget/src/providers/BroadcastChannelProvider.tsx

@@ -49,11 +49,11 @@ const getOrCreateTabId = () => {
   return storedTabId;
 };
 
-interface IBroadcastChannelContext {
+export interface IBroadcastChannelContext {
   subscribe: (
     event: `${EBCEvent}`,
     callback: (message: BroadcastChannelData) => void,
-  ) => () => void;
+  ) => void;
   postMessage: (payload: BroadcastChannelPayload) => void;
 }
 

widget/src/providers/ChatProvider.tsx

@@ -16,6 +16,7 @@ import React, {
   useState,
 } from "react";
 
+import { useSubscribeBroadcastChannel } from "../hooks/useSubscribeBroadcastChannel";
 import { StdEventType } from "../types/chat-io-messages.types";
 import {
   Direction,
@@ -29,7 +30,6 @@ import {
 } from "../types/message.types";
 import { ConnectionState, OutgoingMessageState } from "../types/state.types";
 
-import { useBroadcastChannel } from "./BroadcastChannelProvider";
 import { useConfig } from "./ConfigProvider";
 import { useSettings } from "./SettingsProvider";
 import { useSocket, useSubscribe } from "./SocketProvider";
@@ -385,7 +385,9 @@ const ChatProvider: React.FC<{
     }
   }, [syncState, isOpen]);
 
-  const { subscribe } = useBroadcastChannel();
+  useSubscribeBroadcastChannel("logout", () => {
+    socketCtx.socket.disconnect();
+  });
 
   useEffect(() => {
     if (screen === "chat" && connectionState === ConnectionState.connected) {
@@ -406,10 +408,6 @@ const ChatProvider: React.FC<{
 
     socketCtx.socket.io.on("reconnect", reSubscribe);
 
-    subscribe("logout", () => {
-      socketCtx.socket.disconnect();
-    });
-
     return () => {
       socketCtx.socket.io.off("reconnect", reSubscribe);
     };