perf: model test;perf: sidebar trigger (#4127)

* fix: import dataset step error;perf: ai proxy avatar (#4074) * perf: pg config params * perf: ai proxy avatar * fix: import dataset step error * feat: data input ux * perf: app dataset rewite * perf: model test * perf: sidebar trigger * lock * update nanoid version * fix: select component ux * fix: ts * fix: vitest * remove test
2025-03-12 21:11:43 +08:00
parent 8bc29e6527
commit 177d490639
64 changed files with 438 additions and 1356 deletions
--- a/projects/app/src/pageComponents/account/TeamSelector.tsx
+++ b/projects/app/src/pageComponents/account/TeamSelector.tsx
@@ -46,48 +46,21 @@ const TeamSelector = ({

  const teamList = useMemo(() => {
    return myTeams.map((team) => ({
-      label: (
-        <Flex
-          key={team.teamId}
-          alignItems={'center'}
-          borderRadius={'md'}
-          cursor={'default'}
-          gap={3}
-          onClick={() => onSwitchTeam(team.teamId)}
-          _hover={{
-            cursor: 'pointer'
-          }}
-        >
-          <Avatar src={team.avatar} w={['1.25rem', '1.375rem']} />
-          <Box flex={'1 0 0'} w={0} className="textEllipsis" fontSize={'sm'}>
-            {team.teamName}
-          </Box>
-        </Flex>
-      ),
+      icon: team.avatar,
+      iconSize: '1.25rem',
+      label: team.teamName,
      value: team.teamId
    }));
-  }, [myTeams, onSwitchTeam]);
+  }, [myTeams]);

  const formatTeamList = useMemo(() => {
    return [
      ...(showManage
        ? [
            {
-              label: (
-                <Flex
-                  key={'manage'}
-                  alignItems={'center'}
-                  borderRadius={'md'}
-                  cursor={'pointer'}
-                  gap={3}
-                  onClick={() => router.push('/account/team')}
-                >
-                  <MyIcon name="common/setting" w={['1.25rem', '1.375rem']} />
-                  <Box flex={'1 0 0'} w={0} className="textEllipsis" fontSize={'sm'}>
-                    {t('user:manage_team')}
-                  </Box>
-                </Flex>
-              ),
+              icon: 'common/setting',
+              iconSize: '1.25rem',
+              label: t('user:manage_team'),
              value: 'manage',
              showBorder: true
            }
@@ -95,11 +68,24 @@ const TeamSelector = ({
        : []),
      ...teamList
    ];
-  }, [showManage, t, teamList, router]);
+  }, [showManage, t, teamList]);
+
+  const handleChange = (value: string) => {
+    if (value === 'manage') {
+      router.push('/account/team');
+    } else {
+      onSwitchTeam(value);
+    }
+  };

  return (
    <Box w={'100%'}>
-      <MySelect {...props} value={userInfo?.team?.teamId} list={formatTeamList} />
+      <MySelect
+        {...props}
+        value={userInfo?.team?.teamId}
+        list={formatTeamList}
+        onChange={handleChange}
+      />
    </Box>
  );
 };
--- a/projects/app/src/pageComponents/account/bill/BillTable.tsx
+++ b/projects/app/src/pageComponents/account/bill/BillTable.tsx
@@ -111,7 +111,7 @@ const BillTable = () => {
                  list={billTypeList}
                  value={billType}
                  size={'sm'}
-                  onchange={(e) => {
+                  onChange={(e) => {
                    setBillType(e);
                  }}
                  w={'130px'}
--- a/projects/app/src/pageComponents/account/model/AddModelBox.tsx
+++ b/projects/app/src/pageComponents/account/model/AddModelBox.tsx
@@ -213,7 +213,7 @@ export const ModelEditModal = ({
                  <Td textAlign={'right'}>
                    <MySelect
                      value={provider}
-                      onchange={(value) => setValue('provider', value)}
+                      onChange={(value) => setValue('provider', value)}
                      list={providerList.current}
                      {...InputStyles}
                    />
--- a/projects/app/src/pageComponents/account/model/Channel/EditChannelModal.tsx
+++ b/projects/app/src/pageComponents/account/model/Channel/EditChannelModal.tsx
@@ -194,7 +194,7 @@ const EditChannelModal = ({
                placeholder={t('account_model:select_provider_placeholder')}
                value={providerType}
                isSearch
-                onchange={(val) => {
+                onChange={(val) => {
                  setValue('type', val);
                }}
              />
@@ -333,6 +333,8 @@ const MultipleSelect = ({ value = [], list = [], onSelect }: SelectProps) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const { copyData } = useCopyData();

+  const [search, setSearch] = useState('');
+
  const onclickItem = useCallback(
    (val: string) => {
      if (value.includes(val)) {
@@ -343,12 +345,11 @@ const MultipleSelect = ({ value = [], list = [], onSelect }: SelectProps) => {
          top: BoxRef.current.scrollHeight
        });
      }
+      setSearch('');
    },
    [value, onSelect]
  );

-  const [search, setSearch] = useState('');
-
  const filterUnSelected = useMemo(() => {
    return list
      .filter((item) => !value.includes(item.value))
--- a/projects/app/src/pageComponents/account/model/Channel/ModelTest.tsx
+++ b/projects/app/src/pageComponents/account/model/Channel/ModelTest.tsx
@@ -25,6 +25,7 @@ import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 import { getErrText } from '@fastgpt/global/common/error/utils';
 import { batchRun } from '@fastgpt/global/common/system/utils';
 import { useToast } from '@fastgpt/web/hooks/useToast';
+import MyIconButton from '@fastgpt/web/components/common/Icon/button';

 type ModelTestItem = {
  label: React.ReactNode;
@@ -143,13 +144,47 @@ const ModelTest = ({
      refreshDeps: [testModelList]
    }
  );
+  const { runAsync: onTestOneModel, loading: testingOneModel } = useRequest2(
+    async (model: string) => {
+      const start = Date.now();
+
+      setTestModelList((prev) =>
+        prev.map((item) =>
+          item.model === model ? { ...item, status: 'running', message: '' } : item
+        )
+      );
+
+      try {
+        await getTestModel({ model, channelId });
+        const duration = Date.now() - start;
+
+        setTestModelList((prev) =>
+          prev.map((item) =>
+            item.model === model ? { ...item, status: 'success', duration: duration / 1000 } : item
+          )
+        );
+      } catch (error) {
+        setTestModelList((prev) =>
+          prev.map((item) =>
+            item.model === model ? { ...item, status: 'error', message: getErrText(error) } : item
+          )
+        );
+      }
+    },
+    {
+      manual: true
+    }
+  );
+
+  const isTestLoading = testingOneModel || isTesting;

  return (
    <MyModal
      iconSrc={'core/chat/sendLight'}
      isLoading={loadingModels}
      title={t('account_model:model_test')}
-      w={'600px'}
+      w={'100%'}
+      maxW={['90vw', '1090px']}
      isOpen
    >
      <ModalBody>
@@ -157,8 +192,10 @@ const ModelTest = ({
          <Table>
            <Thead>
              <Tr>
-                <Th>{t('account_model:model')}</Th>
+                <Th>{t('account_model:model_name')}</Th>
+                <Th>{t('account:model.model_id')}</Th>
                <Th>{t('account_model:channel_status')}</Th>
+                <Th></Th>
              </Tr>
            </Thead>
            <Tbody>
@@ -167,6 +204,7 @@ const ModelTest = ({
                return (
                  <Tr key={item.model}>
                    <Td>{item.label}</Td>
+                    <Td>{item.model}</Td>
                    <Td>
                      <Flex alignItems={'center'}>
                        <MyTag mr={1} type="borderSolid" colorSchema={data.colorSchema as any}>
@@ -182,6 +220,16 @@ const ModelTest = ({
                        )}
                      </Flex>
                    </Td>
+                    <Td>
+                      <MyIconButton
+                        isLoading={isTestLoading}
+                        icon={'core/chat/sendLight'}
+                        tip={t('account:model.test_model')}
+                        onClick={() => {
+                          onTestOneModel(item.model);
+                        }}
+                      />
+                    </Td>
                  </Tr>
                );
              })}
@@ -193,7 +241,7 @@ const ModelTest = ({
        <Button mr={4} variant={'whiteBase'} onClick={onClose}>
          {t('common:common.Cancel')}
        </Button>
-        <Button isLoading={isTesting} variant={'primary'} onClick={onStartTest}>
+        <Button isLoading={isTestLoading} variant={'primary'} onClick={onStartTest}>
          {t('account_model:start_test', { num: testModelList.length })}
        </Button>
      </ModalFooter>
--- a/projects/app/src/pageComponents/account/model/Log/index.tsx
+++ b/projects/app/src/pageComponents/account/model/Log/index.tsx
@@ -206,7 +206,7 @@ const ChannelLog = ({ Tab }: { Tab: React.ReactNode }) => {
              list={channelList}
              placeholder={t('account_model:select_channel')}
              value={filterProps.channelId}
-              onchange={(val) => setFilterProps({ ...filterProps, channelId: val })}
+              onChange={(val) => setFilterProps({ ...filterProps, channelId: val })}
            />
          </Box>
        </HStack>
@@ -219,7 +219,7 @@ const ChannelLog = ({ Tab }: { Tab: React.ReactNode }) => {
              list={modelList}
              placeholder={t('account_model:select_model')}
              value={filterProps.model}
-              onchange={(val) => setFilterProps({ ...filterProps, model: val })}
+              onChange={(val) => setFilterProps({ ...filterProps, model: val })}
            />
          </Box>
        </HStack>
@@ -234,7 +234,7 @@ const ChannelLog = ({ Tab }: { Tab: React.ReactNode }) => {
                { label: t('common:common.failed'), value: 'error' }
              ]}
              value={filterProps.code_type}
-              onchange={(val) => setFilterProps({ ...filterProps, code_type: val })}
+              onChange={(val) => setFilterProps({ ...filterProps, code_type: val })}
            />
          </Box>
        </HStack>
--- a/projects/app/src/pageComponents/account/model/ModelConfigTable.tsx
+++ b/projects/app/src/pageComponents/account/model/ModelConfigTable.tsx
@@ -326,7 +326,7 @@ const ModelTable = ({ Tab }: { Tab: React.ReactNode }) => {
                w={'200px'}
                bg={'myGray.50'}
                value={provider}
-                onchange={setProvider}
+                onChange={setProvider}
                list={filterProviderList}
              />
            </HStack>
@@ -338,7 +338,7 @@ const ModelTable = ({ Tab }: { Tab: React.ReactNode }) => {
                w={'150px'}
                bg={'myGray.50'}
                value={modelType}
-                onchange={setModelType}
+                onChange={setModelType}
                list={selectModelTypeList.current}
              />
            </HStack>
@@ -436,7 +436,7 @@ const ModelTable = ({ Tab }: { Tab: React.ReactNode }) => {
                        <MyIconButton
                          icon={'core/chat/sendLight'}
                          tip={t('account:model.test_model')}
-                          onClick={() => onTestModel(item.model)}
+                          onClick={() => onTestModel({ model: item.model })}
                        />
                        <MyIconButton
                          icon={'common/settingLight'}
@@ -597,7 +597,7 @@ const DefaultModelModal = ({
                value: item.model,
                label: item.name
              }))}
-              onchange={(e) => {
+              onChange={(e) => {
                setDefaultData((state) => ({
                  ...state,
                  llm: llmModelList.find((item) => item.model === e)
@@ -616,7 +616,7 @@ const DefaultModelModal = ({
                value: item.model,
                label: item.name
              }))}
-              onchange={(e) => {
+              onChange={(e) => {
                setDefaultData((state) => ({
                  ...state,
                  embedding: embeddingModelList.find((item) => item.model === e)
@@ -635,7 +635,7 @@ const DefaultModelModal = ({
                value: item.model,
                label: item.name
              }))}
-              onchange={(e) => {
+              onChange={(e) => {
                setDefaultData((state) => ({
                  ...state,
                  tts: ttsModelList.find((item) => item.model === e)
@@ -654,7 +654,7 @@ const DefaultModelModal = ({
                value: item.model,
                label: item.name
              }))}
-              onchange={(e) => {
+              onChange={(e) => {
                setDefaultData((state) => ({
                  ...state,
                  stt: sttModelList.find((item) => item.model === e)
@@ -673,7 +673,7 @@ const DefaultModelModal = ({
                value: item.model,
                label: item.name
              }))}
-              onchange={(e) => {
+              onChange={(e) => {
                setDefaultData((state) => ({
                  ...state,
                  rerank: reRankModelList.find((item) => item.model === e)
@@ -696,7 +696,7 @@ const DefaultModelModal = ({
                value: item.model,
                label: item.name
              }))}
-              onchange={(e) => {
+              onChange={(e) => {
                setDefaultData((state) => ({
                  ...state,
                  datasetTextLLM: datasetModelList.find((item) => item.model === e)
@@ -718,7 +718,7 @@ const DefaultModelModal = ({
                value: item.model,
                label: item.name
              }))}
-              onchange={(e) => {
+              onChange={(e) => {
                setDefaultData((state) => ({
                  ...state,
                  datasetImageLLM: vlmModelList.find((item) => item.model === e)
--- a/projects/app/src/pageComponents/account/team/Invite/CreateInvitationModal.tsx
+++ b/projects/app/src/pageComponents/account/team/Invite/CreateInvitationModal.tsx
@@ -71,7 +71,7 @@ function CreateInvitationModal({ onClose }: { onClose: () => void }) {
            <MySelect
              list={expiresOptions}
              value={expires}
-              onchange={(val) => setValue('expires', val)}
+              onChange={(val) => setValue('expires', val)}
              minW="120px"
            />
          </>
--- a/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeExtract/ExtractFieldModal.tsx
+++ b/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeExtract/ExtractFieldModal.tsx
@@ -84,7 +84,7 @@ const ExtractFieldModal = ({
            <MySelect<string>
              list={toolValueTypeList}
              value={valueType}
-              onchange={(e) => {
+              onChange={(e) => {
                setValue('valueType', e as any);
              }}
            />
--- a/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeHttp/index.tsx
+++ b/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeHttp/index.tsx
@@ -217,7 +217,7 @@ const RenderHttpMethodAndUrl = React.memo(function RenderHttpMethodAndUrl({
              value: 'PATCH'
            }
          ]}
-          onchange={(e) => {
+          onChange={(e) => {
            onChangeNode({
              nodeId,
              type: 'updateInput',
--- a/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeIfElse/ListItem.tsx
+++ b/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeIfElse/ListItem.tsx
@@ -396,7 +396,7 @@ const ConditionSelect = ({
      w={'100%'}
      list={filterQuiredConditionList}
      value={condition}
-      onchange={onSelect}
+      onChange={onSelect}
      placeholder={t('common:chose_condition')}
    />
  );
@@ -441,7 +441,7 @@ const ConditionValueInput = ({
            { label: 'True', value: 'true' },
            { label: 'False', value: 'false' }
          ]}
-          onchange={onChange}
+          onChange={onChange}
          value={value}
          placeholder={workflowT('ifelse.Select value')}
          isDisabled={
--- a/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeLaf.tsx
+++ b/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeLaf.tsx
@@ -235,7 +235,7 @@ const NodeLaf = (props: NodeProps<FlowNodeItemType>) => {
              isLoading={isLoadingFunctions}
              list={lafFunctionSelectList}
              placeholder={t('common:core.module.laf.Select laf function')}
-              onchange={(e) => {
+              onChange={(e) => {
                onChangeNode({
                  nodeId,
                  type: 'updateInput',
--- a/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig.tsx
+++ b/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig.tsx
@@ -209,7 +209,7 @@ const InputTypeConfig = ({
                    (item) => item.value !== WorkflowIOValueTypeEnum.arrayAny
                  )}
                  value={valueType}
-                  onchange={(e) => {
+                  onChange={(e) => {
                    setValue('valueType', e);
                  }}
                />
@@ -346,7 +346,7 @@ const InputTypeConfig = ({
                      ? defaultValue
                      : ''
                  }
-                  onchange={(e) => {
+                  onChange={(e) => {
                    setValue('defaultValue', e);
                  }}
                  w={'200px'}
--- a/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodePluginIO/PluginOutputEditModal.tsx
+++ b/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodePluginIO/PluginOutputEditModal.tsx
@@ -144,7 +144,7 @@ const PluginOutputEditModal = ({
                    (item) => item.value !== WorkflowIOValueTypeEnum.arrayAny
                  )}
                  value={valueType}
-                  onchange={(e) => {
+                  onChange={(e) => {
                    setValue('valueType', e);
                  }}
                />
--- a/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeToolParams/ToolParamsEditModal.tsx
+++ b/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeToolParams/ToolParamsEditModal.tsx
@@ -123,7 +123,7 @@ const ToolParamsEditModal = ({
            <MySelect
              list={toolValueTypeList}
              value={valueType}
-              onchange={(e: any) => {
+              onChange={(e: any) => {
                setValue('valueType', e);
              }}
            />
--- a/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/render/RenderInput/FieldEditModal.tsx
+++ b/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/render/RenderInput/FieldEditModal.tsx
@@ -137,7 +137,7 @@ const FieldModal = ({
                    (item) => item.value !== WorkflowIOValueTypeEnum.arrayAny
                  )}
                  value={valueType}
-                  onchange={(e) => {
+                  onChange={(e) => {
                    setValue('valueType', e);
                  }}
                />
--- a/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/render/RenderInput/templates/Select.tsx
+++ b/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/render/RenderInput/templates/Select.tsx
@@ -14,7 +14,7 @@ const SelectRender = ({ item, nodeId }: RenderInputProps) => {
        width={'100%'}
        value={item.value}
        list={item.list || []}
-        onchange={(e) => {
+        onChange={(e) => {
          onChangeNode({
            nodeId,
            type: 'updateInput',
--- a/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/render/RenderInput/templates/SelectLLMModel.tsx
+++ b/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/render/RenderInput/templates/SelectLLMModel.tsx
@@ -57,7 +57,7 @@ const SelectAiModelRender = ({ item, nodeId }: RenderInputProps) => {
          value: item.model,
          label: item.name
        }))}
-        onchange={onChangeModel}
+        onChange={onChangeModel}
      />
    );
  }, [item.value, modelList, onChangeModel]);
--- a/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/render/RenderInput/templates/SettingQuotePrompt.tsx
+++ b/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/render/RenderInput/templates/SettingQuotePrompt.tsx
@@ -201,7 +201,7 @@ const EditModal = ({ onClose, ...props }: RenderInputProps & { onClose: () => vo
                  description: t('workflow:dataset_quote_role_user_option_desc')
                }
              ]}
-              onchange={(e) => {
+              onChange={(e) => {
                setValue('quoteRole', e);
              }}
            />
--- a/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/render/RenderOutput/FieldEditModal.tsx
+++ b/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/render/RenderOutput/FieldEditModal.tsx
@@ -131,7 +131,7 @@ const FieldModal = ({
                    (item) => item.value !== WorkflowIOValueTypeEnum.arrayAny
                  )}
                  value={valueType}
-                  onchange={(e) => {
+                  onChange={(e) => {
                    setValue('valueType', e);
                  }}
                />
--- a/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/render/RenderToolInput/EditFieldModal.tsx
+++ b/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/render/RenderToolInput/EditFieldModal.tsx
@@ -97,7 +97,7 @@ const EditFieldModal = ({
            <MySelect
              list={toolValueTypeList}
              value={valueType}
-              onchange={(e: any) => {
+              onChange={(e: any) => {
                setValue('valueType', e);
              }}
            />
--- a/projects/app/src/pageComponents/app/list/TemplateMarketModal.tsx
+++ b/projects/app/src/pageComponents/app/list/TemplateMarketModal.tsx
@@ -289,7 +289,7 @@ const TemplateMarketModal = ({
          <MySelect<TemplateAppType>
            h={'8'}
            value={currentAppType}
-            onchange={(value) => {
+            onChange={(value) => {
              setCurrentAppType(value);
            }}
            bg={'myGray.100'}
--- a/projects/app/src/pageComponents/dataset/detail/Import/commonProgress/DataProcess.tsx
+++ b/projects/app/src/pageComponents/dataset/detail/Import/commonProgress/DataProcess.tsx
@@ -333,7 +333,7 @@ function DataProcess() {
                      label: item.name,
                      value: item.model
                    }))}
-                    onchange={(e) => {
+                    onChange={(e) => {
                      setValue('llmModel', e);
                    }}
                  />
@@ -349,7 +349,7 @@ function DataProcess() {
                      label: item.name,
                      value: item.model
                    }))}
-                    onchange={(e) => {
+                    onChange={(e) => {
                      setValue('vlmModel', e);
                    }}
                  />
--- a/projects/app/src/pageComponents/dataset/detail/Info/index.tsx
+++ b/projects/app/src/pageComponents/dataset/detail/Info/index.tsx
@@ -195,7 +195,7 @@ const Info = ({ datasetId }: { datasetId: string }) => {
                label: item.name,
                value: item.model
              }))}
-              onchange={(e) => {
+              onChange={(e) => {
                const vectorModel = embeddingModelList.find((item) => item.model === e);
                if (!vectorModel) return;
                return onOpenConfirmRebuild(async () => {
@@ -220,7 +220,7 @@ const Info = ({ datasetId }: { datasetId: string }) => {
                value: item.model
              }))}
              fontSize={'mini'}
-              onchange={(e) => {
+              onChange={(e) => {
                const agentModel = datasetModelList.find((item) => item.model === e);
                if (!agentModel) return;
                setValue('agentModel', agentModel);
@@ -244,7 +244,7 @@ const Info = ({ datasetId }: { datasetId: string }) => {
                  value: item.model
                }))}
                fontSize={'mini'}
-                onchange={(e) => {
+                onChange={(e) => {
                  const vlmModel = vllmModelList.find((item) => item.model === e);
                  if (!vlmModel) return;
                  setValue('vlmModel', vlmModel);
--- a/projects/app/src/pageComponents/dataset/detail/Test.tsx
+++ b/projects/app/src/pageComponents/dataset/detail/Test.tsx
@@ -186,7 +186,7 @@ const Test = ({ datasetId }: { datasetId: string }) => {
                // }
              ]}
              value={inputType}
-              onchange={(e) => setInputType(e)}
+              onChange={(e) => setInputType(e)}
            />

            <Button
--- a/projects/app/src/pageComponents/dataset/list/CreateModal.tsx
+++ b/projects/app/src/pageComponents/dataset/list/CreateModal.tsx
@@ -205,7 +205,7 @@ const CreateModal = ({
                label: item.name,
                value: item.model
              }))}
-              onchange={(e) => {
+              onChange={(e) => {
                setValue('vectorModel' as const, e);
              }}
            />
@@ -237,7 +237,7 @@ const CreateModal = ({
                label: item.name,
                value: item.model
              }))}
-              onchange={(e) => {
+              onChange={(e) => {
                setValue('agentModel', e);
              }}
            />
@@ -269,7 +269,7 @@ const CreateModal = ({
                  label: item.name,
                  value: item.model
                }))}
-                onchange={(e) => {
+                onChange={(e) => {
                  setValue('vlmModel', e);
                }}
              />