feat: prompt user to download an update manually (#2261)

electron/handlers/update.ts

@@ -3,6 +3,8 @@ import { WindowManager } from './../managers/window'
 import { autoUpdater } from 'electron-updater'
 import { AppEvent } from '@janhq/core'
 
+export let waitingToInstallVersion: string | undefined = undefined
+
 export function handleAppUpdates() {
   /* Should not check for update during development */
   if (!app.isPackaged) {
@@ -29,6 +31,7 @@ export function handleAppUpdates() {
       buttons: ['Restart', 'Later'],
     })
     if (action.response === 0) {
+      waitingToInstallVersion = _info?.version
       autoUpdater.quitAndInstall()
     }
   })
@@ -37,7 +40,7 @@ export function handleAppUpdates() {
   autoUpdater.on('error', (info: any) => {
     WindowManager.instance.currentWindow?.webContents.send(
       AppEvent.onAppUpdateDownloadError,
-      info
+      { failedToInstallVersion: waitingToInstallVersion, info }
     )
   })
 

web/containers/Layout/BottomBar/UpdateFailedModal/index.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import {
+  Modal,
+  ModalPortal,
+  ModalContent,
+  ModalHeader,
+  ModalTitle,
+  ModalFooter,
+  ModalClose,
+  Button,
+} from '@janhq/uikit'
+import { Share2Icon } from '@radix-ui/react-icons'
+import { useAtom } from 'jotai'
+
+import { updateVersionError } from '@/containers/Providers/Jotai'
+
+const UpdatedFailedModal = () => {
+  const [error, setError] = useAtom(updateVersionError)
+
+  return (
+    <Modal open={!!error} onOpenChange={() => setError(undefined)}>
+      <ModalPortal />
+      <ModalContent>
+        <ModalHeader>
+          <ModalTitle>Unable to Install Update</ModalTitle>
+        </ModalHeader>
+        <p className="text-muted-foreground">
+          An error occurred while installing Jan{' '}
+          <span className="font-medium text-foreground">{error}</span>. We
+          appreciate your help with{' '}
+          <a
+            href="https://github.com/janhq/jan#download"
+            target="_blank"
+            className="font-medium text-foreground"
+          >
+            manual downloading and installation.
+          </a>
+        </p>
+        <ModalFooter>
+          <div className="flex gap-x-2">
+            <ModalClose asChild onClick={() => setError(undefined)}>
+              <Button themes="outline">Remind me later</Button>
+            </ModalClose>
+            <ModalClose
+              asChild
+              onClick={() => {
+                window.open('https://github.com/janhq/jan#download', '_blank')
+                setError(undefined)
+              }}
+            >
+              <Button themes="primary" autoFocus>
+                Download now{' '}
+                <Share2Icon
+                  width={16}
+                  height={16}
+                  className="ml-2"
+                  color="white"
+                />
+              </Button>
+            </ModalClose>
+          </div>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default UpdatedFailedModal

web/containers/Layout/BottomBar/index.tsx

@@ -17,6 +17,7 @@ import { appDownloadProgress } from '@/containers/Providers/Jotai'
 
 import ImportingModelState from './ImportingModelState'
 import SystemMonitor from './SystemMonitor'
+import UpdatedFailedModal from './UpdateFailedModal'
 
 const menuLinks = [
   {
@@ -44,6 +45,7 @@ const BottomBar = () => {
         </div>
         <ImportingModelState />
         <DownloadingState />
+        <UpdatedFailedModal />
       </div>
       <div className="flex items-center gap-x-3">
         <SystemMonitor />

web/containers/Providers/AppUpdateListener.tsx

@@ -3,10 +3,11 @@ import { Fragment, PropsWithChildren, useEffect } from 'react'
 
 import { useSetAtom } from 'jotai'
 
-import { appDownloadProgress } from './Jotai'
+import { appDownloadProgress, updateVersionError } from './Jotai'
 
 const AppUpdateListener = ({ children }: PropsWithChildren) => {
   const setProgress = useSetAtom(appDownloadProgress)
+  const setUpdateVersionError = useSetAtom(updateVersionError)
 
   useEffect(() => {
     if (window && window.electronAPI) {
@@ -18,9 +19,13 @@ const AppUpdateListener = ({ children }: PropsWithChildren) => {
       )
 
       window.electronAPI.onAppUpdateDownloadError(
-        (_event: string, callback: any) => {
-          console.error('Download error', callback)
+        (_event: string, error: any) => {
+          console.error('Download error: ', error)
           setProgress(-1)
+
+          // Can not install update
+          // Prompt user to download the update manually
+          setUpdateVersionError(error.failedToInstallVersion)
         }
       )
 

web/containers/Providers/Jotai.tsx

@@ -12,6 +12,7 @@ export const editPromptAtom = atom<string>('')
 export const currentPromptAtom = atom<string>('')
 export const fileUploadAtom = atom<FileInfo[]>([])
 export const appDownloadProgress = atom<number>(-1)
+export const updateVersionError = atom<string | undefined>(undefined)
 export const searchAtom = atom<string>('')
 
 export default function JotaiWrapper({ children }: Props) {