Merge pull request #500 from janhq/bug/status-bar-app-download

bug: download new version should show in status bar

web/app/_components/ProgressBar/index.tsx

@@ -6,7 +6,7 @@ type Props = {
 }
 
 const ProgressBar: React.FC<Props> = ({ used, total }) => (
-  <div className="flex items-center gap-2.5 p-[10px]">
+  <div className="flex items-center gap-2.5">
     <div className="flex items-center gap-0.5 text-xs leading-[18px]">
       <Image src={'icons/app_icon.svg'} width={18} height={18} alt="" />
       Updating

web/containers/BottomBar/index.tsx

@@ -6,6 +6,8 @@ import { modelDownloadStateAtom } from '@helpers/atoms/DownloadState.atom'
 import { formatDownloadPercentage } from '@utils/converter'
 import { activeAssistantModelAtom, stateModel } from '@helpers/atoms/Model.atom'
 import useGetAppVersion from '@hooks/useGetAppVersion'
+import ProgressBar from '@/_components/ProgressBar'
+import { appDownloadProgress } from '@helpers/JotaiWrapper'
 
 const BottomBar = () => {
   const activeModel = useAtomValue(activeAssistantModelAtom)
@@ -13,6 +15,7 @@ const BottomBar = () => {
   const { ram, cpu } = useGetSystemResources()
   const modelDownloadStates = useAtomValue(modelDownloadStateAtom)
   const appVersion = useGetAppVersion()
+  const progress = useAtomValue(appDownloadProgress)
 
   const downloadStates: DownloadState[] = []
   for (const [, value] of Object.entries(modelDownloadStates)) {
@@ -21,7 +24,22 @@ const BottomBar = () => {
 
   return (
     <div className="fixed bottom-0 left-0 z-20 flex h-8 w-full items-center justify-between border-t border-border bg-background/50 px-4">
-      <div className="flex gap-x-2">
+      <div className="flex items-center gap-x-2">
+        <div className="flex items-center space-x-2">
+          {progress && progress >= 0 ? (
+            <ProgressBar total={100} used={progress} />
+          ) : null}
+          {downloadStates.length > 0 && (
+            <SystemItem
+              name="Downloading"
+              value={`${downloadStates[0]
+                ?.fileName}: ${formatDownloadPercentage(
+                downloadStates[0]?.percent
+              )}`}
+            />
+          )}
+        </div>
+
         {stateModelStartStop.state === 'start' &&
           stateModelStartStop.loading && (
             <SystemItem
@@ -51,7 +69,9 @@ const BottomBar = () => {
       <div className="flex gap-x-2">
         <SystemItem name="CPU:" value={`${cpu}%`} />
         <SystemItem name="Mem:" value={`${ram}%`} />
-        <p className="text-xs font-semibold">Jan v{appVersion?.version ?? ''}</p>
+        <p className="text-xs font-semibold">
+          Jan v{appVersion?.version ?? ''}
+        </p>
       </div>
     </div>
   )