Feat: tenant llm provider (#14595)

### What problem does this PR solve?

Python implementation of the Go-based model_provider API suite.

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

---------

Co-authored-by: bill <yibie_jingnian@163.com>

web/src/components/llm-select/llm-label.tsx

@@ -1,21 +1,33 @@
-import { getLLMIconName, getLlmNameAndFIdByLlmId } from '@/utils/llm-util';
+import { parseModelValue } from '@/utils/llm-util';
 import { memo } from 'react';
 import { LlmIcon } from '../svg-icon';
 
 interface IProps {
-  id?: string;
   value?: string;
-  onChange?: (value: string) => void;
-  disabled?: boolean;
 }
 
-const LLMLabel = ({ value }: IProps) => {
-  const { llmName, fId } = getLlmNameAndFIdByLlmId(value);
+export const LLMLabel = ({ value }: IProps) => {
+  const parsed = value ? parseModelValue(value) : null;
+  const modelName = parsed?.model_name;
+  const instanceName = parsed?.model_instance;
+  const iconName = parsed ? parsed.model_provider : '';
+
+  if (!modelName) return null;
 
   return (
-    <div className="flex items-center gap-1 text-xs text-text-secondary">
-      <LlmIcon name={getLLMIconName(fId, llmName)} width={20} height={20} />
-      <span className="flex-1 truncate"> {llmName}</span>
+    <div className="flex items-center gap-1.5 min-w-0">
+      <LlmIcon
+        name={iconName}
+        width={22}
+        height={22}
+        imgClass="size-[22px] flex-shrink-0"
+      />
+      <span className="font-medium truncate">{modelName}</span>
+      {instanceName && (
+        <span className="text-slate-400 truncate flex-shrink-0">
+          {instanceName}
+        </span>
+      )}
     </div>
   );
 };

web/src/components/llm-select/next.tsx

@@ -1,11 +1,11 @@
 import { LlmModelType } from '@/constants/knowledge';
-import { useComposeLlmOptionsByModelTypes } from '@/hooks/use-llm-request';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { forwardRef, memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LlmSettingFieldItems } from '../llm-setting-items/next';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { Select, SelectTrigger, SelectValue } from '../ui/select';
+import LLMLabel from './llm-label';
 
 export interface NextInnerLLMSelectProps {
   id?: string;
@@ -51,8 +51,6 @@ const NextInnerLLMSelect = forwardRef<
       }
     }, [filter, ttsModel]);
 
-    const modelOptions = useComposeLlmOptionsByModelTypes(modelTypes);
-
     return (
       <Select disabled={disabled} value={value}>
         <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
@@ -66,17 +64,13 @@ const NextInnerLLMSelect = forwardRef<
               data-testid={triggerTestId}
             >
               <SelectValue placeholder={t('common.pleaseSelect')}>
-                {
-                  modelOptions
-                    .flatMap((x) => x.options)
-                    .find((x) => x.value === value)?.label
-                }
+                <LLMLabel value={value} />
               </SelectValue>
             </SelectTrigger>
           </PopoverTrigger>
           <PopoverContent side={'left'}>
             <LlmSettingFieldItems
-              options={modelOptions}
+              modelTypes={modelTypes}
               llmOptionTestIdPrefix={optionTestIdPrefix}
             ></LlmSettingFieldItems>
           </PopoverContent>