fix: connectionLost ui

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,21 @@ const ConnectionLost: React.FC = () => {
       style={{ backgroundColor: colors.messageList.bg }}
     >
       {loading ? (
-        <LoadingIcon className="loading-image" />
+        <div
+          style={{
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            textAlign: "center",
+            gap: "1rem",
+          }}
+        >
+          <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.
@@ -23,7 +23,7 @@ const LoadingIcon: FC<
       fill={color}
       {...rest}
     >
-      <circle cx="25" cy="25" r="20" stroke="none" fill="none">
+      <circle cx="25" cy="25" r="20" stroke="none" fill={color}>
         <animate
           attributeName="r"
           begin="0s"

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..."
   }
 }