fix: download now change state immediately

web/app/_components/ExploreModelItemHeader/index.tsx

@@ -1,7 +1,5 @@
 import SimpleTag from '../SimpleTag'
-import PrimaryButton from '../PrimaryButton'
 import { formatDownloadPercentage, toGigabytes } from '@utils/converter'
-import SecondaryButton from '../SecondaryButton'
 import { useCallback, useEffect, useMemo } from 'react'
 import useGetPerformanceTag from '@hooks/useGetPerformanceTag'
 import useDownloadModel from '@hooks/useDownloadModel'
@@ -58,7 +56,6 @@ const ExploreModelItemHeader: React.FC<Props> = ({
   if (isDownloaded) {
     downloadButton = (
       <Button
-        size="sm"
         themes="accent"
         onClick={() => {
           setMainViewState(MainViewState.MyModel)
@@ -72,17 +69,20 @@ const ExploreModelItemHeader: React.FC<Props> = ({
   if (downloadState != null) {
     // downloading
     downloadButton = (
-      <SecondaryButton
+      <Button
         disabled
-        title={`Downloading (${formatDownloadPercentage(
-          downloadState.percent
-        )})`}
-      />
+        themes="accent"
+        onClick={() => {
+          setMainViewState(MainViewState.MyModel)
+        }}
+      >
+        Downloading {formatDownloadPercentage(downloadState.percent)}
+      </Button>
     )
   }
 
   return (
-    <div className="border-border bg-background/50 flex items-center justify-between rounded-t-md border-b px-4 py-2">
+    <div className="flex items-center justify-between rounded-t-md border-b border-border bg-background/50 px-4 py-2">
       <div className="flex items-center gap-2">
         <span>{exploreModel.name}</span>
         {performanceTag && (

web/app/_components/HistoryItem/index.tsx

@@ -55,9 +55,10 @@ const HistoryItem: React.FC<Props> = ({
         startModel(model._id)
       } else if (activeModel._id !== model._id) {
         // display confirmation modal
-        setConfirmationModalProps({
-          replacingModel: model,
-        })
+        // TODO: temporarily disabled
+        // setConfirmationModalProps({
+        //   replacingModel: model,
+        // })
       }
     }
 

web/app/_components/SwitchingModelConfirmationModal/index.tsx

@@ -82,11 +82,11 @@ const SwitchingModelConfirmationModal: React.FC = () => {
                       <p className="text-sm text-gray-500">
                         Selected conversation is using model{' '}
                         <span className="font-semibold text-black">
-                          {props?.replacingModel._id}
+                          {props?.replacingModel.name}
                         </span>
                         , but the active model is using{' '}
                         <span className="font-semibold text-black">
-                          {activeModel?._id}
+                          {activeModel?.name}
                         </span>
                         .
                       </p>
@@ -95,7 +95,7 @@ const SwitchingModelConfirmationModal: React.FC = () => {
                         Switch to
                         <span className="font-semibold text-black">
                           {' '}
-                          {props?.replacingModel._id}?
+                          {props?.replacingModel.name}?
                         </span>
                       </p>
                     </div>

web/hooks/useDownloadModel.ts

@@ -1,7 +1,11 @@
 import { executeSerial } from '@services/pluginService'
-import { DataService, ModelManagementService } from '@janhq/core'
+import { ModelManagementService } from '@janhq/core'
+import { useSetAtom } from 'jotai'
+import { setDownloadStateAtom } from '@helpers/atoms/DownloadState.atom'
 
 export default function useDownloadModel() {
+  const setDownloadState = useSetAtom(setDownloadStateAtom)
+
   const assistanModel = (
     model: Product,
     modelVersion: ModelVersion
@@ -37,6 +41,22 @@ export default function useDownloadModel() {
   }
 
   const downloadModel = async (model: Product, modelVersion: ModelVersion) => {
+    // set an initial download state
+    setDownloadState({
+      modelId: modelVersion._id,
+      time: {
+        elapsed: 0,
+        remaining: 0,
+      },
+      speed: 0,
+      percent: 0,
+      size: {
+        total: 0,
+        transferred: 0,
+      },
+      fileName: modelVersion._id,
+    })
+
     modelVersion.startDownloadAt = Date.now()
     const assistantModel = assistanModel(model, modelVersion)
     await executeSerial(ModelManagementService.StoreModel, assistantModel)