From 1de54fe110fb5d7c095a8219cef1b34ecb2deffb Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Thu, 25 Sep 2025 23:37:54 +0530
Subject: [PATCH] add network connection banner in live chat widget

---
 .../widget/src/components/ConnectionBanner.vue   | 16 ++++++++++++++++
 frontend/apps/widget/src/layouts/MainLayout.vue  |  4 ++++
 i18n/en.json                                     |  1 +
 3 files changed, 21 insertions(+)
 create mode 100644 frontend/apps/widget/src/components/ConnectionBanner.vue

diff --git a/frontend/apps/widget/src/components/ConnectionBanner.vue b/frontend/apps/widget/src/components/ConnectionBanner.vue
new file mode 100644
index 00000000..6e0648b6
--- /dev/null
+++ b/frontend/apps/widget/src/components/ConnectionBanner.vue
@@ -0,0 +1,16 @@
+<template>
+  <div
+    v-if="!isOnline"
+    class="bg-amber-100 text-amber-900 dark:bg-amber-950 dark:text-amber-300 px-4 py-2 text-center text-sm"
+  >
+    <div class="flex items-center justify-center gap-2">
+      <div class="w-2 h-2 bg-amber-900 dark:bg-amber-300 rounded-full animate-pulse"></div>
+      {{ $t('globals.messages.noInternetConnection') }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useOnline } from '@vueuse/core'
+const isOnline = useOnline()
+</script>
diff --git a/frontend/apps/widget/src/layouts/MainLayout.vue b/frontend/apps/widget/src/layouts/MainLayout.vue
index 9b91f7db..63fbd076 100644
--- a/frontend/apps/widget/src/layouts/MainLayout.vue
+++ b/frontend/apps/widget/src/layouts/MainLayout.vue
@@ -28,6 +28,9 @@
           >Powered by <a href="https://libredesk.io" target="_blank">Libredesk</a></span
         >
       </div>
+
+      <!-- Network Connection Banner -->
+      <ConnectionBanner />
     </Tabs>
   </div>
 </template>
@@ -38,6 +41,7 @@ import HomeView from '@widget/views/HomeView.vue'
 import { Home, MessageCircle } from 'lucide-vue-next'
 import ChatView from '@widget/views/ChatView.vue'
 import MessagesView from '@widget/views/MessagesView.vue'
+import ConnectionBanner from '@widget/components/ConnectionBanner.vue'
 import { useWidgetStore } from '@widget/store/widget.js'
 const widgetStore = useWidgetStore()
 </script>
diff --git a/i18n/en.json b/i18n/en.json
index 79c7b901..dc6000d4 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -211,6 +211,7 @@
   "globals.terms.tls": "TLS | TLSs",
   "globals.terms.credential": "Credential | Credentials",
   "globals.terms.unAuthorized": "Unauthorized",
+  "globals.messages.noInternetConnection": "No internet connection",
   "globals.messages.invalid": "Invalid {name}",
   "globals.messages.custom": "Custom {name}",
   "globals.messages.replying": "Replying",