Fix: Fixed the styling and logic issues on the model provider page #10703 (#10909)

### What problem does this PR solve?

Fix: Fixed the styling and logic issues on the model provider page

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/hooks/llm-hooks.tsx

@@ -1,4 +1,5 @@
 import { LlmIcon } from '@/components/svg-icon';
+import message from '@/components/ui/message';
 import { LlmModelType } from '@/constants/knowledge';
 import { ResponseGetType } from '@/interfaces/database/base';
 import {
@@ -16,7 +17,6 @@ import userService from '@/services/user-service';
 import { sortLLmFactoryListBySpecifiedOrder } from '@/utils/common-util';
 import { getLLMIconName, getRealModelName } from '@/utils/llm-util';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { Flex, message } from 'antd';
 import { DefaultOptionType } from 'antd/es/select';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -59,7 +59,7 @@ export const useSelectLlmOptions = () => {
 function buildLlmOptionsWithIcon(x: IThirdOAIModel) {
   return {
     label: (
-      <Flex align="center" gap={6}>
+      <div className="flex items-center justify-center gap-6">
         <LlmIcon
           name={getLLMIconName(x.fid, x.llm_name)}
           width={26}
@@ -67,7 +67,7 @@ function buildLlmOptionsWithIcon(x: IThirdOAIModel) {
           size={'small'}
         />
         <span>{getRealModelName(x.llm_name)}</span>
-      </Flex>
+      </div>
     ),
     value: `${x.llm_name}@${x.fid}`,
     disabled: !x.available,
@@ -81,7 +81,6 @@ export const useSelectLlmOptionsByModelType = () => {
   const groupImage2TextOptions = useCallback(() => {
     const modelType = LlmModelType.Image2text;
     const modelTag = modelType.toUpperCase();
-
     return Object.entries(llmInfo)
       .map(([key, value]) => {
         return {
@@ -91,7 +90,8 @@ export const useSelectLlmOptionsByModelType = () => {
               (x) =>
                 (x.model_type.includes(modelType) ||
                   (x.tags && x.tags.includes(modelTag))) &&
-                x.available,
+                x.available &&
+                x.status === '1',
             )
             .map(buildLlmOptionsWithIcon),
         };
@@ -141,7 +141,6 @@ export const useComposeLlmOptionsByModelTypes = (
   modelTypes: LlmModelType[],
 ) => {
   const allOptions = useSelectLlmOptionsByModelType();
-
   return modelTypes.reduce<
     (DefaultOptionType & {
       options: {
@@ -359,6 +358,35 @@ export const useDeleteLlm = () => {
   return { data, loading, deleteLlm: mutateAsync };
 };
 
+export const useEnableLlm = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: ['enableLlm'],
+    mutationFn: async (params: IDeleteLlmRequestBody & { enable: boolean }) => {
+      const reqParam: IDeleteLlmRequestBody & {
+        enable?: boolean;
+        status?: 1 | 0;
+      } = { ...params, status: params.enable ? 1 : 0 };
+      delete reqParam.enable;
+      const { data } = await userService.enable_llm(reqParam);
+      if (data.code === 0) {
+        queryClient.invalidateQueries({ queryKey: ['myLlmList'] });
+        queryClient.invalidateQueries({ queryKey: ['myLlmListDetailed'] });
+        queryClient.invalidateQueries({ queryKey: ['factoryList'] });
+        message.success(t('message.modified'));
+      }
+      return data.code;
+    },
+  });
+
+  return { data, loading, enableLlm: mutateAsync };
+};
+
 export const useDeleteFactory = () => {
   const queryClient = useQueryClient();
   const { t } = useTranslation();

web/src/interfaces/database/llm.ts

@@ -37,5 +37,6 @@ export interface IMyLlmValue {
 export interface Llm {
   name: string;
   type: string;
+  status: '0' | '1';
   used_token: number;
 }

web/src/locales/en.ts

@@ -680,6 +680,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
       tocEnhanceTip: ` During the parsing of the document, table of contents information was generated (see the 'Enable Table of Contents Extraction' option in the General method). This allows the large model to return table of contents items relevant to the user's query, thereby using these items to retrieve related chunks and apply weighting to these chunks during the sorting process. This approach is derived from mimicking the behavioral logic of how humans search for knowledge in books.`,
     },
     setting: {
+      save: 'Save',
       search: 'Search',
       availableModels: 'Available models',
       profile: 'Profile',

web/src/locales/zh.ts

@@ -671,6 +671,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       tocEnhanceTip: `解析文档时生成了目录信息（见General方法的‘启用目录抽取’），让大模型返回和用户问题相关的目录项，从而利用目录项拿到相关chunk，对这些chunk在排序中进行加权。这种方法来源于模仿人类查询书本中知识的行为逻辑`,
     },
     setting: {
+      save: '保存',
       search: '搜索',
       availableModels: '可选模型',
       profile: '概要',

web/src/pages/user-setting/setting-model/api-key-modal/index.tsx

@@ -1,129 +0,0 @@
-import { IModalManagerChildrenProps } from '@/components/modal-manager';
-import { LLMFactory } from '@/constants/llm';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Input, Modal } from 'antd';
-import { KeyboardEventHandler, useCallback, useEffect } from 'react';
-import { ApiKeyPostBody } from '../../interface';
-
-interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
-  loading: boolean;
-  initialValue: string;
-  llmFactory: string;
-  editMode?: boolean;
-  onOk: (postBody: ApiKeyPostBody) => void;
-  showModal?(): void;
-}
-
-type FieldType = {
-  api_key?: string;
-  base_url?: string;
-  group_id?: string;
-};
-
-const modelsWithBaseUrl = [
-  LLMFactory.OpenAI,
-  LLMFactory.AzureOpenAI,
-  LLMFactory.TongYiQianWen,
-];
-
-const ApiKeyModal = ({
-  visible,
-  hideModal,
-  llmFactory,
-  loading,
-  initialValue,
-  editMode = false,
-  onOk,
-}: IProps) => {
-  const [form] = Form.useForm();
-  const { t } = useTranslate('setting');
-
-  const handleOk = useCallback(async () => {
-    const ret = await form.validateFields();
-
-    return onOk(ret);
-  }, [form, onOk]);
-
-  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = useCallback(
-    async (e) => {
-      if (e.key === 'Enter') {
-        await handleOk();
-      }
-    },
-    [handleOk],
-  );
-
-  useEffect(() => {
-    if (visible) {
-      form.setFieldValue('api_key', initialValue);
-    }
-  }, [initialValue, form, visible]);
-
-  return (
-    <Modal
-      title={editMode ? t('editModel') : t('modify')}
-      open={visible}
-      onOk={handleOk}
-      onCancel={hideModal}
-      okButtonProps={{ loading }}
-      confirmLoading={loading}
-    >
-      <Form
-        name="basic"
-        labelCol={{ span: 6 }}
-        wrapperCol={{ span: 18 }}
-        style={{ maxWidth: 600 }}
-        autoComplete="off"
-        form={form}
-      >
-        <Form.Item<FieldType>
-          label={t('apiKey')}
-          name="api_key"
-          tooltip={t('apiKeyTip')}
-          rules={[{ required: true, message: t('apiKeyMessage') }]}
-        >
-          <Input onKeyDown={handleKeyDown} />
-        </Form.Item>
-        {modelsWithBaseUrl.some((x) => x === llmFactory) && (
-          <Form.Item<FieldType>
-            label={t('baseUrl')}
-            name="base_url"
-            tooltip={
-              llmFactory === LLMFactory.TongYiQianWen
-                ? t('tongyiBaseUrlTip')
-                : t('baseUrlTip')
-            }
-          >
-            <Input
-              placeholder={
-                llmFactory === LLMFactory.TongYiQianWen
-                  ? t('tongyiBaseUrlPlaceholder')
-                  : 'https://api.openai.com/v1'
-              }
-              onKeyDown={handleKeyDown}
-            />
-          </Form.Item>
-        )}
-        {llmFactory?.toLowerCase() === 'Anthropic'.toLowerCase() && (
-          <Form.Item<FieldType>
-            label={t('baseUrl')}
-            name="base_url"
-            tooltip={t('baseUrlTip')}
-          >
-            <Input
-              placeholder="https://api.anthropic.com/v1"
-              onKeyDown={handleKeyDown}
-            />
-          </Form.Item>
-        )}
-        {llmFactory?.toLowerCase() === 'Minimax'.toLowerCase() && (
-          <Form.Item<FieldType> label={'Group ID'} name="group_id">
-            <Input />
-          </Form.Item>
-        )}
-      </Form>
-    </Modal>
-  );
-};
-
-export default ApiKeyModal;

web/src/pages/user-setting/setting-model/components/modal-card.tsx

@@ -1,6 +1,7 @@
 // src/components/ModelProviderCard.tsx
 import { LlmIcon } from '@/components/svg-icon';
 import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
 import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
 import { LlmItem } from '@/hooks/llm-hooks';
 import { getRealModelName } from '@/utils/llm-util';
@@ -8,7 +9,7 @@ import { EditOutlined, SettingOutlined } from '@ant-design/icons';
 import { ChevronsDown, ChevronsUp, Trash2 } from 'lucide-react';
 import { FC } from 'react';
 import { isLocalLlmFactory } from '../../utils';
-import { useHandleDeleteFactory, useHandleDeleteLlm } from '../hooks';
+import { useHandleDeleteFactory, useHandleEnableLlm } from '../hooks';
 
 interface IModelCardProps {
   item: LlmItem;
@@ -52,7 +53,7 @@ export const ModelProviderCard: FC<IModelCardProps> = ({
 }) => {
   const { visible, switchVisible } = useSetModalState();
   const { t } = useTranslate('setting');
-  const { handleDeleteLlm } = useHandleDeleteLlm(item.name);
+  const { handleEnableLlm } = useHandleEnableLlm(item.name);
   const { handleDeleteFactory } = useHandleDeleteFactory(item.name);
 
   const handleApiKeyClick = () => {
@@ -66,7 +67,7 @@ export const ModelProviderCard: FC<IModelCardProps> = ({
   return (
     <div className={`w-full rounded-lg border border-border-default`}>
       {/* Header */}
-      <div className="flex items-center justify-between p-4 cursor-pointer transition-colors">
+      <div className="flex h-16  items-center justify-between p-4 cursor-pointer transition-colors">
         <div className="flex items-center space-x-3">
           <LlmIcon name={item.name} />
           <div>
@@ -151,16 +152,12 @@ export const ModelProviderCard: FC<IModelCardProps> = ({
                         <EditOutlined />
                       </Button>
                     )}
-                    <Button
+                    <Switch
-                      variant={'secondary'}
+                      checked={model.status === '1'}
-                      onClick={() => {
+                      onCheckedChange={(value) => {
-                        handleDeleteLlm(model.name);
+                        handleEnableLlm(model.name, value);
-                        console.log(handleDeleteLlm, model.name);
                       }}
-                      className="p-1 hover:text-state-error transition-colors"
+                    />
-                    >
-                      <Trash2 />
-                    </Button>
                   </div>
                 </div>
               ))}

web/src/pages/user-setting/setting-model/components/used-model.tsx

@@ -10,8 +10,8 @@ export const UsedModel = ({
 }) => {
   const { factoryList, myLlmList: llmList, loading } = useSelectLlmList();
   return (
-    <div className="flex flex-col w-full">
+    <div className="flex flex-col w-full gap-4 mb-4">
-      <div className="text-text-primary text-2xl mb-4 mt-4">Added models</div>
+      <div className="text-text-primary text-2xl mb-2 mt-4">Added models</div>
       {llmList.map((llm) => {
         return (
           <ModelProviderCard

web/src/pages/user-setting/setting-model/hooks.ts

@@ -5,6 +5,7 @@ import {
   useAddLlm,
   useDeleteFactory,
   useDeleteLlm,
+  useEnableLlm,
   useSaveApiKey,
   useSaveTenantInfo,
   useSelectLlmOptionsByModelType,
@@ -421,7 +422,7 @@ export const useHandleDeleteLlm = (llmFactory: string) => {
   const { deleteLlm } = useDeleteLlm();
   const showDeleteConfirm = useShowDeleteConfirm();
 
-  const handleDeleteLlm = (name: string) => () => {
+  const handleDeleteLlm = (name: string) => {
     showDeleteConfirm({
       onOk: async () => {
         deleteLlm({ llm_factory: llmFactory, llm_name: name });
@@ -432,6 +433,16 @@ export const useHandleDeleteLlm = (llmFactory: string) => {
   return { handleDeleteLlm };
 };
 
+export const useHandleEnableLlm = (llmFactory: string) => {
+  const { enableLlm } = useEnableLlm();
+
+  const handleEnableLlm = (name: string, enable: boolean) => {
+    enableLlm({ llm_factory: llmFactory, llm_name: name, enable });
+  };
+
+  return { handleEnableLlm };
+};
+
 export const useHandleDeleteFactory = (llmFactory: string) => {
   const { deleteFactory } = useDeleteFactory();
   const showDeleteConfirm = useShowDeleteConfirm();

web/src/pages/user-setting/setting-model/index.tsx

@@ -2,14 +2,9 @@ import { LLMFactory } from '@/constants/llm';
 import { LlmItem, useFetchMyLlmListDetailed } from '@/hooks/llm-hooks';
 import { useCallback, useMemo } from 'react';
 import { isLocalLlmFactory } from '../utils';
-import ApiKeyModal from './api-key-modal';
-import AzureOpenAIModal from './azure-openai-modal';
-import BedrockModal from './bedrock-modal';
 import SystemSetting from './components/system-setting';
 import { AvailableModels } from './components/un-add-model';
 import { UsedModel } from './components/used-model';
-import FishAudioModal from './fish-audio-modal';
-import GoogleModal from './google-modal';
 import {
   useSubmitApiKey,
   useSubmitAzure,
@@ -24,12 +19,17 @@ import {
   useSubmitVolcEngine,
   useSubmityiyan,
 } from './hooks';
-import HunyuanModal from './hunyuan-modal';
+import ApiKeyModal from './modal/api-key-modal';
-import TencentCloudModal from './next-tencent-modal';
+import AzureOpenAIModal from './modal/azure-openai-modal';
-import OllamaModal from './ollama-modal';
+import BedrockModal from './modal/bedrock-modal';
-import SparkModal from './spark-modal';
+import FishAudioModal from './modal/fish-audio-modal';
-import VolcEngineModal from './volcengine-modal';
+import GoogleModal from './modal/google-modal';
-import YiyanModal from './yiyan-modal';
+import HunyuanModal from './modal/hunyuan-modal';
+import TencentCloudModal from './modal/next-tencent-modal';
+import OllamaModal from './modal/ollama-modal';
+import SparkModal from './modal/spark-modal';
+import VolcEngineModal from './modal/volcengine-modal';
+import YiyanModal from './modal/yiyan-modal';
 const ModelProviders = () => {
   const { saveSystemModelSettingLoading, onSystemSettingSavingOk } =
     useSubmitSystemModelSetting();

web/src/pages/user-setting/setting-model/index1.tsx

@@ -34,11 +34,6 @@ import { CircleHelp } from 'lucide-react';
 import { useCallback, useMemo } from 'react';
 import SettingTitle from '../components/setting-title';
 import { isLocalLlmFactory } from '../utils';
-import ApiKeyModal from './api-key-modal';
-import AzureOpenAIModal from './azure-openai-modal';
-import BedrockModal from './bedrock-modal';
-import FishAudioModal from './fish-audio-modal';
-import GoogleModal from './google-modal';
 import {
   useHandleDeleteFactory,
   useHandleDeleteLlm,
@@ -55,14 +50,19 @@ import {
   useSubmitVolcEngine,
   useSubmityiyan,
 } from './hooks';
-import HunyuanModal from './hunyuan-modal';
 import styles from './index.less';
-import TencentCloudModal from './next-tencent-modal';
+import ApiKeyModal from './modal/api-key-modal';
-import OllamaModal from './ollama-modal';
+import AzureOpenAIModal from './modal/azure-openai-modal';
-import SparkModal from './spark-modal';
+import BedrockModal from './modal/bedrock-modal';
-import SystemModelSettingModal from './system-model-setting-modal';
+import FishAudioModal from './modal/fish-audio-modal';
-import VolcEngineModal from './volcengine-modal';
+import GoogleModal from './modal/google-modal';
-import YiyanModal from './yiyan-modal';
+import HunyuanModal from './modal/hunyuan-modal';
+import TencentCloudModal from './modal/next-tencent-modal';
+import OllamaModal from './modal/ollama-modal';
+import SparkModal from './modal/spark-modal';
+import SystemModelSettingModal from './modal/system-model-setting-modal';
+import VolcEngineModal from './modal/volcengine-modal';
+import YiyanModal from './modal/yiyan-modal';
 
 const { Text } = Typography;
 interface IModelCardProps {

web/src/pages/user-setting/setting-model/modal/api-key-modal/index.tsx

@@ -0,0 +1,174 @@
+import { IModalManagerChildrenProps } from '@/components/modal-manager';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Modal } from '@/components/ui/modal/modal';
+import { LLMFactory } from '@/constants/llm';
+import { useTranslate } from '@/hooks/common-hooks';
+import { KeyboardEventHandler, useCallback, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { ApiKeyPostBody } from '../../../interface';
+
+interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
+  loading: boolean;
+  initialValue: string;
+  llmFactory: string;
+  editMode?: boolean;
+  onOk: (postBody: ApiKeyPostBody) => void;
+  showModal?(): void;
+}
+
+type FieldType = {
+  api_key?: string;
+  base_url?: string;
+  group_id?: string;
+};
+
+const modelsWithBaseUrl = [
+  LLMFactory.OpenAI,
+  LLMFactory.AzureOpenAI,
+  LLMFactory.TongYiQianWen,
+];
+
+const ApiKeyModal = ({
+  visible,
+  hideModal,
+  llmFactory,
+  loading,
+  initialValue,
+  editMode = false,
+  onOk,
+}: IProps) => {
+  const form = useForm<FieldType>();
+  const { t } = useTranslate('setting');
+
+  const handleOk = useCallback(async () => {
+    await form.handleSubmit((values) => onOk(values))();
+  }, [form, onOk]);
+
+  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = useCallback(
+    async (e) => {
+      if (e.key === 'Enter') {
+        await handleOk();
+      }
+    },
+    [handleOk],
+  );
+
+  useEffect(() => {
+    if (visible) {
+      form.setValue('api_key', initialValue);
+    }
+  }, [initialValue, form, visible]);
+
+  return (
+    <Modal
+      title={editMode ? t('editModel') : t('modify')}
+      open={visible}
+      onOpenChange={(open) => !open && hideModal()}
+      onOk={handleOk}
+      onCancel={hideModal}
+      confirmLoading={loading}
+      okText={t('save')}
+      cancelText={t('cancel')}
+    >
+      <Form {...form}>
+        <div className="space-y-4 py-4">
+          <FormField
+            name="api_key"
+            rules={{ required: t('apiKeyMessage') }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="text-sm font-medium text-text-primary">
+                  {t('apiKey')}
+                  <span className="ml-1 text-destructive">*</span>
+                </FormLabel>
+                <FormControl>
+                  <Input
+                    {...field}
+                    onKeyDown={handleKeyDown}
+                    className="w-full"
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {modelsWithBaseUrl.some((x) => x === llmFactory) && (
+            <FormField
+              name="base_url"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-sm font-medium text-text-primary">
+                    {t('baseUrl')}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      placeholder={
+                        llmFactory === LLMFactory.TongYiQianWen
+                          ? t('tongyiBaseUrlPlaceholder')
+                          : 'https://api.openai.com/v1'
+                      }
+                      onKeyDown={handleKeyDown}
+                      className="w-full"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {llmFactory?.toLowerCase() === 'Anthropic'.toLowerCase() && (
+            <FormField
+              name="base_url"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-sm font-medium text-text-primary">
+                    {t('baseUrl')}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      placeholder="https://api.anthropic.com/v1"
+                      onKeyDown={handleKeyDown}
+                      className="w-full"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {llmFactory?.toLowerCase() === 'Minimax'.toLowerCase() && (
+            <FormField
+              name="group_id"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-sm font-medium text-text-primary">
+                    Group ID
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} className="w-full" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+        </div>
+      </Form>
+    </Modal>
+  );
+};
+
+export default ApiKeyModal;

web/src/pages/user-setting/setting-model/modal/bedrock-modal/index.tsx

@@ -3,7 +3,7 @@ import { IModalProps } from '@/interfaces/common';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
 import { Flex, Form, Input, InputNumber, Modal, Select, Space } from 'antd';
 import { useMemo } from 'react';
-import { BedrockRegionList } from '../constant';
+import { BedrockRegionList } from '../../constant';
 
 type FieldType = IAddLlmRequestBody & {
   bedrock_ak: string;

web/src/pages/user-setting/setting-model/modal/system-model-setting-modal/index.tsx

@@ -7,7 +7,7 @@ import {
 } from '@/hooks/llm-hooks';
 import { Form, Modal, Select } from 'antd';
 import { useEffect } from 'react';
-import { useFetchSystemModelSettingOnMount } from '../hooks';
+import { useFetchSystemModelSettingOnMount } from '../../hooks';
 
 interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
   loading: boolean;

web/src/services/user-service.ts

@@ -16,6 +16,7 @@ const {
   set_tenant_info,
   add_llm,
   delete_llm,
+  enable_llm,
   deleteFactory,
   getSystemStatus,
   getSystemVersion,
@@ -79,6 +80,10 @@ const methods = {
     url: delete_llm,
     method: 'post',
   },
+  enable_llm: {
+    url: enable_llm,
+    method: 'post',
+  },
   getSystemStatus: {
     url: getSystemStatus,
     method: 'get',

web/src/utils/api.ts

@@ -31,6 +31,7 @@ export default {
   set_api_key: `${api_host}/llm/set_api_key`,
   add_llm: `${api_host}/llm/add_llm`,
   delete_llm: `${api_host}/llm/delete_llm`,
+  enable_llm: `${api_host}/llm/enable_llm`,
   deleteFactory: `${api_host}/llm/delete_factory`,
 
   // plugin