💄 style: improve plugin tag and model options

lobehub · Feb 5, 2024 · 7455fdc · 7455fdc
1 parent 7bdcc1e
commit 7455fdc
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 34 deletions.
diff --git a/src/app/chat/(desktop)/features/ChatHeader.tsx b/src/app/chat/(desktop)/features/ChatHeader.tsx
@@ -9,6 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 import ModelTag from '@/components/ModelTag';
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/slices/settings/selectors';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
@@ -34,6 +35,7 @@ const Left = memo(() => {
       agentSelectors.currentAgentPlugins(s),
     ]);
 
+  const showPlugin = useGlobalStore(modelProviderSelectors.modelEnabledFunctionCall(model));
   const displayTitle = isInbox ? t('inbox.title') : title;
   const displayDesc = isInbox ? t('inbox.desc') : description;
 
@@ -64,7 +66,7 @@ const Left = memo(() => {
         tag={
           <>
             <ModelTag model={model} />
-            {plugins?.length > 0 && <PluginTag plugins={plugins} />}
+            {showPlugin && plugins?.length > 0 && <PluginTag plugins={plugins} />}
           </>
         }
         title={displayTitle}

diff --git a/src/features/AgentSetting/AgentConfig/ModelSelect.tsx b/src/features/AgentSetting/AgentConfig/ModelSelect.tsx
@@ -1,11 +1,12 @@
-import { Select } from 'antd';
+import { Select, SelectProps } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 
 import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
 import { useGlobalStore } from '@/store/global';
 import { modelProviderSelectors } from '@/store/global/selectors';
+import { ModelProviderCard } from '@/types/llm';
 
 import { useStore } from '../store';
 
@@ -27,24 +28,40 @@ const ModelSelect = memo(() => {
   const select = useGlobalStore(modelProviderSelectors.modelSelectList, isEqual);
   const { styles } = useStyles();
 
+  const enabledList = select.filter((s) => s.enabled);
+
+  const options = useMemo<SelectProps['options']>(() => {
+    const getChatModels = (provider: ModelProviderCard) =>
+      provider.chatModels
+        .filter((c) => !c.hidden)
+        .map((model) => ({
+          label: <ModelItemRender {...model} />,
+          provider: provider.id,
+          value: model.id,
+        }));
+
+    if (enabledList.length === 1) {
+      const provider = enabledList[0];
+
+      return getChatModels(provider);
+    }
+
+    return enabledList.map((provider) => ({
+      label: <ProviderItemRender provider={provider.id} />,
+      options: getChatModels(provider),
+    }));
+  }, [enabledList]);
+
   return (
     <Select
       className={styles.select}
       onChange={(model, option) => {
-        updateConfig({ model, provider: (option as unknown as ModelOption).provider });
+        updateConfig({
+          model,
+          provider: (option as unknown as ModelOption).provider,
+        });
       }}
-      options={select
-        .filter((s) => s.enabled)
-        .map((provider) => ({
-          label: <ProviderItemRender provider={provider.id} />,
-          options: provider.chatModels
-            .filter((c) => !c.hidden)
-            .map((model) => ({
-              label: <ModelItemRender {...model} />,
-              provider: provider.id,
-              value: model.id,
-            })),
-        }))}
+      options={options}
       popupMatchSelectWidth={false}
       value={model}
     />

diff --git a/src/features/ChatInput/ActionBar/ModelSwitch.tsx b/src/features/ChatInput/ActionBar/ModelSwitch.tsx
@@ -3,14 +3,15 @@ import { Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { BrainCog } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
 import { useGlobalStore } from '@/store/global';
 import { modelProviderSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
+import { ModelProviderCard } from '@/types/llm';
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
   menu: css`
@@ -37,29 +38,38 @@ const ModelSwitch = memo(() => {
   const updateAgentConfig = useSessionStore((s) => s.updateAgentConfig);
 
   const select = useGlobalStore(modelProviderSelectors.modelSelectList, isEqual);
+  const enabledList = select.filter((s) => s.enabled);
 
+  const items = useMemo(() => {
+    const getModelItems = (provider: ModelProviderCard) =>
+      provider.chatModels
+        .filter((c) => !c.hidden)
+        .map((model) => ({
+          key: model.id,
+          label: <ModelItemRender {...model} />,
+          onClick: () => {
+            updateAgentConfig({ model: model.id, provider: provider.id });
+          },
+        }));
+
+    if (enabledList.length === 1) {
+      const provider = enabledList[0];
+      return getModelItems(provider);
+    }
+
+    return enabledList.map((provider) => ({
+      children: getModelItems(provider),
+      key: provider.id,
+      label: <ProviderItemRender provider={provider.id} />,
+      type: 'group',
+    }));
+  }, [enabledList]);
   return (
     <Dropdown
       menu={{
         activeKey: model,
         className: styles.menu,
-        items: select
-          .filter((s) => s.enabled)
-          .map((provider) => ({
-            children: provider.chatModels
-              .filter((c) => !c.hidden)
-              .map((model) => ({
-                key: model.id,
-                label: <ModelItemRender {...model} />,
-                onClick: () => {
-                  updateAgentConfig({ model: model.id, provider: provider?.id });
-                },
-              })),
-
-            key: provider.id,
-            label: <ProviderItemRender provider={provider.id} />,
-            type: 'group',
-          })),
+        items,
         style: {
           maxHeight: 500,
           overflowY: 'scroll',