From 67c9b6cf86c0c40197bc7481d8f8c7a4ff7f615c Mon Sep 17 00:00:00 2001
From: Hiep Le <69354317+hieptl@users.noreply.github.com>
Date: Mon, 15 Dec 2025 01:31:12 +0700
Subject: [PATCH] refactor(frontend): websocket error message (v1
 conversations) (#12045)

---
 .../conversation-websocket-context.tsx        |  8 +++--
 frontend/src/i18n/declaration.ts              |  2 ++
 frontend/src/i18n/translation.json            | 32 +++++++++++++++++++
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/frontend/src/contexts/conversation-websocket-context.tsx b/frontend/src/contexts/conversation-websocket-context.tsx
index 8a8a205cd6..0cf43b49ce 100644
--- a/frontend/src/contexts/conversation-websocket-context.tsx
+++ b/frontend/src/contexts/conversation-websocket-context.tsx
@@ -7,6 +7,7 @@ import React, {
   useMemo,
   useRef,
 } from "react";
+import { useTranslation } from "react-i18next";
 import { useQueryClient } from "@tanstack/react-query";
 import { useWebSocket, WebSocketHookOptions } from "#/hooks/use-websocket";
 import { useEventStore } from "#/stores/use-event-store";
@@ -44,6 +45,7 @@ import { isBudgetOrCreditError } from "#/utils/error-handler";
 import { useTracking } from "#/hooks/use-tracking";
 import { useReadConversationFile } from "#/hooks/mutation/use-read-conversation-file";
 import useMetricsStore from "#/stores/metrics-store";
+import { I18nKey } from "#/i18n/declaration";
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export type V1_WebSocketConnectionState =
@@ -123,6 +125,8 @@ export function ConversationWebSocketProvider({
     conversationId: string;
   } | null>(null);
 
+  const { t } = useTranslation();
+
   // Helper function to update metrics from stats event
   const updateMetricsFromStats = useCallback(
     (event: ConversationStateUpdateEventStats) => {
@@ -603,7 +607,7 @@ export function ConversationWebSocketProvider({
         // This prevents showing errors during initial connection attempts (e.g., when auto-starting a conversation)
         if (event.code !== 1000 && hasConnectedRefMain.current) {
           setErrorMessage(
-            `Connection lost: ${event.reason || "Unexpected disconnect"}`,
+            `${t(I18nKey.STATUS$CONNECTION_LOST)}: ${event.reason || t(I18nKey.STATUS$DISCONNECTED_REFRESH_PAGE)}`,
           );
         }
       },
@@ -675,7 +679,7 @@ export function ConversationWebSocketProvider({
         // This prevents showing errors during initial connection attempts (e.g., when auto-starting a conversation)
         if (event.code !== 1000 && hasConnectedRefPlanning.current) {
           setErrorMessage(
-            `Connection lost: ${event.reason || "Unexpected disconnect"}`,
+            `${t(I18nKey.STATUS$CONNECTION_LOST)}: ${event.reason || t(I18nKey.STATUS$DISCONNECTED_REFRESH_PAGE)}`,
           );
         }
       },
diff --git a/frontend/src/i18n/declaration.ts b/frontend/src/i18n/declaration.ts
index 420709ef9b..f5a6cacfec 100644
--- a/frontend/src/i18n/declaration.ts
+++ b/frontend/src/i18n/declaration.ts
@@ -532,6 +532,8 @@ export enum I18nKey {
   SUGGESTIONS$ADD_DOCS = "SUGGESTIONS$ADD_DOCS",
   SUGGESTIONS$ADD_DOCKERFILE = "SUGGESTIONS$ADD_DOCKERFILE",
   STATUS$CONNECTED = "STATUS$CONNECTED",
+  STATUS$CONNECTION_LOST = "STATUS$CONNECTION_LOST",
+  STATUS$DISCONNECTED_REFRESH_PAGE = "STATUS$DISCONNECTED_REFRESH_PAGE",
   BROWSER$NO_PAGE_LOADED = "BROWSER$NO_PAGE_LOADED",
   USER$AVATAR_PLACEHOLDER = "USER$AVATAR_PLACEHOLDER",
   ACCOUNT_SETTINGS$LOGOUT = "ACCOUNT_SETTINGS$LOGOUT",
diff --git a/frontend/src/i18n/translation.json b/frontend/src/i18n/translation.json
index 2278092e8e..2966c1aa5f 100644
--- a/frontend/src/i18n/translation.json
+++ b/frontend/src/i18n/translation.json
@@ -8511,6 +8511,38 @@
     "tr": "Bağlandı",
     "uk": "Підключено"
   },
+  "STATUS$CONNECTION_LOST": {
+    "en": "Connection lost",
+    "ja": "接続が切断されました",
+    "zh-CN": "连接已断开",
+    "zh-TW": "連接已斷開",
+    "ko-KR": "연결이 끊어졌습니다",
+    "de": "Verbindung verloren",
+    "no": "Tilkobling mistet",
+    "it": "Connessione persa",
+    "pt": "Conexão perdida",
+    "es": "Conexión perdida",
+    "ar": "فُقد الاتصال",
+    "fr": "Connexion perdue",
+    "tr": "Bağlantı kesildi",
+    "uk": "Втрачено з'єднання"
+  },
+  "STATUS$DISCONNECTED_REFRESH_PAGE": {
+    "en": "Disconnected. Please refresh the page",
+    "ja": "切断されました。ページを更新してください",
+    "zh-CN": "已断开连接。请刷新页面",
+    "zh-TW": "已斷開連接。請重新整理頁面",
+    "ko-KR": "연결이 끊어졌습니다. 페이지를 새로고침하세요",
+    "de": "Getrennt. Bitte aktualisieren Sie die Seite",
+    "no": "Koblet fra. Vennligst oppdater siden",
+    "it": "Disconnesso. Si prega di aggiornare la pagina",
+    "pt": "Desconectado. Por favor, atualize a página",
+    "es": "Desconectado. Por favor, actualice la página",
+    "ar": "تم قطع الاتصال. يرجى تحديث الصفحة",
+    "fr": "Déconnecté. Veuillez actualiser la page",
+    "tr": "Bağlantı kesildi. Lütfen sayfayı yenileyin",
+    "uk": "Відключено. Будь ласка, оновіть сторінку"
+  },
   "BROWSER$NO_PAGE_LOADED": {
     "en": "No page loaded",
     "ja": "ブラウザは空です",