feat: generate select options for SystemModelSettingModal grouped by type and add llm icon and add upgrade button to UserSettingTeam and replace the icon in the sidebar of the user settings page (#128)

* feat: generate select options for SystemModelSettingModal grouped by type

* feat: add llm icon

* feat: add upgrade button to UserSettingTeam

* feat: replace the icon in the sidebar of the user settings page

web/src/hooks/llmHooks.ts

@@ -7,7 +7,10 @@ import {
 import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'umi';
 
-export const useFetchLlmList = (modelType?: LlmModelType) => {
+export const useFetchLlmList = (
+  isOnMountFetching: boolean = true,
+  modelType?: LlmModelType,
+) => {
   const dispatch = useDispatch();
 
   const fetchLlmList = useCallback(() => {
@@ -18,15 +21,25 @@ export const useFetchLlmList = (modelType?: LlmModelType) => {
   }, [dispatch, modelType]);
 
   useEffect(() => {
-    fetchLlmList();
-  }, [fetchLlmList]);
+    if (isOnMountFetching) {
+      fetchLlmList();
+    }
+  }, [fetchLlmList, isOnMountFetching]);
+
+  return fetchLlmList;
 };
 
-export const useSelectLlmOptions = () => {
+export const useSelectLlmInfo = () => {
   const llmInfo: IThirdOAIModelCollection = useSelector(
     (state: any) => state.settingModel.llmInfo,
   );
 
+  return llmInfo;
+};
+
+export const useSelectLlmOptions = () => {
+  const llmInfo: IThirdOAIModelCollection = useSelectLlmInfo();
+
   const embeddingModelOptions = useMemo(() => {
     return Object.entries(llmInfo).map(([key, value]) => {
       return {
@@ -43,6 +56,38 @@ export const useSelectLlmOptions = () => {
   return embeddingModelOptions;
 };
 
+export const useSelectLlmOptionsByModelType = () => {
+  const llmInfo: IThirdOAIModelCollection = useSelectLlmInfo();
+
+  const groupOptionsByModelType = (modelType: LlmModelType) => {
+    return Object.entries(llmInfo)
+      .filter(([, value]) =>
+        modelType ? value.some((x) => x.model_type === modelType) : true,
+      )
+      .map(([key, value]) => {
+        return {
+          label: key,
+          options: value
+            .filter((x) => (modelType ? x.model_type === modelType : true))
+            .map((x) => ({
+              label: x.llm_name,
+              value: x.llm_name,
+              disabled: !x.available,
+            })),
+        };
+      });
+  };
+
+  return {
+    [LlmModelType.Chat]: groupOptionsByModelType(LlmModelType.Chat),
+    [LlmModelType.Embedding]: groupOptionsByModelType(LlmModelType.Embedding),
+    [LlmModelType.Image2text]: groupOptionsByModelType(LlmModelType.Image2text),
+    [LlmModelType.Speech2text]: groupOptionsByModelType(
+      LlmModelType.Speech2text,
+    ),
+  };
+};
+
 export const useSelectLlmFactoryList = () => {
   const factoryList: IFactory[] = useSelector(
     (state: any) => state.settingModel.factoryList,

web/src/hooks/userSettingHook.ts

@@ -1,7 +1,8 @@
 import { ITenantInfo } from '@/interfaces/database/knowledge';
 import { IUserInfo } from '@/interfaces/database/userSetting';
+import authorizationUtil from '@/utils/authorizationUtil';
 import { useCallback, useEffect, useMemo } from 'react';
-import { useDispatch, useSelector } from 'umi';
+import { history, useDispatch, useSelector } from 'umi';
 
 export const useFetchUserInfo = () => {
   const dispatch = useDispatch();
@@ -68,8 +69,12 @@ export const useSelectParserList = (): Array<{
 export const useLogout = () => {
   const dispatch = useDispatch(); // TODO: clear redux state
 
-  const logout = useCallback((): number => {
-    return dispatch<any>({ type: 'loginModel/logout' });
+  const logout = useCallback(async () => {
+    const retcode = await dispatch<any>({ type: 'loginModel/logout' });
+    if (retcode === 0) {
+      authorizationUtil.removeAll();
+      history.push('/login');
+    }
   }, [dispatch]);
 
   return logout;

web/src/layouts/components/user/index.tsx

@@ -1,59 +1,29 @@
-import {
-  useFetchUserInfo,
-  useLogout,
-  useSelectUserInfo,
-} from '@/hooks/userSettingHook';
-import authorizationUtil from '@/utils/authorizationUtil';
-import type { MenuProps } from 'antd';
-import { Avatar, Button, Dropdown } from 'antd';
-import React, { useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useFetchUserInfo, useSelectUserInfo } from '@/hooks/userSettingHook';
+import { Avatar } from 'antd';
+import React from 'react';
 import { history } from 'umi';
 
+import styles from '../../index.less';
+
 const App: React.FC = () => {
-  const { t } = useTranslation();
   const userInfo = useSelectUserInfo();
-  const logout = useLogout();
-
-  const handleLogout = useCallback(async () => {
-    const retcode = await logout();
-    if (retcode === 0) {
-      authorizationUtil.removeAll();
-      history.push('/login');
-    }
-  }, [logout]);
 
   const toSetting = () => {
     history.push('/user-setting');
   };
 
-  const items: MenuProps['items'] = useMemo(() => {
-    return [
-      {
-        key: '1',
-        onClick: handleLogout,
-        label: <Button type="text">{t('header.logout')}</Button>,
-      },
-      {
-        key: '2',
-        onClick: toSetting,
-        label: <Button type="text">{t('header.setting')}</Button>,
-      },
-    ];
-  }, [t, handleLogout]);
-
   useFetchUserInfo();
 
   return (
-    <Dropdown menu={{ items }} placement="bottomLeft" arrow>
-      <Avatar
-        size={32}
-        src={
-          userInfo.avatar ??
-          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
-        }
-      />
-    </Dropdown>
+    <Avatar
+      size={32}
+      onClick={toSetting}
+      className={styles.clickAvailable}
+      src={
+        userInfo.avatar ??
+        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+      }
+    />
   );
 };
 

web/src/layouts/index.less

@@ -21,3 +21,7 @@ body {
 .divider {
   margin: 0;
 }
+
+.clickAvailable {
+  cursor: pointer;
+}

web/src/pages/setting/model.ts

@@ -11,9 +11,6 @@ import { Nullable } from 'typings';
 import { DvaModel } from 'umi';
 
 export interface SettingModelState {
-  isShowPSwModal: boolean;
-  isShowTntModal: boolean;
-  isShowSSModal: boolean;
   llm_factory: string;
   tenantIfo: Nullable<ITenantInfo>;
   llmInfo: IThirdAiModelCollection;
@@ -25,9 +22,6 @@ export interface SettingModelState {
 const model: DvaModel<SettingModelState> = {
   namespace: 'settingModel',
   state: {
-    isShowPSwModal: false,
-    isShowTntModal: false,
-    isShowSSModal: false,
     llm_factory: '',
     tenantIfo: null,
     llmInfo: {},
@@ -55,12 +49,6 @@ const model: DvaModel<SettingModelState> = {
       const { retcode } = data;
       if (retcode === 0) {
         message.success('Modified!');
-        yield put({
-          type: 'updateState',
-          payload: {
-            isShowPSwModal: false,
-          },
-        });
         yield put({
           type: 'getUserInfo',
         });
@@ -101,15 +89,8 @@ const model: DvaModel<SettingModelState> = {
     *set_tenant_info({ payload = {} }, { call, put }) {
       const { data } = yield call(userService.set_tenant_info, payload);
       const { retcode } = data;
-      // llm_id 对应chat_id
-      // asr_id 对应speech2txt
       if (retcode === 0) {
-        yield put({
-          type: 'updateState',
-          payload: {
-            isShowSSModal: false,
-          },
-        });
+        message.success('Modified!');
         yield put({
           type: 'getTenantInfo',
         });

web/src/pages/user-setting/constants.tsx

@@ -1,16 +1,16 @@
+import { ReactComponent as LogoutIcon } from '@/assets/svg/logout.svg';
+import { ReactComponent as ModelIcon } from '@/assets/svg/model-providers.svg';
+import { ReactComponent as PasswordIcon } from '@/assets/svg/password.svg';
+import { ReactComponent as ProfileIcon } from '@/assets/svg/profile.svg';
+import { ReactComponent as TeamIcon } from '@/assets/svg/team.svg';
 import { UserSettingRouteKey } from '@/constants/setting';
-import {
-  ContainerOutlined,
-  DesktopOutlined,
-  PieChartOutlined,
-} from '@ant-design/icons';
 
 export const UserSettingIconMap = {
-  [UserSettingRouteKey.Profile]: <PieChartOutlined />,
-  [UserSettingRouteKey.Password]: <DesktopOutlined />,
-  [UserSettingRouteKey.Model]: <ContainerOutlined />,
-  [UserSettingRouteKey.Team]: <ContainerOutlined />,
-  [UserSettingRouteKey.Logout]: <ContainerOutlined />,
+  [UserSettingRouteKey.Profile]: <ProfileIcon />,
+  [UserSettingRouteKey.Password]: <PasswordIcon />,
+  [UserSettingRouteKey.Model]: <ModelIcon />,
+  [UserSettingRouteKey.Team]: <TeamIcon />,
+  [UserSettingRouteKey.Logout]: <LogoutIcon />,
 };
 
 export * from '@/constants/setting';

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

@@ -5,13 +5,14 @@ import {
   useFetchLlmList,
   useSaveApiKey,
   useSaveTenantInfo,
+  useSelectLlmOptionsByModelType,
 } from '@/hooks/llmHooks';
 import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
 import {
   useFetchTenantInfo,
   useSelectTenantInfo,
 } from '@/hooks/userSettingHook';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 type SavingParamsState = Omit<IApiKeySavingParams, 'api_key'>;
 
@@ -97,10 +98,18 @@ export const useSubmitSystemModelSetting = () => {
   };
 };
 
-export const useFetchSystemModelSettingOnMount = () => {
+export const useFetchSystemModelSettingOnMount = (visible: boolean) => {
   const systemSetting = useSelectTenantInfo();
-  useFetchLlmList();
-  useFetchTenantInfo();
+  const allOptions = useSelectLlmOptionsByModelType();
+  const fetchLlmList = useFetchLlmList();
+  const fetchTenantInfo = useFetchTenantInfo();
 
-  return systemSetting;
+  useEffect(() => {
+    if (visible) {
+      fetchLlmList();
+      fetchTenantInfo();
+    }
+  }, [fetchLlmList, fetchTenantInfo, visible]);
+
+  return { systemSetting, allOptions };
 };

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

@@ -5,12 +5,19 @@ import {
   useFetchLlmFactoryListOnMount,
   useFetchMyLlmListOnMount,
 } from '@/hooks/llmHooks';
-import { SettingOutlined } from '@ant-design/icons';
+import { ReactComponent as MoonshotIcon } from '@/icons/moonshot.svg';
+import { ReactComponent as OpenAiIcon } from '@/icons/openai.svg';
+import { ReactComponent as TongYiIcon } from '@/icons/tongyi.svg';
+import { ReactComponent as WenXinIcon } from '@/icons/wenxin.svg';
+import { ReactComponent as ZhiPuIcon } from '@/icons/zhipu.svg';
+import { SettingOutlined, UserOutlined } from '@ant-design/icons';
 import {
   Avatar,
   Button,
   Card,
   Col,
+  Collapse,
+  CollapseProps,
   Divider,
   Flex,
   List,
@@ -26,6 +33,23 @@ import SystemModelSettingModal from './system-model-setting-modal';
 
 import styles from './index.less';
 
+const IconMap = {
+  通义千问: TongYiIcon,
+  Moonshot: MoonshotIcon,
+  OpenAI: OpenAiIcon,
+  智谱AI: ZhiPuIcon,
+  文心一言: WenXinIcon,
+};
+
+const LlmIcon = ({ name }: { name: string }) => {
+  const Icon = IconMap[name as keyof typeof IconMap];
+  return Icon ? (
+    <Icon width={48} height={48}></Icon>
+  ) : (
+    <Avatar shape="square" size="large" icon={<UserOutlined />} />
+  );
+};
+
 const { Text } = Typography;
 interface IModelCardProps {
   item: LlmItem;
@@ -49,7 +73,7 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
         <Row align={'middle'}>
           <Col span={12}>
             <Flex gap={'middle'} align="center">
-              <Avatar shape="square" size="large" src={item.logo} />
+              <LlmIcon name={item.name} />
               <Flex vertical gap={'small'}>
                 <b>{item.name}</b>
                 <Text>{item.tags}</Text>
@@ -114,16 +138,11 @@ const UserSettingModel = () => {
     handleApiKeyClick(llmFactory);
   };
 
-  return (
-    <>
-      <section className={styles.modelWrapper}>
-        <SettingTitle
-          title="Model Setting"
-          description="Manage your account settings and preferences here."
-          showRightButton
-          clickButton={showSystemSettingModal}
-        ></SettingTitle>
-        <Divider></Divider>
+  const items: CollapseProps['items'] = [
+    {
+      key: '1',
+      label: 'Added models',
+      children: (
         <List
           grid={{ gutter: 16, column: 1 }}
           dataSource={llmList}
@@ -131,10 +150,15 @@ const UserSettingModel = () => {
             <ModelCard item={item} clickApiKey={handleApiKeyClick}></ModelCard>
           )}
         />
-        <p>Models to be added</p>
+      ),
+    },
+    {
+      key: '2',
+      label: 'Models to be added',
+      children: (
         <List
           grid={{
-            gutter: 16,
+            gutter: 24,
             xs: 1,
             sm: 2,
             md: 3,
@@ -147,7 +171,7 @@ const UserSettingModel = () => {
             <List.Item>
               <Card className={styles.toBeAddedCard}>
                 <Flex vertical gap={'large'}>
-                  <Avatar shape="square" size="large" src={item.logo} />
+                  <LlmIcon name={item.name} />
                   <Flex vertical gap={'middle'}>
                     <b>{item.name}</b>
                     <Text>{item.tags}</Text>
@@ -161,6 +185,21 @@ const UserSettingModel = () => {
             </List.Item>
           )}
         />
+      ),
+    },
+  ];
+
+  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>
       <ApiKeyModal
         visible={apiKeyVisible}

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

@@ -1,4 +1,5 @@
 import { IModalManagerChildrenProps } from '@/components/modal-manager';
+import { LlmModelType } from '@/constants/knowledge';
 import { ISystemModelSettingSavingParams } from '@/hooks/llmHooks';
 import { Form, Modal, Select } from 'antd';
 import { useEffect } from 'react';
@@ -18,7 +19,8 @@ const SystemModelSettingModal = ({
   loading,
 }: IProps) => {
   const [form] = Form.useForm();
-  const initialValues = useFetchSystemModelSettingOnMount();
+  const { systemSetting: initialValues, allOptions } =
+    useFetchSystemModelSettingOnMount(visible);
 
   const handleOk = async () => {
     const values = await form.validateFields();
@@ -33,7 +35,7 @@ const SystemModelSettingModal = ({
 
   return (
     <Modal
-      title="Basic Modal"
+      title="System Model Settings"
       open={visible}
       onOk={handleOk}
       onCancel={hideModal}
@@ -41,17 +43,17 @@ const SystemModelSettingModal = ({
       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 label="Sequence2txt model" name="asr_id">
+          <Select options={allOptions[LlmModelType.Speech2text]} />
         </Form.Item>
         <Form.Item label="Embedding model" name="embd_id">
-          <Select options={[{ value: 'sample', label: <span>sample</span> }]} />
+          <Select options={allOptions[LlmModelType.Embedding]} />
         </Form.Item>
-        <Form.Item label="img2txt_id model" name="img2txt_id">
-          <Select options={[{ value: 'sample', label: <span>sample</span> }]} />
+        <Form.Item label="Img2txt model" name="img2txt_id">
+          <Select options={allOptions[LlmModelType.Image2text]} />
         </Form.Item>
         <Form.Item label="Chat model" name="llm_id">
-          <Select options={[{ value: 'sample', label: <span>sample</span> }]} />
+          <Select options={allOptions[LlmModelType.Chat]} />
         </Form.Item>
       </Form>
     </Modal>

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

@@ -0,0 +1,6 @@
+.teamWrapper {
+  width: 100%;
+  .teamCard {
+    // width: 100%;
+  }
+}

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

@@ -1,5 +1,21 @@
+import { Button, Card, Flex } from 'antd';
+
+import { useSelectUserInfo } from '@/hooks/userSettingHook';
+import styles from './index.less';
+
 const UserSettingTeam = () => {
-  return <div>UserSettingTeam</div>;
+  const userInfo = useSelectUserInfo();
+
+  return (
+    <div className={styles.teamWrapper}>
+      <Card className={styles.teamCard}>
+        <Flex align="center" justify={'space-between'}>
+          <span>{userInfo.nickname} Workspace</span>
+          <Button type="primary">Upgrade</Button>
+        </Flex>
+      </Card>
+    </div>
+  );
 };
 
 export default UserSettingTeam;

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

@@ -10,6 +10,7 @@ import {
   UserSettingRouteMap,
 } from '../constants';
 
+import { useLogout } from '@/hooks/userSettingHook';
 import styles from './index.less';
 
 type MenuItem = Required<MenuProps>['items'][number];
@@ -37,9 +38,14 @@ const items: MenuItem[] = Object.values(UserSettingRouteKey).map((value) =>
 const SideBar = () => {
   const navigate = useNavigate();
   const pathName = useSecondPathName();
+  const logout = useLogout();
 
   const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
-    navigate(`/${UserSettingBaseKey}/${key}`);
+    if (key === UserSettingRouteKey.Logout) {
+      logout();
+    } else {
+      navigate(`/${UserSettingBaseKey}/${key}`);
+    }
   };
 
   const selectedKeys = useMemo(() => {