From 917d497b89ec4392bd3856f42e83192d1bade50d Mon Sep 17 00:00:00 2001
From: abdou6666 <sfayhi.abderrahmen@esprit.tn>
Date: Thu, 1 May 2025 15:58:31 +0100
Subject: [PATCH] fix: connectionLost ui

---
 widget/src/components/ConnectionLost.tsx    | 20 +++++++++++++++++---
 widget/src/components/icons/LoadingIcon.tsx |  4 ++--
 widget/src/translations/en/translation.json |  3 ++-
 widget/src/translations/fr/translation.json |  3 ++-
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/widget/src/components/ConnectionLost.tsx b/widget/src/components/ConnectionLost.tsx
index 8a5dc955..220ac1b2 100644
--- a/widget/src/components/ConnectionLost.tsx
+++ b/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 />
diff --git a/widget/src/components/icons/LoadingIcon.tsx b/widget/src/components/icons/LoadingIcon.tsx
index 8522d554..1cd238ca 100644
--- a/widget/src/components/icons/LoadingIcon.tsx
+++ b/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"
diff --git a/widget/src/translations/en/translation.json b/widget/src/translations/en/translation.json
index bc5eb0cf..470ba417 100644
--- a/widget/src/translations/en/translation.json
+++ b/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..."
   }
 }
diff --git a/widget/src/translations/fr/translation.json b/widget/src/translations/fr/translation.json
index 98848b1d..b1aa4ea2 100644
--- a/widget/src/translations/fr/translation.json
+++ b/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..."
   }
 }