✨feat: recommended label llamacpp setting (#6052)

* ✨feat: recommended label llamacpp

* chore: remove log

core/src/browser/extension.ts

@@ -132,6 +132,12 @@ export abstract class BaseExtension implements ExtensionType {
             setting.controllerProps.options = setting.controllerProps.options?.length
               ? setting.controllerProps.options
               : oldSettings.find((e: any) => e.key === setting.key)?.controllerProps?.options
+          if ('recommended' in setting.controllerProps) {
+            const oldRecommended = oldSettings.find((e: any) => e.key === setting.key)?.controllerProps?.recommended
+            if (oldRecommended !== undefined && oldRecommended !== "") {
+              setting.controllerProps.recommended = oldRecommended
+            }
+          }
         })
       }
       localStorage.setItem(this.name, JSON.stringify(settings))

core/src/types/setting/settingComponent.ts

@@ -60,4 +60,5 @@ export type DropdownComponentProps = {
   value: string
   type?: InputType
   options?: DropdownOption[]
+  recommended?: string
 }

extensions/llamacpp-extension/settings.json

@@ -6,9 +6,11 @@
     "controllerType": "dropdown",
     "controllerProps": {
       "value": "none",
-      "options": []
+      "options": [],
+      "recommended": ""
     }
   },
+
   {
     "key": "auto_update_engine",
     "title": "Auto update engine",

extensions/llamacpp-extension/src/index.ts

@@ -297,6 +297,12 @@ export default class llamacpp_extension extends AIEngine {
           return { value: key, name: key }
         })
 
+        // Set the recommended backend based on bestAvailableBackendString
+        if (bestAvailableBackendString) {
+          backendSetting.controllerProps.recommended =
+            bestAvailableBackendString
+        }
+
         const savedBackendSetting = await this.getSetting<string>(
           'version_backend',
           originalDefaultBackendValue
@@ -1298,7 +1304,8 @@ export default class llamacpp_extension extends AIEngine {
         args.push('--cache-type-k', cfg.cache_type_k)
       if (
         cfg.flash_attn &&
-        (cfg.cache_type_v != 'f16' && cfg.cache_type_v != 'f32')
+        cfg.cache_type_v != 'f16' &&
+        cfg.cache_type_v != 'f32'
       ) {
         args.push('--cache-type-v', cfg.cache_type_v)
       }

web-app/src/containers/dynamicControllerSetting/DropdownControl.tsx

@@ -5,30 +5,61 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from '@/components/ui/tooltip'
+import { IconStarFilled } from '@tabler/icons-react'
+import { cn } from '@/lib/utils'
+
 // Dropdown component
 type DropdownControlProps = {
   value: string
   options?: Array<{ value: number | string; name: string }>
+  recommended?: string
   onChange: (value: number | string) => void
 }
 
 export function DropdownControl({
   value,
   options = [],
+  recommended,
   onChange,
 }: DropdownControlProps) {
+  const isSelected =
+    options.find((option) => option.value === value)?.name || value
+
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger className="bg-main-view-fg/5 hover:bg-main-view-fg/8 px-2 py-1 rounded font-medium cursor-pointer">
+      <DropdownMenuTrigger className="bg-main-view-fg/5 hover:bg-main-view-fg/8 px-3 py-1 rounded-sm font-medium cursor-pointer">
-        {options.find((option) => option.value === value)?.name || value}
+        {isSelected}
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+      <DropdownMenuContent align="end" className="max-h-70">
         {options.map((option, optionIndex) => (
           <DropdownMenuItem
             key={optionIndex}
             onClick={() => onChange(option.value)}
+            className={cn(
+              'flex items-center justify-between my-1',
+              isSelected === option.name
+                ? 'bg-main-view-fg/6 hover:bg-main-view-fg/6'
+                : ''
+            )}
           >
-            {option.name}
+            <span>{option.name}</span>
+            {recommended === option.value && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="cursor-pointer">
+                    <IconStarFilled className="text-accent" />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="top" sideOffset={8} className="z-50">
+                  Recommended
+                </TooltipContent>
+              </Tooltip>
+            )}
           </DropdownMenuItem>
         ))}
       </DropdownMenuContent>

web-app/src/containers/dynamicControllerSetting/index.tsx

@@ -28,6 +28,7 @@ type DynamicControllerProps = {
     min?: number
     max?: number
     step?: number
+    recommended?: string
   }
   onChange: (value: string | boolean | number) => void
 }
@@ -65,6 +66,7 @@ export function DynamicControllerSetting({
       <DropdownControl
         value={controllerProps.value as string}
         options={controllerProps.options}
+        recommended={controllerProps.recommended}
         onChange={(newValue) => onChange(newValue)}
       />
     )