feat: add SystemModelSettingModal (#127)

* feat: add the model

* feat: add SystemModelSettingModal

web/src/hooks/commonHooks.ts

@@ -11,7 +11,11 @@ export const useSetModalState = () => {
     setVisible(false);
   };
 
-  return { visible, showModal, hideModal };
+  const switchVisible = () => {
+    setVisible(!visible);
+  };
+
+  return { visible, showModal, hideModal, switchVisible };
 };
 
 export const useDeepCompareEffect = (

web/src/hooks/llmHooks.ts

@@ -7,7 +7,7 @@ import {
 import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'umi';
 
-export const useFetchLlmList = (modelType: LlmModelType) => {
+export const useFetchLlmList = (modelType?: LlmModelType) => {
   const dispatch = useDispatch();
 
   const fetchLlmList = useCallback(() => {
@@ -85,19 +85,20 @@ export const useFetchLlmFactoryListOnMount = () => {
   return list;
 };
 
+export type LlmItem = { name: string; logo: string } & IMyLlmValue;
+
 export const useFetchMyLlmListOnMount = () => {
   const dispatch = useDispatch();
   const llmList = useSelectMyLlmList();
   const factoryList = useSelectLlmFactoryList();
 
-  const list: Array<{ name: string; logo: string } & IMyLlmValue> =
-    useMemo(() => {
-      return Object.entries(llmList).map(([key, value]) => ({
-        name: key,
-        logo: factoryList.find((x) => x.name === key)?.logo ?? '',
-        ...value,
-      }));
-    }, [llmList, factoryList]);
+  const list: Array<LlmItem> = useMemo(() => {
+    return Object.entries(llmList).map(([key, value]) => ({
+      name: key,
+      logo: factoryList.find((x) => x.name === key)?.logo ?? '',
+      ...value,
+    }));
+  }, [llmList, factoryList]);
 
   const fetchMyLlmList = useCallback(() => {
     dispatch({
@@ -135,3 +136,28 @@ export const useSaveApiKey = () => {
 
   return saveApiKey;
 };
+
+export interface ISystemModelSettingSavingParams {
+  tenant_id: string;
+  name?: string;
+  asr_id: string;
+  embd_id: string;
+  img2txt_id: string;
+  llm_id: string;
+}
+
+export const useSaveTenantInfo = () => {
+  const dispatch = useDispatch();
+
+  const saveTenantInfo = useCallback(
+    (savingParams: ISystemModelSettingSavingParams) => {
+      return dispatch<any>({
+        type: 'settingModel/set_tenant_info',
+        payload: savingParams,
+      });
+    },
+    [dispatch],
+  );
+
+  return saveTenantInfo;
+};

web/src/pages/setting/model.ts

@@ -142,7 +142,7 @@ const model: DvaModel<SettingModelState> = {
       }
     },
     *my_llm({ payload = {} }, { call, put }) {
-      const { data } = yield call(userService.my_llm, payload);
+      const { data } = yield call(userService.my_llm);
       const { retcode, data: res } = data;
       if (retcode === 0) {
         yield put({
@@ -158,6 +158,8 @@ const model: DvaModel<SettingModelState> = {
       const { retcode } = data;
       if (retcode === 0) {
         message.success('Modified!');
+        yield put({ type: 'my_llm' });
+        yield put({ type: 'factories_list' });
         yield put({
           type: 'updateState',
         });

web/src/pages/user-setting/components/setting-title/index.tsx

@@ -1,18 +1,33 @@
-import { Typography } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+import { Button, Flex, Typography } from 'antd';
 
 const { Title, Paragraph } = Typography;
 
 interface IProps {
   title: string;
   description: string;
+  showRightButton?: boolean;
+  clickButton?: () => void;
 }
 
-const SettingTitle = ({ title, description }: IProps) => {
+const SettingTitle = ({
+  title,
+  description,
+  clickButton,
+  showRightButton = false,
+}: IProps) => {
   return (
-    <div>
-      <Title level={5}>{title}</Title>
-      <Paragraph>{description}</Paragraph>
-    </div>
+    <Flex align="center" justify={'space-between'}>
+      <div>
+        <Title level={5}>{title}</Title>
+        <Paragraph>{description}</Paragraph>
+      </div>
+      {showRightButton && (
+        <Button type={'primary'} onClick={clickButton}>
+          <SettingOutlined></SettingOutlined> System Model Settings
+        </Button>
+      )}
+    </Flex>
   );
 };
 

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

@@ -64,7 +64,7 @@ const ApiKeyModal = ({
         form={form}
       >
         <Form.Item<FieldType>
-          label="Api key"
+          label="Api-Key"
           name="api_key"
           rules={[{ required: true, message: 'Please input api key!' }]}
         >

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

@@ -1,6 +1,16 @@
 import { useSetModalState } from '@/hooks/commonHooks';
-import { IApiKeySavingParams, useSaveApiKey } from '@/hooks/llmHooks';
+import {
+  IApiKeySavingParams,
+  ISystemModelSettingSavingParams,
+  useFetchLlmList,
+  useSaveApiKey,
+  useSaveTenantInfo,
+} from '@/hooks/llmHooks';
 import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
+import {
+  useFetchTenantInfo,
+  useSelectTenantInfo,
+} from '@/hooks/userSettingHook';
 import { useCallback, useState } from 'react';
 
 type SavingParamsState = Omit<IApiKeySavingParams, 'api_key'>;
@@ -20,7 +30,7 @@ export const useSubmitApiKey = () => {
     async (apiKey: string) => {
       const ret = await saveApiKey({ ...savingParams, api_key: apiKey });
 
-      if (ret.retcode === 0) {
+      if (ret === 0) {
         hideApiKeyModal();
       }
     },
@@ -48,3 +58,49 @@ export const useSubmitApiKey = () => {
     showApiKeyModal: onShowApiKeyModal,
   };
 };
+
+export const useSubmitSystemModelSetting = () => {
+  const systemSetting = useSelectTenantInfo();
+  const loading = useOneNamespaceEffectsLoading('settingModel', [
+    'set_tenant_info',
+  ]);
+  const saveSystemModelSetting = useSaveTenantInfo();
+  const {
+    visible: systemSettingVisible,
+    hideModal: hideSystemSettingModal,
+    showModal: showSystemSettingModal,
+  } = useSetModalState();
+
+  const onSystemSettingSavingOk = useCallback(
+    async (
+      payload: Omit<ISystemModelSettingSavingParams, 'tenant_id' | 'name'>,
+    ) => {
+      const ret = await saveSystemModelSetting({
+        tenant_id: systemSetting.tenant_id,
+        name: systemSetting.name,
+        ...payload,
+      });
+
+      if (ret === 0) {
+        hideSystemSettingModal();
+      }
+    },
+    [hideSystemSettingModal, saveSystemModelSetting, systemSetting],
+  );
+
+  return {
+    saveSystemModelSettingLoading: loading,
+    onSystemSettingSavingOk,
+    systemSettingVisible,
+    hideSystemSettingModal,
+    showSystemSettingModal,
+  };
+};
+
+export const useFetchSystemModelSettingOnMount = () => {
+  const systemSetting = useSelectTenantInfo();
+  useFetchLlmList();
+  useFetchTenantInfo();
+
+  return systemSetting;
+};

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

@@ -3,4 +3,21 @@
   .factoryOperationWrapper {
     text-align: right;
   }
+  .modelItem {
+  }
+  .llmList {
+    padding-top: 10px;
+  }
+  .toBeAddedCard {
+    border-radius: 24px;
+    border: 1px solid #eaecf0;
+    background: #e3f0ff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+  .addedCard {
+    border-radius: 18px;
+    border: 1px solid #eaecf0;
+    background: #e6e7eb;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
 }

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

@@ -1,4 +1,7 @@
+import { ReactComponent as MoreModelIcon } from '@/assets/svg/more-model.svg';
+import { useSetModalState } from '@/hooks/commonHooks';
 import {
+  LlmItem,
   useFetchLlmFactoryListOnMount,
   useFetchMyLlmListOnMount,
 } from '@/hooks/llmHooks';
@@ -13,14 +16,74 @@ import {
   List,
   Row,
   Space,
-  Tag,
+  Typography,
 } from 'antd';
+import { useCallback } from 'react';
 import SettingTitle from '../components/setting-title';
 import ApiKeyModal from './api-key-modal';
-import { useSubmitApiKey } from './hooks';
+import { useSubmitApiKey, useSubmitSystemModelSetting } from './hooks';
+import SystemModelSettingModal from './system-model-setting-modal';
 
 import styles from './index.less';
 
+const { Text } = Typography;
+interface IModelCardProps {
+  item: LlmItem;
+  clickApiKey: (llmFactory: string) => void;
+}
+
+const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
+  const { visible, switchVisible } = useSetModalState();
+
+  const handleApiKeyClick = () => {
+    clickApiKey(item.name);
+  };
+
+  const handleShowMoreClick = () => {
+    switchVisible();
+  };
+
+  return (
+    <List.Item>
+      <Card className={styles.addedCard}>
+        <Row align={'middle'}>
+          <Col span={12}>
+            <Flex gap={'middle'} align="center">
+              <Avatar shape="square" size="large" src={item.logo} />
+              <Flex vertical gap={'small'}>
+                <b>{item.name}</b>
+                <Text>{item.tags}</Text>
+              </Flex>
+            </Flex>
+          </Col>
+          <Col span={12} className={styles.factoryOperationWrapper}>
+            <Space size={'middle'}>
+              <Button onClick={handleApiKeyClick}>
+                API-Key
+                <SettingOutlined />
+              </Button>
+              <Button onClick={handleShowMoreClick}>
+                <Flex gap={'small'}>
+                  Show more models
+                  <MoreModelIcon />
+                </Flex>
+              </Button>
+            </Space>
+          </Col>
+        </Row>
+        {visible && (
+          <List
+            size="small"
+            dataSource={item.llm}
+            className={styles.llmList}
+            renderItem={(item) => <List.Item>{item.name}</List.Item>}
+          />
+        )}
+      </Card>
+    </List.Item>
+  );
+};
+
 const UserSettingModel = () => {
   const factoryList = useFetchLlmFactoryListOnMount();
   const llmList = useFetchMyLlmListOnMount();
@@ -32,9 +95,23 @@ const UserSettingModel = () => {
     hideApiKeyModal,
     showApiKeyModal,
   } = useSubmitApiKey();
+  const {
+    saveSystemModelSettingLoading,
+    onSystemSettingSavingOk,
+    systemSettingVisible,
+    hideSystemSettingModal,
+    showSystemSettingModal,
+  } = useSubmitSystemModelSetting();
+
+  const handleApiKeyClick = useCallback(
+    (llmFactory: string) => {
+      showApiKeyModal({ llm_factory: llmFactory });
+    },
+    [showApiKeyModal],
+  );
 
-  const handleApiKeyClick = (llmFactory: string) => () => {
-    showApiKeyModal({ llm_factory: llmFactory });
+  const handleAddModel = (llmFactory: string) => () => {
+    handleApiKeyClick(llmFactory);
   };
 
   return (
@@ -43,48 +120,15 @@ const UserSettingModel = () => {
         <SettingTitle
           title="Model Setting"
           description="Manage your account settings and preferences here."
+          showRightButton
+          clickButton={showSystemSettingModal}
         ></SettingTitle>
         <Divider></Divider>
         <List
           grid={{ gutter: 16, column: 1 }}
           dataSource={llmList}
           renderItem={(item) => (
-            <List.Item>
-              <Card>
-                <Row align={'middle'}>
-                  <Col span={12}>
-                    <Flex gap={'middle'} align="center">
-                      <Avatar shape="square" size="large" src={item.logo} />
-                      <Flex vertical gap={'small'}>
-                        <b>{item.name}</b>
-                        <div>
-                          {item.tags.split(',').map((x) => (
-                            <Tag key={x}>{x}</Tag>
-                          ))}
-                        </div>
-                      </Flex>
-                    </Flex>
-                  </Col>
-                  <Col span={12} className={styles.factoryOperationWrapper}>
-                    <Space size={'middle'}>
-                      <Button onClick={handleApiKeyClick(item.name)}>
-                        API-Key
-                        <SettingOutlined />
-                      </Button>
-                      <Button>
-                        Show more models
-                        <SettingOutlined />
-                      </Button>
-                    </Space>
-                  </Col>
-                </Row>
-                <List
-                  size="small"
-                  dataSource={item.llm}
-                  renderItem={(item) => <List.Item>{item.name}</List.Item>}
-                />
-              </Card>
-            </List.Item>
+            <ModelCard item={item} clickApiKey={handleApiKeyClick}></ModelCard>
           )}
         />
         <p>Models to be added</p>
@@ -101,18 +145,18 @@ const UserSettingModel = () => {
           dataSource={factoryList}
           renderItem={(item) => (
             <List.Item>
-              <Card>
+              <Card className={styles.toBeAddedCard}>
                 <Flex vertical gap={'large'}>
                   <Avatar shape="square" size="large" src={item.logo} />
                   <Flex vertical gap={'middle'}>
                     <b>{item.name}</b>
-                    <Space wrap>
-                      {item.tags.split(',').map((x) => (
-                        <Tag key={x}>{x}</Tag>
-                      ))}
-                    </Space>
+                    <Text>{item.tags}</Text>
                   </Flex>
                 </Flex>
+                <Divider></Divider>
+                <Button type="link" onClick={handleAddModel(item.name)}>
+                  Add the model
+                </Button>
               </Card>
             </List.Item>
           )}
@@ -125,6 +169,12 @@ const UserSettingModel = () => {
         initialValue={initialApiKey}
         onOk={onApiKeySavingOk}
       ></ApiKeyModal>
+      <SystemModelSettingModal
+        visible={systemSettingVisible}
+        onOk={onSystemSettingSavingOk}
+        hideModal={hideSystemSettingModal}
+        loading={saveSystemModelSettingLoading}
+      ></SystemModelSettingModal>
     </>
   );
 };

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

@@ -0,0 +1,61 @@
+import { IModalManagerChildrenProps } from '@/components/modal-manager';
+import { ISystemModelSettingSavingParams } from '@/hooks/llmHooks';
+import { Form, Modal, Select } from 'antd';
+import { useEffect } from 'react';
+import { useFetchSystemModelSettingOnMount } from '../hooks';
+
+interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
+  loading: boolean;
+  onOk: (
+    payload: Omit<ISystemModelSettingSavingParams, 'tenant_id' | 'name'>,
+  ) => void;
+}
+
+const SystemModelSettingModal = ({
+  visible,
+  hideModal,
+  onOk,
+  loading,
+}: IProps) => {
+  const [form] = Form.useForm();
+  const initialValues = useFetchSystemModelSettingOnMount();
+
+  const handleOk = async () => {
+    const values = await form.validateFields();
+    onOk(values);
+  };
+
+  useEffect(() => {
+    form.setFieldsValue(initialValues);
+  }, [form, initialValues]);
+
+  const onFormLayoutChange = () => {};
+
+  return (
+    <Modal
+      title="Basic Modal"
+      open={visible}
+      onOk={handleOk}
+      onCancel={hideModal}
+      okButtonProps={{ loading }}
+      confirmLoading={loading}
+    >
+      <Form form={form} onValuesChange={onFormLayoutChange} layout={'vertical'}>
+        <Form.Item label="sequence2txt model" name="asr_id">
+          <Select options={[{ value: 'sample', label: <span>sample</span> }]} />
+        </Form.Item>
+        <Form.Item label="Embedding model" name="embd_id">
+          <Select options={[{ value: 'sample', label: <span>sample</span> }]} />
+        </Form.Item>
+        <Form.Item label="img2txt_id model" name="img2txt_id">
+          <Select options={[{ value: 'sample', label: <span>sample</span> }]} />
+        </Form.Item>
+        <Form.Item label="Chat model" name="llm_id">
+          <Select options={[{ value: 'sample', label: <span>sample</span> }]} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default SystemModelSettingModal;