chore: refactor - clean out useEngines - mutate swr to update

extensions/engine-management-extension/models/anthropic.json

@@ -8,7 +8,7 @@
     "inference_params": {
       "max_tokens": 4096,
       "temperature": 0.7,
-      "stream": false
+      "stream": true
     },
     "engine": "anthropic"
   },
@@ -21,7 +21,7 @@
     "inference_params": {
       "max_tokens": 8192,
       "temperature": 0.7,
-      "stream": false
+      "stream": true
     },
     "engine": "anthropic"
   },

web/containers/Layout/BottomPanel/SystemMonitor/TableActiveModel/index.tsx

@@ -1,19 +1,20 @@
 import { Tooltip, Button, Badge } from '@janhq/joi'
 
-import { useAtom, useAtomValue } from 'jotai'
+import { useAtom } from 'jotai'
 
 import { useActiveModel } from '@/hooks/useActiveModel'
 
+import { useGetEngines } from '@/hooks/useEngineManagement'
+
 import { toGibibytes } from '@/utils/converter'
 
 import { isLocalEngine } from '@/utils/modelEngine'
 
-import { installedEnginesAtom } from '@/helpers/atoms/Engines.atom'
 import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
 
 const TableActiveModel = () => {
   const { activeModel, stateModel, stopModel } = useActiveModel()
-  const engines = useAtomValue(installedEnginesAtom)
+  const { engines } = useGetEngines()
 
   const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
 
@@ -49,9 +50,9 @@
                             : 'primary'
                         }
                         onClick={() => {
                           stopModel()
                           window.core?.api?.stopServer()
                           setServerEnabled(false)
                         }}
                       >
                         Stop

web/containers/ModelDropdown/index.tsx

@@ -31,6 +31,7 @@
 import { useCreateNewThread } from '@/hooks/useCreateNewThread'
 import useDownloadModel from '@/hooks/useDownloadModel'
 import { modelDownloadStateAtom } from '@/hooks/useDownloadState'
+import { useGetEngines } from '@/hooks/useEngineManagement'
 
 import useRecommendedModel from '@/hooks/useRecommendedModel'
 
@@ -42,7 +43,6 @@
 import { getLogoEngine } from '@/utils/modelEngine'
 
 import { activeAssistantAtom } from '@/helpers/atoms/Assistant.atom'
-import { installedEnginesAtom } from '@/helpers/atoms/Engines.atom'
 import {
   configuredModelsAtom,
   getDownloadingModelAtom,
@@ -86,7 +86,7 @@
     null
   )
 
-  const engines = useAtomValue(installedEnginesAtom)
+  const { engines } = useGetEngines()
 
   const downloadStates = useAtomValue(modelDownloadStateAtom)
   const setThreadModelParams = useSetAtom(setThreadModelParamsAtom)
@@ -123,8 +123,8 @@
 
   const handleChangeStateOpen = useCallback(
     (state: boolean) => {
       setOpen(state)
       setModelDropdownState(state)
     },
     [setModelDropdownState]
   )
@@ -134,7 +134,7 @@
       configuredModels
         .concat(
           downloadedModels.filter(
             (e) => !configuredModels.some((x) => x.id === e.id)
           )
         )
         .filter((e) =>
@@ -143,26 +143,26 @@
         .filter((e) => {
           if (searchFilter === 'local') {
             return (
               engineList.find((t) => t.engine?.engine === e.engine)?.type ===
               'local'
             )
           }
           return true
         })
         .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, engineList]

web/containers/Providers/DataLoader.tsx

@@ -2,11 +2,18 @@
 
 import { Fragment, useEffect } from 'react'
 
-import { AppConfiguration, getUserHomePath } from '@janhq/core'
+import {
+  AppConfiguration,
+  EngineEvent,
+  events,
+  getUserHomePath,
+} from '@janhq/core'
 import { useSetAtom } from 'jotai'
 
+import { useDebouncedCallback } from 'use-debounce'
+
 import useAssistants from '@/hooks/useAssistants'
-import useEngines from '@/hooks/useEngines'
+import { useGetEngines } from '@/hooks/useEngineManagement'
 import useGetSystemResources from '@/hooks/useGetSystemResources'
 import useModels from '@/hooks/useModels'
 import useThreads from '@/hooks/useThreads'
@@ -26,7 +33,7 @@ const DataLoader: React.FC = () => {
   const setJanDefaultDataFolder = useSetAtom(defaultJanDataFolderAtom)
   const setJanSettingScreen = useSetAtom(janSettingScreenAtom)
   const { getData: loadModels } = useModels()
-  const { getData: loadEngines } = useEngines()
+  const { mutate } = useGetEngines()
 
   useThreads()
   useAssistants()
@@ -35,9 +42,19 @@ const DataLoader: React.FC = () => {
   useEffect(() => {
     // Load data once
     loadModels()
-    loadEngines()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
+  const reloadData = useDebouncedCallback(() => {
+    mutate()
+  }, 300)
+
+  useEffect(() => {
+    events.on(EngineEvent.OnEngineUpdate, reloadData)
+    return () => {
+      // Remove listener on unmount
+      events.off(EngineEvent.OnEngineUpdate, reloadData)
+    }
+  }, [reloadData])
 
   useEffect(() => {
     window.core?.api

web/containers/Providers/ModelHandler.tsx

@@ -23,6 +23,8 @@ import { ulid } from 'ulidx'
 
 import { activeModelAtom, stateModelAtom } from '@/hooks/useActiveModel'
 
+import { useGetEngines } from '@/hooks/useEngineManagement'
+
 import { isLocalEngine } from '@/utils/modelEngine'
 
 import { extensionManager } from '@/extension'
@@ -34,7 +36,6 @@ import {
   deleteMessageAtom,
   subscribedGeneratingMessageAtom,
 } from '@/helpers/atoms/ChatMessage.atom'
-import { installedEnginesAtom } from '@/helpers/atoms/Engines.atom'
 import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
 import {
   updateThreadWaitingForResponseAtom,
@@ -75,7 +76,7 @@ export default function ModelHandler() {
   const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
   const activeModelParamsRef = useRef(activeModelParams)
   const setTokenSpeed = useSetAtom(tokenSpeedAtom)
-  const engines = useAtomValue(installedEnginesAtom)
+  const { engines } = useGetEngines()
 
   useEffect(() => {
     activeThreadRef.current = activeThread

web/hooks/useRecommendedModel.ts

@@ -6,8 +6,9 @@ import { atom, useAtomValue } from 'jotai'
 
 import { activeModelAtom } from './useActiveModel'
 
+import { useGetEngines } from './useEngineManagement'
+
 import { activeAssistantAtom } from '@/helpers/atoms/Assistant.atom'
-import { installedEnginesAtom } from '@/helpers/atoms/Engines.atom'
 import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
 import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
 
@@ -31,7 +32,7 @@ export default function useRecommendedModel() {
   const activeThread = useAtomValue(activeThreadAtom)
   const downloadedModels = useAtomValue(downloadedModelsAtom)
   const activeAssistant = useAtomValue(activeAssistantAtom)
-  const engines = useAtomValue(installedEnginesAtom)
+  const { engines } = useGetEngines()
 
   const getAndSortDownloadedModels = useCallback(async (): Promise<Model[]> => {
     const models = downloadedModels.sort((a, b) =>

web/hooks/useStarterScreen.ts

@@ -6,15 +6,16 @@ import { useAtomValue } from 'jotai'
 
 import { isLocalEngine } from '@/utils/modelEngine'
 
-import { installedEnginesAtom } from '@/helpers/atoms/Engines.atom'
+import { useGetEngines } from './useEngineManagement'
+
 import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
 import { threadsAtom } from '@/helpers/atoms/Thread.atom'
 
 export function useStarterScreen() {
   const downloadedModels = useAtomValue(downloadedModelsAtom)
   const threads = useAtomValue(threadsAtom)
 
-  const engines = useAtomValue(installedEnginesAtom)
+  const { engines } = useGetEngines()
 
   const remoteEngines =
     engines &&

web/screens/Hub/ModelList/index.tsx

@@ -4,9 +4,10 @@ import { Model } from '@janhq/core'
 
 import { useAtomValue } from 'jotai'
 
+import { useGetEngines } from '@/hooks/useEngineManagement'
+
 import ModelItem from '@/screens/Hub/ModelList/ModelItem'
 
-import { installedEnginesAtom } from '@/helpers/atoms/Engines.atom'
 import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
 
 type Props = {
@@ -15,7 +16,7 @@ type Props = {
 
 const ModelList = ({ models }: Props) => {
   const downloadedModels = useAtomValue(downloadedModelsAtom)
-  const engines = useAtomValue(installedEnginesAtom)
+  const { engines } = useGetEngines()
   const sortedModels: Model[] = useMemo(() => {
     const featuredModels: Model[] = []
     const remoteModels: Model[] = []

web/screens/Settings/Engines/index.tsx

@@ -2,18 +2,18 @@
 
 import { InferenceEngine } from '@janhq/core'
 import { ScrollArea } from '@janhq/joi'
 import { useAtomValue } from 'jotai'
 
+import { useGetEngines } from '@/hooks/useEngineManagement'
+
 import { isLocalEngine } from '@/utils/modelEngine'
 
 import LocalEngineItems from './LocalEngineItem'
 import ModalAddRemoteEngine from './ModalAddRemoteEngine'
 import RemoteEngineItems from './RemoteEngineItem'
 
-import { installedEnginesAtom } from '@/helpers/atoms/Engines.atom'
-
 const Engines = () => {
-  const engines = useAtomValue(installedEnginesAtom)
+  const { engines } = useGetEngines()
 
   return (
     <ScrollArea className="h-full w-full">

web/screens/Settings/MyModels/MyModelList/index.tsx

@@ -2,7 +2,7 @@
 
 import { Model } from '@janhq/core'
 import { Badge, Button, Tooltip, useClickOutside } from '@janhq/joi'
 import { useAtom, useAtomValue } from 'jotai'
 import {
   MoreVerticalIcon,
   PlayIcon,
@@ -14,11 +14,12 @@
 import { useActiveModel } from '@/hooks/useActiveModel'
 import useDeleteModel from '@/hooks/useDeleteModel'
 
+import { useGetEngines } from '@/hooks/useEngineManagement'
+
 import { toGibibytes } from '@/utils/converter'
 
 import { isLocalEngine } from '@/utils/modelEngine'
 
-import { installedEnginesAtom } from '@/helpers/atoms/Engines.atom'
 import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
 
 type Props = {
@@ -32,7 +33,7 @@
   const { deleteModel } = useDeleteModel()
   const [more, setMore] = useState(false)
   const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
-  const engines = useAtomValue(installedEnginesAtom)
+  const { engines } = useGetEngines()
 
   const [menu, setMenu] = useState<HTMLDivElement | null>(null)
   const [toggle, setToggle] = useState<HTMLDivElement | null>(null)

web/screens/Settings/SettingDetail/index.tsx

@@ -1,6 +1,8 @@
 import { InferenceEngine } from '@janhq/core'
 import { useAtomValue } from 'jotai'
 
+import { useGetEngines } from '@/hooks/useEngineManagement'
+
 import Advanced from '@/screens/Settings/Advanced'
 import AppearanceOptions from '@/screens/Settings/Appearance'
 import ExtensionCatalog from '@/screens/Settings/CoreExtensions'
@@ -14,12 +16,11 @@ import Privacy from '@/screens/Settings/Privacy'
 
 import { isLocalEngine } from '@/utils/modelEngine'
 
-import { installedEnginesAtom } from '@/helpers/atoms/Engines.atom'
 import { selectedSettingAtom } from '@/helpers/atoms/Setting.atom'
 
 const SettingDetail = () => {
   const selectedSetting = useAtomValue(selectedSettingAtom)
-  const engines = useAtomValue(installedEnginesAtom)
+  const { engines } = useGetEngines()
 
   switch (selectedSetting) {
     case 'Engines':

web/screens/Settings/SettingLeftPanel/index.tsx

@@ -6,12 +6,13 @@ import { useAtomValue } from 'jotai'
 
 import LeftPanelContainer from '@/containers/LeftPanelContainer'
 
+import { useGetEngines } from '@/hooks/useEngineManagement'
+
 import { getTitleByEngine, isLocalEngine } from '@/utils/modelEngine'
 
 import SettingItem from './SettingItem'
 
 import { extensionManager } from '@/extension'
-import { installedEnginesAtom } from '@/helpers/atoms/Engines.atom'
 
 import {
   showSettingActiveLocalEngineAtom,
@@ -20,7 +21,7 @@ import {
 import { janSettingScreenAtom } from '@/helpers/atoms/Setting.atom'
 
 const SettingLeftPanel = () => {
-  const engines = useAtomValue(installedEnginesAtom)
+  const { engines } = useGetEngines()
   const settingScreens = useAtomValue(janSettingScreenAtom)
 
   const showSettingActiveLocalEngine = useAtomValue(

web/screens/Thread/ThreadCenterPanel/ChatBody/EmptyThread/index.tsx

@@ -7,16 +7,17 @@ import LogoMark from '@/containers/Brand/Logo/Mark'
 
 import { MainViewState } from '@/constants/screens'
 
+import { useGetEngines } from '@/hooks/useEngineManagement'
+
 import { isLocalEngine } from '@/utils/modelEngine'
 
 import { mainViewStateAtom } from '@/helpers/atoms/App.atom'
-import { installedEnginesAtom } from '@/helpers/atoms/Engines.atom'
 import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
 
 const EmptyThread = () => {
   const downloadedModels = useAtomValue(downloadedModelsAtom)
   const setMainViewState = useSetAtom(mainViewStateAtom)
-  const engines = useAtomValue(installedEnginesAtom)
+  const { engines } = useGetEngines()
   const showOnboardingStep = useMemo(
     () =>
       !downloadedModels.some(