@lobehub/chat 0.122.9 → 0.123.0

package/src/features/AgentSetting/AgentConfig/index.tsx

@@ -1,186 +1,196 @@
 import { Form, ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
-import { Form as AFrom, Input, Select, Switch } from 'antd';
+import { Form as AFrom, Input, Switch } from 'antd';
 import { useThemeMode } from 'antd-style';
-import isEqual from 'fast-deep-equal';
 import { debounce } from 'lodash-es';
 import { BrainCog, LayoutList, MessageSquare, MessagesSquare } from 'lucide-react';
-import { memo, useEffect } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
-import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
 
 import { useStore } from '../store';
+import ModelSelect from './ModelSelect';
+import { useSyncConfig } from './useSyncConfig';
 
 const AgentConfig = memo(() => {
   const { t } = useTranslation('setting');
-  const updateConfig = useStore((s) => s.setAgentConfig);
   const [form] = AFrom.useForm();
   const { isDarkMode } = useThemeMode();
 
-  const config = useStore((s) => s.config, isEqual);
+  const [
+    displayMode,
+    enableAutoCreateTopic,
+    enableHistoryCount,
+    enableMaxTokens,
+    enableCompressThreshold,
+    updateConfig,
+  ] = useStore((s) => [
+    s.config.displayMode,
+    s.config.enableAutoCreateTopic,
+    s.config.enableHistoryCount,
+    s.config.enableCompressThreshold,
+    s.config.enableMaxTokens,
+    s.setAgentConfig,
+  ]);
 
-  const modelList = useGlobalStore(modelProviderSelectors.modelList);
+  useSyncConfig(form);
 
-  useEffect(() => {
-    form.setFieldsValue(config);
-  }, [config]);
+  const formItems = useMemo(() => {
+    const chat: ItemGroup = {
+      children: [
+        {
+          children: (
+            <SelectWithImg
+              height={86}
+              onChange={(mode) => updateConfig({ displayMode: mode })}
+              options={[
+                {
+                  icon: MessagesSquare,
+                  img: `/images/chatmode_chat_${isDarkMode ? 'dark' : 'light'}.webp`,
+                  label: t('settingChat.chatStyleType.type.chat'),
+                  value: 'chat',
+                },
+                {
+                  icon: LayoutList,
+                  img: `/images/chatmode_docs_${isDarkMode ? 'dark' : 'light'}.webp`,
+                  label: t('settingChat.chatStyleType.type.docs'),
+                  value: 'docs',
+                },
+              ]}
+              value={displayMode}
+              width={144}
+            />
+          ),
+          label: t('settingChat.chatStyleType.title'),
+          minWidth: undefined,
+        },
+        {
+          children: <Input.TextArea placeholder={t('settingChat.inputTemplate.placeholder')} />,
+          desc: t('settingChat.inputTemplate.desc'),
+          label: t('settingChat.inputTemplate.title'),
+          name: 'inputTemplate',
+        },
+        {
+          children: <Switch />,
+          desc: t('settingChat.enableAutoCreateTopic.desc'),
+          label: t('settingChat.enableAutoCreateTopic.title'),
+          minWidth: undefined,
+          name: 'enableAutoCreateTopic',
+          valuePropName: 'checked',
+        },
+        {
+          children: <SliderWithInput max={8} min={0} />,
+          desc: t('settingChat.autoCreateTopicThreshold.desc'),
+          divider: false,
+          hidden: !enableAutoCreateTopic,
+          label: t('settingChat.autoCreateTopicThreshold.title'),
+          name: 'autoCreateTopicThreshold',
+        },
+        {
+          children: <Switch />,
+          label: t('settingChat.enableHistoryCount.title'),
+          minWidth: undefined,
+          name: 'enableHistoryCount',
+          valuePropName: 'checked',
+        },
+        {
+          children: <SliderWithInput max={32} min={1} />,
+          desc: t('settingChat.historyCount.desc'),
+          divider: false,
+          hidden: !enableHistoryCount,
+          label: t('settingChat.historyCount.title'),
+          name: 'historyCount',
+        },
+        {
+          children: <Switch />,
+          label: t('settingChat.enableCompressThreshold.title'),
+          minWidth: undefined,
+          name: 'enableCompressThreshold',
+          valuePropName: 'checked',
+        },
+        {
+          children: <SliderWithInput max={32} min={0} />,
+          desc: t('settingChat.compressThreshold.desc'),
+          divider: false,
+          hidden: !enableCompressThreshold,
+          label: t('settingChat.compressThreshold.title'),
+          name: 'compressThreshold',
+        },
+      ],
+      icon: MessageSquare,
+      title: t('settingChat.title'),
+    };
 
-  const chat: ItemGroup = {
-    children: [
-      {
-        children: (
-          <SelectWithImg
-            height={86}
-            onChange={(mode) => updateConfig({ displayMode: mode })}
-            options={[
-              {
-                icon: MessagesSquare,
-                img: `/images/chatmode_chat_${isDarkMode ? 'dark' : 'light'}.webp`,
-                label: t('settingChat.chatStyleType.type.chat'),
-                value: 'chat',
-              },
-              {
-                icon: LayoutList,
-                img: `/images/chatmode_docs_${isDarkMode ? 'dark' : 'light'}.webp`,
-                label: t('settingChat.chatStyleType.type.docs'),
-                value: 'docs',
-              },
-            ]}
-            value={config.displayMode}
-            width={144}
-          />
-        ),
-        label: t('settingChat.chatStyleType.title'),
-        minWidth: undefined,
-      },
-      {
-        children: <Input.TextArea placeholder={t('settingChat.inputTemplate.placeholder')} />,
-        desc: t('settingChat.inputTemplate.desc'),
-        label: t('settingChat.inputTemplate.title'),
-        name: 'inputTemplate',
-      },
-      {
-        children: <Switch />,
-        desc: t('settingChat.enableAutoCreateTopic.desc'),
-        label: t('settingChat.enableAutoCreateTopic.title'),
-        minWidth: undefined,
-        name: 'enableAutoCreateTopic',
-        valuePropName: 'checked',
-      },
-      {
-        children: <SliderWithInput max={8} min={0} />,
-        desc: t('settingChat.autoCreateTopicThreshold.desc'),
-        divider: false,
-        hidden: !config.enableAutoCreateTopic,
-        label: t('settingChat.autoCreateTopicThreshold.title'),
-        name: 'autoCreateTopicThreshold',
-      },
-      {
-        children: <Switch />,
-        label: t('settingChat.enableHistoryCount.title'),
-        minWidth: undefined,
-        name: 'enableHistoryCount',
-        valuePropName: 'checked',
-      },
-      {
-        children: <SliderWithInput max={32} min={1} />,
-        desc: t('settingChat.historyCount.desc'),
-        divider: false,
-        hidden: !config.enableHistoryCount,
-        label: t('settingChat.historyCount.title'),
-        name: 'historyCount',
-      },
-      {
-        children: <Switch />,
-        label: t('settingChat.enableCompressThreshold.title'),
-        minWidth: undefined,
-        name: 'enableCompressThreshold',
-        valuePropName: 'checked',
-      },
-      {
-        children: <SliderWithInput max={32} min={0} />,
-        desc: t('settingChat.compressThreshold.desc'),
-        divider: false,
-        hidden: !config.enableCompressThreshold,
-        label: t('settingChat.compressThreshold.title'),
-        name: 'compressThreshold',
-      },
-    ],
-    icon: MessageSquare,
-    title: t('settingChat.title'),
-  };
-
-  const model: ItemGroup = {
-    children: [
-      {
-        children: (
-          <Select
-            options={modelList.map(({ name, displayName }) => ({
-              label: displayName,
-              value: name,
-            }))}
-          />
-        ),
-        desc: t('settingModel.model.desc'),
-        label: t('settingModel.model.title'),
-        name: 'model',
-        tag: 'model',
-      },
-      {
-        children: <SliderWithInput max={1} min={0} step={0.1} />,
-        desc: t('settingModel.temperature.desc'),
-        label: t('settingModel.temperature.title'),
-        name: ['params', 'temperature'],
-        tag: 'temperature',
-      },
-      {
-        children: <SliderWithInput max={1} min={0} step={0.1} />,
-        desc: t('settingModel.topP.desc'),
-        label: t('settingModel.topP.title'),
-        name: ['params', 'top_p'],
-        tag: 'top_p',
-      },
-      {
-        children: <SliderWithInput max={2} min={-2} step={0.1} />,
-        desc: t('settingModel.presencePenalty.desc'),
-        label: t('settingModel.presencePenalty.title'),
-        name: ['params', 'presence_penalty'],
-        tag: 'presence_penalty',
-      },
-      {
-        children: <SliderWithInput max={2} min={-2} step={0.1} />,
-        desc: t('settingModel.frequencyPenalty.desc'),
-        label: t('settingModel.frequencyPenalty.title'),
-        name: ['params', 'frequency_penalty'],
-        tag: 'frequency_penalty',
-      },
-      {
-        children: <Switch />,
-        label: t('settingModel.enableMaxTokens.title'),
-        minWidth: undefined,
-        name: 'enableMaxTokens',
-        valuePropName: 'checked',
-      },
-      {
-        children: <SliderWithInput max={32_000} min={0} step={100} />,
-        desc: t('settingModel.maxTokens.desc'),
-        divider: false,
-        hidden: !config?.enableMaxTokens,
-        label: t('settingModel.maxTokens.title'),
-        name: ['params', 'max_tokens'],
-        tag: 'max_tokens',
-      },
-    ],
-    icon: BrainCog,
-    title: t('settingModel.title'),
-  };
+    const model: ItemGroup = {
+      children: [
+        {
+          children: <ModelSelect />,
+          desc: t('settingModel.model.desc'),
+          label: t('settingModel.model.title'),
+          name: 'model',
+          tag: 'model',
+        },
+        {
+          children: <SliderWithInput max={1} min={0} step={0.1} />,
+          desc: t('settingModel.temperature.desc'),
+          label: t('settingModel.temperature.title'),
+          name: ['params', 'temperature'],
+          tag: 'temperature',
+        },
+        {
+          children: <SliderWithInput max={1} min={0} step={0.1} />,
+          desc: t('settingModel.topP.desc'),
+          label: t('settingModel.topP.title'),
+          name: ['params', 'top_p'],
+          tag: 'top_p',
+        },
+        {
+          children: <SliderWithInput max={2} min={-2} step={0.1} />,
+          desc: t('settingModel.presencePenalty.desc'),
+          label: t('settingModel.presencePenalty.title'),
+          name: ['params', 'presence_penalty'],
+          tag: 'presence_penalty',
+        },
+        {
+          children: <SliderWithInput max={2} min={-2} step={0.1} />,
+          desc: t('settingModel.frequencyPenalty.desc'),
+          label: t('settingModel.frequencyPenalty.title'),
+          name: ['params', 'frequency_penalty'],
+          tag: 'frequency_penalty',
+        },
+        {
+          children: <Switch />,
+          label: t('settingModel.enableMaxTokens.title'),
+          minWidth: undefined,
+          name: 'enableMaxTokens',
+          valuePropName: 'checked',
+        },
+        {
+          children: <SliderWithInput max={32_000} min={0} step={100} />,
+          desc: t('settingModel.maxTokens.desc'),
+          divider: false,
+          hidden: !enableMaxTokens,
+          label: t('settingModel.maxTokens.title'),
+          name: ['params', 'max_tokens'],
+          tag: 'max_tokens',
+        },
+      ],
+      icon: BrainCog,
+      title: t('settingModel.title'),
+    };
+    return [chat, model];
+  }, [
+    displayMode,
+    enableAutoCreateTopic,
+    enableHistoryCount,
+    enableMaxTokens,
+    enableCompressThreshold,
+  ]);
 
   return (
     <Form
       form={form}
-      items={[chat, model]}
+      items={formItems}
       onValuesChange={debounce(updateConfig, 100)}
       {...FORM_STYLE}
     />

package/src/features/AgentSetting/AgentConfig/useSyncConfig.ts

@@ -0,0 +1,23 @@
+import { FormInstance } from 'antd/es/form/hooks/useForm';
+import { useEffect } from 'react';
+
+import { useStoreApi } from '../store';
+
+export const useSyncConfig = (form: FormInstance) => {
+  const storeApi = useStoreApi();
+
+  useEffect(() => {
+    // set the first time
+    form.setFieldsValue(storeApi.getState().config);
+
+    // sync with later updated settings
+    const unsubscribe = storeApi.subscribe(
+      (s) => s.config,
+      (config) => form.setFieldsValue(config),
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+};

package/src/features/AgentSetting/AgentPrompt/TokenTag.tsx

@@ -0,0 +1,39 @@
+import { TokenTag } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useTokenCount } from '@/hooks/useTokenCount';
+import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/selectors';
+
+import { useStore } from '../store';
+
+const Tokens = memo(() => {
+  const { t } = useTranslation('chat');
+  const [systemRole, model] = useStore((s) => [s.config.systemRole, s.config.model]);
+  const systemTokenCount = useTokenCount(systemRole);
+
+  const showTag = useGlobalStore(modelProviderSelectors.modelHasMaxToken(model));
+  const modelMaxTokens = useGlobalStore(modelProviderSelectors.modelMaxToken(model));
+
+  return (
+    <Flexbox align={'center'} gap={8} horizontal>
+      {showTag && (
+        <TokenTag
+          displayMode={'used'}
+          maxValue={modelMaxTokens}
+          shape={'square'}
+          text={{
+            overload: t('tokenTag.overload'),
+            remained: t('tokenTag.remained'),
+            used: t('tokenTag.used'),
+          }}
+          value={systemTokenCount}
+        />
+      )}
+    </Flexbox>
+  );
+});
+
+export default Tokens;

package/src/features/AgentSetting/AgentPrompt/index.tsx

@@ -1,4 +1,4 @@
-import { EditableMessage, FormGroup, TokenTag } from '@lobehub/ui';
+import { EditableMessage, FormGroup } from '@lobehub/ui';
 import { Button } from 'antd';
 import { createStyles } from 'antd-style';
 import { Bot } from 'lucide-react';
@@ -7,11 +7,9 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
-import { ModelTokens } from '@/const/llm';
-import { useTokenCount } from '@/hooks/useTokenCount';
-import { LanguageModel } from '@/types/llm';
 
 import { useStore } from '../store';
+import TokenTag from './TokenTag';
 
 export const useStyles = createStyles(({ css, token }) => ({
   markdown: css`
@@ -26,31 +24,11 @@ const AgentPrompt = memo(() => {
   const { t } = useTranslation('setting');
   const { styles } = useStyles();
   const [editing, setEditing] = useState(false);
-  const updateConfig = useStore((s) => s.setAgentConfig);
-  const [systemRole, model] = useStore((s) => [s.config.systemRole, s.config.model]);
-  const systemTokenCount = useTokenCount(systemRole);
-
-  const showTag = model in ModelTokens;
+  const [systemRole, updateConfig] = useStore((s) => [s.config.systemRole, s.setAgentConfig]);
 
   return (
     <FormGroup
-      extra={
-        <Flexbox align={'center'} gap={8} horizontal>
-          {showTag && (
-            <TokenTag
-              displayMode={'used'}
-              maxValue={ModelTokens[model as LanguageModel]}
-              shape={'square'}
-              text={{
-                overload: t('tokenTag.overload', { ns: 'chat' }),
-                remained: t('tokenTag.remained', { ns: 'chat' }),
-                used: t('tokenTag.used', { ns: 'chat' }),
-              }}
-              value={systemTokenCount}
-            />
-          )}
-        </Flexbox>
-      }
+      extra={<TokenTag />}
       icon={Bot}
       style={FORM_STYLE.style}
       title={t('settingAgent.prompt.title')}

package/src/features/AgentSetting/store/index.ts

@@ -1,5 +1,6 @@
 import { StoreApi } from 'zustand';
 import { createContext } from 'zustand-utils';
+import { subscribeWithSelector } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 
@@ -7,6 +8,13 @@ import { Store, store } from './action';
 
 export type { State } from './initialState';
 
-export const createStore = () => createWithEqualityFn(store, shallow);
+export const createStore = () => createWithEqualityFn(subscribeWithSelector(store), shallow);
 
-export const { useStore, useStoreApi, Provider } = createContext<StoreApi<Store>>();
+interface StoreApiWithSelector extends Omit<StoreApi<Store>, 'subscribe'> {
+  subscribe: <T extends keyof Store>(
+    selector: (state: Store, prevState: Store) => void,
+    listener?: (state: Store[T]) => void,
+  ) => () => void;
+}
+
+export const { useStore, useStoreApi, Provider } = createContext<StoreApiWithSelector>();

package/src/features/ChatInput/ActionBar/FileUpload.tsx

@@ -7,6 +7,8 @@ import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';
 
 import { useFileStore } from '@/store/file';
+import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 
@@ -16,9 +18,8 @@ const FileUpload = memo(() => {
   const theme = useTheme();
   const upload = useFileStore((s) => s.uploadFile);
 
-  const canUpload = useSessionStore(agentSelectors.modelHasVisionAbility);
-
-  if (!canUpload) return null;
+  const model = useSessionStore(agentSelectors.currentAgentModel);
+  const canUpload = useGlobalStore(modelProviderSelectors.modelEnabledVision(model));
 
   return (
     <Upload
@@ -31,6 +32,7 @@ const FileUpload = memo(() => {
         setLoading(false);
         return false;
       }}
+      disabled={!canUpload}
       multiple={true}
       showUploadList={false}
     >
@@ -44,7 +46,12 @@ const FileUpload = memo(() => {
           ></Icon>
         </Center>
       ) : (
-        <ActionIcon icon={LucideImage} placement={'bottom'} title={t('upload.actionTooltip')} />
+        <ActionIcon
+          disable={!canUpload}
+          icon={LucideImage}
+          placement={'bottom'}
+          title={t(canUpload ? 'upload.actionTooltip' : 'upload.disabled')}
+        />
       )}
     </Upload>
   );

package/src/features/ChatInput/ActionBar/ModelSwitch.tsx

@@ -1,41 +1,83 @@
 import { ActionIcon } from '@lobehub/ui';
 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 { LanguageModel } from '@/types/llm';
+import { ModelProviderCard } from '@/types/llm';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  menu: css`
+    .${prefixCls}-dropdown-menu-item {
+      display: flex;
+      gap: 8px;
+    }
+    .${prefixCls}-dropdown-menu {
+      &-item-group-title {
+        padding-inline: 8px;
+      }
+
+      &-item-group-list {
+        margin: 0 !important;
+      }
+    }
+  `,
+}));
 
 const ModelSwitch = memo(() => {
-  const { t } = useTranslation('setting');
+  const { t } = useTranslation('chat');
+  const { styles } = useStyles();
+  const model = useSessionStore(agentSelectors.currentAgentModel);
+  const updateAgentConfig = useSessionStore((s) => s.updateAgentConfig);
 
-  const [model, updateAgentConfig] = useSessionStore((s) => {
-    return [agentSelectors.currentAgentModel(s), s.updateAgentConfig];
-  });
+  const select = useGlobalStore(modelProviderSelectors.modelSelectList, isEqual);
+  const enabledList = select.filter((s) => s.enabled);
 
-  const modelList = useGlobalStore(modelProviderSelectors.modelList, isEqual);
+  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,
-        items: modelList.map(({ name, displayName }) => ({ key: name, label: displayName })),
-        onClick: (e) => {
-          updateAgentConfig({ model: e.key as LanguageModel });
-        },
+        className: styles.menu,
+        items,
         style: {
-          maxHeight: 400,
-          overflow: 'scroll',
+          maxHeight: 500,
+          overflowY: 'scroll',
         },
       }}
       trigger={['click']}
     >
-      <ActionIcon icon={BrainCog} placement={'bottom'} title={t('settingModel.model.title')} />
+      <ActionIcon icon={BrainCog} placement={'bottom'} title={t('ModelSwitch.title')} />
     </Dropdown>
   );
 });