fix: resolve file conflicts

api/src/user/controllers/auth.controller.ts

@@ -1,5 +1,5 @@
 /*
- * 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.
@@ -11,6 +11,7 @@ import {
   Body,
   Controller,
   Get,
+  Inject,
   InternalServerErrorException,
   Param,
   Post,
@@ -21,6 +22,7 @@ import {
   UseGuards,
   UseInterceptors,
 } from '@nestjs/common';
+import { EventEmitter2 } from '@nestjs/event-emitter';
 import { CsrfCheck, CsrfGen, CsrfGenAuth } from '@tekuconcept/nestjs-csrf';
 import { Request, Response } from 'express';
 import { Session as ExpressSession } from 'express-session';
@@ -38,6 +40,9 @@ import { UserService } from '../services/user.service';
 import { ValidateAccountService } from '../services/validate-account.service';
 
 export class BaseAuthController {
+  @Inject(EventEmitter2)
+  private readonly eventEmitter: EventEmitter2;
+
   constructor(protected readonly logger: LoggerService) {}
 
   /**
@@ -67,6 +72,7 @@ export class BaseAuthController {
     @Session() session: ExpressSession,
     @Res({ passthrough: true }) res: Response,
   ) {
+    this.eventEmitter.emit('hook:user:logout', session);
     res.clearCookie(config.session.name);
 
     session.destroy((error) => {

api/src/websocket/websocket.gateway.ts

@@ -1,12 +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 { EventEmitter2 } from '@nestjs/event-emitter';
+import { EventEmitter2, OnEvent } from '@nestjs/event-emitter';
 import {
   ConnectedSocket,
   MessageBody,
@@ -20,7 +20,7 @@ import {
 import cookie from 'cookie';
 import * as cookieParser from 'cookie-parser';
 import signature from 'cookie-signature';
-import { SessionData } from 'express-session';
+import { Session as ExpressSession, SessionData } from 'express-session';
 import { Server, Socket } from 'socket.io';
 import { sync as uid } from 'uid-safe';
 
@@ -258,6 +258,15 @@ export class WebsocketGateway
     this.eventEmitter.emit(`hook:websocket:connection`, client);
   }
 
+  @OnEvent('hook:user:logout')
+  disconnectSockets({ id }: ExpressSession) {
+    for (const [, socket] of this.io.sockets.sockets) {
+      if (socket.data['sessionID'] === id) {
+        socket.disconnect(true);
+      }
+    }
+  }
+
   async handleDisconnect(client: Socket): Promise<void> {
     this.logger.log(`Client id:${client.id} disconnected`);
     // Configurable custom afterDisconnect logic here

api/types/event-emitter.d.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 { type Session as ExpressSession } from 'express-session';
 import type { Document, Query } from 'mongoose';
 import { type Socket } from 'socket.io';
 
@@ -162,7 +163,7 @@ declare module '@nestjs/event-emitter' {
     model: TDefinition<Model>;
     permission: TDefinition<Permission>;
     role: TDefinition<Role>;
-    user: TDefinition<User, { lastvisit: Subscriber }>;
+    user: TDefinition<User, { lastvisit: Subscriber; logout: ExpressSession }>;
   }
 
   /* entities hooks having schemas */

frontend/src/app-components/inputs/FileInput.tsx

@@ -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 UploadIcon from "@mui/icons-material/Upload";
 import { Button, CircularProgress } from "@mui/material";
 import { ChangeEvent, forwardRef } from "react";
@@ -71,6 +72,7 @@ const FileUploadButton = forwardRef<HTMLLabelElement, FileUploadButtonProps>(
           value="" // to trigger an automatic reset to allow the same file to be selected multiple times
           sx={{ display: "none" }}
           onChange={handleImportChange}
+          inputProps={{ accept }}
         />
       </>
     );

frontend/src/components/visual-editor/v2/AdvancedLink/AdvancedLinkFactory.tsx

@@ -1,18 +1,18 @@
 /*
- * 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 { css, keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
 import {
   DefaultLinkFactory,
   DefaultLinkWidget,
 } from "@projectstorm/react-diagrams";
-import React from "react";
 
 import { AdvancedLinkModel } from "./AdvancedLinkModel";
 

frontend/src/components/visual-editor/v2/BackgroundLayerWidget.tsx

@@ -0,0 +1,62 @@
+/*
+ * 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 { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { CanvasModel } from "@projectstorm/react-canvas-core";
+import * as React from "react";
+import { CSSProperties } from "react";
+
+export interface BackgroundLayerWidgetProps {
+  model: CanvasModel;
+}
+
+namespace S {
+  const shared = css`
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+    pointer-events: none;
+    transform-origin: 0 0;
+    width: 200%;
+    height: 200%;
+    overflow: visible;
+    background-color: #f2f4f7;
+    background-image: radial-gradient(
+      circle,
+      rgba(0, 0, 0, 0.075) 8%,
+      transparent 10%
+    );
+    background-size: 16px 16px;
+  `;
+
+  export const DivLayer = styled.div`
+    ${shared}
+  `;
+}
+
+export class BackgroundLayerWidget extends React.Component<
+  React.PropsWithChildren<BackgroundLayerWidgetProps>
+> {
+  constructor(props: BackgroundLayerWidgetProps) {
+    super(props);
+    this.state = {};
+  }
+
+  getTransformStyle(): CSSProperties {
+    return {
+      backgroundPosition: `${this.props.model.getOffsetX()}px ${this.props.model.getOffsetY()}px`,
+    };
+  }
+
+  render() {
+    return <S.DivLayer style={this.getTransformStyle()} />;
+  }
+}

frontend/src/components/visual-editor/v2/CustomCanvasWidget.tsx

@@ -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 styled from "@emotion/styled";
 import {
   CanvasEngine,
@@ -14,6 +15,8 @@ import {
 } from "@projectstorm/react-diagrams";
 import * as React from "react";
 
+import { BackgroundLayerWidget } from "./BackgroundLayerWidget";
+
 export interface DiagramProps {
   engine: CanvasEngine;
   className?: string;
@@ -115,6 +118,7 @@ export class CustomCanvasWidget extends React.Component<DiagramProps> {
             this.props.engine.getActionEventBus().fireAction({ event });
           }}
         >
+          <BackgroundLayerWidget model={model} />;
           {model.getLayers().map((layer) => {
             return (
               <TransformLayerWidget layer={layer} key={layer.getID()}>

frontend/src/components/visual-editor/v2/CustomDiagramNodes/NodeWidget.tsx

@@ -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 BrokenImageOutlinedIcon from "@mui/icons-material/BrokenImageOutlined";
 import ChatBubbleOutlineOutlinedIcon from "@mui/icons-material/ChatBubbleOutlineOutlined";
 import ExtensionOutlinedIcon from "@mui/icons-material/ExtensionOutlined";
@@ -76,7 +77,7 @@ class NodeAbstractWidget extends React.Component<
           >
             <IconContainer
               style={{
-                borderWidth: "3px",
+                borderWidth: "1px",
                 borderColor: this.props.color,
                 borderStyle: "solid",
               }}
@@ -117,7 +118,7 @@ class NodeAbstractWidget extends React.Component<
               >
                 <IconContainer
                   style={{
-                    borderWidth: "3px",
+                    borderWidth: "1px",
                     borderColor: this.props.color,
                     borderStyle: "solid",
                   }}
@@ -263,12 +264,12 @@ class NodeWidget extends React.Component<
           this.props.node.isSelected() ? "selected" : "",
         )}
         style={{
-          border: `6px solid ${this.config.color}`,
+          border: `1px solid ${this.config.color}`,
         }}
       >
         {this.props.node.starts_conversation ? (
           <div className="start-point-container">
-            <div className="start-point" />
+            <PlayArrowRoundedIcon className="start-point" />
           </div>
         ) : null}
         <div

frontend/src/contexts/auth.context.tsx

@@ -21,6 +21,7 @@ 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 { useSubscribeBroadcastChannel } from "@/hooks/useSubscribeBroadcastChannel";
 import { useTranslate } from "@/hooks/useTranslate";
 import { RouterType } from "@/services/types";
 import { IUser } from "@/types/user.types";
@@ -100,6 +101,14 @@ export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
   };
   const isAuthenticated = !!user;
 
+  useSubscribeBroadcastChannel("login", () => {
+    router.reload();
+  });
+
+  useSubscribeBroadcastChannel("logout", () => {
+    router.reload();
+  });
+
   useEffect(() => {
     const search = location.search;
 

frontend/src/contexts/broadcast-channel.context.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 {
+  LOGIN = "login",
+  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);
+      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 === undefined) {
+    throw new Error(
+      "useBroadcastChannel must be used within a BroadcastChannelProvider",
+    );
+  }
+
+  return context;
+};
+
+export default BroadcastChannelProvider;

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

@@ -9,6 +9,7 @@
 import { useEffect } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 
+import { useBroadcastChannel } from "@/contexts/broadcast-channel.context";
 import { EntityType, TMutationOptions } from "@/services/types";
 import { ILoginAttributes } from "@/types/auth/login.types";
 import {
@@ -32,12 +33,17 @@ export const useLogin = (
   >,
 ) => {
   const { apiClient } = useApiClient();
+  const { postMessage } = useBroadcastChannel();
 
   return useMutation({
     ...options,
     async mutationFn(credentials) {
       return await apiClient.login(credentials);
     },
+    onSuccess: (data, variables, context) => {
+      options?.onSuccess?.(data, variables, context);
+      postMessage({ event: "login" });
+    },
   });
 };
 
@@ -58,6 +64,7 @@ export const useLogout = (
   const { logoutRedirection } = useLogoutRedirection();
   const { toast } = useToast();
   const { t } = useTranslate();
+  const { postMessage } = useBroadcastChannel();
 
   return useMutation({
     ...options,
@@ -68,6 +75,7 @@ export const useLogout = (
     },
     onSuccess: async () => {
       queryClient.removeQueries([CURRENT_USER_KEY]);
+      postMessage({ event: "logout" });
       await logoutRedirection();
       toast.success(t("message.logout_success"));
     },

frontend/src/hooks/useSubscribeBroadcastChannel.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 "@/contexts/broadcast-channel.context";
+
+export const useSubscribeBroadcastChannel: ReturnType<
+  typeof useBroadcastChannel
+>["subscribe"] = (...props) => {
+  const { subscribe } = useBroadcastChannel();
+
+  useEffect(() => {
+    subscribe(...props);
+  }, [subscribe, ...props]);
+};

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.context";
 import { ConfigProvider } from "@/contexts/config.context";
 import { DialogsProvider } from "@/contexts/dialogs.context";
 import { PermissionProvider } from "@/contexts/permission.context";
@@ -85,15 +86,17 @@ const App = ({ Component, pageProps }: TAppPropsWithLayout) => {
                   <QueryClientProvider client={queryClient}>
                     <CssBaseline />
                     <ApiClientProvider>
-                      <AuthProvider>
+                      <BroadcastChannelProvider channelName="main-channel">
-                        <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>

frontend/src/styles/visual-editor.css

@@ -18,20 +18,14 @@
 .diagram-container {
   width: 100%;
   height: 100%;
-  background: #e8eff2;
-  background-image: linear-gradient(to right, #fff9 1px, transparent 1px),
-    linear-gradient(to bottom, #fff9 1px, transparent 1px);
-  background-size: 20px 20px;
-  background-position: -1px -1px;
-  background-attachment: fixed;
   z-index: 2;
 }
 
 .start-point-container {
   top: -11px;
   left: -11px;
-  width: 22px;
+  width: 20px;
-  height: 22px;
+  height: 20px;
   transform: scale(140%);
   border: 1px solid #fff;
   position: absolute;
@@ -40,12 +34,12 @@
 }
 
 .start-point {
-  margin: 5px 7px;
+  color: #FFF;
-  width: 0;
+  position: absolute;
-  height: 0;
+  top: 50%;
-  border-top: 5px solid transparent;
+  left: 50%;
-  border-bottom: 5px solid transparent;
+  transform: translate(-50%, -50%);
-  border-left: 9px solid #fff;
+  font-size: 18px;
 }
 
 .node {
@@ -58,7 +52,7 @@
   z-index: -1;
 }
 .node:has(.selected) {
-  outline: 6px solid #1dc7fc;
+  outline: 2px solid #1dc7fc;
   z-index: 0;
   cursor: grab;
   transform: scale(1.02);
@@ -76,7 +70,8 @@
   min-height: 130px;
   background-color: #fff;
   padding: 0px;
-  border-radius: 17.5px;
+  border-radius: 12px;
+  box-shadow: 0 0 8px #c4c4c4;
 }
 
 .custom-node-header {
@@ -116,7 +111,7 @@
   justify-content: flex-start;
   align-items: center;
   gap: 15px;
-  padding: 20px 24px 24px;
+  padding: 16px 28px;
   position: relative;
 }
 
@@ -127,7 +122,7 @@
   justify-items: flex-start;
   align-items: center;
   gap: 8px;
-  border-radius: 10px 10px 0 0px;
+  border-radius: 12px 12px 0 0;
   width: auto;
   margin-top: -1px;
   margin-left: -1px;
@@ -186,6 +181,9 @@
 .circle-porter {
   top: 50%;
   margin-top: 5px;
+  border-radius: 100%;
+  box-shadow: 0 0 8px #0003;
+  transition: all .4s ease 0s;
 }
 .circle-out-porters {
   position: absolute;
@@ -196,9 +194,20 @@
 .circle-porter-in {
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
+  transform: translateY(-50%) scale(.75);
   left: -12px;
 }
 .circle-porter-out {
-  right: -30px;
+  transform: scale(.75);
+  right: -12px;
+}
+
+.circle-porter-out:hover {
+  cursor: grab;
+  transform: scale(1.1);
+}
+
+.circle-porter-in:hover {
+  cursor: grab;
+  transform: translateY(-50%) scale(1.1);
 }

frontend/src/utils/attachment.ts

@@ -6,24 +6,46 @@
  * 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 { IAttachment } from "@/types/attachment.types";
 import { FileType, TAttachmentForeignKey } from "@/types/message.types";
 
 import { buildURL } from "./URL";
 
 export const MIME_TYPES = {
-  images: ["image/jpeg", "image/png", "image/gif", "image/webp"],
+  images: ["image/jpeg", "image/png", "image/webp", "image/bmp"],
-  videos: ["video/mp4", "video/webm", "video/ogg"],
+  videos: [
-  audios: ["audio/mpeg", "audio/ogg", "audio/wav"],
+    "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",
+    "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",
+    "application/vnd.ms-excel", // older excel format
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "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", // do we want to support epub?
+    "application/x-7z-compressed", // do we want to support 7z?
+    "application/zip", // do we want to support zip?
+    "application/x-rar-compressed", // do we want to support winrar?
+    "application/json",
+    "text/csv",
   ],
 };
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "hexabot",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "hexabot",
-      "version": "2.2.2",
+      "version": "2.2.3",
       "license": "AGPL-3.0-only",
       "workspaces": [
         "frontend",

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">
+              <BroadcastChannelProvider channelName="main-channel">
-                <ChatProvider
+                <WidgetProvider defaultScreen="chat">
-                  defaultConnectionState={ConnectionState.connected}
+                  <ChatProvider
-                >
+                    defaultConnectionState={ConnectionState.connected}
-                  <Launcher
+                  >
-                    CustomHeader={CustomHeader}
+                    <Launcher
-                    CustomAvatar={CustomAvatar}
+                      CustomHeader={CustomHeader}
-                    PreChat={UserSubscription}
+                      CustomAvatar={CustomAvatar}
-                  />
+                      PreChat={UserSubscription}
-                </ChatProvider>
+                    />
-              </WidgetProvider>
+                  </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",
+  ],
+};