chore: update engines list on changes

extensions/engine-management-extension/src/index.ts

@@ -13,6 +13,7 @@ import {
   joinPath,
   events,
   ModelEvent,
+  EngineEvent,
 } from '@janhq/core'
 import ky, { HTTPError } from 'ky'
 import PQueue from 'p-queue'
@@ -295,6 +296,7 @@ export default class JSONEngineManagementExtension extends EngineManagementExten
           await this.addRemoteEngine(data).catch(console.error)
         })
       )
+      events.emit(EngineEvent.OnEngineUpdate, {})
       DEFAULT_REMOTE_MODELS.forEach(async (data: Model) => {
         await this.addRemoteModel(data).catch(() => {})
       })

web/containers/ModelDropdown/index.tsx

@@ -43,6 +43,7 @@ import { manualRecommendationModel } from '@/utils/model'
 import { getLogoEngine } from '@/utils/modelEngine'
 
 import { activeAssistantAtom } from '@/helpers/atoms/Assistant.atom'
+import { installedEnginesAtom } from '@/helpers/atoms/Engines.atom'
 import {
   configuredModelsAtom,
   getDownloadingModelAtom,
@@ -85,7 +86,8 @@ const ModelDropdown = ({
   const [dropdownOptions, setDropdownOptions] = useState<HTMLDivElement | null>(
     null
   )
-  const { engines } = useGetEngines()
+
+  const engines = useAtomValue(installedEnginesAtom)
 
   const downloadStates = useAtomValue(modelDownloadStateAtom)
   const setThreadModelParams = useSetAtom(setThreadModelParamsAtom)

web/containers/Providers/DataLoader.tsx

@@ -6,6 +6,7 @@ import { AppConfiguration, getUserHomePath } from '@janhq/core'
 import { useSetAtom } from 'jotai'
 
 import useAssistants from '@/hooks/useAssistants'
+import useEngines from '@/hooks/useEngines'
 import useGetSystemResources from '@/hooks/useGetSystemResources'
 import useModels from '@/hooks/useModels'
 import useThreads from '@/hooks/useThreads'
@@ -25,6 +26,7 @@ const DataLoader: React.FC = () => {
   const setJanDefaultDataFolder = useSetAtom(defaultJanDataFolderAtom)
   const setJanSettingScreen = useSetAtom(janSettingScreenAtom)
   const { getData: loadModels } = useModels()
+  const { getData: loadEngines } = useEngines()
 
   useThreads()
   useAssistants()
@@ -33,6 +35,7 @@ const DataLoader: React.FC = () => {
   useEffect(() => {
     // Load data once
     loadModels()
+    loadEngines()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 

web/helpers/atoms/Engines.atom.ts

@@ -0,0 +1,7 @@
+import { EngineConfig, Engines } from '@janhq/core'
+import { atom } from 'jotai'
+
+/**
+ * Store all of the installed engines including local and remote engines
+ */
+export const installedEnginesAtom = atom<Engines>()

web/hooks/useEngines.ts

@@ -0,0 +1,57 @@
+import { useCallback, useEffect } from 'react'
+
+import {
+  ExtensionTypeEnum,
+  Model,
+  ModelEvent,
+  ModelExtension,
+  events,
+  ModelManager,
+  EngineEvent,
+  EngineManagementExtension,
+  Engines,
+} from '@janhq/core'
+
+import { useSetAtom } from 'jotai'
+
+import { useDebouncedCallback } from 'use-debounce'
+
+import { extensionManager } from '@/extension'
+
+import { installedEnginesAtom } from '@/helpers/atoms/Engines.atom'
+
+/**
+ * useModels hook - Handles the state of models
+ * It fetches the downloaded models, configured models and default model from Model Extension
+ * and updates the atoms accordingly.
+ */
+const useEngines = () => {
+  const setInstalledEngines = useSetAtom(installedEnginesAtom)
+
+  const getData = useCallback(() => {
+    getEngines().then(setInstalledEngines)
+  }, [setInstalledEngines])
+
+  const reloadData = useDebouncedCallback(() => getData(), 300)
+
+  const getEngines = async (): Promise<Engines> =>
+    extensionManager
+      .get<EngineManagementExtension>(ExtensionTypeEnum.Engine)
+      ?.getEngines()
+      .catch(() => ({}) as Engines) ?? ({} as Engines)
+
+  useEffect(() => {
+    // Listen for engine updates
+    events.on(EngineEvent.OnEngineUpdate, reloadData)
+    return () => {
+      // Remove listener on unmount
+      events.off(EngineEvent.OnEngineUpdate, reloadData)
+    }
+  }, [reloadData])
+
+  return {
+    getData,
+  }
+}
+
+export default useEngines

web/hooks/useStarterScreen.ts

@@ -1,19 +1,19 @@
 import { useMemo } from 'react'
 
+import { InferenceEngine, EngineConfig } from '@janhq/core'
 import { useAtomValue } from 'jotai'
 
 import { isLocalEngine } from '@/utils/modelEngine'
 
+import { installedEnginesAtom } from '@/helpers/atoms/Engines.atom'
 import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
 import { threadsAtom } from '@/helpers/atoms/Thread.atom'
-import { InferenceEngine, EngineConfig } from '@janhq/core/.'
-import { useGetEngines } from './useEngineManagement'
 
 export function useStarterScreen() {
   const downloadedModels = useAtomValue(downloadedModelsAtom)
   const threads = useAtomValue(threadsAtom)
 
-  const { engines } = useGetEngines()
+  const engines = useAtomValue(installedEnginesAtom)
 
   const remoteEngines =
     engines &&

web/screens/Settings/SettingLeftPanel/index.tsx

@@ -6,21 +6,21 @@ 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,
   showSettingActiveRemoteEngineAtom,
 } from '@/helpers/atoms/Extension.atom'
 import { janSettingScreenAtom } from '@/helpers/atoms/Setting.atom'
 
 const SettingLeftPanel = () => {
-  const { engines } = useGetEngines()
+  const engines = useAtomValue(installedEnginesAtom)
   const settingScreens = useAtomValue(janSettingScreenAtom)
 
   const showSettingActiveLocalEngine = useAtomValue(