Merge pull request #968 from Hexastack/fix/socket-io-widget-issues

Fix: socket io widget issues

api/src/config/index.ts

@@ -48,8 +48,8 @@ export const config: Config = {
       return;
     },
     serveClient: false,
-    pingTimeout: 60000,
-    pingInterval: 25000,
+    pingTimeout: 3000,
+    pingInterval: 10_000,
     maxHttpBufferSize: 10e7,
     allowUpgrades: true,
     cookie: false,

widget/src/components/ConnectionLost.scss

@@ -38,3 +38,14 @@
   opacity: 1;
   transition: 0s;
 }
+
+.sc-chat--attempt-reconnect {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  gap: 1rem;
+}

widget/src/components/ConnectionLost.tsx

@@ -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.
@@ -12,9 +12,9 @@ import { useTranslation } from "../hooks/useTranslation";
 import { useChat } from "../providers/ChatProvider";
 import { useColors } from "../providers/ColorProvider";
 
+import "./ConnectionLost.scss";
 import ConnectionIcon from "./icons/ConnectionIcon";
 import LoadingIcon from "./icons/LoadingIcon";
-import "./ConnectionLost.scss";
 
 const ConnectionLost: React.FC = () => {
   const { t } = useTranslation();
@@ -33,7 +33,10 @@ const ConnectionLost: React.FC = () => {
       style={{ backgroundColor: colors.messageList.bg }}
     >
       {loading ? (
-        <LoadingIcon className="loading-image" />
+        <div className="sc-chat--attempt-reconnect">
+          <h3>{t("messages.attempting_reconnect")}</h3>
+          <LoadingIcon color={colors.button.text} />
+        </div>
       ) : (
         <div className="sc-chat--disconnected-icon">
           <ConnectionIcon />

widget/src/components/icons/LoadingIcon.tsx

@@ -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.
@@ -18,47 +18,31 @@ const LoadingIcon: FC<
     <svg
       width={size}
       height={size}
-      viewBox="0 0 50 50"
+      viewBox="0 0 200 200"
       xmlns="http://www.w3.org/2000/svg"
-      fill={color}
       {...rest}
     >
-      <circle cx="25" cy="25" r="20" stroke="none" fill="none">
-        <animate
-          attributeName="r"
-          begin="0s"
-          dur="1.5s"
-          values="20; 0"
-          keyTimes="0; 1"
-          repeatCount="indefinite"
-        />
-        <animate
-          attributeName="stroke-opacity"
-          begin="0s"
-          dur="1.5s"
-          values="1; 0"
-          keyTimes="0; 1"
-          repeatCount="indefinite"
-        />
-      </circle>
-      <circle cx="25" cy="25" r="20" stroke="none" fill="none">
-        <animate
-          attributeName="r"
-          begin="0.75s"
-          dur="1.5s"
-          values="20; 0"
-          keyTimes="0; 1"
-          repeatCount="indefinite"
-        />
-        <animate
-          attributeName="stroke-opacity"
-          begin="0.75s"
-          dur="1.5s"
-          values="1; 0"
-          keyTimes="0; 1"
-          repeatCount="indefinite"
-        />
-      </circle>
+      {[40, 100, 160].map((cx, index) => (
+        <circle
+          key={cx}
+          fill={color}
+          stroke={color}
+          strokeWidth="15"
+          r="15"
+          cx={cx}
+          cy="100"
+        >
+          <animate
+            attributeName="opacity"
+            calcMode="spline"
+            dur="2s"
+            values="1;0;1"
+            keySplines=".5 0 .5 1;.5 0 .5 1"
+            repeatCount="indefinite"
+            begin={`-${(0.4 - index * 0.2).toFixed(1)}s`}
+          />
+        </circle>
+      ))}
     </svg>
   );
 };

widget/src/providers/ChatProvider.tsx

@@ -411,11 +411,20 @@ const ChatProvider: React.FC<{
         handleSubscription(profile.first_name, profile.last_name);
       }
     };
+    const endConnection = () => {
+      setConnectionState(0);
+    };
 
     socketCtx.socket.io.on("reconnect", reSubscribe);
+    socketCtx.socket.io.on("close", endConnection);
+    socketCtx.socket.io.on("reconnect_error", endConnection);
+    socketCtx.socket.io.on("reconnect_failed", endConnection);
 
     return () => {
       socketCtx.socket.io.off("reconnect", reSubscribe);
+      socketCtx.socket.io.off("close", endConnection);
+      socketCtx.socket.io.off("reconnect_error", endConnection);
+      socketCtx.socket.io.off("reconnect_failed", endConnection);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

widget/src/translations/en/translation.json

@@ -22,6 +22,7 @@
       "file_error": "File not found",
       "audio_error": "Audio not found",
       "video_error": "Video not found"
-    }
+    },
+    "attempting_reconnect": "Attempting to reconnect..."
   }
 }

widget/src/translations/fr/translation.json

@@ -22,6 +22,7 @@
       "file_error": "Fichier introuvable",
       "audio_error": "Audio introuvable",
       "video_error": "Vidéo introuvable"
-    }
+    },
+    "attempting_reconnect": "Tentative de reconnexion..."
   }
 }