From cf8f401daba8d822dfdd0c9a83059ef0ecabdded Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 11 Jun 2024 18:46:12 +0700
Subject: [PATCH] feat: update icon alert warning and copies tooltip model
 dropdown (#3021)

* feat: update icon alert warning and copies tooltip model dropdown

* chore: update loader when user click download model dropdown
---
 web/containers/Loader/ProgressCircle.tsx      | 50 ++++++++++++++++
 web/containers/ModelDropdown/index.tsx        | 44 +++++++++++++-
 .../ModelLabel/NotEnoughMemoryLabel.tsx       | 57 ++++++++++++-------
 .../ModelLabel/SlowOnYourDeviceLabel.tsx      | 57 ++++++++++++-------
 4 files changed, 165 insertions(+), 43 deletions(-)
 create mode 100644 web/containers/Loader/ProgressCircle.tsx

diff --git a/web/containers/Loader/ProgressCircle.tsx b/web/containers/Loader/ProgressCircle.tsx
new file mode 100644
index 000000000..e10434113
--- /dev/null
+++ b/web/containers/Loader/ProgressCircle.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+
+interface ProgressCircleProps {
+  percentage: number
+  size?: number
+  strokeWidth?: number
+}
+
+const ProgressCircle: React.FC<ProgressCircleProps> = ({
+  percentage,
+  size = 100,
+  strokeWidth = 14,
+}) => {
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const offset = circumference - (percentage / 100) * circumference
+
+  return (
+    <svg
+      className="ml-0.5 h-4 w-4 rotate-[-90deg] transform text-[hsla(var(--primary-bg))]"
+      height={size}
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={`0 0 ${size} ${size}`}
+    >
+      <circle
+        className="opacity-25"
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        fill="none"
+      ></circle>
+      <circle
+        className="transition-stroke-dashoffset duration-300"
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        fill="none"
+        strokeDasharray={circumference}
+        strokeDashoffset={offset}
+      ></circle>
+    </svg>
+  )
+}
+
+export default ProgressCircle
diff --git a/web/containers/ModelDropdown/index.tsx b/web/containers/ModelDropdown/index.tsx
index a57525698..1f33f3ceb 100644
--- a/web/containers/ModelDropdown/index.tsx
+++ b/web/containers/ModelDropdown/index.tsx
@@ -8,16 +8,19 @@ import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { ChevronDownIcon, DownloadCloudIcon, XIcon } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 
+import ProgressCircle from '@/containers/Loader/ProgressCircle'
+
 import ModelLabel from '@/containers/ModelLabel'
 
 import SetupRemoteModel from '@/containers/SetupRemoteModel'
 
 import useDownloadModel from '@/hooks/useDownloadModel'
+import { modelDownloadStateAtom } from '@/hooks/useDownloadState'
 import useRecommendedModel from '@/hooks/useRecommendedModel'
 
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
-import { toGibibytes } from '@/utils/converter'
+import { formatDownloadPercentage, toGibibytes } from '@/utils/converter'
 
 import { extensionManager } from '@/extension'
 
@@ -64,6 +67,7 @@ const ModelDropdown = ({
   const [dropdownOptions, setDropdownOptions] = useState<HTMLDivElement | null>(
     null
   )
+  const downloadStates = useAtomValue(modelDownloadStateAtom)
   const setThreadModelParams = useSetAtom(setThreadModelParamsAtom)
   const { updateModelParameter } = useUpdateModelParameters()
 
@@ -351,12 +355,29 @@ const ModelDropdown = ({
                                   <span className="font-medium">
                                     {toGibibytes(model.metadata.size)}
                                   </span>
-                                  {!isDownloading && (
+                                  {!isDownloading ? (
                                     <DownloadCloudIcon
                                       size={18}
                                       className="cursor-pointer text-[hsla(var(--app-link))]"
                                       onClick={() => downloadModel(model)}
                                     />
+                                  ) : (
+                                    Object.values(downloadStates)
+                                      .filter((x) => x.modelId === model.id)
+                                      .map((item) => (
+                                        <ProgressCircle
+                                          key={item.modelId}
+                                          percentage={
+                                            formatDownloadPercentage(
+                                              item?.percent,
+                                              {
+                                                hidePercentage: true,
+                                              }
+                                            ) as number
+                                          }
+                                          size={100}
+                                        />
+                                      ))
                                   )}
                                 </div>
                               </li>
@@ -397,12 +418,29 @@ const ModelDropdown = ({
                                     <span className="font-medium">
                                       {toGibibytes(model.metadata.size)}
                                     </span>
-                                    {!isDownloading && (
+                                    {!isDownloading ? (
                                       <DownloadCloudIcon
                                         size={18}
                                         className="cursor-pointer text-[hsla(var(--app-link))]"
                                         onClick={() => downloadModel(model)}
                                       />
+                                    ) : (
+                                      Object.values(downloadStates)
+                                        .filter((x) => x.modelId === model.id)
+                                        .map((item) => (
+                                          <ProgressCircle
+                                            key={item.modelId}
+                                            percentage={
+                                              formatDownloadPercentage(
+                                                item?.percent,
+                                                {
+                                                  hidePercentage: true,
+                                                }
+                                              ) as number
+                                            }
+                                            size={100}
+                                          />
+                                        ))
                                     )}
                                   </div>
                                 </li>
diff --git a/web/containers/ModelLabel/NotEnoughMemoryLabel.tsx b/web/containers/ModelLabel/NotEnoughMemoryLabel.tsx
index fb2b7bde5..287193183 100644
--- a/web/containers/ModelLabel/NotEnoughMemoryLabel.tsx
+++ b/web/containers/ModelLabel/NotEnoughMemoryLabel.tsx
@@ -1,32 +1,49 @@
-import { memo } from 'react'
+import { Fragment, memo } from 'react'
 
 import { Badge, Tooltip } from '@janhq/joi'
-import { InfoIcon } from 'lucide-react'
-import { twMerge } from 'tailwind-merge'
+import { AlertTriangleIcon, InfoIcon } from 'lucide-react'
 
 type Props = {
   compact?: boolean
   unit: string
 }
 
+const tooltipContent = `Your device doesn't have enough RAM to run this model. Consider upgrading your RAM or using a device with more memory capacity.`
+
 const NotEnoughMemoryLabel = ({ unit, compact }: Props) => (
-  <Badge
-    theme="destructive"
-    variant="soft"
-    className={twMerge(compact && 'h-5 w-5 p-1')}
-  >
-    {!compact && <span className="line-clamp-1">Not enough {unit}</span>}
-    <Tooltip
-      trigger={
-        compact ? (
-          <div className="h-2 w-2 cursor-pointer rounded-full bg-[hsla(var(--destructive-bg))]" />
-        ) : (
-          <InfoIcon size={14} className="ml-2 flex-shrink-0 cursor-pointer" />
-        )
-      }
-      content="This tag signals insufficient RAM for optimal model performance. It's dynamic and may change with your system's RAM availability."
-    />
-  </Badge>
+  <>
+    {compact ? (
+      <div className="flex h-5 w-5 items-center">
+        <Tooltip
+          trigger={
+            <AlertTriangleIcon
+              size={14}
+              className="cursor-pointer text-[hsla(var(--destructive-bg))]"
+            />
+          }
+          content={
+            <Fragment>
+              <b>Not enough RAM:</b> <span>{tooltipContent}</span>
+            </Fragment>
+          }
+        />
+      </div>
+    ) : (
+      <Badge theme="destructive" variant="soft">
+        <span className="line-clamp-1">Not enough {unit}</span>
+        <Tooltip
+          trigger={
+            <InfoIcon size={14} className="ml-2 flex-shrink-0 cursor-pointer" />
+          }
+          content={
+            <Fragment>
+              <b>Not enough RAM:</b> <span>{tooltipContent}</span>
+            </Fragment>
+          }
+        />
+      </Badge>
+    )}
+  </>
 )
 
 export default memo(NotEnoughMemoryLabel)
diff --git a/web/containers/ModelLabel/SlowOnYourDeviceLabel.tsx b/web/containers/ModelLabel/SlowOnYourDeviceLabel.tsx
index d89fd2505..e8e9bcb4d 100644
--- a/web/containers/ModelLabel/SlowOnYourDeviceLabel.tsx
+++ b/web/containers/ModelLabel/SlowOnYourDeviceLabel.tsx
@@ -1,32 +1,49 @@
-import { memo } from 'react'
+import { Fragment, memo } from 'react'
 
 import { Badge, Tooltip } from '@janhq/joi'
 
-import { InfoIcon } from 'lucide-react'
-import { twMerge } from 'tailwind-merge'
+import { AlertTriangleIcon, InfoIcon } from 'lucide-react'
 
 type Props = {
   compact?: boolean
 }
 
+const tooltipContent = `Your device may be running low on available RAM, which can affect the speed of this model. Try closing any unnecessary applications to free up system memory.`
+
 const SlowOnYourDeviceLabel = ({ compact }: Props) => (
-  <Badge
-    theme="warning"
-    variant="soft"
-    className={twMerge(compact && 'h-5 w-5 p-1')}
-  >
-    {!compact && <span className="line-clamp-1">Slow on your device</span>}
-    <Tooltip
-      trigger={
-        compact ? (
-          <div className="h-2 w-2 cursor-pointer rounded-full bg-[hsla(var(--warning-bg))] p-0" />
-        ) : (
-          <InfoIcon size={14} className="ml-2 flex-shrink-0 cursor-pointer" />
-        )
-      }
-      content="This tag indicates that your current RAM performance may affect model speed. It can change based on other active apps. To improve, consider closing unnecessary applications to free up RAM."
-    />
-  </Badge>
+  <>
+    {compact ? (
+      <div className="flex h-5 w-5 items-center">
+        <Tooltip
+          trigger={
+            <AlertTriangleIcon
+              size={14}
+              className="cursor-pointer text-[hsla(var(--warning-bg))]"
+            />
+          }
+          content={
+            <Fragment>
+              <b>Slow on your device:</b> <span>{tooltipContent}</span>
+            </Fragment>
+          }
+        />
+      </div>
+    ) : (
+      <Badge theme="warning" variant="soft">
+        <span className="line-clamp-1">Slow on your device</span>
+        <Tooltip
+          trigger={
+            <InfoIcon size={14} className="ml-2 flex-shrink-0 cursor-pointer" />
+          }
+          content={
+            <Fragment>
+              <b>Slow on your device:</b> <span>{tooltipContent}</span>
+            </Fragment>
+          }
+        />
+      </Badge>
+    )}
+  </>
 )
 
 export default memo(SlowOnYourDeviceLabel)