feature: Not connected alert banner in React (#2492)

### TL;DR
Added a network status banner to the main layout component.

| before | after |
| -- | -- |
| ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/XqC2uNFuj0wg8I60sMUh/2bef7928-f35c-45b9-b050-4bbadba4721e.png) |  ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/XqC2uNFuj0wg8I60sMUh/ebb01c92-29d8-46db-aed6-da473d39b63f.png) |

### What changed?
- Introduced `NetworkStatusBanner` component.
  - Displays when the user is offline
- Updated translations for the offline message in multiple languages.
- Removed old snackbar-based offline indicator.

### How to test?
1. Go offline and verify that the new banner appears with the appropriate message.

### Why make this change?
Enhances user experience by providing clearer visual feedback on network status directly within the main layout.

---

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->

**Checklist:** (if applicable)

- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

react/src/components/MainLayout/MainLayout.tsx

@@ -6,6 +6,7 @@ import BAIErrorBoundary from '../BAIErrorBoundary';
 import BAISider from '../BAISider';
 import Flex from '../Flex';
 import ForceTOTPChecker from '../ForceTOTPChecker';
+import NetworkStatusBanner from '../NetworkStatusBanner';
 import PasswordChangeRequestAlert from '../PasswordChangeRequestAlert';
 import { DRAWER_WIDTH } from '../WEBUINotificationDrawer';
 import WebUIHeader from './WebUIHeader';
@@ -169,6 +170,7 @@ function MainLayout() {
                     zIndex: HEADER_Z_INDEX_IN_MAIN_LAYOUT,
                   }}
                 >
+                  <NetworkStatusBanner />
                   <WebUIHeader
                     onClickMenuIcon={() => setSideCollapsed((v) => !v)}
                     containerElement={contentScrollFlexRef.current}

react/src/components/NetworkStatusBanner.tsx

@@ -0,0 +1,55 @@
+import { useNetwork } from 'ahooks';
+import { Alert } from 'antd';
+import { createStyles } from 'antd-style';
+import { atom, useAtom } from 'jotai';
+import { useTranslation } from 'react-i18next';
+
+const networkSoftTimeoutAtom = atom(false);
+
+const useStyles = createStyles(({ token, css }) => ({
+  borderError: css`
+    border-bottom: 1px solid ${token.colorErrorBorder} !important;
+  `,
+  borderWarning: css`
+    border-bottom: 1px solid ${token.colorWarningBorder} !important;
+  `,
+}));
+const NetworkStatusBanner = () => {
+  const { t } = useTranslation();
+  const network = useNetwork();
+
+  const { styles } = useStyles();
+
+  const [softTimeout, setSoftTimeout] = useAtom(networkSoftTimeoutAtom);
+
+  // const handler = (()=>{
+  // });
+
+  // useEffect(()=>{
+  //   document.addEventListener('backendai.client.softtimeout', handler);
+  //   return ()=>{
+  //     document.removeEventListener('backendai.client.softtimeout', handler);
+  //   }
+  // },[])
+
+  return !network.online ? (
+    <Alert
+      message={t('webui.YouAreOffline')}
+      className={styles.borderError}
+      type="error"
+      banner
+    />
+  ) : softTimeout ? (
+    <Alert
+      message={t('webui.NetworkSoftTimeout')}
+      className={styles.borderWarning}
+      banner
+      closable
+      onClose={() => {
+        setSoftTimeout(false);
+      }}
+    />
+  ) : null;
+};
+
+export default NetworkStatusBanner;

resources/i18n/de.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "Meine Umgebungen",
       "ResourcePolicy": "Ressourcenpolitik"
     },
-    "YouAreOffline": "Du bist jetzt offline",
+    "YouAreOffline": "Offline: Keine Verbindung zu einem Netzwerk.",
     "YouAreOnline": "Sie sind jetzt online",
     "NOTFOUND": " <p> Hoppla! <br/> Seite nicht gefunden... </p>",
     "DescNOTFOUND": "Die von Ihnen gesuchte Seite konnte leider nicht gefunden werden.",

resources/i18n/el.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "Τα περιβάλλοντα μου",
       "ResourcePolicy": "Πολιτική Πόρων"
     },
-    "YouAreOffline": "Είστε πλέον εκτός σύνδεσης",
+    "YouAreOffline": "Offline: Δεν είναι συνδεδεμένος σε κανένα δίκτυο.",
     "YouAreOnline": "Είστε πλέον συνδεδεμένοι",
     "NOTFOUND": " α0d4554eb75c21z0 Ωχ! <br/> Η σελίδα δεν βρέθηκε ... </p>",
     "DescNOTFOUND": "Δυστυχώς, δεν ήταν δυνατή η εύρεση της σελίδας που αναζητάτε.",

resources/i18n/en.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "My Environments",
       "ResourcePolicy": "Resource Policy"
     },
-    "YouAreOffline": "You are now offline",
+    "YouAreOffline": "Offline: Not connected to any networks.",
     "YouAreOnline": "You are now online",
     "NOTFOUND": "<p>Oops!<br/>Page not Found...</p>",
     "DescNOTFOUND": "Sorry, the page you are looking for could not be found.",

resources/i18n/es.json

@@ -1505,7 +1505,7 @@
     "DescNOTFOUND": "Lo sentimos, no se ha encontrado la página que busca.",
     "NOTFOUND": "<p>¡Oops!<br/>Página no encontrada...</p>",
     "UNAUTHORIZEDACCESS": "Acceso no autorizado",
-    "YouAreOffline": "Ahora está desconectado",
+    "YouAreOffline": "Desconectado: No conectado a ninguna red.",
     "YouAreOnline": "Ya está en línea",
     "menu": {
       "AIAccelerator": "Acelerador de IA",

resources/i18n/fi.json

@@ -1503,7 +1503,7 @@
     "DescNOTFOUND": "Valitettavasti etsimääsi sivua ei löytynyt.",
     "NOTFOUND": "<p>Oops!<br/>Sivua ei löydy...</p>",
     "UNAUTHORIZEDACCESS": "Luvaton pääsy",
-    "YouAreOffline": "Olet nyt offline-tilassa",
+    "YouAreOffline": "Offline: Ei yhteyttä mihinkään verkkoon.",
     "YouAreOnline": "Olet nyt verkossa",
     "menu": {
       "AIAccelerator": "AI-kiihdyttämö",

resources/i18n/fr.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "Mes environnements",
       "ResourcePolicy": "Politique des ressources"
     },
-    "YouAreOffline": "Vous êtes maintenant hors ligne",
+    "YouAreOffline": "Hors ligne : N'est connecté à aucun réseau.",
     "YouAreOnline": "Vous êtes maintenant en ligne",
     "NOTFOUND": " <p> Oups ! <br/> Page non trouvée... </p>",
     "DescNOTFOUND": "Désolé, la page que vous recherchez est introuvable.",

resources/i18n/id.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "Lingkungan Saya",
       "ResourcePolicy": "Kebijakan Sumber Daya"
     },
-    "YouAreOffline": "Anda sekarang offline",
+    "YouAreOffline": "Offline: Tidak terhubung ke jaringan apa pun.",
     "YouAreOnline": "Anda sekarang online",
     "NOTFOUND": " <p> Ups! <br/> Halaman tidak ditemukan... </p>",
     "DescNOTFOUND": "Maaf, halaman yang anda cari tidak ditemukan.",

resources/i18n/it.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "I miei ambienti",
       "ResourcePolicy": "Politica delle risorse"
     },
-    "YouAreOffline": "Ora sei offline",
+    "YouAreOffline": "Non in linea: Non è collegato ad alcuna rete.",
     "YouAreOnline": "Ora sei online",
     "NOTFOUND": " <p> Ops! <br/> Pagina non trovata... </p>",
     "DescNOTFOUND": "Siamo spiacenti, la pagina che stai cercando non è stata trovata.",

resources/i18n/ja.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "私の環境",
       "ResourcePolicy": "リソースポリシー"
     },
-    "YouAreOffline": "あなたは今オフラインです",
+    "YouAreOffline": "オフライン：どのネットワークにも接続されていない。",
     "YouAreOnline": "あなたは今オンラインです",
     "NOTFOUND": " <p>おっと！ <br/>ページが見つかりません... </p>",
     "DescNOTFOUND": "申し訳ありませんが、お探しのページが見つかりませんでした。",

resources/i18n/ko.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "나의 실행 환경",
       "ResourcePolicy": "자원 정책"
     },
-    "YouAreOffline": "오프라인 상태가 되었습니다",
+    "YouAreOffline": "오프라인: 네트워크에 연결되어 있지 않습니다.",
     "YouAreOnline": "온라인 상태가 되었습니다",
     "NOTFOUND": "<p>요청하신 페이지를 찾을 수 없습니다.</p>",
     "DescNOTFOUND": "요청하신 페이지가 사라졌거나, 잘못된 경로를 입력하였습니다.",

resources/i18n/mn.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "Миний орчин",
       "ResourcePolicy": "Нөөцийн бодлого"
     },
-    "YouAreOffline": "Та одоо офлайн байна",
+    "YouAreOffline": "Офлайн: Ямар ч сүлжээнд холбогдоогүй.",
     "YouAreOnline": "Та одоо онлайн байна",
     "NOTFOUND": " <p> Өө! <br/> хуудас олдсонгүй ... </p>",
     "DescNOTFOUND": "Уучлаарай, таны хайж буй хуудас олдсонгүй.",

resources/i18n/ms.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "Persekitaran Saya",
       "ResourcePolicy": "Dasar Sumber"
     },
-    "YouAreOffline": "Anda kini berada di luar talian",
+    "YouAreOffline": "Luar talian: Tidak disambungkan ke mana-mana rangkaian.",
     "YouAreOnline": "Anda kini dalam talian",
     "NOTFOUND": " <p> Alamak! <br/> Halaman tidak dijumpai ... </p>",
     "DescNOTFOUND": "Maaf, halaman yang anda cari tidak dapat dijumpai.",

resources/i18n/pl.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "Moje Środowiska",
       "ResourcePolicy": "Polityka zasobów"
     },
-    "YouAreOffline": "Jesteś teraz offline",
+    "YouAreOffline": "Offline: Brak połączenia z siecią.",
     "YouAreOnline": "Jesteś teraz online",
     "NOTFOUND": " <p> Ups! <br/> Nie znaleziono strony... </p>",
     "DescNOTFOUND": "Przepraszamy, nie można znaleźć strony, której szukasz.",

resources/i18n/pt-BR.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "Meus ambientes",
       "ResourcePolicy": "Política de Recursos"
     },
-    "YouAreOffline": "Agora você está offline",
+    "YouAreOffline": "Desligado: Não está ligado a nenhuma rede.",
     "YouAreOnline": "Agora você está online",
     "NOTFOUND": " <p> Ops! <br/> Página não encontrada ... </p>",
     "DescNOTFOUND": "Desculpe, a página que você está procurando não foi encontrada.",

resources/i18n/pt.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "Meus ambientes",
       "ResourcePolicy": "Política de Recursos"
     },
-    "YouAreOffline": "Agora você está offline",
+    "YouAreOffline": "Desligado: Não está ligado a nenhuma rede.",
     "YouAreOnline": "Agora você está online",
     "NOTFOUND": " <p> Ops! <br/> Página não encontrada ... </p>",
     "DescNOTFOUND": "Desculpe, a página que você está procurando não foi encontrada.",

resources/i18n/ru.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "Моя среда",
       "ResourcePolicy": "Ресурсная политика"
     },
-    "YouAreOffline": "Вы сейчас не в сети",
+    "YouAreOffline": "Не в сети: Не подключен ни к одной сети.",
     "YouAreOnline": "Вы сейчас в сети",
     "NOTFOUND": " <p> Ой! <br/> Страница не найдена ... </p>",
     "DescNOTFOUND": "Извините, страница, которую вы ищете, не может быть найдена.",

resources/i18n/tr.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "Ortamlarım",
       "ResourcePolicy": "Kaynak Politikası"
     },
-    "YouAreOffline": "Şu anda çevrimdışısın",
+    "YouAreOffline": "Çevrimdışı: Herhangi bir ağa bağlı değil.",
     "YouAreOnline": "artık çevrimiçisin",
     "NOTFOUND": " <p> Hata! <br/> Sayfa Bulunamadı... </p>",
     "DescNOTFOUND": "Üzgünüz, aradığınız sayfa bulunamadı.",

resources/i18n/vi.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "Môi trường của tôi",
       "ResourcePolicy": "Chính sách tài nguyên"
     },
-    "YouAreOffline": "Bạn hiện đang ngoại tuyến",
+    "YouAreOffline": "Ngoại tuyến: Không kết nối với bất kỳ mạng nào.",
     "YouAreOnline": "Bạn hiện đang trực tuyến",
     "NOTFOUND": " <p> Rất tiếc! <br/> Không tìm thấy trang ... </p>",
     "DescNOTFOUND": "Xin lỗi, không thể tìm thấy trang bạn đang tìm.",

resources/i18n/zh-CN.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "我的环境",
       "ResourcePolicy": "资源政策"
     },
-    "YouAreOffline": "您现在离线",
+    "YouAreOffline": "脱机：未连接任何网络。",
     "YouAreOnline": "您现在在线",
     "NOTFOUND": " <p> 糟糕！ <br/> 页面未找到... </p>",
     "DescNOTFOUND": "抱歉，找不到您要找的页面。",

resources/i18n/zh-TW.json

@@ -68,7 +68,7 @@
       "MyEnvironments": "我的環境",
       "ResourcePolicy": "資源政策"
     },
-    "YouAreOffline": "您現在離線",
+    "YouAreOffline": "脱机：未连接任何网络。",
     "YouAreOnline": "您現在在線",
     "NOTFOUND": " <p> 糟糕！ <br/> 頁面未找到... </p>",
     "DescNOTFOUND": "抱歉，找不到您要找的頁面。",

src/backend-ai-app.ts

@@ -5,8 +5,6 @@
 export const UPDATE_PAGE = 'UPDATE_PAGE';
 export const UPDATE_OFFLINE = 'UPDATE_OFFLINE';
 export const UPDATE_DRAWER_STATE = 'UPDATE_DRAWER_STATE';
-export const OPEN_SNACKBAR = 'OPEN_SNACKBAR';
-export const CLOSE_SNACKBAR = 'CLOSE_SNACKBAR';
 
 export const navigate =
   (path: any, params: Record<string, unknown> = {}) =>
@@ -192,30 +190,6 @@ const updatePage = (page, params) => {
   };
 };
 
-let offlineTimer;
-
-export const showOffline = () => (dispatch) => {
-  dispatch({
-    type: OPEN_SNACKBAR,
-  });
-  window.clearTimeout(offlineTimer);
-  offlineTimer = window.setTimeout(
-    () => dispatch({ type: CLOSE_SNACKBAR }),
-    3000,
-  );
-};
-
-export const updateOffline = (offline) => (dispatch, getState) => {
-  // Show the snackbar only if offline status changes.
-  if (offline !== getState().app.offline) {
-    dispatch(showOffline());
-  }
-  dispatch({
-    type: UPDATE_OFFLINE,
-    offline,
-  });
-};
-
 export const updateDrawerState = (opened) => {
   return {
     type: UPDATE_DRAWER_STATE,