feat: add compatibility tag to model selection in right panel

web/containers/DropdownListSidebar/index.tsx

@@ -15,16 +15,24 @@ import {
   SelectTrigger,
   SelectValue,
   Input,
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+  TooltipArrow,
+  Badge,
 } from '@janhq/uikit'
 
 import { atom, useAtomValue, useSetAtom } from 'jotai'
 
-import { MonitorIcon } from 'lucide-react'
+import { MonitorIcon, InfoIcon } from 'lucide-react'
 
 import { twMerge } from 'tailwind-merge'
 
 import { MainViewState } from '@/constants/screens'
 
+import { useActiveModel } from '@/hooks/useActiveModel'
+
 import { useEngineSettings } from '@/hooks/useEngineSettings'
 
 import { useMainViewState } from '@/hooks/useMainViewState'
@@ -33,6 +41,7 @@ import useRecommendedModel from '@/hooks/useRecommendedModel'
 
 import { toGibibytes } from '@/utils/converter'
 
+import { totalRamAtom, usedRamAtom } from '@/helpers/atoms/SystemBar.atom'
 import {
   ModelParams,
   activeThreadAtom,
@@ -49,6 +58,7 @@ export default function DropdownListSidebar() {
   const threadStates = useAtomValue(threadStatesAtom)
   const setSelectedModel = useSetAtom(selectedModelAtom)
   const setThreadModelParams = useSetAtom(setThreadModelParamsAtom)
+  const { activeModel } = useActiveModel()
 
   const [selected, setSelected] = useState<Model | undefined>()
   const { setMainViewState } = useMainViewState()
@@ -56,6 +66,8 @@ export default function DropdownListSidebar() {
     { api_key: string } | undefined
   >(undefined)
   const { readOpenAISettings, saveOpenAISettings } = useEngineSettings()
+  const totalRam = useAtomValue(totalRamAtom)
+  const usedRam = useAtomValue(usedRamAtom)
 
   useEffect(() => {
     readOpenAISettings().then((settings) => {
@@ -119,6 +131,71 @@ export default function DropdownListSidebar() {
     return null
   }
 
+  const getLabel = (size: number) => {
+    const minimumRamModel = size * 1.25
+    const availableRam = totalRam - usedRam + (activeModel?.metadata.size ?? 0)
+    if (minimumRamModel > totalRam) {
+      return (
+        <Badge className="space-x-1 rounded-md" themes="danger">
+          <span>Not enough RAM</span>
+          <Tooltip>
+            <TooltipTrigger>
+              <InfoIcon size={16} />
+            </TooltipTrigger>
+            <TooltipPortal>
+              <TooltipContent
+                side="right"
+                sideOffset={10}
+                className="max-w-[300px]"
+              >
+                <span>
+                  {`This tag signals insufficient RAM for optimal model
+                  performance. It's dynamic and may change with your system's
+                  RAM availability.`}
+                </span>
+                <TooltipArrow />
+              </TooltipContent>
+            </TooltipPortal>
+          </Tooltip>
+        </Badge>
+      )
+    }
+    if (minimumRamModel < availableRam) {
+      return (
+        <Badge className="space-x-1 rounded-md" themes="success">
+          <span>Recommended</span>
+        </Badge>
+      )
+    }
+    if (minimumRamModel < totalRam && minimumRamModel > availableRam) {
+      return (
+        <Badge className="space-x-1 rounded-md" themes="warning">
+          <span>Slow on your device</span>
+          <Tooltip>
+            <TooltipTrigger>
+              <InfoIcon size={16} />
+            </TooltipTrigger>
+            <TooltipPortal>
+              <TooltipContent
+                side="right"
+                sideOffset={10}
+                className="max-w-[300px]"
+              >
+                <span>
+                  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.
+                </span>
+                <TooltipArrow />
+              </TooltipContent>
+            </TooltipPortal>
+          </Tooltip>
+        </Badge>
+      )
+    }
+  }
+
   return (
     <>
       <Select value={selected?.id} onValueChange={onValueSelected}>
@@ -127,7 +204,7 @@ export default function DropdownListSidebar() {
             {downloadedModels.filter((x) => x.id === selected?.id)[0]?.name}
           </SelectValue>
         </SelectTrigger>
-        <SelectContent className="right-5 block w-full min-w-[300px] pr-0">
+        <SelectContent className="right-2 block w-full min-w-[450px] pr-0">
           <div className="flex w-full items-center space-x-2 px-4 py-2">
             <MonitorIcon size={20} className="text-muted-foreground" />
             <span>Local</span>
@@ -147,9 +224,13 @@ export default function DropdownListSidebar() {
                 >
                   <div className="flex w-full justify-between">
                     <span className="line-clamp-1 block">{x.name}</span>
-                    <span className="font-bold text-muted-foreground">
+                    <div className="space-x-2">
-                      {toGibibytes(x.metadata.size)}
+                      <span className="font-bold text-muted-foreground">
-                    </span>
+                        {toGibibytes(x.metadata.size)}
+                      </span>
+                      {x.engine == InferenceEngine.nitro &&
+                        getLabel(x.metadata.size)}
+                    </div>
                   </div>
                 </SelectItem>
               ))}