adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): model select component replace

Browse Source
This commit is contained in:
zhaoying
2026-03-07 17:18:27 +08:00
parent 153e68e055
commit 509d1a2e24
10 changed files with 501 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
web/src/components/ModelSelect/index.tsx Normal file
View File

@@ -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;

15
web/src/views/ApplicationConfig/Cluster.tsx
View File

@@ -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>

26
web/src/views/ApplicationConfig/components/AiPromptModal.tsx
View File

@@ -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>

14
web/src/views/ApplicationConfig/components/Knowledge/KnowledgeGlobalConfigModal.tsx
View File

@@ -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 */}

24
web/src/views/ModelManagement/types.ts
View File

@@ -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[];
}

27
web/src/views/Prompt/index.tsx
View File

@@ -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>

12
web/src/views/Workflow/components/Properties/Knowledge/KnowledgeGlobalConfigModal.tsx
View File

@@ -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 */}

12
web/src/views/Workflow/components/Properties/ModelConfig/index.tsx
View File

@@ -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>

16
web/src/views/Workflow/components/Properties/index.tsx
View File

@@ -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
@@ -72,7 +73,7 @@ const Properties: FC<PropertiesProps> = ({
}) => {
const { t } = useTranslation()
const [form] = Form.useForm<NodeConfig>();
const [configs, setConfigs] = useState<Record<string,NodeConfig>>({} as Record<string,NodeConfig>)
const [configs, setConfigs] = useState<Record<string, NodeConfig>>({} as Record<string, NodeConfig>)
const values = Form.useWatch([], form);
const variableList = useVariableList(selectedNode, graphRef, chatVariables)
@@ -416,7 +417,7 @@ const Properties: FC<PropertiesProps> = ({
}
}
const handleClick: MenuProps['onClick'] = (e) => {
switch(e.key) {
switch (e.key) {
case 'delete':
selectedNode.remove()
break;
@@ -433,7 +434,7 @@ const Properties: FC<PropertiesProps> = ({
<Dropdown
menu={{
items: [
{ key: 'delete', icon: <div className="rb:size-4 rb:bg-cover rb:bg-[url('src/assets/images/common/delete_dark.svg')]"></div>, label: <Flex>{t('common.delete')}</Flex>},
{ key: 'delete', icon: <div className="rb:size-4 rb:bg-cover rb:bg-[url('src/assets/images/common/delete_dark.svg')]"></div>, label: <Flex>{t('common.delete')}</Flex> },
// { key: 'copy', icon: <div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/copy_dark.svg')]"></div>, label: t('common.copy') }
],
onClick: handleClick
@@ -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')}

21
web/src/views/Workflow/constant.ts
View File

@@ -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',