✨ feat: support model select

package.json

@@ -66,6 +66,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@gltf-transform/core": "^3.10.1",
     "@icons-pack/react-simple-icons": "^9.5.0",
+    "@lobehub/icons": "^1.22.1",
     "@lobehub/tts": "^1.24.1",
     "@lobehub/ui": "^1.141.3",
     "@pixiv/three-vrm": "2.1.1",

src/app/chat/ChatMode/index.tsx

@@ -4,9 +4,8 @@ import classNames from 'classnames';
 import React, { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import Alert from '@/features/Alert';
-import MessageInput from '@/features/ChatInput/MessageInput';
 import ChatList from '@/features/ChatList';
+import MessageInput from '@/features/MessageInput';
 
 import { useStyles } from './style';
 
@@ -25,7 +24,6 @@ const Chat = () => {
       <Flexbox align={'center'} className={styles.docker} ref={ref}>
         <div className={classNames(styles.input)}>
           <MessageInput />
-          <Alert style={{ marginTop: 8 }} />
         </div>
       </Flexbox>
     </Flexbox>

src/app/chat/ViewerMode/index.tsx

@@ -6,8 +6,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { HEADER_HEIGHT } from '@/constants/token';
 import AgentViewer from '@/features/AgentViewer';
-import Alert from '@/features/Alert';
-import MessageInput from '@/features/ChatInput/MessageInput';
+import MessageInput from '@/features/MessageInput';
 import { sessionSelectors, useSessionStore } from '@/store/session';
 
 import ChatDialog from './ChatDialog';
@@ -29,7 +28,6 @@ export default memo(() => {
       <Flexbox align={'center'} className={styles.docker}>
         <div className={classNames(styles.input, styles.content)}>
           <MessageInput />
-          <Alert style={{ marginTop: 8 }} />
         </div>
       </Flexbox>
     </Flexbox>

src/components/ModelIcon/index.tsx

@@ -0,0 +1,97 @@
+import {
+  Adobe,
+  Ai21,
+  Aws,
+  Azure,
+  Baichuan,
+  ByteDance,
+  ChatGLM,
+  Claude,
+  Cohere,
+  Dbrx,
+  DeepSeek,
+  FishAudio,
+  Gemini,
+  Gemma,
+  Hunyuan,
+  LLaVA,
+  Meta,
+  Minimax,
+  Mistral,
+  Moonshot,
+  OpenAI,
+  OpenChat,
+  OpenRouter,
+  Perplexity,
+  Rwkv,
+  Spark,
+  Stability,
+  Tongyi,
+  Wenxin,
+  Yi,
+} from '@lobehub/icons';
+import { memo } from 'react';
+
+interface ModelProviderIconProps {
+  model?: string;
+  size?: number;
+}
+
+const ModelIcon = memo<ModelProviderIconProps>(({ model: originModel, size = 12 }) => {
+  if (!originModel) return;
+
+  // lower case the origin model so to better match more model id case
+  const model = originModel.toLowerCase();
+
+  // currently supported models, maybe not in its own provider
+  if (model.includes('gpt-3')) return <OpenAI.Avatar size={size} type={'gpt3'} />;
+  if (model.includes('gpt-4')) return <OpenAI.Avatar size={size} type={'gpt4'} />;
+  if (model.startsWith('glm') || model.includes('chatglm')) return <ChatGLM.Avatar size={size} />;
+  if (model.includes('deepseek')) return <DeepSeek.Avatar size={size} />;
+  if (model.includes('claude')) return <Claude.Avatar size={size} />;
+  if (model.includes('titan')) return <Aws.Avatar size={size} />;
+  if (model.includes('llama')) return <Meta.Avatar size={size} />;
+  if (model.includes('llava')) return <LLaVA.Avatar size={size} />;
+  if (model.includes('gemini')) return <Gemini.Avatar size={size} />;
+  if (model.includes('gemma')) return <Gemma.Avatar size={size} />;
+  if (model.includes('moonshot')) return <Moonshot.Avatar size={size} />;
+  if (model.includes('qwen')) return <Tongyi.Avatar background={Tongyi.colorPrimary} size={size} />;
+  if (model.includes('minmax') || model.includes('abab')) return <Minimax.Avatar size={size} />;
+  if (model.includes('mistral') || model.includes('mixtral')) return <Mistral.Avatar size={size} />;
+  if (model.includes('pplx') || model.includes('sonar')) return <Perplexity.Avatar size={size} />;
+  if (model.includes('yi-')) return <Yi.Avatar size={size} />;
+  if (model.startsWith('openrouter')) return <OpenRouter.Avatar size={size} />; // only for Cinematika and Auto
+  if (model.startsWith('openchat')) return <OpenChat.Avatar size={size} />;
+  if (model.includes('command')) return <Cohere.Avatar size={size} />;
+  if (model.includes('dbrx')) return <Dbrx.Avatar size={size} />;
+
+  // below: To be supported in providers, move up if supported
+  if (model.includes('baichuan'))
+    return <Baichuan.Avatar background={Baichuan.colorPrimary} size={size} />;
+  if (model.includes('rwkv')) return <Rwkv.Avatar size={size} />;
+  if (model.includes('ernie')) return <Wenxin.Avatar size={size} />;
+  if (model.includes('spark')) return <Spark.Avatar size={size} />;
+  if (model.includes('hunyuan')) return <Hunyuan.Avatar size={size} />;
+  // ref https://github.com/fishaudio/Bert-VITS2/blob/master/train_ms.py#L702
+  if (model.startsWith('d_') || model.startsWith('g_') || model.startsWith('wd_'))
+    return <FishAudio.Avatar size={size} />;
+  if (model.includes('skylark')) return <ByteDance.Avatar size={size} />;
+
+  if (
+    model.includes('stable-diffusion') ||
+    model.includes('stable-video') ||
+    model.includes('stable-cascade') ||
+    model.includes('sdxl') ||
+    model.includes('stablelm') ||
+    model.startsWith('stable-') ||
+    model.startsWith('sd3')
+  )
+    return <Stability.Avatar size={size} />;
+
+  if (model.includes('wizardlm')) return <Azure.Avatar size={size} />;
+  if (model.includes('phi3')) return <Azure.Avatar size={size} />;
+  if (model.includes('firefly')) return <Adobe.Avatar size={size} />;
+  if (model.includes('jamba') || model.includes('j2-')) return <Ai21.Avatar size={size} />;
+});
+
+export default ModelIcon;

src/components/ModelTag/ModelIcon.tsx

@@ -0,0 +1,93 @@
+import {
+  AdobeFirefly,
+  Ai21,
+  Aws,
+  Azure,
+  Baichuan,
+  ByteDance,
+  ChatGLM,
+  Claude,
+  Cohere,
+  Dbrx,
+  DeepSeek,
+  FishAudio,
+  Gemini,
+  Gemma,
+  Hunyuan,
+  LLaVA,
+  Meta,
+  Minimax,
+  Mistral,
+  Moonshot,
+  OpenAI,
+  OpenChat,
+  OpenRouter,
+  Perplexity,
+  Rwkv,
+  Spark,
+  Stability,
+  Tongyi,
+  Wenxin,
+  Yi,
+} from '@lobehub/icons';
+import { memo } from 'react';
+
+interface ModelIconProps {
+  model?: string;
+  size?: number;
+}
+
+const ModelIcon = memo<ModelIconProps>(({ model, size = 12 }) => {
+  if (!model) return;
+
+  // currently supported models, maybe not in its own provider
+  if (model.startsWith('gpt')) return <OpenAI size={size} />;
+  if (model.startsWith('glm') || model.includes('chatglm')) return <ChatGLM size={size} />;
+  if (model.includes('claude')) return <Claude size={size} />;
+  if (model.includes('deepseek')) return <DeepSeek size={size} />;
+  if (model.includes('titan')) return <Aws size={size} />;
+  if (model.includes('llama')) return <Meta size={size} />;
+  if (model.includes('llava')) return <LLaVA size={size} />;
+  if (model.includes('gemini')) return <Gemini size={size} />;
+  if (model.includes('gemma')) return <Gemma.Simple size={size} />;
+  if (model.includes('moonshot')) return <Moonshot size={size} />;
+  if (model.includes('qwen')) return <Tongyi size={size} />;
+  if (model.includes('minmax')) return <Minimax size={size} />;
+  if (model.includes('abab')) return <Minimax size={size} />;
+  if (model.includes('mistral') || model.includes('mixtral')) return <Mistral size={size} />;
+  if (model.includes('pplx') || model.includes('sonar')) return <Perplexity size={size} />;
+  if (model.includes('yi-')) return <Yi size={size} />;
+  if (model.startsWith('openrouter')) return <OpenRouter size={size} />; // only for Cinematika and Auto
+  if (model.startsWith('openchat')) return <OpenChat size={size} />;
+  if (model.includes('command')) return <Cohere size={size} />;
+  if (model.includes('dbrx')) return <Dbrx size={size} />;
+
+  // below: To be supported in providers, move up if supported
+  if (model.includes('baichuan')) return <Baichuan size={size} />;
+  if (model.includes('rwkv')) return <Rwkv size={size} />;
+  if (model.includes('ernie')) return <Wenxin size={size} />;
+  if (model.includes('spark')) return <Spark size={size} />;
+  if (model.includes('hunyuan')) return <Hunyuan size={size} />;
+  // ref https://github.com/fishaudio/Bert-VITS2/blob/master/train_ms.py#L702
+  if (model.startsWith('d_') || model.startsWith('g_') || model.startsWith('wd_'))
+    return <FishAudio size={size} />;
+  if (model.includes('skylark')) return <ByteDance size={size} />;
+
+  if (
+    model.includes('stable-diffusion') ||
+    model.includes('stable-video') ||
+    model.includes('stable-cascade') ||
+    model.includes('sdxl') ||
+    model.includes('stablelm') ||
+    model.startsWith('stable-') ||
+    model.startsWith('sd3')
+  )
+    return <Stability size={size} />;
+
+  if (model.includes('wizardlm')) return <Azure size={size} />;
+  if (model.includes('phi3')) return <Azure size={size} />;
+  if (model.includes('firefly')) return <AdobeFirefly size={size} />;
+  if (model.includes('jamba') || model.includes('j2-')) return <Ai21 size={size} />;
+});
+
+export default ModelIcon;

src/components/ModelTag/index.tsx

@@ -0,0 +1,13 @@
+import { Tag } from '@lobehub/ui';
+import { memo } from 'react';
+
+import ModelIcon from './ModelIcon';
+
+interface ModelTagProps {
+  model?: string;
+}
+const ModelTag = memo<ModelTagProps>(({ model }) => (
+  <Tag icon={<ModelIcon model={model} />}>{model ? model : '请选择模型'}</Tag>
+));
+
+export default ModelTag;

src/components/agent/AgentMeta/index.tsx

@@ -1,7 +1,8 @@
 import { Avatar } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Space, Typography } from 'antd';
 import React from 'react';
 
+import ModelSelect from '@/features/Actions/ModelSelect';
 import { AgentMeta } from '@/types/agent';
 
 import { useStyles } from './style';
@@ -21,7 +22,11 @@ export default (props: AgentMetaProps) => {
     <div className={cx(styles.container, className)} style={style}>
       <Avatar avatar={avatar} size={36} />
       <div className={styles.content}>
-        <div className={styles.title}>{name}</div>
+        <div className={styles.title}>
+          <Space size={4} align={'center'}>
+            {name} <ModelSelect />
+          </Space>
+        </div>
         <Typography.Text className={styles.desc} ellipsis>
           {description}
         </Typography.Text>

src/components/agent/AgentMeta/style.ts

@@ -11,6 +11,8 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
   desc: css`
     max-width: 480px;
+    margin-top: ${token.marginXXS}px;
+
     font-size: ${token.fontSizeSM}px;
     line-height: 18px;
     color: ${token.colorTextDescription};

src/features/Actions/ModelSelect.tsx

@@ -0,0 +1,69 @@
+import { Dropdown } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+import ModelIcon from '@/components/ModelIcon';
+import ModelTag from '@/components/ModelTag';
+import { OPENAI_MODEL_LIST } from '@/constants/openai';
+import { configSelectors, useSettingStore } from '@/store/setting';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  menu: css`
+    .${prefixCls}-dropdown-menu-item {
+      display: flex;
+      gap: 8px;
+      margin: 4px 0 !important;
+    }
+    .${prefixCls}-dropdown-menu {
+      &-item-group-title {
+        padding-inline: 8px;
+      }
+
+      &-item-group-list {
+        margin: 0 !important;
+      }
+    }
+  `,
+  tag: css`
+    cursor: pointer;
+  `,
+}));
+
+const ModelSelect = memo(() => {
+  const { styles } = useStyles();
+  const [model, setOpenAIConfig] = useSettingStore((s) => [
+    configSelectors.currentOpenAIConfig(s)?.model,
+    s.setOpenAIConfig,
+  ]);
+
+  const items = OPENAI_MODEL_LIST.map((item) => {
+    return {
+      icon: <ModelIcon model={item.id} size={18} />,
+      key: item.id,
+      label: item.displayName,
+      onClick: () => setOpenAIConfig({ model: item.id }),
+    };
+  });
+
+  return (
+    <Dropdown
+      menu={{
+        items,
+        className: styles.menu,
+        activeKey: model,
+        style: {
+          maxHeight: 500,
+          overflowY: 'scroll',
+        },
+      }}
+      placement={'topLeft'}
+      trigger={['click']}
+    >
+      <div className={styles.tag}>
+        <ModelTag model={model} />
+      </div>
+    </Dropdown>
+  );
+});
+
+export default ModelSelect;