refactor(frontend): websocket error message (v1 conversations) (#12045)

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)}`,
           );
         }
       },

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",

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": "ブラウザは空です",