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

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']);

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;
+};

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}

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