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