fix: resolve file conflicts

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>
-                        <PermissionProvider>
-                          <SettingsProvider>
-                            <SocketProvider>
-                              {getLayout(<Component {...pageProps} />)}
-                            </SocketProvider>
-                          </SettingsProvider>
-                        </PermissionProvider>
-                      </AuthProvider>
+                      <BroadcastChannelProvider channelName="main-channel">
+                        <AuthProvider>
+                          <PermissionProvider>
+                            <SettingsProvider>
+                              <SocketProvider>
+                                {getLayout(<Component {...pageProps} />)}
+                              </SocketProvider>
+                            </SettingsProvider>
+                          </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;
-  height: 22px;
+  width: 20px;
+  height: 20px;
   transform: scale(140%);
   border: 1px solid #fff;
   position: absolute;
@@ -40,12 +34,12 @@
 }
 
 .start-point {
-  margin: 5px 7px;
-  width: 0;
-  height: 0;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-left: 9px solid #fff;
+  color: #FFF;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  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"],
-  videos: ["video/mp4", "video/webm", "video/ogg"],
-  audios: ["audio/mpeg", "audio/ogg", "audio/wav"],
+  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",
+    "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.openxmlformats-officedocument.spreadsheetml.sheet",
+    "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", // 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",
   ],
 };
 
@@ -68,4 +90,4 @@ export function extractFilenameFromUrl(url: string) {
     // If the URL is invalid, return the input as-is
     return url;
   }
-}
+}