From 99567a1102f6db453ac6c2c7f3a1215d42b83c9b Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 5 Aug 2025 13:55:33 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feat:=20recommended=20label=20llamacpp?=
 =?UTF-8?q?=20setting=20(#6052)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨feat: recommended label llamacpp

* chore: remove log
---
 core/src/browser/extension.ts                 |  6 +++
 core/src/types/setting/settingComponent.ts    |  1 +
 extensions/llamacpp-extension/settings.json   |  4 +-
 extensions/llamacpp-extension/src/index.ts    |  9 ++++-
 .../DropdownControl.tsx                       | 39 +++++++++++++++++--
 .../dynamicControllerSetting/index.tsx        |  2 +
 6 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/core/src/browser/extension.ts b/core/src/browser/extension.ts
index 3f3148e8f..7fc913638 100644
--- a/core/src/browser/extension.ts
+++ b/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))
diff --git a/core/src/types/setting/settingComponent.ts b/core/src/types/setting/settingComponent.ts
index 7294b0bbe..9dfd9b597 100644
--- a/core/src/types/setting/settingComponent.ts
+++ b/core/src/types/setting/settingComponent.ts
@@ -60,4 +60,5 @@ export type DropdownComponentProps = {
   value: string
   type?: InputType
   options?: DropdownOption[]
+  recommended?: string
 }
diff --git a/extensions/llamacpp-extension/settings.json b/extensions/llamacpp-extension/settings.json
index 7ee0c7381..363822f9a 100644
--- a/extensions/llamacpp-extension/settings.json
+++ b/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",
diff --git a/extensions/llamacpp-extension/src/index.ts b/extensions/llamacpp-extension/src/index.ts
index a3f7046b8..140b08418 100644
--- a/extensions/llamacpp-extension/src/index.ts
+++ b/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)
       }
diff --git a/web-app/src/containers/dynamicControllerSetting/DropdownControl.tsx b/web-app/src/containers/dynamicControllerSetting/DropdownControl.tsx
index 4328aca60..4487004e1 100644
--- a/web-app/src/containers/dynamicControllerSetting/DropdownControl.tsx
+++ b/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">
-        {options.find((option) => option.value === value)?.name || value}
+      <DropdownMenuTrigger className="bg-main-view-fg/5 hover:bg-main-view-fg/8 px-3 py-1 rounded-sm font-medium cursor-pointer">
+        {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>
diff --git a/web-app/src/containers/dynamicControllerSetting/index.tsx b/web-app/src/containers/dynamicControllerSetting/index.tsx
index 2f575654e..91f0e8516 100644
--- a/web-app/src/containers/dynamicControllerSetting/index.tsx
+++ b/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)}
       />
     )