fix: update ux recemmend backend label into desc setting

Author: urmauur

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,29 +384,43 @@ function ProviderDetail() {
                             : false
                         }
                         description={
-                          <RenderMarkdown
-                            className="![>p]:text-main-view-fg/70 select-none"
-                            content={setting.description}
-                            components={{
-                              // Make links open in a new tab
-                              a: ({ ...props }) => {
-                                return (
-                                  <a
-                                    {...props}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className={cn(
-                                      setting.key === 'api-key' &&
-                                        'second-step-setup-remote-provider'
-                                    )}
-                                  />
-                                )
-                              },
-                              p: ({ ...props }) => (
-                                <p {...props} className="!mb-0" />
-                              ),
-                            }}
-                          />
+                          <>
+                            <RenderMarkdown
+                              className="![>p]:text-main-view-fg/70 select-none"
+                              content={setting.description}
+                              components={{
+                                // Make links open in a new tab
+                                a: ({ ...props }) => {
+                                  return (
+                                    <a
+                                      {...props}
+                                      target="_blank"
+                                      rel="noopener noreferrer"
+                                      className={cn(
+                                        setting.key === 'api-key' &&
+                                          'second-step-setup-remote-provider'
+                                      )}
+                                    />
+                                  )
+                                },
+                                p: ({ ...props }) => (
+                                  <p {...props} className="!mb-0" />
+                                ),
+                              }}
+                            />
+                            {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
 }
 
 /**