enhancement: receommended label engine variant (#4740)

joi/src/core/Select/index.tsx

@@ -7,7 +7,7 @@ import './styles.scss'
 import { twMerge } from 'tailwind-merge'
 
 type Props = {
-  options?: { name: string; value: string }[]
+  options?: { name: string; value: string; recommend?: boolean }[]
   open?: boolean
   block?: boolean
   value?: string
@@ -62,9 +62,16 @@ const Select = ({
                   className="select__item"
                   value={item.value}
                 >
+                  <div className="flex items-center gap-x-2">
                     <SelectPrimitive.ItemText>
-                    {item.name}
+                      <span>{item.name}</span>
                     </SelectPrimitive.ItemText>
+                    {item.recommend && (
+                      <span className="rounded bg-[hsla(var(--secondary-bg))] px-2 py-0.5 text-xs font-medium">
+                        Recommended
+                      </span>
+                    )}
+                  </div>
                   <SelectPrimitive.ItemIndicator className="select__item-indicator">
                     <CheckIcon />
                   </SelectPrimitive.ItemIndicator>

web/helpers/atoms/App.atom.ts

@@ -10,6 +10,13 @@ export const defaultJanDataFolderAtom = atom<string>('')
 
 export const LocalEngineDefaultVariantAtom = atom<string>('')
 
+export const RecommendEngineVariantAtom = atomWithStorage<string>(
+  'recommendEngineVariant',
+  '',
+  undefined,
+  { getOnInit: true }
+)
+
 const SHOW_RIGHT_PANEL = 'showRightPanel'
 
 // Store panel atom

web/screens/Settings/Engines/LocalEngineSettings.tsx

@@ -29,7 +29,10 @@ import ExtensionSetting from '../ExtensionSetting'
 
 import DeleteEngineVariant from './DeleteEngineVariant'
 
-import { LocalEngineDefaultVariantAtom } from '@/helpers/atoms/App.atom'
+import {
+  LocalEngineDefaultVariantAtom,
+  RecommendEngineVariantAtom,
+} from '@/helpers/atoms/App.atom'
 import { showScrollBarAtom } from '@/helpers/atoms/Setting.atom'
 const os = () => {
   switch (PLATFORM) {
@@ -60,6 +63,10 @@ const LocalEngineSettings = ({ engine }: { engine: InferenceEngine }) => {
   >(new Map())
   const { stopModel } = useActiveModel()
 
+  const [recommendEngineVariant, setRecommendEngineVariant] = useAtom(
+    RecommendEngineVariantAtom
+  )
+
   const isEngineUpdated =
     latestReleasedEngine &&
     latestReleasedEngine.some((item) =>
@@ -85,6 +92,7 @@ const LocalEngineSettings = ({ engine }: { engine: InferenceEngine }) => {
       .map((x: any) => ({
         name: x.name,
         value: x.name,
+        recommend: recommendEngineVariant === x.name,
       }))
 
   const installedEngineByVersion = installedEngines?.filter(
@@ -107,7 +115,10 @@ const LocalEngineSettings = ({ engine }: { engine: InferenceEngine }) => {
     if (defaultEngineVariant?.variant) {
       setSelectedVariants(defaultEngineVariant.variant || '')
     }
-  }, [defaultEngineVariant, setSelectedVariants])
+    if (!recommendEngineVariant.length) {
+      setRecommendEngineVariant(defaultEngineVariant?.variant || '')
+    }
+  }, [defaultEngineVariant, setSelectedVariants, setRecommendEngineVariant])
 
   const handleEngineUpdate = useCallback(
     async (event: { id: string; type: DownloadEvent; percent: number }) => {