From d913c23fbcb1fab07a5519510607ca2ddbfbd2a6 Mon Sep 17 00:00:00 2001 From: abdou6666 Date: Thu, 1 May 2025 15:36:01 +0100 Subject: [PATCH 1/5] fix: socketio gateway config --- api/src/config/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/api/src/config/index.ts b/api/src/config/index.ts index 4c8a66d5..2d957807 100644 --- a/api/src/config/index.ts +++ b/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, From 5c487e1e1269eaa276599b04c3595cfc35ec8d67 Mon Sep 17 00:00:00 2001 From: abdou6666 Date: Thu, 1 May 2025 15:58:08 +0100 Subject: [PATCH 2/5] fix: connectionLost state --- widget/src/providers/ChatProvider.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/widget/src/providers/ChatProvider.tsx b/widget/src/providers/ChatProvider.tsx index 77f51bb0..0d4ee1a6 100644 --- a/widget/src/providers/ChatProvider.tsx +++ b/widget/src/providers/ChatProvider.tsx @@ -405,11 +405,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.on("close", endConnection); + socketCtx.socket.io.on("reconnect_error", endConnection); + socketCtx.socket.io.on("reconnect_failed", endConnection); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); From 917d497b89ec4392bd3856f42e83192d1bade50d Mon Sep 17 00:00:00 2001 From: abdou6666 Date: Thu, 1 May 2025 15:58:31 +0100 Subject: [PATCH 3/5] 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 ? ( - +
+

{t("messages.attempting_reconnect")}

+ +
) : (
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} > - + Date: Thu, 1 May 2025 16:08:09 +0100 Subject: [PATCH 4/5] fix: refactor css --- widget/src/components/ConnectionLost.scss | 11 +++++++++++ widget/src/components/ConnectionLost.tsx | 13 +------------ widget/src/providers/ChatProvider.tsx | 6 +++--- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/widget/src/components/ConnectionLost.scss b/widget/src/components/ConnectionLost.scss index d7f6abeb..d9869142 100644 --- a/widget/src/components/ConnectionLost.scss +++ b/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; +} diff --git a/widget/src/components/ConnectionLost.tsx b/widget/src/components/ConnectionLost.tsx index 220ac1b2..2db56103 100644 --- a/widget/src/components/ConnectionLost.tsx +++ b/widget/src/components/ConnectionLost.tsx @@ -33,18 +33,7 @@ const ConnectionLost: React.FC = () => { style={{ backgroundColor: colors.messageList.bg }} > {loading ? ( -
+

{t("messages.attempting_reconnect")}

diff --git a/widget/src/providers/ChatProvider.tsx b/widget/src/providers/ChatProvider.tsx index 0d4ee1a6..4187cc4d 100644 --- a/widget/src/providers/ChatProvider.tsx +++ b/widget/src/providers/ChatProvider.tsx @@ -416,9 +416,9 @@ const ChatProvider: React.FC<{ return () => { socketCtx.socket.io.off("reconnect", reSubscribe); - socketCtx.socket.io.on("close", endConnection); - socketCtx.socket.io.on("reconnect_error", endConnection); - socketCtx.socket.io.on("reconnect_failed", endConnection); + 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 }, []); From 843d6b8a0625385c4da6ce9e995b994d2904cf42 Mon Sep 17 00:00:00 2001 From: abdou6666 Date: Thu, 1 May 2025 16:15:01 +0100 Subject: [PATCH 5/5] fix: loading svg --- widget/src/components/icons/LoadingIcon.tsx | 60 ++++++++------------- 1 file changed, 22 insertions(+), 38 deletions(-) diff --git a/widget/src/components/icons/LoadingIcon.tsx b/widget/src/components/icons/LoadingIcon.tsx index 1cd238ca..71e26ab4 100644 --- a/widget/src/components/icons/LoadingIcon.tsx +++ b/widget/src/components/icons/LoadingIcon.tsx @@ -18,47 +18,31 @@ const LoadingIcon: FC< - - - - - - - - + {[40, 100, 160].map((cx, index) => ( + + + + ))} ); };