From dcc87523c2513a3935689ba979a82d50bcb0df89 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 5 Dec 2024 11:14:13 +0700
Subject: [PATCH] chore: prompt ui when offline mode

---
 web/containers/ModelDropdown/index.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/web/containers/ModelDropdown/index.tsx b/web/containers/ModelDropdown/index.tsx
index dd6caa795c..a26673dfb2 100644
--- a/web/containers/ModelDropdown/index.tsx
+++ b/web/containers/ModelDropdown/index.tsx
@@ -10,6 +10,7 @@ import {
   ScrollArea,
   Tabs,
   useClickOutside,
+  useOnlineStatus,
 } from '@janhq/joi'
 
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
@@ -18,6 +19,7 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
   DownloadCloudIcon,
+  WifiOff,
   XIcon,
 } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
@@ -94,6 +96,8 @@ const ModelDropdown = ({
 
   useClickOutside(() => setOpen(false), null, [dropdownOptions, toggle])
 
+  const { isOnline } = useOnlineStatus()
+
   const [showEngineListModel, setShowEngineListModel] = useAtom(
     showEngineListModelAtom
   )
@@ -544,12 +548,16 @@ const ModelDropdown = ({
                               key={model.id}
                               className={twMerge(
                                 'flex items-center justify-between gap-4 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]',
-                                !apiKey
+                                (!apiKey || !isOnline) &&
+                                  !isLocalEngine(model.engine)
                                   ? 'cursor-not-allowed text-[hsla(var(--text-tertiary))]'
                                   : 'text-[hsla(var(--text-primary))]'
                               )}
                               onClick={() => {
-                                if (!apiKey && !isLocalEngine(model.engine))
+                                if (
+                                  (!apiKey || !isOnline) &&
+                                  !isLocalEngine(model.engine)
+                                )
                                   return null
                                 if (isDownloaded) {
                                   onClickModelItem(model.id)
@@ -613,6 +621,12 @@ const ModelDropdown = ({
                 </div>
               )
             })}
+            {!isOnline && searchFilter === 'remote' && (
+              <div className="sticky bottom-0 flex items-start gap-2 border-t border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] p-3 text-[hsla(var(--text-secondary))]">
+                <WifiOff />
+                <p>No internet connection. Please use on-device models.</p>
+              </div>
+            )}
           </ScrollArea>
         </div>
       </div>