feat(web): model select component replace

2026-03-07 17:18:27 +08:00
parent 153e68e055
commit 509d1a2e24
10 changed files with 501 additions and 441 deletions
--- a/web/src/components/ModelSelect/index.tsx
+++ b/web/src/components/ModelSelect/index.tsx
@@ -0,0 +1,87 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-03-07 16:49:59 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-07 17:14:57
+ */
+import { useEffect, useState, type FC } from 'react';
+import { Select, Flex, Space } from 'antd';
+import type { SelectProps } from 'antd/es/select';
+import { useTranslation } from 'react-i18next';
+
+import { getModelList } from '@/api/models';
+import type { Query, Model } from '@/views/ModelManagement/types';
+import { getListLogoUrl } from '@/views/ModelManagement/utils';
+import Tag from '@/components/Tag';
+
+/** Extends AntD SelectProps; omits filterOption since it's handled internally */
+interface ModelSelectProps extends SelectProps {
+  /** Extra query params passed to getModelList */
+  params?: Query;
+  placeholder?: string;
+}
+
+const ModelSelect: FC<ModelSelectProps> = ({
+  params,
+  placeholder,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const [options, setOptions] = useState<Model[]>([]);
+
+  // Fetch active models whenever params change; stringify for stable deep comparison
+  useEffect(() => {
+    getModelList({
+      ...(params ?? {}),
+      pagesize: 100,
+      is_active: true
+    }).then((res) => {
+      setOptions((res as { items: Model[] }).items ?? []);
+    });
+  }, [JSON.stringify(params)]);
+
+  // Render the selected value inside the trigger with logo + truncated name
+  const labelRender: SelectProps['labelRender'] = ({ value }) => {
+    const item = options.find((o) => o.id === value);
+    if (!item) return undefined;
+    const logo = getListLogoUrl(item.provider, item.logo as string);
+    return (
+      <Flex align="center" gap={8}>
+        {logo && <img src={logo} className="rb:size-5 rb:rounded-md" alt="" />}
+        <div className="rb:flex-1 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{item.name}</div>
+      </Flex>
+    );
+  };
+
+  return (
+    <Select
+      placeholder={placeholder ?? t('common.pleaseSelect')}
+      options={options}
+      fieldNames={{ label: 'name', value: 'id' }}
+      allowClear
+      popupMatchSelectWidth={false}
+      labelRender={labelRender}
+      // Each dropdown option shows logo, name, and capability tags
+      optionRender={(option) => {
+        const { data } = option;
+        const logo = getListLogoUrl(data.provider, data.logo as string);
+        return (
+          <Flex align="center" gap={8}>
+            <Flex align="center" gap={8}>
+              {logo && <img src={logo} className="rb:size-5 rb:rounded-md" alt="" />}
+              <span className="rb:wrap-break-word rb:line-clamp-1">{data.name as string}</span>
+            </Flex>
+            {data.capability?.length > 0 && (
+              <Space size={4}>
+                {data.capability.map((vo: string) => <Tag key={vo}>{vo}</Tag>)}
+              </Space>
+            )}
+          </Flex>
+        );
+      }}
+      {...props}
+    />
+  );
+};
+
+export default ModelSelect;
--- a/web/src/views/ApplicationConfig/Cluster.tsx
+++ b/web/src/views/ApplicationConfig/Cluster.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:29:33 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-04 10:20:16
+ * @Last Modified time: 2026-03-07 17:11:54
 */
 import { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -11,7 +11,6 @@ import { Form, Space, Row, Col, Button, Flex, App, Select, Spin } from 'antd'

 import Card from './components/Card'
 import Tag from './components/Tag'
-import CustomSelect from '@/components/CustomSelect';
 import { getMultiAgentConfig, saveMultiAgentConfig, getApplicationList } from '@/api/application';
 import type { 
  Config,
@@ -26,7 +25,7 @@ import RbCard from '@/components/RbCard/Card'
 import SubAgentModal from './components/SubAgentModal'
 import Empty from '@/components/Empty'
 import RadioGroupCard from '@/components/RadioGroupCard'
-import { getModelListUrl } from '@/api/models'
+import ModelSelect from '@/components/ModelSelect'
 import ModelConfigModal from './components/ModelConfigModal'
 import type { Application } from '@/views/ApplicationManagement/types'

@@ -268,13 +267,9 @@ const Cluster = forwardRef<ClusterRef>((_props, ref) => {
                >
                  <Flex align="center" gap={12}>
                    <Form.Item name="default_model_config_id" noStyle>
-                      <CustomSelect
-                        url={getModelListUrl}
-                        params={{ type: 'llm,chat', pagesize: 100, is_active: true }}
-                        valueKey="id"
-                        labelKey="name"
-                        hasAll={false}
-                        style={{ width: '100%' }}
+                      <ModelSelect
+                        params={{ type: 'llm,chat' }}
+                        className="rb:w-full!"
                      />
                    </Form.Item>
                    <Form.Item name="model_parameters" noStyle>
--- a/web/src/views/ApplicationConfig/components/AiPromptModal.tsx
+++ b/web/src/views/ApplicationConfig/components/AiPromptModal.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:26:44 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-04 14:40:55
+ * @Last Modified time: 2026-03-07 17:12:25
 */
 /**
 * AI Prompt Assistant Modal
@@ -17,7 +17,6 @@ import clsx from 'clsx'
 import copy from 'copy-to-clipboard';

 import { updatePromptMessages, createPromptSessions } from '@/api/prompt'
-import { getModelListUrl } from '@/api/models'
 import type { AiPromptModalRef, AiPromptVariableModalRef, AiPromptForm } from '../types'
 import RbModal from '@/components/RbModal'
 import type { ModelListItem } from '@/views/ModelManagement/types'
@@ -25,11 +24,10 @@ import ChatContent from '@/components/Chat/ChatContent'
 import Empty from '@/components/Empty'
 import ConversationEmptyIcon from '@/assets/images/conversation/conversationEmpty.svg'
 import type { ChatItem } from '@/components/Chat/types'
-import CustomSelect from '@/components/CustomSelect'
+import ModelSelect from '@/components/ModelSelect'
 import AiPromptVariableModal from './AiPromptVariableModal'
 import { type SSEMessage } from '@/utils/stream'
 import Editor from './Editor'
-import { getLogoUrl } from '@/views/ModelManagement/utils'
 import analysisEmptyIcon from '@/assets/images/conversation/analysisEmpty.png'

 /**
@@ -215,23 +213,9 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
              name="model_id"
              rules={[{ required: true, message: t('common.pleaseSelect') }]}
            >
-              <CustomSelect
-                url={getModelListUrl}
-                params={{ type: 'llm,chat', pagesize: 100, is_active: true }}
-                hasAll={false}
-                optionLabelProp="children"
-                format={(data) => {
-                  return data.map(option => ({
-                    ...data,
-                    value: option.id,
-                    label: (<div key={option.id} className="rb:flex rb:items-center rb:gap-2">
-                      {getLogoUrl(option.logo as string) && <img src={getLogoUrl(option.logo as string)} className="rb:inline-block rb:size-4 rb:align-middle" alt="" />}
-                      <span>{option.name as string}</span>
-                    </div>
-                    )
-                  }))
-                }}
-                className="rb:w-full"
+              <ModelSelect
+                params={{ type: 'llm,chat' }}
+                className="rb:w-full!"
              />
            </Form.Item>

--- a/web/src/views/ApplicationConfig/components/Knowledge/KnowledgeGlobalConfigModal.tsx
+++ b/web/src/views/ApplicationConfig/components/Knowledge/KnowledgeGlobalConfigModal.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:25:42 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-24 11:47:32
+ * @Last Modified time: 2026-03-07 17:03:22
 */
 /**
 * Knowledge Global Configuration Modal
@@ -15,8 +15,7 @@ import { useTranslation } from 'react-i18next';

 import type { RerankerConfig, KnowledgeGlobalConfigModalRef } from './types'
 import RbModal from '@/components/RbModal'
-import CustomSelect from '@/components/CustomSelect'
-import { getModelListUrl } from '@/api/models'
+import ModelSelect from '@/components/ModelSelect'

 const FormItem = Form.Item;

@@ -115,12 +114,9 @@ const KnowledgeGlobalConfigModal = forwardRef<KnowledgeGlobalConfigModalRef, Kno
            rules={[{ required: true, message: t('common.pleaseSelect') }]}
            extra={t('application.rearrangementModelDesc')}
          >
-            <CustomSelect
-              url={getModelListUrl}
-              params={{ type: 'rerank', pagesize: 100, is_active: true }}
-              valueKey="id"
-              labelKey="name"
-              hasAll={false}
+            <ModelSelect
+              params={{ type: 'rerank' }}
+              className="rb:w-full!"
            />
          </FormItem>
          {/* Top K */}
--- a/web/src/views/ModelManagement/types.ts
+++ b/web/src/views/ModelManagement/types.ts
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:50:18 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-06 12:26:11
+ * @Last Modified time: 2026-03-07 16:14:25
 */
 /**
 * Type definitions for Model Management
@@ -115,6 +115,8 @@ export interface ModelApiKey {
  updated_at: number;
  /** Associated model config IDs */
  model_config_ids: string[];
+  capability: Capability[];
+  is_omni?: boolean;
 }

 /**
@@ -325,3 +327,23 @@ export interface BaseRef {
  getList: () => void;
  modelListDetailRefresh?: () => void;
 }
+
+export type Capability = 'vision' | 'audio' | 'video';
+export interface Model {
+  name: string;
+  type: string;
+  logo: string;
+  description: string | null;
+  provider: string;
+  config: Record<string, unknown>;
+  is_active: boolean;
+  is_public: boolean;
+  load_balance_strategy: string;
+  capability: Capability[];
+  is_omni: boolean;
+  model_id: string | null;
+  id: string;
+  created_at: number;
+  updated_at: number;
+  api_keys: ModelApiKey[];
+}
--- a/web/src/views/Prompt/index.tsx
+++ b/web/src/views/Prompt/index.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 17:44:15 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-10 16:35:47
+ * @Last Modified time: 2026-03-07 17:15:05
 */
 /**
 * Prompt Editor Component
@@ -17,18 +17,16 @@ import copy from 'copy-to-clipboard';
 import { useNavigate, useLocation } from 'react-router-dom';

 import { updatePromptMessages, createPromptSessions } from '@/api/prompt'
-import { getModelListUrl } from '@/api/models'
 import type { PromptVariableModalRef, AiPromptForm, HistoryItem, PromptSaveModalRef } from './types'
 import ChatContent from '@/components/Chat/ChatContent'
 import Empty from '@/components/Empty'
 import ConversationEmptyIcon from '@/assets/images/conversation/conversationEmpty.svg'
 import type { ChatItem } from '@/components/Chat/types'
-import CustomSelect from '@/components/CustomSelect'
+import ModelSelect from '@/components/ModelSelect'
 import PromptVariableModal from './components/PromptVariableModal'
 import { type SSEMessage } from '@/utils/stream'
 import Editor from '@/views/ApplicationConfig/components/Editor'
 import PromptSaveModal from './components/PromptSaveModal'
-import { getLogoUrl } from '@/views/ModelManagement/utils'
 import analysisEmptyIcon from '@/assets/images/conversation/analysisEmpty.png'
 import Header from './components/Header';
 import RbCard from '@/components/RbCard/Card';
@@ -235,22 +233,8 @@ const Prompt: FC = () => {
                name="model_id"
                noStyle
              >
-                <CustomSelect
-                  url={getModelListUrl}
-                  params={{ type: 'llm,chat', pagesize: 100, is_active: true }}
-                  hasAll={false}
-                  optionLabelProp="children"
-                  format={(data) => {
-                    return data.map(option => ({
-                      ...data,
-                      value: option.id,
-                      label: (<div key={option.id} className="rb:flex rb:items-center rb:gap-2">
-                        {getLogoUrl(option.logo as string) && <img src={getLogoUrl(option.logo as string)} className="rb:inline-block rb:size-4 rb:align-middle" alt="" />}
-                        <span>{option.name as string}</span>
-                      </div>
-                      )
-                    }))
-                  }}
+                <ModelSelect
+                  params={{ type: 'llm,chat' }}
                  className={`rb:w-75! ${styles.select}`}
                />
              </Form.Item>
@@ -275,6 +259,7 @@ const Prompt: FC = () => {
                  >{t('common.copy')}</Button>
                  <Button
                    icon={<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/plus_dark.svg')]"></div>}
+                    disabled={!values?.current_prompt || loading}
                    onClick={handleAdd}
                  ></Button>
                </Space>}
@@ -286,7 +271,7 @@ const Prompt: FC = () => {
                    className="rb:h-[calc(100vh-201px)] rb:bg-white! rb:border-none! rb:p-0! rb:text-[#212332] rb:leading-5"
                    onChange={(value) => form.setFieldValue('current_prompt', value)}
                  />
-                  : <Empty url={analysisEmptyIcon} title={t(`prompt.promptPlaceholder`)} isNeedSubTitle={false} size={[270, 170]} className="rb:h-119 rb:w-70 rb:mx-auto! rb:text-center! rb:text-[12px]! rb:leading-4!" />
+                  : <Empty url={analysisEmptyIcon} title={t(`prompt.promptPlaceholder`)} isNeedSubTitle={false} size={[270, 170]} className="rb:h-[calc(100vh-201px)] rb:w-70 rb:mx-auto! rb:text-center! rb:text-[12px]! rb:leading-4!" />
                }
              </Form.Item>
            </RbCard>
--- a/web/src/views/Workflow/components/Properties/Knowledge/KnowledgeGlobalConfigModal.tsx
+++ b/web/src/views/Workflow/components/Properties/Knowledge/KnowledgeGlobalConfigModal.tsx
@@ -4,8 +4,7 @@ import { useTranslation } from 'react-i18next';

 import type { RerankerConfig, KnowledgeGlobalConfigModalRef } from './types'
 import RbModal from '@/components/RbModal'
-import CustomSelect from '@/components/CustomSelect'
-import { getModelListUrl } from '@/api/models'
+import ModelSelect from '@/components/ModelSelect'

 const FormItem = Form.Item;

@@ -96,12 +95,9 @@ const KnowledgeGlobalConfigModal = forwardRef<KnowledgeGlobalConfigModalRef, Kno
            rules={[{ required: true, message: t('common.pleaseSelect') }]}
            extra={t('application.rearrangementModelDesc')}
          >
-            <CustomSelect
-              url={getModelListUrl}
-              params={{ type: 'rerank', pagesize: 100, is_active: true }}
-              valueKey="id"
-              labelKey="name"
-              hasAll={false}
+            <ModelSelect
+              params={{ type: 'rerank' }}
+              className="rb:w-full!"
            />
          </FormItem>
          {/* Top K */}
--- a/web/src/views/Workflow/components/Properties/ModelConfig/index.tsx
+++ b/web/src/views/Workflow/components/Properties/ModelConfig/index.tsx
@@ -4,8 +4,7 @@ import { Form } from 'antd'

 import RbSlider from '@/components/RbSlider'
 import RbCard from '@/components/RbCard/Card'
-import CustomSelect from '@/components/CustomSelect'
-import { getModelListUrl } from '@/api/models'
+import ModelSelect from '@/components/ModelSelect'

 const ModelConfig: FC = () => {
  const { t } = useTranslation()
@@ -20,13 +19,10 @@ const ModelConfig: FC = () => {
        label={t('workflow.config.llm.model_id')}
        className={model_id ? 'rb:mb-2!' : 'rb:mb-4!'}
      >
-        <CustomSelect
+        <ModelSelect
          placeholder={t('common.pleaseSelect')}
-          url={getModelListUrl}
-          params={{ type: 'llm,chat', pagesize: 100, is_active: true }}
-          hasAll={false}
-          valueKey="id"
-          labelKey="name"
+          params={{ type: 'llm,chat' }}
+          className="rb:w-full!"
          size="small"
        />
      </Form.Item>
--- a/web/src/views/Workflow/components/Properties/index.tsx
+++ b/web/src/views/Workflow/components/Properties/index.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 15:39:59 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-05 17:48:25
+ * @Last Modified time: 2026-03-07 17:16:13
 */
 import { type FC, useEffect, useState, useMemo } from "react";
 import clsx from 'clsx'
@@ -36,6 +36,7 @@ import CodeExecution from './CodeExecution'
 import { nodeLibrary } from '../../constant';
 import RbCard from '@/components/RbCard/Card';
 import ModelConfig from './ModelConfig'
+import ModelSelect from '@/components/ModelSelect'

 /**
 * Props for Properties component
@@ -745,6 +746,13 @@ const Properties: FC<PropertiesProps> = ({
                                      isInput={true}
                                      size="small"
                                    />
+                                    : config.type === 'modelSelect'
+                                      ? <ModelSelect
+                                        placeholder={t('common.pleaseSelect')}
+                                        params={config.params}
+                                        size="small"
+                                        className="rb:w-full!"
+                                      />
                                      : config.type === 'customSelect'
                                        ? <CustomSelect
                                          placeholder={t('common.pleaseSelect')}
--- a/web/src/views/Workflow/constant.ts
+++ b/web/src/views/Workflow/constant.ts
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 15:06:18 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-06 14:52:02
+ * @Last Modified time: 2026-03-07 17:10:59
 */
 import LoopNode from './components/Nodes/LoopNode';
 import NormalNode from './components/Nodes/NormalNode';
@@ -34,8 +34,6 @@ import memoryWriteIcon from '@/assets/images/workflow/memory-write.svg'
 import unknownIcon from '@/assets/images/workflow/unknown.svg'

 import { memoryConfigListUrl } from '@/api/memory'
-
-import { getModelListUrl } from '@/api/models'
 import type { NodeLibrary } from './types'

 /**
@@ -104,8 +102,7 @@ export const nodeLibrary: NodeLibrary[] = [
        config: {
          model_id: {
            type: 'define',
-            url: getModelListUrl,
-            params: { type: 'llm,chat', pagesize: 100, is_active: true }, // llm/chat
+            params: { type: 'llm,chat' }, // llm/chat
            valueKey: 'id',
            labelKey: 'name',
          },
@@ -168,11 +165,8 @@ export const nodeLibrary: NodeLibrary[] = [
      { type: "parameter-extractor", icon: parameterExtractionIcon,
        config: {
          model_id: {
-            type: 'customSelect',
-            url: getModelListUrl,
-            params: { type: 'llm,chat', pagesize: 100, is_active: true }, // llm/chat
-            valueKey: 'id',
-            labelKey: 'name',
+            type: 'modelSelect',
+            params: { type: 'llm,chat' }, // llm/chat
          },
          text: {
            type: 'variableList',
@@ -260,11 +254,8 @@ export const nodeLibrary: NodeLibrary[] = [
      { type: "question-classifier", icon: questionClassifierIcon,
        config: {
          model_id: {
-            type: 'customSelect',
-            url: getModelListUrl,
-            params: { type: 'llm,chat', pagesize: 100, is_active: true }, // llm/chat
-            valueKey: 'id',
-            labelKey: 'name',
+            type: 'modelSelect',
+            params: { type: 'llm,chat' }, // llm/chat
          },
          input_variable: {
            type: 'variableList',