feat: delete the added model #503 and display an error message when the requested file fails to parse #684 (#708)

### What problem does this PR solve?

feat: delete the added model #503
feat: display an error message when the requested file fails to parse
#684

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

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

@@ -167,6 +167,17 @@ const model: DvaModel<SettingModelState> = {
       }
       return retcode;
     },
+    *delete_llm({ payload = {} }, { call, put }) {
+      const { data } = yield call(userService.delete_llm, payload);
+      const { retcode } = data;
+      if (retcode === 0) {
+        message.success(i18n.t('message.deleted'));
+
+        yield put({ type: 'my_llm' });
+        yield put({ type: 'factories_list' });
+      }
+      return retcode;
+    },
   },
 };
 export default model;

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

@@ -1,8 +1,9 @@
-import { useSetModalState } from '@/hooks/commonHooks';
+import { useSetModalState, useShowDeleteConfirm } from '@/hooks/commonHooks';
 import {
   IApiKeySavingParams,
   ISystemModelSettingSavingParams,
   useAddLlm,
+  useDeleteLlm,
   useFetchLlmList,
   useSaveApiKey,
   useSaveTenantInfo,
@@ -164,3 +165,18 @@ export const useSubmitOllama = () => {
     selectedLlmFactory,
   };
 };
+
+export const useHandleDeleteLlm = (llmFactory: string) => {
+  const deleteLlm = useDeleteLlm();
+  const showDeleteConfirm = useShowDeleteConfirm();
+
+  const handleDeleteLlm = (name: string) => () => {
+    showDeleteConfirm({
+      onOk: async () => {
+        deleteLlm({ llm_factory: llmFactory, llm_name: name });
+      },
+    });
+  };
+
+  return { handleDeleteLlm };
+};

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

@@ -6,7 +6,11 @@ import {
   useFetchLlmFactoryListOnMount,
   useFetchMyLlmListOnMount,
 } from '@/hooks/llmHooks';
-import { SettingOutlined, UserOutlined } from '@ant-design/icons';
+import {
+  CloseCircleOutlined,
+  SettingOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
 import {
   Avatar,
   Button,
@@ -21,6 +25,7 @@ import {
   Space,
   Spin,
   Tag,
+  Tooltip,
   Typography,
 } from 'antd';
 import { useCallback } from 'react';
@@ -28,6 +33,7 @@ import SettingTitle from '../components/setting-title';
 import { isLocalLlmFactory } from '../utils';
 import ApiKeyModal from './api-key-modal';
 import {
+  useHandleDeleteLlm,
   useSelectModelProvidersLoading,
   useSubmitApiKey,
   useSubmitOllama,
@@ -67,6 +73,7 @@ interface IModelCardProps {
 const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
   const { visible, switchVisible } = useSetModalState();
   const { t } = useTranslate('setting');
+  const { handleDeleteLlm } = useHandleDeleteLlm(item.name);
 
   const handleApiKeyClick = () => {
     clickApiKey(item.name);
@@ -113,6 +120,11 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
               <List.Item>
                 <Space>
                   {item.name} <Tag color="#b8b8b8">{item.type}</Tag>
+                  <Tooltip title={t('delete', { keyPrefix: 'common' })}>
+                    <Button type={'text'} onClick={handleDeleteLlm(item.name)}>
+                      <CloseCircleOutlined style={{ color: '#D92D20' }} />
+                    </Button>
+                  </Tooltip>
                 </Space>
               </List.Item>
             )}