fix: remove max upload size from settings / use env var instead to centralize the config

widget/src/ChatWidget.tsx

@@ -6,20 +6,21 @@
  * 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 "normalize.css";
+import "./ChatWidget.css";
 import Launcher from "./components/Launcher";
 import UserSubscription from "./components/UserSubscription";
 import ChatProvider from "./providers/ChatProvider";
 import { ColorProvider } from "./providers/ColorProvider";
-import { Config, ConfigProvider } from "./providers/ConfigProvider";
+import { ConfigProvider } from "./providers/ConfigProvider";
 import { CookieProvider } from "./providers/CookieProvider";
 import { SettingsProvider } from "./providers/SettingsProvider";
 import { SocketProvider } from "./providers/SocketProvider";
 import { TranslationProvider } from "./providers/TranslationProvider";
 import WidgetProvider from "./providers/WidgetProvider";
-import "normalize.css";
-import "./ChatWidget.css";
+import { Config } from "./types/config.types";
 
-function ChatWidget(props: Config) {
+function ChatWidget(props: Partial<Config>) {
   return (
     <ConfigProvider {...props}>
       <TranslationProvider>

widget/src/UiChatWidget.tsx

@@ -12,13 +12,14 @@ import Launcher from "./components/Launcher";
 import UserSubscription from "./components/UserSubscription";
 import ChatProvider from "./providers/ChatProvider";
 import { ColorProvider } from "./providers/ColorProvider";
-import { Config, ConfigProvider } from "./providers/ConfigProvider";
+import { ConfigProvider } from "./providers/ConfigProvider";
 import { SettingsProvider } from "./providers/SettingsProvider";
 import { SocketProvider } from "./providers/SocketProvider";
 import { TranslationProvider } from "./providers/TranslationProvider";
 import WidgetProvider, { WidgetContextType } from "./providers/WidgetProvider";
-import "./UiChatWidget.css";
+import { Config } from "./types/config.types";
 import { ConnectionState } from "./types/state.types";
+import "./UiChatWidget.css";
 
 type UiChatWidgetProps = PropsWithChildren<{
   CustomLauncher?: (props: { widget: WidgetContextType }) => JSX.Element;
@@ -26,7 +27,7 @@ type UiChatWidgetProps = PropsWithChildren<{
   CustomAvatar?: () => JSX.Element;
   PreChat?: React.FC;
   PostChat?: React.FC;
-  config: Config;
+  config: Partial<Config>;
 }>;
 
 function UiChatWidget({

widget/src/components/UserInput.tsx

@@ -11,6 +11,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "../hooks/useTranslation";
 import { useChat } from "../providers/ChatProvider";
 import { useColors } from "../providers/ColorProvider";
+import { useConfig } from "../providers/ConfigProvider";
 import { useSettings } from "../providers/SettingsProvider";
 import { TOutgoingMessageType } from "../types/message.types";
 import { OutgoingMessageState } from "../types/state.types";
@@ -27,6 +28,7 @@ import Suggestions from "./Suggestions";
 import "./UserInput.scss";
 
 const UserInput: React.FC = () => {
+  const { maxUploadSize } = useConfig();
   const { t } = useTranslation();
   const { colors } = useColors();
   const {
@@ -43,7 +45,6 @@ const UserInput: React.FC = () => {
     focusOnOpen,
     autoFlush,
     allowedUploadTypes,
-    allowedUploadSize,
     showEmoji,
     showLocation,
     showFile,
@@ -106,7 +107,7 @@ const UserInput: React.FC = () => {
 
       if (!typeCheck) {
         setFileError(t("messages.file_message.unsupported_file_type"));
-      } else if (file.size > (allowedUploadSize || 0)) {
+      } else if (file.size > maxUploadSize) {
         setFileError(t("messages.file_message.unsupported_file_size"));
       } else {
         send({

widget/src/constants/defaultConfig.ts

@@ -6,8 +6,13 @@
  * 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).
  */
 
-export const DEFAULT_CONFIG = {
+import { Config } from "../types/config.types";
+
+export const DEFAULT_CONFIG: Config = {
   apiUrl: process.env.REACT_APP_WIDGET_API_URL || "http://localhost:4000",
   channel: process.env.REACT_APP_WIDGET_CHANNEL || "console-channel",
   language: "en",
+  maxUploadSize: process.env.UPLOAD_MAX_SIZE_IN_BYTES
+    ? Number(process.env.UPLOAD_MAX_SIZE_IN_BYTES)
+    : 20 * 1024 * 1024, // 20 MB in bytes
 };

widget/src/providers/ConfigProvider.tsx

@@ -9,23 +9,15 @@
 import React, { createContext, ReactNode, useContext, useRef } from "react";
 
 import { DEFAULT_CONFIG } from "../constants/defaultConfig";
+import { Config } from "../types/config.types";
 
-// Define the type for your config, including all possible properties
-export type Config = {
-  apiUrl: string;
-  channel: string;
-  language: string;
-};
-
-// Create a context with a specific type, providing better type-checking
 const ConfigContext = createContext<Config>(DEFAULT_CONFIG);
 
-export const ConfigProvider: React.FC<{
-  apiUrl?: string;
-  channel?: string;
-  language?: string;
-  children: ReactNode;
-}> = ({ children, ...providedConfig }) => {
+export const ConfigProvider: React.FC<
+  Partial<Config> & {
+    children: ReactNode;
+  }
+> = ({ children, ...providedConfig }) => {
   const config = useRef<Config>({
     ...DEFAULT_CONFIG,
     ...providedConfig,

widget/src/providers/SettingsProvider.tsx

@@ -35,7 +35,6 @@ type ChannelSettings = {
   show_location: boolean;
   allowed_upload_types: string;
   greeting_message: string;
-  allowed_upload_size: number;
 };
 
 type ChatSettings = {
@@ -52,7 +51,6 @@ type ChatSettings = {
   menu: IMenuNode[];
   autoFlush: boolean;
   allowedUploadTypes: string[];
-  allowedUploadSize: number;
   color: string;
   greetingMessage: string;
   avatarUrl: string;
@@ -72,7 +70,6 @@ const defaultSettings: ChatSettings = {
   menu: [],
   autoFlush: true,
   allowedUploadTypes: ["image/gif", "image/png", "image/jpeg"],
-  allowedUploadSize: 2500000,
   color: "blue",
   greetingMessage: "Welcome !",
   avatarUrl: "",
@@ -106,7 +103,6 @@ export const SettingsProvider: React.FC<ChatSettingsProviderProps> = ({
       titleImageUrl: settings.avatar_url,
       menu: settings.menu,
       allowedUploadTypes: settings.allowed_upload_types.split(","),
-      allowedUploadSize: settings.allowed_upload_size,
       inputDisabled: settings.input_disabled,
       color: settings.theme_color,
       greetingMessage: settings.greeting_message,

widget/src/types/config.types.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright © 2024 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).
+ */
+
+export type Config = {
+  apiUrl: string;
+  channel: string;
+  language: string;
+  maxUploadSize: number;
+};

widget/src/utils/SocketIoClient.ts

@@ -8,7 +8,7 @@
 
 import { io, ManagerOptions, Socket, SocketOptions } from "socket.io-client";
 
-import { Config } from "../providers/ConfigProvider";
+import { Config } from "../types/config.types";
 import {
   IOIncomingMessage,
   IOOutgoingMessage,