fix: disable sending messages if both application and conversation are empty and add loading to all pages (#134)

* feat: add loading to all pages * fix: disable sending messages if both application and conversation are empty * feat: add chatSpin class to Spin of chat
2024-03-20 11:13:51 +08:00 · 2024-03-20 11:13:51 +08:00 · 78727c8809
commit 78727c8809
parent d38e92aac8
24 changed files with 629 additions and 473 deletions
--- a/web/src/components/rename-modal/index.tsx
+++ b/web/src/components/rename-modal/index.tsx
@ -41,8 +41,10 @@ const RenameModal = ({
  };

  useEffect(() => {
-    form.setFieldValue('name', initialName);
-  }, [initialName, form]);
+    if (visible) {
+      form.setFieldValue('name', initialName);
+    }
+  }, [initialName, form, visible]);

  return (
    <Modal
--- a/web/src/hooks/chunkHooks.ts
+++ b/web/src/hooks/chunkHooks.ts
@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+import { useDispatch } from 'umi';
+import { useGetKnowledgeSearchParams } from './routeHook';
+
+interface PayloadType {
+  doc_id: string;
+  keywords?: string;
+}
+
+export const useFetchChunkList = () => {
+  const dispatch = useDispatch();
+  const { documentId } = useGetKnowledgeSearchParams();
+
+  const fetchChunkList = useCallback(() => {
+    dispatch({
+      type: 'chunkModel/chunk_list',
+      payload: {
+        doc_id: documentId,
+      },
+    });
+  }, [dispatch, documentId]);
+
+  return fetchChunkList;
+};
--- a/web/src/hooks/knowledgeHook.ts
+++ b/web/src/hooks/knowledgeHook.ts
@ -1,8 +1,9 @@
 import showDeleteConfirm from '@/components/deleting-confirm';
-import { KnowledgeSearchParams } from '@/constants/knowledge';
 import { IKnowledge } from '@/interfaces/database/knowledge';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSearchParams, useSelector } from 'umi';
+import { useGetKnowledgeSearchParams } from './routeHook';
+import { useOneNamespaceEffectsLoading } from './storeHooks';

 export const useKnowledgeBaseId = (): string => {
  const [searchParams] = useSearchParams();
@ -11,17 +12,6 @@ export const useKnowledgeBaseId = (): string => {
  return knowledgeBaseId || '';
 };

-export const useGetKnowledgeSearchParams = () => {
-  const [currentQueryParameters] = useSearchParams();
-
-  return {
-    documentId:
-      currentQueryParameters.get(KnowledgeSearchParams.DocumentId) || '',
-    knowledgeId:
-      currentQueryParameters.get(KnowledgeSearchParams.KnowledgeId) || '',
-  };
-};
-
 export const useDeleteDocumentById = (): {
  removeDocument: (documentId: string) => Promise<number>;
 } => {
@ -135,8 +125,9 @@ export const useFetchKnowledgeBaseConfiguration = () => {

 export const useFetchKnowledgeList = (
  shouldFilterListWithoutDocument: boolean = false,
-): IKnowledge[] => {
+): { list: IKnowledge[]; loading: boolean } => {
  const dispatch = useDispatch();
+  const loading = useOneNamespaceEffectsLoading('knowledgeModel', ['getList']);

  const knowledgeModel = useSelector((state: any) => state.knowledgeModel);
  const { data = [] } = knowledgeModel;
@ -156,7 +147,7 @@ export const useFetchKnowledgeList = (
    fetchList();
  }, [fetchList]);

-  return list;
+  return { list, loading };
 };

 export const useSelectFileThumbnails = () => {
@ -189,3 +180,29 @@ export const useFetchFileThumbnails = (docIds?: Array<string>) => {

  return { fileThumbnails, fetchFileThumbnails };
 };
+
+//#region knowledge configuration
+
+export const useUpdateKnowledge = () => {
+  const dispatch = useDispatch();
+
+  const saveKnowledgeConfiguration = useCallback(
+    (payload: any) => {
+      dispatch({
+        type: 'kSModel/updateKb',
+        payload,
+      });
+    },
+    [dispatch],
+  );
+
+  return saveKnowledgeConfiguration;
+};
+
+export const useSelectKnowledgeDetails = () => {
+  const knowledgeDetails: IKnowledge = useSelector(
+    (state: any) => state.kSModel.knowledgeDetails,
+  );
+  return knowledgeDetails;
+};
+//#endregion
--- a/web/src/hooks/llmHooks.ts
+++ b/web/src/hooks/llmHooks.ts
@ -8,8 +8,8 @@ import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'umi';

 export const useFetchLlmList = (
-  isOnMountFetching: boolean = true,
  modelType?: LlmModelType,
+  isOnMountFetching: boolean = true,
 ) => {
  const dispatch = useDispatch();

--- a/web/src/hooks/routeHook.ts
+++ b/web/src/hooks/routeHook.ts
@ -1,4 +1,5 @@
-import { useLocation } from 'umi';
+import { KnowledgeSearchParams } from '@/constants/knowledge';
+import { useLocation, useSearchParams } from 'umi';

 export enum SegmentIndex {
  Second = '2',
@ -19,3 +20,14 @@ export const useSecondPathName = () => {
 export const useThirdPathName = () => {
  return useSegmentedPathName(SegmentIndex.Third);
 };
+
+export const useGetKnowledgeSearchParams = () => {
+  const [currentQueryParameters] = useSearchParams();
+
+  return {
+    documentId:
+      currentQueryParameters.get(KnowledgeSearchParams.DocumentId) || '',
+    knowledgeId:
+      currentQueryParameters.get(KnowledgeSearchParams.KnowledgeId) || '',
+  };
+};
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/hooks.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/hooks.ts
@ -1,4 +1,4 @@
-import { useGetKnowledgeSearchParams } from '@/hooks/knowledgeHook';
+import { useGetKnowledgeSearchParams } from '@/hooks/routeHook';
 import { api_host } from '@/utils/api';
 import { useSize } from 'ahooks';
 import { CustomTextRenderer } from 'node_modules/react-pdf/dist/esm/shared/types';
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts
@ -1,3 +1,4 @@
+import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
 import { IChunk, IKnowledgeFile } from '@/interfaces/database/knowledge';
 import { buildChunkHighlights } from '@/utils/documentUtils';
 import { useCallback, useMemo, useState } from 'react';
@ -46,3 +47,11 @@ export const useGetChunkHighlights = (

  return highlights;
 };
+
+export const useSelectChunkListLoading = () => {
+  return useOneNamespaceEffectsLoading('chunkModel', [
+    'create_hunk',
+    'chunk_list',
+    'switch_chunk',
+  ]);
+};
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx
@ -1,23 +1,22 @@
+import { useFetchChunkList } from '@/hooks/chunkHooks';
 import { useDeleteChunkByIds } from '@/hooks/knowledgeHook';
-import { getOneNamespaceEffectsLoading } from '@/utils/storeUtil';
 import type { PaginationProps } from 'antd';
 import { Divider, Flex, Pagination, Space, Spin, message } from 'antd';
+import classNames from 'classnames';
 import { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSearchParams, useSelector } from 'umi';
 import ChunkCard from './components/chunk-card';
 import CreatingModal from './components/chunk-creating-modal';
 import ChunkToolBar from './components/chunk-toolbar';
-// import DocumentPreview from './components/document-preview';
-import classNames from 'classnames';
 import DocumentPreview from './components/document-preview/preview';
-import { useHandleChunkCardClick, useSelectDocumentInfo } from './hooks';
+import {
+  useHandleChunkCardClick,
+  useSelectChunkListLoading,
+  useSelectDocumentInfo,
+} from './hooks';
 import { ChunkModelState } from './model';

 import styles from './index.less';
-interface PayloadType {
-  doc_id: string;
-  keywords?: string;
-}

 const Chunk = () => {
  const dispatch = useDispatch();
@ -27,12 +26,7 @@ const Chunk = () => {
  const [selectedChunkIds, setSelectedChunkIds] = useState<string[]>([]);
  const [searchParams] = useSearchParams();
  const { data = [], total, pagination } = chunkModel;
-  const effects = useSelector((state: any) => state.loading.effects);
-  const loading = getOneNamespaceEffectsLoading('chunkModel', effects, [
-    'create_hunk',
-    'chunk_list',
-    'switch_chunk',
-  ]);
+  const loading = useSelectChunkListLoading();
  const documentId: string = searchParams.get('doc_id') || '';
  const [chunkId, setChunkId] = useState<string | undefined>();
  const { removeChunk } = useDeleteChunkByIds();
@ -40,18 +34,7 @@ const Chunk = () => {
  const { handleChunkCardClick, selectedChunkId } = useHandleChunkCardClick();
  const isPdf = documentInfo.type === 'pdf';

-  const getChunkList = useCallback(() => {
-    const payload: PayloadType = {
-      doc_id: documentId,
-    };
-
-    dispatch({
-      type: 'chunkModel/chunk_list',
-      payload: {
-        ...payload,
-      },
-    });
-  }, [dispatch, documentId]);
+  const getChunkList = useFetchChunkList();

  const handleEditChunk = useCallback(
    (chunk_id?: string) => {
@ -169,8 +152,8 @@ const Chunk = () => {
            vertical
            className={isPdf ? styles.pagePdfWrapper : styles.pageWrapper}
          >
-            <div className={styles.pageContent}>
-              <Spin spinning={loading} className={styles.spin} size="large">
+            <Spin spinning={loading} className={styles.spin} size="large">
+              <div className={styles.pageContent}>
                <Space
                  direction="vertical"
                  size={'middle'}
@ -193,8 +176,8 @@ const Chunk = () => {
                    ></ChunkCard>
                  ))}
                </Space>
-              </Spin>
-            </div>
+              </div>
+            </Spin>
            <div className={styles.pageFooter}>
              <Pagination
                responsive
--- a/web/src/pages/add-knowledge/components/knowledge-file/rename-modal/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/rename-modal/index.tsx
@ -52,8 +52,10 @@ const RenameModal = () => {
  };

  useEffect(() => {
-    form.setFieldValue('name', initialName);
-  }, [initialName, documentId, form]);
+    if (isModalOpen) {
+      form.setFieldValue('name', initialName);
+    }
+  }, [initialName, documentId, form, isModalOpen]);

  return (
    <Modal
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx
@ -1,19 +1,4 @@
-import {
-  useFetchKnowledgeBaseConfiguration,
-  useKnowledgeBaseId,
-} from '@/hooks/knowledgeHook';
-import { useFetchLlmList, useSelectLlmOptions } from '@/hooks/llmHooks';
-import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
-import {
-  useFetchTenantInfo,
-  useSelectParserList,
-} from '@/hooks/userSettingHook';
-import { IKnowledge } from '@/interfaces/database/knowledge';
-import {
-  getBase64FromUploadFileList,
-  getUploadFileListFromBase64,
-  normFile,
-} from '@/utils/fileUtil';
+import { normFile } from '@/utils/fileUtil';
 import { PlusOutlined } from '@ant-design/icons';
 import {
  Button,
@ -26,14 +11,14 @@ import {
  Select,
  Slider,
  Space,
+  Spin,
  Typography,
  Upload,
-  UploadFile,
 } from 'antd';
-import pick from 'lodash/pick';
-import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'umi';
-import { LlmModelType } from '../../constant';
+import {
+  useFetchKnowledgeConfigurationOnMount,
+  useSubmitKnowledgeConfiguration,
+} from './hooks';

 import styles from './index.less';

@ -41,205 +26,165 @@ const { Title } = Typography;
 const { Option } = Select;

 const Configuration = () => {
-  const [form] = Form.useForm();
-  const dispatch = useDispatch();
-  const knowledgeBaseId = useKnowledgeBaseId();
-  const loading = useOneNamespaceEffectsLoading('kSModel', ['updateKb']);
-
-  const knowledgeDetails: IKnowledge = useSelector(
-    (state: any) => state.kSModel.knowledgeDetails,
-  );
-
-  const parserList = useSelectParserList();
-
-  const embeddingModelOptions = useSelectLlmOptions();
-
-  const onFinish = async (values: any) => {
-    const avatar = await getBase64FromUploadFileList(values.avatar);
-    dispatch({
-      type: 'kSModel/updateKb',
-      payload: {
-        ...values,
-        avatar,
-        kb_id: knowledgeBaseId,
-      },
-    });
-  };
+  const { submitKnowledgeConfiguration, submitLoading } =
+    useSubmitKnowledgeConfiguration();
+  const { form, parserList, embeddingModelOptions, loading } =
+    useFetchKnowledgeConfigurationOnMount();

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

-  useEffect(() => {
-    const fileList: UploadFile[] = getUploadFileListFromBase64(
-      knowledgeDetails.avatar,
-    );
-
-    form.setFieldsValue({
-      ...pick(knowledgeDetails, [
-        'description',
-        'name',
-        'permission',
-        'embd_id',
-        'parser_id',
-        'language',
-        'parser_config.chunk_token_num',
-      ]),
-      avatar: fileList,
-    });
-  }, [form, knowledgeDetails]);
-
-  useFetchTenantInfo();
-  useFetchKnowledgeBaseConfiguration();
-
-  useFetchLlmList(LlmModelType.Embedding);
-
  return (
    <div className={styles.configurationWrapper}>
      <Title level={5}>Configuration</Title>
      <p>Update your knowledge base details especially parsing method here.</p>
      <Divider></Divider>
-      <Form
-        form={form}
-        name="validateOnly"
-        layout="vertical"
-        autoComplete="off"
-        onFinish={onFinish}
-        onFinishFailed={onFinishFailed}
-      >
-        <Form.Item
-          name="name"
-          label="Knowledge base name"
-          rules={[{ required: true }]}
+      <Spin spinning={loading}>
+        <Form
+          form={form}
+          name="validateOnly"
+          layout="vertical"
+          autoComplete="off"
+          onFinish={submitKnowledgeConfiguration}
+          onFinishFailed={onFinishFailed}
        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          name="avatar"
-          label="Knowledge base photo"
-          valuePropName="fileList"
-          getValueFromEvent={normFile}
-        >
-          <Upload
-            listType="picture-card"
-            maxCount={1}
-            beforeUpload={() => false}
-            showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
+          <Form.Item
+            name="name"
+            label="Knowledge base name"
+            rules={[{ required: true }]}
          >
-            <button style={{ border: 0, background: 'none' }} type="button">
-              <PlusOutlined />
-              <div style={{ marginTop: 8 }}>Upload</div>
-            </button>
-          </Upload>
-        </Form.Item>
-        <Form.Item name="description" label="Description">
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label="Language"
-          name="language"
-          initialValue={'Chinese'}
-          rules={[{ required: true, message: 'Please input your language!' }]}
-        >
-          <Select placeholder="select your language">
-            <Option value="English">English</Option>
-            <Option value="Chinese">Chinese</Option>
-          </Select>
-        </Form.Item>
-        <Form.Item
-          name="permission"
-          label="Permissions"
-          rules={[{ required: true }]}
-        >
-          <Radio.Group>
-            <Radio value="me">Only me</Radio>
-            <Radio value="team">Team</Radio>
-          </Radio.Group>
-        </Form.Item>
-        <Form.Item
-          name="embd_id"
-          label="Embedding Model"
-          rules={[{ required: true }]}
-          tooltip="xx"
-        >
-          <Select
-            placeholder="Please select a country"
-            options={embeddingModelOptions}
-          ></Select>
-        </Form.Item>
-        <Form.Item
-          name="parser_id"
-          label="Knowledge base category"
-          tooltip="xx"
-          rules={[{ required: true }]}
-        >
-          <Select placeholder="Please select a country">
-            {parserList.map((x) => (
-              <Option value={x.value} key={x.value}>
-                {x.label}
-              </Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Form.Item noStyle dependencies={['parser_id']}>
-          {({ getFieldValue }) => {
-            const parserId = getFieldValue('parser_id');
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="avatar"
+            label="Knowledge base photo"
+            valuePropName="fileList"
+            getValueFromEvent={normFile}
+          >
+            <Upload
+              listType="picture-card"
+              maxCount={1}
+              beforeUpload={() => false}
+              showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
+            >
+              <button style={{ border: 0, background: 'none' }} type="button">
+                <PlusOutlined />
+                <div style={{ marginTop: 8 }}>Upload</div>
+              </button>
+            </Upload>
+          </Form.Item>
+          <Form.Item name="description" label="Description">
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label="Language"
+            name="language"
+            initialValue={'Chinese'}
+            rules={[{ required: true, message: 'Please input your language!' }]}
+          >
+            <Select placeholder="select your language">
+              <Option value="English">English</Option>
+              <Option value="Chinese">Chinese</Option>
+            </Select>
+          </Form.Item>
+          <Form.Item
+            name="permission"
+            label="Permissions"
+            rules={[{ required: true }]}
+          >
+            <Radio.Group>
+              <Radio value="me">Only me</Radio>
+              <Radio value="team">Team</Radio>
+            </Radio.Group>
+          </Form.Item>
+          <Form.Item
+            name="embd_id"
+            label="Embedding Model"
+            rules={[{ required: true }]}
+            tooltip="xx"
+          >
+            <Select
+              placeholder="Please select a country"
+              options={embeddingModelOptions}
+            ></Select>
+          </Form.Item>
+          <Form.Item
+            name="parser_id"
+            label="Knowledge base category"
+            tooltip="xx"
+            rules={[{ required: true }]}
+          >
+            <Select placeholder="Please select a country">
+              {parserList.map((x) => (
+                <Option value={x.value} key={x.value}>
+                  {x.label}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item noStyle dependencies={['parser_id']}>
+            {({ getFieldValue }) => {
+              const parserId = getFieldValue('parser_id');

-            if (parserId === 'naive') {
-              return (
-                <Form.Item label="Chunk token number" tooltip="xxx">
-                  <Flex gap={20} align="center">
-                    <Flex flex={1}>
+              if (parserId === 'naive') {
+                return (
+                  <Form.Item label="Chunk token number" tooltip="xxx">
+                    <Flex gap={20} align="center">
+                      <Flex flex={1}>
+                        <Form.Item
+                          name={['parser_config', 'chunk_token_num']}
+                          noStyle
+                          initialValue={128}
+                          rules={[
+                            { required: true, message: 'Province is required' },
+                          ]}
+                        >
+                          <Slider
+                            className={styles.variableSlider}
+                            max={2048}
+                          />
+                        </Form.Item>
+                      </Flex>
                      <Form.Item
                        name={['parser_config', 'chunk_token_num']}
                        noStyle
-                        initialValue={128}
                        rules={[
-                          { required: true, message: 'Province is required' },
+                          { required: true, message: 'Street is required' },
                        ]}
                      >
-                        <Slider className={styles.variableSlider} max={2048} />
+                        <InputNumber
+                          className={styles.sliderInputNumber}
+                          max={2048}
+                          min={0}
+                        />
                      </Form.Item>
                    </Flex>
-                    <Form.Item
-                      name={['parser_config', 'chunk_token_num']}
-                      noStyle
-                      initialValue={128}
-                      rules={[
-                        { required: true, message: 'Street is required' },
-                      ]}
-                    >
-                      <InputNumber
-                        className={styles.sliderInputNumber}
-                        max={2048}
-                        min={0}
-                      />
-                    </Form.Item>
-                  </Flex>
-                </Form.Item>
-              );
-            }
-            return null;
-          }}
-        </Form.Item>
-        <Form.Item>
-          <div className={styles.buttonWrapper}>
-            <Space>
-              <Button htmlType="reset" size={'middle'}>
-                Cancel
-              </Button>
-              <Button
-                htmlType="submit"
-                type="primary"
-                size={'middle'}
-                loading={loading}
-              >
-                Save
-              </Button>
-            </Space>
-          </div>
-        </Form.Item>
-      </Form>
+                  </Form.Item>
+                );
+              }
+              return null;
+            }}
+          </Form.Item>
+          <Form.Item>
+            <div className={styles.buttonWrapper}>
+              <Space>
+                <Button htmlType="reset" size={'middle'}>
+                  Cancel
+                </Button>
+                <Button
+                  htmlType="submit"
+                  type="primary"
+                  size={'middle'}
+                  loading={submitLoading}
+                >
+                  Save
+                </Button>
+              </Space>
+            </div>
+          </Form.Item>
+        </Form>
+      </Spin>
    </div>
  );
 };
--- a/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts
@ -0,0 +1,73 @@
+import {
+  useFetchKnowledgeBaseConfiguration,
+  useKnowledgeBaseId,
+  useSelectKnowledgeDetails,
+  useUpdateKnowledge,
+} from '@/hooks/knowledgeHook';
+import { useFetchLlmList, useSelectLlmOptions } from '@/hooks/llmHooks';
+import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
+import {
+  useFetchTenantInfo,
+  useSelectParserList,
+} from '@/hooks/userSettingHook';
+import {
+  getBase64FromUploadFileList,
+  getUploadFileListFromBase64,
+} from '@/utils/fileUtil';
+import { Form, UploadFile } from 'antd';
+import pick from 'lodash/pick';
+import { useCallback, useEffect } from 'react';
+import { LlmModelType } from '../../constant';
+
+export const useSubmitKnowledgeConfiguration = () => {
+  const save = useUpdateKnowledge();
+  const knowledgeBaseId = useKnowledgeBaseId();
+  const submitLoading = useOneNamespaceEffectsLoading('kSModel', ['updateKb']);
+
+  const submitKnowledgeConfiguration = useCallback(
+    async (values: any) => {
+      const avatar = await getBase64FromUploadFileList(values.avatar);
+      save({
+        ...values,
+        avatar,
+        kb_id: knowledgeBaseId,
+      });
+    },
+    [save, knowledgeBaseId],
+  );
+
+  return { submitKnowledgeConfiguration, submitLoading };
+};
+
+export const useFetchKnowledgeConfigurationOnMount = () => {
+  const [form] = Form.useForm();
+  const loading = useOneNamespaceEffectsLoading('kSModel', ['getKbDetail']);
+
+  const knowledgeDetails = useSelectKnowledgeDetails();
+  const parserList = useSelectParserList();
+  const embeddingModelOptions = useSelectLlmOptions();
+
+  useFetchTenantInfo();
+  useFetchKnowledgeBaseConfiguration();
+  useFetchLlmList(LlmModelType.Embedding);
+
+  useEffect(() => {
+    const fileList: UploadFile[] = getUploadFileListFromBase64(
+      knowledgeDetails.avatar,
+    );
+    form.setFieldsValue({
+      ...pick(knowledgeDetails, [
+        'description',
+        'name',
+        'permission',
+        'embd_id',
+        'parser_id',
+        'language',
+        'parser_config.chunk_token_num',
+      ]),
+      avatar: fileList,
+    });
+  }, [form, knowledgeDetails]);
+
+  return { form, parserList, embeddingModelOptions, loading };
+};
--- a/web/src/pages/add-knowledge/components/knowledge-setting/model.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-setting/model.ts
@ -34,7 +34,7 @@ const model: DvaModel<KSModelState> = {
      const { data } = yield call(kbService.createKb, payload);
      const { retcode } = data;
      if (retcode === 0) {
-        message.success('Created successfully!');
+        message.success('Created!');
      }
      return data;
    },
@ -43,7 +43,7 @@ const model: DvaModel<KSModelState> = {
      const { retcode } = data;
      if (retcode === 0) {
        yield put({ type: 'getKbDetail', payload: { kb_id: payload.kb_id } });
-        message.success('Updated successfully!');
+        message.success('Updated!');
      }
    },
    *getKbDetail({ payload = {} }, { call, put }) {
--- a/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx
@ -37,9 +37,9 @@ const TestingControl = ({ form, handleTesting }: IProps) => {

  return (
    <section className={styles.testingControlWrapper}>
-      <p>
+      <div>
        <b>Retrieval testing</b>
-      </p>
+      </div>
      <p>Final step! After success, leave the rest to Infiniflow AI.</p>
      <Divider></Divider>
      <section>
@ -48,8 +48,6 @@ const TestingControl = ({ form, handleTesting }: IProps) => {
          layout="vertical"
          form={form}
          initialValues={{
-            similarity_threshold: 0.2,
-            vector_similarity_weight: 0.3,
            top_k: 1024,
          }}
        >
@ -81,12 +79,12 @@ const TestingControl = ({ form, handleTesting }: IProps) => {
        </Form>
      </section>
      <section>
-        <p className={styles.historyTitle}>
+        <div className={styles.historyTitle}>
          <Space size={'middle'}>
            <HistoryOutlined className={styles.historyIcon} />
            <b>Test history</b>
          </Space>
-        </p>
+        </div>
        <Space
          direction="vertical"
          size={'middle'}
--- a/web/src/pages/chat/chat-configuration-modal/assistant-setting.tsx
+++ b/web/src/pages/chat/chat-configuration-modal/assistant-setting.tsx
@ -1,14 +1,13 @@
+import { useFetchKnowledgeList } from '@/hooks/knowledgeHook';
+import { PlusOutlined } from '@ant-design/icons';
 import { Form, Input, Select, Upload } from 'antd';
-
 import classNames from 'classnames';
 import { ISegmentedContentProps } from '../interface';

-import { useFetchKnowledgeList } from '@/hooks/knowledgeHook';
-import { PlusOutlined } from '@ant-design/icons';
 import styles from './index.less';

 const AssistantSetting = ({ show }: ISegmentedContentProps) => {
-  const knowledgeList = useFetchKnowledgeList(true);
+  const { list: knowledgeList } = useFetchKnowledgeList(true);
  const knowledgeOptions = knowledgeList.map((x) => ({
    label: x.name,
    value: x.id,
--- a/web/src/pages/chat/chat-container/index.tsx
+++ b/web/src/pages/chat/chat-container/index.tsx
@ -30,6 +30,7 @@ import {
  useClickDrawer,
  useFetchConversationOnMount,
  useGetFileIcon,
+  useGetSendButtonDisabled,
  useSendMessage,
 } from '../hooks';

@ -248,11 +249,15 @@ const ChatContainer = () => {
    addNewestConversation,
    removeLatestMessage,
  } = useFetchConversationOnMount();
-  const { handleInputChange, handlePressEnter, value, loading } =
-    useSendMessage(conversation, addNewestConversation, removeLatestMessage);
+  const {
+    handleInputChange,
+    handlePressEnter,
+    value,
+    loading: sendLoading,
+  } = useSendMessage(conversation, addNewestConversation, removeLatestMessage);
  const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
    useClickDrawer();
-
+  const disabled = useGetSendButtonDisabled();
  useGetFileIcon();

  return (
@ -284,8 +289,14 @@ const ChatContainer = () => {
          size="large"
          placeholder="Message Resume Assistant..."
          value={value}
+          disabled={disabled}
          suffix={
-            <Button type="primary" onClick={handlePressEnter} loading={loading}>
+            <Button
+              type="primary"
+              onClick={handlePressEnter}
+              loading={sendLoading}
+              disabled={disabled}
+            >
              Send
            </Button>
          }
--- a/web/src/pages/chat/hooks.ts
+++ b/web/src/pages/chat/hooks.ts
@ -767,4 +767,16 @@ export const useClickDrawer = () => {
  };
 };

+export const useSelectDialogListLoading = () => {
+  return useOneNamespaceEffectsLoading('chatModel', ['listDialog']);
+};
+export const useSelectConversationListLoading = () => {
+  return useOneNamespaceEffectsLoading('chatModel', ['listConversation']);
+};
+
+export const useGetSendButtonDisabled = () => {
+  const { dialogId, conversationId } = useGetChatSearchParams();
+
+  return dialogId === '' && conversationId === '';
+};
 //#endregion
--- a/web/src/pages/chat/index.less
+++ b/web/src/pages/chat/index.less
@ -41,6 +41,14 @@
    overflow: auto;
  }

+  .chatSpin {
+    :global(.ant-spin-container) {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+  }
+
  .chatTitleCard {
    :global(.ant-card-body) {
      padding: 8px;
--- a/web/src/pages/chat/index.tsx
+++ b/web/src/pages/chat/index.tsx
@ -1,5 +1,4 @@
 import { ReactComponent as ChatAppCube } from '@/assets/svg/chat-app-cube.svg';
-import { useSetModalState } from '@/hooks/commonHooks';
 import { DeleteOutlined, EditOutlined, FormOutlined } from '@ant-design/icons';
 import {
  Avatar,
@ -10,6 +9,7 @@ import {
  Flex,
  MenuProps,
  Space,
+  Spin,
  Tag,
 } from 'antd';
 import { MenuItemProps } from 'antd/lib/menu/MenuItem';
@ -29,8 +29,9 @@ import {
  useRemoveDialog,
  useRenameConversation,
  useSelectConversationList,
+  useSelectConversationListLoading,
+  useSelectDialogListLoading,
  useSelectFirstDialogOnMount,
-  useSetCurrentDialog,
 } from './hooks';

 import RenameModal from '@/components/rename-modal';
@ -38,8 +39,6 @@ import styles from './index.less';

 const Chat = () => {
  const dialogList = useSelectFirstDialogOnMount();
-  const { visible, hideModal, showModal } = useSetModalState();
-  const { setCurrentDialog, currentDialog } = useSetCurrentDialog();
  const { onRemoveDialog } = useRemoveDialog();
  const { onRemoveConversation } = useRemoveConversation();
  const { handleClickDialog } = useClickDialogCard();
@ -70,6 +69,8 @@ const Chat = () => {
    hideDialogEditModal,
    showDialogEditModal,
  } = useEditDialog();
+  const dialogLoading = useSelectDialogListLoading();
+  const conversationLoading = useSelectConversationListLoading();

  useFetchDialogOnMount(dialogId, true);

@ -204,35 +205,39 @@ const Chat = () => {
          </Button>
          <Divider></Divider>
          <Flex className={styles.chatAppContent} vertical gap={10}>
-            {dialogList.map((x) => (
-              <Card
-                key={x.id}
-                hoverable
-                className={classNames(styles.chatAppCard, {
-                  [styles.chatAppCardSelected]: dialogId === x.id,
-                })}
-                onMouseEnter={handleAppCardEnter(x.id)}
-                onMouseLeave={handleItemLeave}
-                onClick={handleDialogCardClick(x.id)}
-              >
-                <Flex justify="space-between" align="center">
-                  <Space size={15}>
-                    <Avatar src={x.icon} shape={'square'} />
-                    <section>
-                      <b>{x.name}</b>
-                      <div>{x.description}</div>
-                    </section>
-                  </Space>
-                  {activated === x.id && (
-                    <section>
-                      <Dropdown menu={{ items: buildAppItems(x.id) }}>
-                        <ChatAppCube className={styles.cubeIcon}></ChatAppCube>
-                      </Dropdown>
-                    </section>
-                  )}
-                </Flex>
-              </Card>
-            ))}
+            <Spin spinning={dialogLoading} wrapperClassName={styles.chatSpin}>
+              {dialogList.map((x) => (
+                <Card
+                  key={x.id}
+                  hoverable
+                  className={classNames(styles.chatAppCard, {
+                    [styles.chatAppCardSelected]: dialogId === x.id,
+                  })}
+                  onMouseEnter={handleAppCardEnter(x.id)}
+                  onMouseLeave={handleItemLeave}
+                  onClick={handleDialogCardClick(x.id)}
+                >
+                  <Flex justify="space-between" align="center">
+                    <Space size={15}>
+                      <Avatar src={x.icon} shape={'square'} />
+                      <section>
+                        <b>{x.name}</b>
+                        <div>{x.description}</div>
+                      </section>
+                    </Space>
+                    {activated === x.id && (
+                      <section>
+                        <Dropdown menu={{ items: buildAppItems(x.id) }}>
+                          <ChatAppCube
+                            className={styles.cubeIcon}
+                          ></ChatAppCube>
+                        </Dropdown>
+                      </section>
+                    )}
+                  </Flex>
+                </Card>
+              ))}
+            </Spin>
          </Flex>
        </Flex>
      </Flex>
@ -254,29 +259,38 @@ const Chat = () => {
          </Flex>
          <Divider></Divider>
          <Flex vertical gap={10} className={styles.chatTitleContent}>
-            {conversationList.map((x) => (
-              <Card
-                key={x.id}
-                hoverable
-                onClick={handleConversationCardClick(x.id)}
-                onMouseEnter={handleConversationCardEnter(x.id)}
-                onMouseLeave={handleConversationItemLeave}
-                className={classNames(styles.chatTitleCard, {
-                  [styles.chatTitleCardSelected]: x.id === conversationId,
-                })}
-              >
-                <Flex justify="space-between" align="center">
-                  <div>{x.name}</div>
-                  {conversationActivated === x.id && x.id !== '' && (
-                    <section>
-                      <Dropdown menu={{ items: buildConversationItems(x.id) }}>
-                        <ChatAppCube className={styles.cubeIcon}></ChatAppCube>
-                      </Dropdown>
-                    </section>
-                  )}
-                </Flex>
-              </Card>
-            ))}
+            <Spin
+              spinning={conversationLoading}
+              wrapperClassName={styles.chatSpin}
+            >
+              {conversationList.map((x) => (
+                <Card
+                  key={x.id}
+                  hoverable
+                  onClick={handleConversationCardClick(x.id)}
+                  onMouseEnter={handleConversationCardEnter(x.id)}
+                  onMouseLeave={handleConversationItemLeave}
+                  className={classNames(styles.chatTitleCard, {
+                    [styles.chatTitleCardSelected]: x.id === conversationId,
+                  })}
+                >
+                  <Flex justify="space-between" align="center">
+                    <div>{x.name}</div>
+                    {conversationActivated === x.id && x.id !== '' && (
+                      <section>
+                        <Dropdown
+                          menu={{ items: buildConversationItems(x.id) }}
+                        >
+                          <ChatAppCube
+                            className={styles.cubeIcon}
+                          ></ChatAppCube>
+                        </Dropdown>
+                      </section>
+                    )}
+                  </Flex>
+                </Card>
+              ))}
+            </Spin>
          </Flex>
        </Flex>
      </Flex>
--- a/web/src/pages/knowledge/index.tsx
+++ b/web/src/pages/knowledge/index.tsx
@ -1,16 +1,16 @@
 import { ReactComponent as FilterIcon } from '@/assets/filter.svg';
 import ModalManager from '@/components/modal-manager';
+import { useFetchKnowledgeList } from '@/hooks/knowledgeHook';
+import { useSelectUserInfo } from '@/hooks/userSettingHook';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Empty, Flex, Space } from 'antd';
+import { Button, Empty, Flex, Space, Spin } from 'antd';
 import KnowledgeCard from './knowledge-card';
 import KnowledgeCreatingModal from './knowledge-creating-modal';

-import { useFetchKnowledgeList } from '@/hooks/knowledgeHook';
-import { useSelectUserInfo } from '@/hooks/userSettingHook';
 import styles from './index.less';

 const Knowledge = () => {
-  const list = useFetchKnowledgeList();
+  const { list, loading } = useFetchKnowledgeList();
  const userInfo = useSelectUserInfo();

  return (
@ -50,15 +50,23 @@ const Knowledge = () => {
          </ModalManager>
        </Space>
      </div>
-      <Flex gap={'large'} wrap="wrap" className={styles.knowledgeCardContainer}>
-        {list.length > 0 ? (
-          list.map((item: any) => {
-            return <KnowledgeCard item={item} key={item.name}></KnowledgeCard>;
-          })
-        ) : (
-          <Empty></Empty>
-        )}
-      </Flex>
+      <Spin spinning={loading}>
+        <Flex
+          gap={'large'}
+          wrap="wrap"
+          className={styles.knowledgeCardContainer}
+        >
+          {list.length > 0 ? (
+            list.map((item: any) => {
+              return (
+                <KnowledgeCard item={item} key={item.name}></KnowledgeCard>
+              );
+            })
+          ) : (
+            <Empty></Empty>
+          )}
+        </Flex>
+      </Spin>
    </Flex>
  );
 };
--- a/web/src/pages/user-setting/hooks.ts
+++ b/web/src/pages/user-setting/hooks.ts
@ -19,5 +19,8 @@ export const useValidateSubmittable = () => {
  return { submittable, form };
 };

-export const useGetUserInfoLoading = () =>
+export const useSelectSubmitUserInfoLoading = () =>
  useOneNamespaceEffectsLoading('settingModel', ['setting']);
+
+export const useSelectUserInfoLoading = () =>
+  useOneNamespaceEffectsLoading('settingModel', ['getUserInfo']);
--- a/web/src/pages/user-setting/setting-model/hooks.ts
+++ b/web/src/pages/user-setting/setting-model/hooks.ts
@ -113,3 +113,12 @@ export const useFetchSystemModelSettingOnMount = (visible: boolean) => {

  return { systemSetting, allOptions };
 };
+
+export const useSelectModelProvidersLoading = () => {
+  const loading = useOneNamespaceEffectsLoading('settingModel', [
+    'my_llm',
+    'factories_list',
+  ]);
+
+  return loading;
+};
--- a/web/src/pages/user-setting/setting-model/index.tsx
+++ b/web/src/pages/user-setting/setting-model/index.tsx
@ -23,12 +23,17 @@ import {
  List,
  Row,
  Space,
+  Spin,
  Typography,
 } from 'antd';
 import { useCallback } from 'react';
 import SettingTitle from '../components/setting-title';
 import ApiKeyModal from './api-key-modal';
-import { useSubmitApiKey, useSubmitSystemModelSetting } from './hooks';
+import {
+  useSelectModelProvidersLoading,
+  useSubmitApiKey,
+  useSubmitSystemModelSetting,
+} from './hooks';
 import SystemModelSettingModal from './system-model-setting-modal';

 import styles from './index.less';
@ -111,6 +116,7 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
 const UserSettingModel = () => {
  const factoryList = useFetchLlmFactoryListOnMount();
  const llmList = useFetchMyLlmListOnMount();
+  const loading = useSelectModelProvidersLoading();
  const {
    saveApiKeyLoading,
    initialApiKey,
@ -191,16 +197,18 @@ const UserSettingModel = () => {

  return (
    <>
-      <section className={styles.modelWrapper}>
-        <SettingTitle
-          title="Model Setting"
-          description="Manage your account settings and preferences here."
-          showRightButton
-          clickButton={showSystemSettingModal}
-        ></SettingTitle>
-        <Divider></Divider>
-        <Collapse defaultActiveKey={['1']} ghost items={items} />
-      </section>
+      <Spin spinning={loading}>
+        <section className={styles.modelWrapper}>
+          <SettingTitle
+            title="Model Setting"
+            description="Manage your account settings and preferences here."
+            showRightButton
+            clickButton={showSystemSettingModal}
+          ></SettingTitle>
+          <Divider></Divider>
+          <Collapse defaultActiveKey={['1']} ghost items={items} />
+        </section>
+      </Spin>
      <ApiKeyModal
        visible={apiKeyVisible}
        hideModal={hideApiKeyModal}
--- a/web/src/pages/user-setting/setting-profile/index.tsx
+++ b/web/src/pages/user-setting/setting-profile/index.tsx
@ -1,4 +1,8 @@
-import { useSaveSetting, useSelectUserInfo } from '@/hooks/userSettingHook';
+import {
+  useFetchUserInfo,
+  useSaveSetting,
+  useSelectUserInfo,
+} from '@/hooks/userSettingHook';
 import {
  getBase64FromUploadFileList,
  getUploadFileListFromBase64,
@ -12,6 +16,7 @@ import {
  Input,
  Select,
  Space,
+  Spin,
  Tooltip,
  Upload,
  UploadFile,
@ -19,7 +24,11 @@ import {
 import { useEffect } from 'react';
 import SettingTitle from '../components/setting-title';
 import { TimezoneList } from '../constants';
-import { useGetUserInfoLoading, useValidateSubmittable } from '../hooks';
+import {
+  useSelectSubmitUserInfoLoading,
+  useSelectUserInfoLoading,
+  useValidateSubmittable,
+} from '../hooks';

 import parentStyles from '../index.less';
 import styles from './index.less';
@ -42,8 +51,10 @@ const tailLayout = {
 const UserSettingProfile = () => {
  const userInfo = useSelectUserInfo();
  const saveSetting = useSaveSetting();
-  const loading = useGetUserInfoLoading();
+  const submitLoading = useSelectSubmitUserInfoLoading();
  const { form, submittable } = useValidateSubmittable();
+  const loading = useSelectUserInfoLoading();
+  useFetchUserInfo();

  const onFinish = async (values: any) => {
    const avatar = await getBase64FromUploadFileList(values.avatar);
@ -66,131 +77,133 @@ const UserSettingProfile = () => {
        description="Update your photo and personal details here."
      ></SettingTitle>
      <Divider />
-      <Form
-        colon={false}
-        name="basic"
-        labelAlign={'left'}
-        labelCol={{ span: 8 }}
-        wrapperCol={{ span: 16 }}
-        style={{ width: '100%' }}
-        initialValues={{ remember: true }}
-        onFinish={onFinish}
-        onFinishFailed={onFinishFailed}
-        form={form}
-        autoComplete="off"
-      >
-        <Form.Item<FieldType>
-          label="Username"
-          name="nickname"
-          rules={[
-            {
-              required: true,
-              message: 'Please input your username!',
-              whitespace: true,
-            },
-          ]}
+      <Spin spinning={loading}>
+        <Form
+          colon={false}
+          name="basic"
+          labelAlign={'left'}
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 16 }}
+          style={{ width: '100%' }}
+          initialValues={{ remember: true }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          form={form}
+          autoComplete="off"
        >
-          <Input />
-        </Form.Item>
-        <Divider />
-        <Form.Item<FieldType>
-          label={
-            <div>
-              <Space>
-                Your photo
-                <Tooltip title="prompt text">
-                  <QuestionCircleOutlined />
-                </Tooltip>
-              </Space>
-              <div>This will be displayed on your profile.</div>
-            </div>
-          }
-          name="avatar"
-          valuePropName="fileList"
-          getValueFromEvent={normFile}
-        >
-          <Upload
-            listType="picture-card"
-            maxCount={1}
-            accept="image/*"
-            beforeUpload={() => {
-              return false;
-            }}
-            showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
+          <Form.Item<FieldType>
+            label="Username"
+            name="nickname"
+            rules={[
+              {
+                required: true,
+                message: 'Please input your username!',
+                whitespace: true,
+              },
+            ]}
          >
-            <button style={{ border: 0, background: 'none' }} type="button">
-              <PlusOutlined />
-              <div style={{ marginTop: 8 }}>Upload</div>
-            </button>
-          </Upload>
-        </Form.Item>
-        <Divider />
-        <Form.Item<FieldType>
-          label="Color schema"
-          name="color_schema"
-          rules={[
-            { required: true, message: 'Please select your color schema!' },
-          ]}
-        >
-          <Select placeholder="select your color schema">
-            <Option value="Bright">Bright</Option>
-            <Option value="Dark">Dark</Option>
-          </Select>
-        </Form.Item>
-        <Divider />
-        <Form.Item<FieldType>
-          label="Language"
-          name="language"
-          rules={[{ required: true, message: 'Please input your language!' }]}
-        >
-          <Select placeholder="select your language">
-            <Option value="English">English</Option>
-            <Option value="Chinese">Chinese</Option>
-          </Select>
-        </Form.Item>
-        <Divider />
-        <Form.Item<FieldType>
-          label="Timezone"
-          name="timezone"
-          rules={[{ required: true, message: 'Please input your timezone!' }]}
-        >
-          <Select placeholder="select your timezone" showSearch>
-            {TimezoneList.map((x) => (
-              <Option value={x} key={x}>
-                {x}
-              </Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Divider />
-        <Form.Item label="Email address">
-          <Form.Item<FieldType> name="email" noStyle>
-            <Input disabled />
+            <Input />
          </Form.Item>
-          <p className={parentStyles.itemDescription}>
-            Once registered, an account cannot be changed and can only be
-            cancelled.
-          </p>
-        </Form.Item>
-        <Form.Item
-          {...tailLayout}
-          shouldUpdate={(prevValues, curValues) =>
-            prevValues.additional !== curValues.additional
-          }
-        >
-          <Space>
-            <Button htmlType="button">Cancel</Button>
-            <Button
-              type="primary"
-              htmlType="submit"
-              disabled={!submittable}
-              loading={loading}
+          <Divider />
+          <Form.Item<FieldType>
+            label={
+              <div>
+                <Space>
+                  Your photo
+                  <Tooltip title="prompt text">
+                    <QuestionCircleOutlined />
+                  </Tooltip>
+                </Space>
+                <div>This will be displayed on your profile.</div>
+              </div>
+            }
+            name="avatar"
+            valuePropName="fileList"
+            getValueFromEvent={normFile}
+          >
+            <Upload
+              listType="picture-card"
+              maxCount={1}
+              accept="image/*"
+              beforeUpload={() => {
+                return false;
+              }}
+              showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
            >
-              Save
-            </Button>
-          </Space>
-        </Form.Item>
-      </Form>
+              <button style={{ border: 0, background: 'none' }} type="button">
+                <PlusOutlined />
+                <div style={{ marginTop: 8 }}>Upload</div>
+              </button>
+            </Upload>
+          </Form.Item>
+          <Divider />
+          <Form.Item<FieldType>
+            label="Color schema"
+            name="color_schema"
+            rules={[
+              { required: true, message: 'Please select your color schema!' },
+            ]}
+          >
+            <Select placeholder="select your color schema">
+              <Option value="Bright">Bright</Option>
+              <Option value="Dark">Dark</Option>
+            </Select>
+          </Form.Item>
+          <Divider />
+          <Form.Item<FieldType>
+            label="Language"
+            name="language"
+            rules={[{ required: true, message: 'Please input your language!' }]}
+          >
+            <Select placeholder="select your language">
+              <Option value="English">English</Option>
+              <Option value="Chinese">Chinese</Option>
+            </Select>
+          </Form.Item>
+          <Divider />
+          <Form.Item<FieldType>
+            label="Timezone"
+            name="timezone"
+            rules={[{ required: true, message: 'Please input your timezone!' }]}
+          >
+            <Select placeholder="select your timezone" showSearch>
+              {TimezoneList.map((x) => (
+                <Option value={x} key={x}>
+                  {x}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Divider />
+          <Form.Item label="Email address">
+            <Form.Item<FieldType> name="email" noStyle>
+              <Input disabled />
+            </Form.Item>
+            <p className={parentStyles.itemDescription}>
+              Once registered, an account cannot be changed and can only be
+              cancelled.
+            </p>
+          </Form.Item>
+          <Form.Item
+            {...tailLayout}
+            shouldUpdate={(prevValues, curValues) =>
+              prevValues.additional !== curValues.additional
+            }
+          >
+            <Space>
+              <Button htmlType="button">Cancel</Button>
+              <Button
+                type="primary"
+                htmlType="submit"
+                disabled={!submittable}
+                loading={submitLoading}
+              >
+                Save
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Spin>
    </section>
  );
 };
--- a/web/src/utils/fileUtil.ts
+++ b/web/src/utils/fileUtil.ts
@ -48,8 +48,14 @@ export const getUploadFileListFromBase64 = (avatar: string) => {

 export const getBase64FromUploadFileList = async (fileList?: UploadFile[]) => {
  if (Array.isArray(fileList) && fileList.length > 0) {
-    const base64 = await transformFile2Base64(fileList[0].originFileObj);
-    return base64;
+    const file = fileList[0];
+    const originFileObj = file.originFileObj;
+    if (originFileObj) {
+      const base64 = await transformFile2Base64(originFileObj);
+      return base64;
+    } else {
+      return file.thumbUrl;
+    }
    // return fileList[0].thumbUrl; TODO: Even JPG files will be converted to base64 parameters in png format
  }