feat: disabled remote model and show prompt users to use on-device models when offline mode

joi/src/hooks/useOnlineStatus/index.ts

@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react'
+
+const useOnlineStatus = () => {
+  const [isOnline, setIsOnline] = useState(navigator.onLine)
+
+  useEffect(() => {
+    const handleOnline = () => setIsOnline(true)
+    const handleOffline = () => setIsOnline(false)
+
+    window.addEventListener('online', handleOnline)
+    window.addEventListener('offline', handleOffline)
+
+    return () => {
+      window.removeEventListener('online', handleOnline)
+      window.removeEventListener('offline', handleOffline)
+    }
+  }, [])
+
+  return { isOnline }
+}
+
+export { useOnlineStatus }

joi/src/hooks/useOnlineStatus/useOnlineStatus.test.ts

@@ -0,0 +1,62 @@
+import { renderHook, act } from '@testing-library/react'
+import { useOnlineStatus } from './index'
+
+describe('useOnlineStatus', () => {
+  beforeEach(() => {
+    jest.spyOn(window, 'addEventListener')
+    jest.spyOn(window, 'removeEventListener')
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  it('should initialize with the correct online status', () => {
+    const { result } = renderHook(() => useOnlineStatus())
+    expect(result.current.isOnline).toBe(navigator.onLine)
+  })
+
+  it('should set online status to true when the online event is triggered', () => {
+    const { result } = renderHook(() => useOnlineStatus())
+
+    act(() => {
+      window.dispatchEvent(new Event('online'))
+    })
+
+    expect(result.current.isOnline).toBe(true)
+  })
+
+  it('should set online status to false when the offline event is triggered', () => {
+    const { result } = renderHook(() => useOnlineStatus())
+
+    act(() => {
+      window.dispatchEvent(new Event('offline'))
+    })
+
+    expect(result.current.isOnline).toBe(false)
+  })
+
+  it('should register event listeners on mount and unregister on unmount', () => {
+    const { unmount } = renderHook(() => useOnlineStatus())
+
+    expect(window.addEventListener).toHaveBeenCalledWith(
+      'online',
+      expect.any(Function)
+    )
+    expect(window.addEventListener).toHaveBeenCalledWith(
+      'offline',
+      expect.any(Function)
+    )
+
+    unmount()
+
+    expect(window.removeEventListener).toHaveBeenCalledWith(
+      'online',
+      expect.any(Function)
+    )
+    expect(window.removeEventListener).toHaveBeenCalledWith(
+      'offline',
+      expect.any(Function)
+    )
+  })
+})

joi/src/index.test.ts

@@ -39,5 +39,6 @@ describe('Exports', () => {
     expect(components.useClickOutside).toBeDefined()
     expect(components.useOs).toBeDefined()
     expect(components.useMediaQuery).toBeDefined()
+    expect(components.useOnlineStatus).toBeDefined()
   })
 })

joi/src/index.ts

@@ -19,3 +19,4 @@ export * from './hooks/useTextSelection'
 export * from './hooks/useClickOutside'
 export * from './hooks/useOs'
 export * from './hooks/useMediaQuery'
+export * from './hooks/useOnlineStatus'

web/containers/ModelDropdown/index.tsx

@@ -10,6 +10,7 @@
   ScrollArea,
   Tabs,
   useClickOutside,
+  useOnlineStatus,
 } from '@janhq/joi'
 
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
@@ -18,6 +19,7 @@
   ChevronDownIcon,
   ChevronUpIcon,
   DownloadCloudIcon,
+  WifiOff,
   XIcon,
 } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
@@ -94,12 +96,14 @@
 
   useClickOutside(() => setOpen(false), null, [dropdownOptions, toggle])
 
+  const { isOnline } = useOnlineStatus()
+
   const [showEngineListModel, setShowEngineListModel] = useAtom(
     showEngineListModelAtom
   )
 
   const isModelSupportRagAndTools = useCallback((model: Model) => {
     return (
       model?.engine === InferenceEngine.openai ||
       isLocalEngine(model?.engine as InferenceEngine)
     )
@@ -110,7 +114,7 @@
       configuredModels
         .concat(
           downloadedModels.filter(
             (e) => !configuredModels.some((x) => x.id === e.id)
           )
         )
         .filter((e) =>
@@ -120,24 +124,24 @@
           if (searchFilter === 'local') {
             return isLocalEngine(e.engine)
           }
           if (searchFilter === 'remote') {
             return !isLocalEngine(e.engine)
           }
         })
         .sort((a, b) => a.name.localeCompare(b.name))
         .sort((a, b) => {
           const aInDownloadedModels = downloadedModels.some(
             (item) => item.id === a.id
           )
           const bInDownloadedModels = downloadedModels.some(
             (item) => item.id === b.id
           )
           if (aInDownloadedModels && !bInDownloadedModels) {
             return -1
           } else if (!aInDownloadedModels && bInDownloadedModels) {
             return 1
           } else {
             return 0
           }
         }),
     [configuredModels, searchText, searchFilter, downloadedModels]
@@ -145,7 +149,7 @@
 
   useEffect(() => {
     if (open && searchInputRef.current) {
       searchInputRef.current.focus()
     }
   }, [open])
 
@@ -162,9 +166,9 @@
 
   const onClickModelItem = useCallback(
     async (modelId: string) => {
       const model = downloadedModels.find((m) => m.id === modelId)
       setSelectedModel(model)
       setOpen(false)
 
       if (activeThread) {
         // Change assistand tools based on model support RAG
@@ -544,12 +548,16 @@
                               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 @@
                 </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>