fix: update ux recemmend backend label into desc setting (#6088)

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

@@ -5,12 +5,6 @@ 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
@@ -24,7 +18,6 @@ type DropdownControlProps = {
 export function DropdownControl({
   value,
   options = [],
-  recommended,
   onChange,
 }: DropdownControlProps) {
   const isSelected =
@@ -48,18 +41,6 @@ export function DropdownControl({
             )}
           >
             <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/routes/settings/providers/$providerName.tsx

@@ -384,6 +384,7 @@ function ProviderDetail() {
                             : false
                         }
                         description={
+                          <>
                             <RenderMarkdown
                               className="![>p]:text-main-view-fg/70 select-none"
                               content={setting.description}
@@ -407,6 +408,19 @@ function ProviderDetail() {
                                 ),
                               }}
                             />
+                            {setting.key === 'version_backend' &&
+                              setting.controller_props?.recommended && (
+                                <div className="mt-1 text-sm text-main-view-fg/60">
+                                  <span className="font-medium">
+                                    {setting.controller_props.recommended
+                                      ?.split('/')
+                                      .pop() ||
+                                      setting.controller_props.recommended}
+                                  </span>
+                                  <span> is the recommended backend.</span>
+                                </div>
+                              )}
+                          </>
                         }
                         actions={actionComponent}
                       />

web-app/src/types/modelProviders.d.ts

@@ -7,6 +7,7 @@ type ControllerProps = {
   type?: string
   options?: Array<{ value: number | string; name: string }>
   input_actions?: string[]
+  recommended?: string
 }
 
 /**