add network connection banner in live chat widget

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>

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>

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