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/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}