fix: apply feedback updates

frontend/src/contexts/auth.context.tsx

@@ -21,11 +21,6 @@ import { Progress } from "@/app-components/displays/Progress";
 import { useLogout } from "@/hooks/entities/auth-hooks";
 import { useApiClient } from "@/hooks/useApiClient";
 import { CURRENT_USER_KEY, PUBLIC_PATHS } from "@/hooks/useAuth";
-import {
-  EBCEvent,
-  ETabMode,
-  useBroadcastChannel,
-} from "@/hooks/useBroadcastChannel";
 import { useTranslate } from "@/hooks/useTranslate";
 import { RouterType } from "@/services/types";
 import { IUser } from "@/types/user.types";
@@ -64,9 +59,6 @@ export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
     i18n.changeLanguage(lang);
   };
   const { mutate: logoutSession } = useLogout();
-  const { mode, value } = useBroadcastChannel({
-    channelName: "websocket-session",
-  });
   const logout = async () => {
     updateLanguage(publicRuntimeConfig.lang.default);
     logoutSession();
@@ -115,12 +107,6 @@ export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
     setIsReady(true);
   }, []);
 
-  useEffect(() => {
-    if (value === EBCEvent.LOGOUT_END_SESSION && mode === ETabMode.SECONDARY) {
-      router.reload();
-    }
-  }, [value, mode, router]);
-
   if (!isReady || isLoading) return <Progress />;
 
   return (

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

@@ -59,9 +59,7 @@ export const useLogout = (
   const { logoutRedirection } = useLogoutRedirection();
   const { toast } = useToast();
   const { t } = useTranslate();
-  const { send } = useBroadcastChannel({
-    channelName: "websocket-session",
-  });
+  const { send } = useBroadcastChannel();
 
   return useMutation({
     ...options,

frontend/src/hooks/useBroadcastChannel.ts

@@ -6,7 +6,7 @@
  * 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, useMemo, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export enum ETabMode {
   PRIMARY = "primary",
@@ -17,38 +17,40 @@ export enum EBCEvent {
   LOGOUT_END_SESSION = "logout-end-session",
 }
 
-export const useBroadcastChannel = ({
-  channelName,
-  initialValue,
-}: {
-  channelName: string;
-  initialValue?: EBCEvent;
-}) => {
+export const useBroadcastChannel = (
+  channelName: string = "main-broadcast-channel",
+  initialValue?: EBCEvent,
+) => {
+  const channelRef = useRef<BroadcastChannel | null>(null);
   const [value, setValue] = useState<EBCEvent | undefined>(initialValue);
   const [mode, setMode] = useState<ETabMode>(ETabMode.PRIMARY);
-  const channel = useMemo(
-    () => new BroadcastChannel(channelName),
-    [channelName],
-  );
 
   useEffect(() => {
-    channel.onmessage = (event) => {
-      if (mode === ETabMode.PRIMARY) {
-        setValue(event.data);
-        setMode(ETabMode.SECONDARY);
-      }
-    };
+    channelRef.current = new BroadcastChannel(channelName);
+  }, [channelName]);
 
-    channel.postMessage(initialValue);
+  useEffect(() => {
+    if (channelRef.current) {
+      channelRef.current.addEventListener("message", (event) => {
+        if (mode === ETabMode.PRIMARY) {
+          setValue(event.data);
+          setMode(ETabMode.SECONDARY);
+        }
+      });
+      channelRef.current.postMessage(initialValue);
+    }
 
     return () => {
-      channel.close();
+      if (channelRef.current?.onmessage) {
+        channelRef.current.onmessage = null;
+      }
+      channelRef.current?.close();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channel, channelName, initialValue]);
+  }, [channelName, initialValue]);
 
   const send = (data: EBCEvent) => {
-    channel.postMessage(data);
+    channelRef.current?.postMessage(data);
   };
 
   return { mode, value, send };

widget/src/hooks/useBroadcastChannel.ts

@@ -0,0 +1,57 @@
+/*
+ * 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, useRef, useState } from "react";
+
+export enum ETabMode {
+  PRIMARY = "primary",
+  SECONDARY = "secondary",
+}
+
+export enum EBCEvent {
+  LOGOUT_END_SESSION = "logout-end-session",
+}
+
+export const useBroadcastChannel = (
+  channelName: string = "main-broadcast-channel",
+  initialValue?: EBCEvent,
+) => {
+  const channelRef = useRef<BroadcastChannel | null>(null);
+  const [value, setValue] = useState<EBCEvent | undefined>(initialValue);
+  const [mode, setMode] = useState<ETabMode>(ETabMode.PRIMARY);
+
+  useEffect(() => {
+    channelRef.current = new BroadcastChannel(channelName);
+  }, [channelName]);
+
+  useEffect(() => {
+    if (channelRef.current) {
+      channelRef.current.addEventListener("message", (event) => {
+        if (mode === ETabMode.PRIMARY) {
+          setValue(event.data);
+          setMode(ETabMode.SECONDARY);
+        }
+      });
+      channelRef.current.postMessage(initialValue);
+    }
+
+    return () => {
+      if (channelRef.current?.onmessage) {
+        channelRef.current.onmessage = null;
+      }
+      channelRef.current?.close();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [channelName, initialValue]);
+
+  const send = (data: EBCEvent) => {
+    channelRef.current?.postMessage(data);
+  };
+
+  return { mode, value, send };
+};

widget/src/providers/ChatProvider.tsx

@@ -6,7 +6,6 @@
  * 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 React, {
   createContext,
   ReactNode,
@@ -17,6 +16,11 @@ import React, {
   useState,
 } from "react";
 
+import {
+  EBCEvent,
+  ETabMode,
+  useBroadcastChannel,
+} from "../hooks/useBroadcastChannel";
 import { StdEventType } from "../types/chat-io-messages.types";
 import {
   Direction,
@@ -188,6 +192,7 @@ const ChatProvider: React.FC<{
   defaultConnectionState?: ConnectionState;
   children: ReactNode;
 }> = ({ wantToConnect, defaultConnectionState = 0, children }) => {
+  const { mode, value } = useBroadcastChannel();
   const config = useConfig();
   const settings = useSettings();
   const { screen, setScreen } = useWidget();
@@ -269,7 +274,7 @@ const ChatProvider: React.FC<{
               content_type: QuickReplyType.text,
               text: qr.title,
               payload: qr.payload,
-            } as ISuggestion),
+            }) as ISuggestion,
         ),
       );
     } else {
@@ -419,6 +424,12 @@ const ChatProvider: React.FC<{
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settings.avatarUrl]);
 
+  useEffect(() => {
+    if (value === EBCEvent.LOGOUT_END_SESSION && mode === ETabMode.SECONDARY) {
+      socketCtx.socket.disconnect();
+    }
+  }, [value, mode]);
+
   const contextValue: ChatContextType = {
     participants,
     setParticipants,