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
2024-03-18 16:45:01 +08:00
parent a0f1e1fa95
commit 0e2aff2a48
22 changed files with 287 additions and 112 deletions
--- a/web/src/pages/user-setting/constants.tsx
+++ b/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';
--- a/web/src/pages/user-setting/setting-model/hooks.ts
+++ b/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 };
 };
--- a/web/src/pages/user-setting/setting-model/index.tsx
+++ b/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}
--- a/web/src/pages/user-setting/setting-model/system-model-setting-modal/index.tsx
+++ b/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>
--- a/web/src/pages/user-setting/setting-team/index.less
+++ b/web/src/pages/user-setting/setting-team/index.less
@@ -0,0 +1,6 @@
+.teamWrapper {
+  width: 100%;
+  .teamCard {
+    // width: 100%;
+  }
+}
--- a/web/src/pages/user-setting/setting-team/index.tsx
+++ b/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;
--- a/web/src/pages/user-setting/sidebar/index.tsx
+++ b/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(() => {