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();