fix: can not download multiple models at once (#867)

web/containers/Providers/EventListener.tsx

@@ -57,9 +57,11 @@ export default function EventListenerWrapper({ children }: PropsWithChildren) {
         (_event: string, callback: any) => {
           if (callback && callback.fileName) {
             const modelId = callback.fileName.split('/').pop() ?? ''
-            setDownloadStateSuccess(modelId)
 
             const model = modelsRef.current.find((e) => e.id === modelId)
+
+            setDownloadStateSuccess(modelId)
+
             if (model)
               extensionManager
                 .get<ModelExtension>(ExtensionType.Model)

web/helpers/atoms/Model.atom.ts

@@ -3,4 +3,24 @@ import { atom } from 'jotai'
 
 export const stateModel = atom({ state: 'start', loading: false, model: '' })
 export const activeAssistantModelAtom = atom<Model | undefined>(undefined)
+
 export const downloadingModelsAtom = atom<Model[]>([])
+
+export const addNewDownloadingModelAtom = atom(
+  null,
+  (get, set, model: Model) => {
+    const currentModels = get(downloadingModelsAtom)
+    set(downloadingModelsAtom, [...currentModels, model])
+  }
+)
+
+export const removeDownloadingModelAtom = atom(
+  null,
+  (get, set, modelId: string) => {
+    const currentModels = get(downloadingModelsAtom)
+    set(
+      downloadingModelsAtom,
+      currentModels.filter((e) => e.id !== modelId)
+    )
+  }
+)

web/hooks/useDownloadModel.ts

@@ -1,17 +1,15 @@
 import { Model, ExtensionType, ModelExtension } from '@janhq/core'
 
-import { useAtom } from 'jotai'
+import { useSetAtom } from 'jotai'
 
 import { useDownloadState } from './useDownloadState'
 
 import { extensionManager } from '@/extension/ExtensionManager'
-import { downloadingModelsAtom } from '@/helpers/atoms/Model.atom'
+import { addNewDownloadingModelAtom } from '@/helpers/atoms/Model.atom'
 
 export default function useDownloadModel() {
   const { setDownloadState } = useDownloadState()
-  const [downloadingModels, setDownloadingModels] = useAtom(
-    downloadingModelsAtom
-  )
+  const addNewDownloadingModel = useSetAtom(addNewDownloadingModelAtom)
 
   const downloadModel = async (model: Model) => {
     // set an initial download state
@@ -29,7 +27,8 @@ export default function useDownloadModel() {
       },
     })
 
-    setDownloadingModels([...downloadingModels, model])
+    addNewDownloadingModel(model)
+
     await extensionManager
       .get<ModelExtension>(ExtensionType.Model)
       ?.downloadModel(model)

web/hooks/useDownloadState.ts

@@ -18,7 +18,7 @@ const setDownloadStateSuccessAtom = atom(null, (get, set, modelId: string) => {
   const currentState = { ...get(modelDownloadStateAtom) }
   const state = currentState[modelId]
   if (!state) {
-    console.error(`Cannot find download state for ${modelId}`)
+    console.debug(`Cannot find download state for ${modelId}`)
     return
   }
   delete currentState[modelId]

web/hooks/useSendChatMessage.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import {
   ChatCompletionMessage,
@@ -11,6 +11,7 @@ import {
   Thread,
   ThreadMessage,
   events,
+  Model,
 } from '@janhq/core'
 import { ConversationalExtension } from '@janhq/core'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
@@ -48,6 +49,12 @@ export default function useSendChatMessage() {
   const { startModel } = useActiveModel()
   const [queuedMessage, setQueuedMessage] = useState(false)
 
+  const modelRef = useRef<Model | undefined>()
+
+  useEffect(() => {
+    modelRef.current = activeModel
+  }, [activeModel])
+
   const resendChatMessage = async () => {
     if (!activeThread) {
       console.error('No active thread')