fix: resolve file conflicts

widget/src/UiChatWidget.css

@@ -3,5 +3,5 @@
   right: 25px !important;
   bottom: 25px !important;
   z-index: 999 !important;
-  box-shadow: 0 0 8px #0003 !important;
+  box-shadow: 0 0 8px #c4c4c4 !important;
 }

widget/src/UiChatWidget.tsx

@@ -1,15 +1,17 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * 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 { 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 +43,19 @@ function UiChatWidget({
         <SocketProvider>
           <SettingsProvider>
             <ColorProvider>
-              <WidgetProvider defaultScreen="chat">
-                <ChatProvider
-                  defaultConnectionState={ConnectionState.connected}
-                >
-                  <Launcher
-                    CustomHeader={CustomHeader}
-                    CustomAvatar={CustomAvatar}
-                    PreChat={UserSubscription}
-                  />
-                </ChatProvider>
-              </WidgetProvider>
+              <BroadcastChannelProvider channelName="main-channel">
+                <WidgetProvider defaultScreen="chat">
+                  <ChatProvider
+                    defaultConnectionState={ConnectionState.connected}
+                  >
+                    <Launcher
+                      CustomHeader={CustomHeader}
+                      CustomAvatar={CustomAvatar}
+                      PreChat={UserSubscription}
+                    />
+                  </ChatProvider>
+                </WidgetProvider>
+              </BroadcastChannelProvider>
             </ColorProvider>
           </SettingsProvider>
         </SocketProvider>

widget/src/components/buttons/FileButton.tsx

@@ -1,14 +1,15 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * 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 React, { ChangeEvent } from "react";
+import React, { ChangeEvent, useMemo } from "react";
 
 import { useChat } from "../../providers/ChatProvider";
+import { MIME_TYPES } from "../../utils/attachment";
 import FileInputIcon from "../icons/FileInputIcon";
 
 import "./FileButton.scss";
@@ -23,12 +24,17 @@ const FileButton: React.FC = () => {
       setFile && setFile(e.target.files[0]);
     }
   };
+  const acceptedMimeTypes = useMemo(
+    () => Object.values(MIME_TYPES).flat().join(","),
+    [],
+  );
 
   return (
     <div className="sc-user-input--file-wrapper">
       <button className="sc-user-input--file-icon-wrapper" type="button">
         <FileInputIcon />
         <input
+          accept={acceptedMimeTypes}
           type="file"
           id="file-input"
           onChange={handleChange}

widget/src/hooks/useSubscribeBroadcastChannel.ts

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

widget/src/providers/BroadcastChannelProvider.tsx

@@ -0,0 +1,115 @@
+/*
+ * 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,
+  FC,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+} from "react";
+
+export enum EBCEvent {
+  LOGOUT = "logout",
+}
+
+type BroadcastChannelMessage = {
+  event: `${EBCEvent}`;
+  data?: string | number | boolean | Record<string, unknown> | undefined | null;
+};
+
+interface IBroadcastChannelProps {
+  channelName: string;
+  children: ReactNode;
+}
+
+interface IBroadcastChannelContext {
+  subscribe: (
+    event: `${EBCEvent}`,
+    callback: (message: BroadcastChannelMessage) => void,
+  ) => void;
+  postMessage: (message: BroadcastChannelMessage) => void;
+}
+
+export const BroadcastChannelContext = createContext<
+  IBroadcastChannelContext | undefined
+>(undefined);
+
+export const BroadcastChannelProvider: FC<IBroadcastChannelProps> = ({
+  children,
+  channelName,
+}) => {
+  const channelRef = useRef<BroadcastChannel>(
+    new BroadcastChannel(channelName),
+  );
+  const subscribersRef = useRef<
+    Record<
+      string,
+      Array<Parameters<IBroadcastChannelContext["subscribe"]>["1"]>
+    >
+  >({});
+
+  useEffect(() => {
+    const handleMessage = ({ data }: MessageEvent<BroadcastChannelMessage>) => {
+      subscribersRef.current[data.event].forEach((callback) => callback(data));
+    };
+
+    channelRef.current.addEventListener("message", handleMessage);
+
+    return () => {
+      channelRef.current.removeEventListener("message", handleMessage);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      channelRef.current.close();
+    };
+  }, []);
+
+  const subscribe: IBroadcastChannelContext["subscribe"] = (
+    event,
+    callback,
+  ) => {
+    subscribersRef.current[event] ??= [];
+    subscribersRef.current[event].push(callback);
+
+    return () => {
+      const index = subscribersRef.current[event].indexOf(callback);
+
+      if (index !== -1) {
+        subscribersRef.current[event].splice(index, 1);
+      }
+    };
+  };
+  const postMessage: IBroadcastChannelContext["postMessage"] = (message) => {
+    channelRef.current.postMessage(message);
+  };
+
+  return (
+    <BroadcastChannelContext.Provider
+      value={{
+        subscribe,
+        postMessage,
+      }}
+    >
+      {children}
+    </BroadcastChannelContext.Provider>
+  );
+};
+
+export const useBroadcastChannel = () => {
+  const context = useContext(BroadcastChannelContext);
+
+  if (!context) {
+    throw new Error(
+      "useBroadcastChannel must be used within a BroadcastChannelProvider",
+    );
+  }
+
+  return context;
+};
+
+export default BroadcastChannelProvider;

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,7 @@ import React, {
   useState,
 } from "react";
 
+import { useSubscribeBroadcastChannel } from "../hooks/useSubscribeBroadcastChannel";
 import { StdEventType } from "../types/chat-io-messages.types";
 import {
   Direction,
@@ -385,6 +385,10 @@ const ChatProvider: React.FC<{
     }
   }, [syncState, isOpen]);
 
+  useSubscribeBroadcastChannel("logout", () => {
+    socketCtx.socket.disconnect();
+  });
+
   useEffect(() => {
     if (screen === "chat" && connectionState === ConnectionState.connected) {
       handleSubscription();

widget/src/utils/attachment.ts

@@ -1,11 +1,12 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * 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 { FileType } from "../types/message.types";
 
 export function getFileType(mimeType: string): FileType {
@@ -19,3 +20,41 @@ export function getFileType(mimeType: string): FileType {
     return FileType.file;
   }
 }
+
+export const MIME_TYPES = {
+  images: ["image/jpeg", "image/png", "image/webp", "image/bmp"],
+  videos: [
+    "video/mp4",
+    "video/webm",
+    "video/ogg",
+    "video/quicktime", // common in apple devices
+    "video/x-msvideo", // AVI
+    "video/x-matroska", // MKV
+  ],
+  audios: [
+    "audio/mpeg", // MP3
+    "audio/mp3", // Explicit MP3 type
+    "audio/ogg",
+    "audio/wav",
+    "audio/aac", // common in apple devices
+    "audio/x-wav",
+  ],
+  documents: [
+    "application/pdf",
+    "application/msword", // older ms Word format
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document", // newer ms word format
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "application/vnd.ms-excel", // older excel format
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", // newer excel format
+    "application/vnd.ms-powerpoint",
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    "text/plain",
+    "application/rtf",
+    "application/epub+zip",
+    "application/x-7z-compressed",
+    "application/zip",
+    "application/x-rar-compressed",
+    "application/json",
+    "text/csv",
+  ],
+};