Merge branch 'docs/install-succinct' into docs/fix-error-messages

docs/docs/install/windows.md

@@ -2,19 +2,58 @@
 title: Windows
 ---
 
-# Jan on Windows
+# Installing Jan on Windows
 
 ## Installation
-1. To download the lastest version of Jan on Windows, please visit the [Jan's homepage](https://jan.ai/).
+
-2. Once Jan installer (jan-win-x64-{version}.exe) is downloaded, run the installer. The installation process is expected to take around a minute.
+Jan is available for download via our homepage, [https://jan.ai](https://jan.ai/).
-3. By default, Jan is installed under this directory
+
+For Windows, the download should be available as a `.exe` file in the following format. 
+
 ```bash
+jan-win-x64-{version}.exe
+```
+
+The typical installation process takes around a minute. 
+
+### Github Releases
+
+Jan is also available from [Jan's Github Releases](https://github.com/janhq/jan/releases) page, with a recommended [latest stable release](https://github.com/janhq/jan/releases/latest). 
+
+Within the Releases' assets, you will find the following files for Windows:
+
+```bash
+# Windows Installers
+jan-win-x64-{version}.exe
+```
+
+### Default Installation Directory
+
+By default, Jan is installed in the following directory: 
+
+```bash
+# Default installation directory
 C:\Users\{username}\AppData\Local\Programs\Jan
 ```
-## Uninstall Jan
-If you have installed Jan on your Windows computer, either as a User or System installation, you can easily uninstall it by going to the Windows Control Panel. 
-In case you wish to completely remove all user data associated with Jan after uninstallation, you can delete the user data folders located at `%APPDATA%\Jan`. This will return your system to its state prior to the installation of Jan. This method can also be used to reset all settings if you are experiencing any issues with Jan.
 
-## Common Questions
+## Uninstalling Jan
-### Microsoft Defender SmartScreen prevented an unrecognized app from starting
+
-When initiating the Jan Installer, be aware that Windows Defender may display a warning. This warning is a standard security measure, as the installer will make changes to the system. To proceed with the installation, navigate through the warning options, typically found in "More info" section and select the appropriate option to continue with the installation.
+To uninstall Jan in Windows, use the [Windows Control Panel](https://support.microsoft.com/en-us/windows/uninstall-or-remove-apps-and-programs-in-windows-4b55f974-2cc6-2d2b-d092-5905080eaf98). 
+
+To remove all user data associated with Jan, you can delete the `/Jan` directory in Windows' [AppData directory](https://superuser.com/questions/632891/what-is-appdata).  
+
+```shell
+# Jan's User Data directory
+%AppData%\Jan
+``` 
+
+## Troubleshooting
+
+### Microsoft Defender
+
+**Error: "Microsoft Defender Smartscreen prevented an unrecognized app from starting"**
+
+Windows Defender may display the above warning when running the Jan Installer, as a standard security measure. 
+
+To proceed, select the "More info" option and select the "Run Anyway" option to continue with the installation.
+

docs/sidebars.js

@@ -25,9 +25,15 @@ const sidebars = {
     {
       type: "category",
       label: "Installation",
+      link: { type: "doc", id: "install/overview" },
       collapsible: true,
       collapsed: true,
-      items: ["install/overview","install/windows", "install/mac", "install/linux", "install/from-source"],
+      items: [
+        "install/windows",
+        "install/mac",
+        "install/linux",
+        "install/from-source",
+      ],
     },
     {
       type: "category",

web/containers/ModalCancelDownload/index.tsx

@@ -16,7 +16,6 @@ import {
 import { atom, useAtomValue } from 'jotai'
 
 import { useDownloadState } from '@/hooks/useDownloadState'
-import useGetPerformanceTag from '@/hooks/useGetPerformanceTag'
 
 import { formatDownloadPercentage } from '@/utils/converter'
 
@@ -30,7 +29,6 @@ export default function ModalCancelDownload({
   isFromList,
 }: Props) {
   const { modelDownloadStateAtom } = useDownloadState()
-  useGetPerformanceTag()
   const downloadAtom = useMemo(
     () => atom((get) => get(modelDownloadStateAtom)[suitableModel.name]),
     // eslint-disable-next-line react-hooks/exhaustive-deps

web/hooks/useGetPerformanceTag.ts

@@ -1,40 +1,37 @@
-import { useState } from 'react'
-
 import { ModelVersion } from '@janhq/core/lib/types'
-import { useAtomValue } from 'jotai'
 
 import { ModelPerformance, TagType } from '@/constants/tagType'
 
-import { totalRamAtom } from '@/helpers/atoms/SystemBar.atom'
-
 // Recommendation:
 // `Recommended (green)`: "Max RAM required" is 80% of users max  RAM.
 // `Slow on your device (yellow)`: Max RAM required is 80-100% of users max RAM
 // `Not enough RAM (red)`: User RAM is below "Max RAM required"
 
 export default function useGetPerformanceTag() {
-  const [performanceTag, setPerformanceTag] = useState<TagType | undefined>()
+  async function getPerformanceForModel(
-  const totalRam = useAtomValue(totalRamAtom)
+    modelVersion: ModelVersion,
-
+    totalRam: number
-  const getPerformanceForModel = async (modelVersion: ModelVersion) => {
+  ): Promise<{ title: string; performanceTag: TagType }> {
     const requiredRam = modelVersion.maxRamRequired
-    setPerformanceTag(calculateRamPerformance(requiredRam, totalRam))
+    const performanceTag = calculateRamPerformance(requiredRam, totalRam)
+
+    let title = ''
+
+    switch (performanceTag) {
+      case ModelPerformance.PerformancePositive:
+        title = 'Recommended'
+        break
+      case ModelPerformance.PerformanceNeutral:
+        title = 'Slow on your device'
+        break
+      case ModelPerformance.PerformanceNegative:
+        title = 'Not enough RAM'
+        break
+    }
+    return { title, performanceTag }
   }
 
-  let title = ''
+  return { getPerformanceForModel }
-  switch (performanceTag) {
-    case ModelPerformance.PerformancePositive:
-      title = 'Recommended'
-      break
-    case ModelPerformance.PerformanceNeutral:
-      title = 'Slow on your device'
-      break
-    case ModelPerformance.PerformanceNegative:
-      title = 'Not enough RAM'
-      break
-  }
-
-  return { performanceTag, title, getPerformanceForModel }
 }
 
 const calculateRamPerformance = (

web/screens/ExploreModels/ExploreModelItemHeader/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { ModelCatalog, ModelVersion } from '@janhq/core/lib/types'
 import { Badge, Button } from '@janhq/uikit'
@@ -20,6 +20,8 @@ import { useMainViewState } from '@/hooks/useMainViewState'
 
 import { toGigabytes } from '@/utils/converter'
 
+import { totalRamAtom } from '@/helpers/atoms/SystemBar.atom'
+
 type Props = {
   suitableModel: ModelVersion
   exploreModel: ModelCatalog
@@ -32,8 +34,12 @@ const ExploreModelItemHeader: React.FC<Props> = ({
   const { downloadModel } = useDownloadModel()
   const { downloadedModels } = useGetDownloadedModels()
   const { modelDownloadStateAtom, downloadStates } = useDownloadState()
-  const { performanceTag, title, getPerformanceForModel } =
+  const { getPerformanceForModel } = useGetPerformanceTag()
-    useGetPerformanceTag()
+  const [title, setTitle] = useState<string>('Recommended')
+  const totalRam = useAtomValue(totalRamAtom)
+  const [performanceTag, setPerformanceTag] = useState<TagType>(
+    ModelPerformance.PerformancePositive
+  )
   const downloadAtom = useMemo(
     () => atom((get) => get(modelDownloadStateAtom)[suitableModel.name]),
     [suitableModel.name]
@@ -41,9 +47,20 @@ const ExploreModelItemHeader: React.FC<Props> = ({
   const downloadState = useAtomValue(downloadAtom)
   const { setMainViewState } = useMainViewState()
 
+  const calculatePerformance = useCallback(
+    (suitableModel: ModelVersion) => async () => {
+      const { title, performanceTag } = await getPerformanceForModel(
+        suitableModel,
+        totalRam
+      )
+      setPerformanceTag(performanceTag)
+      setTitle(title)
+    },
+    [totalRam]
+  )
+
   useEffect(() => {
-    getPerformanceForModel(suitableModel)
+    calculatePerformance(suitableModel)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [suitableModel])
 
   const onDownloadClick = useCallback(() => {