@lobehub/chat 1.62.10 → 1.63.0

package/src/config/modelProviders/openrouter.ts

@@ -331,6 +331,7 @@ const OpenRouter: ModelProviderCard = {
     // https://github.com/lobehub/lobe-chat/issues/5900
     disableBrowserRequest: true,
     sdkType: 'openai',
+    searchMode: 'params',
     showModelFetcher: true,
   },
   url: 'https://openrouter.ai',

package/src/config/modelProviders/qwen.ts

@@ -153,7 +153,8 @@ const Qwen: ModelProviderCard = {
     },
     {
       contextWindowTokens: 32_768,
-      description: 'QVQ模型是由 Qwen 团队开发的实验性研究模型，专注于提升视觉推理能力，尤其在数学推理领域。',
+      description:
+        'QVQ模型是由 Qwen 团队开发的实验性研究模型，专注于提升视觉推理能力，尤其在数学推理领域。',
       displayName: 'QVQ 72B Preview',
       id: 'qvq-72b-preview',
       pricing: {

package/src/config/modelProviders/volcengine.ts

@@ -7,9 +7,12 @@ const Doubao: ModelProviderCard = {
     '字节跳动推出的大模型服务的开发平台，提供功能丰富、安全以及具备价格竞争力的模型调用服务，同时提供模型数据、精调、推理、评测等端到端功能，全方位保障您的 AI 应用开发落地。',
   id: 'volcengine',
   modelsUrl: 'https://www.volcengine.com/docs/82379/1330310',
-  name: '火山引擎',
+  name: 'Volcengine',
   settings: {
     disableBrowserRequest: true, // CORS error
+    proxyUrl: {
+      placeholder: 'https://ark.cn-beijing.volces.com/api/v3',
+    },
     sdkType: 'openai',
     showDeployName: true,
     smoothing: {

package/src/const/settings/agent.ts

@@ -20,6 +20,7 @@ export const DEFAULT_AGENT_CHAT_CONFIG: LobeAgentChatConfig = {
   enableCompressHistory: true,
   enableHistoryCount: true,
   historyCount: 8,
+  searchMode: 'off',
 };
 
 export const DEFAULT_AGENT_CONFIG: LobeAgentConfig = {

package/src/database/repositories/aiInfra/index.test.ts

@@ -2,14 +2,11 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
 import { clientDB, initializeDB } from '@/database/client/db';
-import { AiProviderModel } from '@/database/server/models/aiProvider';
-import { LobeChatDatabase } from '@/database/type';
-import { AiProviderModelListItem } from '@/types/aiModel';
+import { AiProviderModelListItem, EnabledAiModel } from '@/types/aiModel';
 import {
   AiProviderDetailItem,
   AiProviderListItem,
   AiProviderRuntimeConfig,
-  EnabledAiModel,
   EnabledProvider,
 } from '@/types/aiProvider';
 
@@ -286,7 +283,7 @@ describe('AiInfraRepos', () => {
       expect(result).toEqual(
         expect.arrayContaining([
           expect.objectContaining({ id: 'taichu_llm' }),
-          expect.objectContaining({ id: 'taichu2_mm' }),
+          expect.objectContaining({ id: 'taichu_vl' }),
         ]),
       );
     });

package/src/database/repositories/aiInfra/index.ts

@@ -5,12 +5,16 @@ import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
 import { AiModelModel } from '@/database/server/models/aiModel';
 import { AiProviderModel } from '@/database/server/models/aiProvider';
 import { LobeChatDatabase } from '@/database/type';
-import { AIChatModelCard, AiModelSourceEnum, AiProviderModelListItem } from '@/types/aiModel';
+import {
+  AIChatModelCard,
+  AiModelSourceEnum,
+  AiProviderModelListItem,
+  EnabledAiModel,
+} from '@/types/aiModel';
 import {
   AiProviderDetailItem,
   AiProviderListItem,
   AiProviderRuntimeState,
-  EnabledAiModel,
   EnabledProvider,
 } from '@/types/aiProvider';
 import { ProviderConfig } from '@/types/user/settings';

package/src/database/schemas/message.ts

@@ -13,7 +13,8 @@ import {
 import { createSelectSchema } from 'drizzle-zod';
 
 import { idGenerator } from '@/database/utils/idGenerator';
-import { GroundingSearch, ModelReasoning } from '@/types/message';
+import { ModelReasoning } from '@/types/message';
+import { GroundingSearch } from '@/types/search';
 
 import { timestamps } from './_helpers';
 import { agents } from './agent';

package/src/database/server/models/aiModel.ts

@@ -5,9 +5,9 @@ import {
   AiModelSortMap,
   AiModelSourceEnum,
   AiProviderModelListItem,
+  EnabledAiModel,
   ToggleAiModelEnableParams,
 } from '@/types/aiModel';
-import { EnabledAiModel } from '@/types/aiProvider';
 
 import { AiModelSelectItem, NewAiModelItem, aiModels } from '../../schemas';
 

package/src/database/server/models/aiProvider.ts

@@ -1,6 +1,7 @@
 import { and, asc, desc, eq } from 'drizzle-orm/expressions';
 import { isEmpty } from 'lodash-es';
 
+import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
 import { LobeChatDatabase } from '@/database/type';
 import { ModelProvider } from '@/libs/agent-runtime';
 import {
@@ -10,6 +11,7 @@ import {
   CreateAiProviderParams,
   UpdateAiProviderConfigParams,
 } from '@/types/aiProvider';
+import { merge } from '@/utils/merge';
 
 import { AiProviderSelectItem, aiModels, aiProviders } from '../../schemas';
 
@@ -238,10 +240,13 @@ export class AiProviderModel {
     let runtimeConfig: Record<string, AiProviderRuntimeConfig> = {};
 
     for (const item of result) {
+      const builtin = DEFAULT_MODEL_PROVIDER_LIST.find((provider) => provider.id === item.id);
+
+      const userSettings = item.settings || {};
       runtimeConfig[item.id] = {
         fetchOnClient: typeof item.fetchOnClient === 'boolean' ? item.fetchOnClient : undefined,
         keyVaults: !!item.keyVaults ? await decrypt(item.keyVaults) : {},
-        settings: item.settings || {},
+        settings: !!builtin ? merge(builtin.settings, userSettings) : userSettings,
       };
     }
 

package/src/features/ChatInput/ActionBar/Model/ControlsForm.tsx

@@ -0,0 +1,38 @@
+import { Form } from '@lobehub/ui';
+import { Switch } from 'antd';
+import { memo } from 'react';
+
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/slices/chat';
+import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
+
+const ControlsForm = memo(() => {
+  const [model, provider] = useAgentStore((s) => [
+    agentSelectors.currentAgentModel(s),
+    agentSelectors.currentAgentModelProvider(s),
+  ]);
+  const modelExtendControls = useAiInfraStore(
+    aiModelSelectors.modelExtendControls(model, provider),
+  );
+
+  return (
+    <Form
+      itemMinWidth={200}
+      items={modelExtendControls!.map((item: any) => ({
+        children: <Switch />,
+        label: item.key,
+        minWidth: undefined,
+        name: item.key,
+      }))}
+      itemsType={'flat'}
+      onValuesChange={(_, values) => {
+        console.log(values);
+      }}
+      size={'small'}
+      style={{ fontSize: 12 }}
+      variant={'pure'}
+    />
+  );
+});
+
+export default ControlsForm;

package/src/features/ChatInput/ActionBar/Model/ExtendControls.tsx

@@ -0,0 +1,40 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Popover } from 'antd';
+import { Settings2Icon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+import ControlsForm from './ControlsForm';
+
+const ExtendControls = memo(() => {
+  const { t } = useTranslation('chat');
+
+  const isMobile = useIsMobile();
+  return (
+    <Flexbox style={{ marginInlineStart: -4 }}>
+      <Popover
+        arrow={false}
+        content={<ControlsForm />}
+        open
+        styles={{
+          body: {
+            minWidth: isMobile ? undefined : 250,
+            width: isMobile ? '100vw' : undefined,
+          },
+        }}
+      >
+        <ActionIcon
+          icon={Settings2Icon}
+          placement={'bottom'}
+          style={{ borderRadius: 20 }}
+          title={t('extendControls.title')}
+        />
+      </Popover>
+    </Flexbox>
+  );
+});
+
+export default ExtendControls;

package/src/features/ChatInput/ActionBar/Model/index.tsx

@@ -0,0 +1,132 @@
+import { ModelIcon } from '@lobehub/icons';
+import { ActionIcon, Tooltip } from '@lobehub/ui';
+import { Popover } from 'antd';
+import { createStyles } from 'antd-style';
+import { Brain, Settings2Icon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import ModelSwitchPanel from '@/features/ModelSwitchPanel';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
+
+import ControlsForm from './ControlsForm';
+
+const useStyles = createStyles(({ css, token, isDarkMode, cx }) => ({
+  container: css`
+    border-radius: 20px;
+    background: ${isDarkMode ? token.colorFillSecondary : token.colorFillTertiary};
+  `,
+  icon: cx(
+    'model-switch',
+    css`
+      transition: scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
+    `,
+  ),
+  model: css`
+    cursor: pointer;
+    border-radius: 8px;
+
+    :hover {
+      background: ${token.colorFillSecondary};
+    }
+
+    :active {
+      .model-switch {
+        scale: 0.8;
+      }
+    }
+  `,
+  modelWithControl: css`
+    border-radius: 20px;
+
+    :hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+
+  video: css`
+    overflow: hidden;
+    border-radius: 8px;
+  `,
+}));
+
+const ModelSwitch = memo(() => {
+  const { t } = useTranslation('chat');
+  const { styles, cx } = useStyles();
+  const [model, provider, isLoading] = useAgentStore((s) => [
+    agentSelectors.currentAgentModel(s),
+    agentSelectors.currentAgentModelProvider(s),
+    agentSelectors.isAgentConfigLoading(s),
+  ]);
+
+  const isModelHasExtendControls = useAiInfraStore(
+    aiModelSelectors.isModelHasExtendControls(model, provider),
+  );
+
+  const isMobile = useIsMobile();
+
+  if (isLoading)
+    return (
+      <ActionIcon
+        icon={Brain}
+        placement={'bottom'}
+        style={{
+          cursor: 'not-allowed',
+        }}
+        title={t('ModelSwitch.title')}
+      />
+    );
+
+  return (
+    <Flexbox
+      align={'center'}
+      className={isModelHasExtendControls ? styles.container : ''}
+      horizontal
+    >
+      <ModelSwitchPanel>
+        <Center
+          className={cx(styles.model, isModelHasExtendControls && styles.modelWithControl)}
+          height={36}
+          width={36}
+        >
+          <Tooltip placement={'bottom'} title={[provider, model].join(' / ')}>
+            <div className={styles.icon}>
+              <ModelIcon model={model} size={22} />
+            </div>
+          </Tooltip>
+        </Center>
+      </ModelSwitchPanel>
+
+      {isModelHasExtendControls && (
+        <Flexbox style={{ marginInlineStart: -4 }}>
+          <Popover
+            arrow={false}
+            content={<ControlsForm />}
+            open
+            styles={{
+              body: {
+                minWidth: isMobile ? undefined : 200,
+                width: isMobile ? '100vw' : undefined,
+              },
+            }}
+          >
+            <ActionIcon
+              icon={Settings2Icon}
+              placement={'bottom'}
+              style={{ borderRadius: 20 }}
+              title={t('extendControls.title')}
+            />
+          </Popover>
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+ModelSwitch.displayName = 'ModelSwitch';
+
+export default ModelSwitch;

package/src/features/ChatInput/ActionBar/Params/index.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Popover } from 'antd';
 import { useTheme } from 'antd-style';
-import { Settings2Icon } from 'lucide-react';
+import { SlidersHorizontal } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -41,7 +41,7 @@ const Params = memo(() => {
       trigger={'click'}
     >
       <ActionIcon
-        icon={Settings2Icon}
+        icon={SlidersHorizontal}
         placement={'bottom'}
         title={popoverOpen ? undefined : t('settingModel.params.title')}
       />

package/src/features/ChatInput/ActionBar/Search/ExaIcon.tsx

@@ -0,0 +1,15 @@
+const ExaIcon = () => {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+      <rect fill="white" height="24" width="24" />
+      <path
+        clipRule="evenodd"
+        d="M4 2H20V3.49254L13.1718 12L20 20.5075V22H4V2ZM12.1006 10.6234L17.6493 3.49254H6.5519L12.1006 10.6234ZM5.80014 5.27954V11.2537H10.4488L5.80014 5.27954ZM10.4488 12.7463H5.80014V18.7205L10.4488 12.7463ZM6.5519 20.5075L12.1006 13.3766L17.6493 20.5075H6.5519Z"
+        fill="#1F40ED"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default ExaIcon;

package/src/features/ChatInput/ActionBar/Search/ModelBuiltinSearch.tsx

@@ -0,0 +1,68 @@
+import { Google } from '@lobehub/icons';
+import { Icon } from '@lobehub/ui';
+import { Switch } from 'antd';
+import { Search } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
+
+import ExaIcon from './ExaIcon';
+
+interface SearchEngineIconProps {
+  icon?: string;
+}
+
+const SearchEngineIcon = ({ icon }: SearchEngineIconProps) => {
+  switch (icon) {
+    case 'google': {
+      return <Google.Color />;
+    }
+
+    case 'exa': {
+      return <ExaIcon />;
+    }
+
+    default: {
+      return <Icon icon={Search} size={{ fontSize: 16 }} />;
+    }
+  }
+};
+
+const ModelBuiltinSearch = memo(() => {
+  const { t } = useTranslation('chat');
+  const [model, provider, checked, updateAgentChatConfig] = useAgentStore((s) => [
+    agentSelectors.currentAgentModel(s),
+    agentSelectors.currentAgentModelProvider(s),
+    agentSelectors.currentAgentChatConfig(s).useModelBuiltinSearch,
+    s.updateAgentChatConfig,
+  ]);
+
+  const [isLoading, setLoading] = useState(false);
+  const modelCard = useAiInfraStore(aiModelSelectors.getEnabledModelById(model, provider));
+
+  return (
+    <Flexbox
+      align={'center'}
+      horizontal
+      justify={'space-between'}
+      onClick={async () => {
+        setLoading(true);
+        await updateAgentChatConfig({ useModelBuiltinSearch: !checked });
+        setLoading(false);
+      }}
+      padding={'8px 12px'}
+      style={{ cursor: 'pointer', userSelect: 'none' }}
+    >
+      <Flexbox align={'center'} gap={4} horizontal>
+        <SearchEngineIcon icon={modelCard?.settings?.searchProvider} />
+        {t('search.mode.useModelBuiltin')}
+      </Flexbox>
+      <Switch checked={checked} loading={isLoading} size={'small'} />
+    </Flexbox>
+  );
+});
+export default ModelBuiltinSearch;

package/src/features/ChatInput/ActionBar/Search/SwitchPanel.tsx

@@ -0,0 +1,167 @@
+import { DisconnectOutlined } from '@ant-design/icons';
+import { Icon } from '@lobehub/ui';
+import { Divider, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { CheckIcon, SparklesIcon } from 'lucide-react';
+import { ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/slices/chat';
+import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
+import { SearchMode } from '@/types/search';
+
+import ModelBuiltinSearch from './ModelBuiltinSearch';
+
+const { Text } = Typography;
+
+interface NetworkOption {
+  description: string;
+  disable?: boolean;
+  icon: ReactNode;
+  label: string;
+  value: SearchMode;
+}
+
+const useStyles = createStyles(({ css, token }) => ({
+  check: css`
+    margin-inline-start: 12px;
+    font-size: 16px;
+    color: ${token.colorPrimary};
+  `,
+  content: css`
+    flex: 1;
+    width: 230px;
+  `,
+  description: css`
+    font-size: 12px;
+    color: ${token.colorTextSecondary};
+  `,
+  disable: css`
+    cursor: not-allowed;
+    opacity: 0.45;
+  `,
+  iconWrapper: css`
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+
+    font-size: 16px;
+
+    background: ${token.colorFillQuaternary};
+  `,
+  option: css`
+    cursor: pointer;
+
+    align-items: center;
+
+    width: 100%;
+    padding-block: 8px;
+    padding-inline: 12px;
+    border-radius: 8px;
+
+    transition: background-color 0.2s;
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+  title: css`
+    margin-block-end: 2px;
+    font-size: 14px;
+    font-weight: 500;
+    color: ${token.colorText};
+  `,
+}));
+
+const Item = memo<NetworkOption>(({ value, description, icon, label, disable }) => {
+  const { t } = useTranslation('chat');
+  const { styles } = useStyles();
+  const [mode, updateAgentChatConfig] = useAgentStore((s) => [
+    agentSelectors.agentSearchMode(s),
+    s.updateAgentChatConfig,
+  ]);
+
+  return (
+    <Flexbox
+      className={styles.option}
+      gap={24}
+      horizontal
+      key={value}
+      onClick={() => updateAgentChatConfig({ searchMode: value })}
+    >
+      <Flexbox className={disable ? styles.disable : ''} gap={8} horizontal>
+        <div className={styles.iconWrapper}>{icon}</div>
+        <div className={styles.content}>
+          <div className={styles.title}>{label}</div>
+          <Text className={styles.description} type="secondary">
+            {disable ? t('search.mode.disable') : description}
+          </Text>
+        </div>
+      </Flexbox>
+      {mode === value && <Icon className={styles.check} icon={CheckIcon} />}
+    </Flexbox>
+  );
+});
+
+interface AINetworkSettingsProps {
+  providerSearch?: boolean;
+}
+const AINetworkSettings = memo<AINetworkSettingsProps>(() => {
+  const { t } = useTranslation('chat');
+  const [model, provider] = useAgentStore((s) => [
+    agentSelectors.currentAgentModel(s),
+    agentSelectors.currentAgentModelProvider(s),
+  ]);
+
+  const supportFC = useAiInfraStore(aiModelSelectors.isModelSupportToolUse(model, provider));
+  const isModelHasBuiltinSearchConfig = useAiInfraStore(
+    aiModelSelectors.isModelHasBuiltinSearchConfig(model, provider),
+  );
+
+  const options: NetworkOption[] = [
+    {
+      description: t('search.mode.off.desc'),
+      icon: <DisconnectOutlined />,
+      label: t('search.mode.off.title'),
+      value: 'off',
+    },
+    // 等应用层联网功能做好以后再开启
+    // {
+    //   description: t('search.mode.on.desc'),
+    //   icon: <WifiOutlined />,
+    //   label: t('search.mode.on.title'),
+    //   value: 'on',
+    // },
+    {
+      description: t('search.mode.auto.desc'),
+      disable: !supportFC,
+      icon: <Icon icon={SparklesIcon} />,
+      label: t('search.mode.auto.title'),
+      value: 'auto',
+    },
+  ];
+
+  return (
+    <Flexbox gap={8}>
+      {options.map((option) => (
+        <Item {...option} key={option.value} />
+      ))}
+
+      {isModelHasBuiltinSearchConfig && (
+        <>
+          <Divider style={{ margin: 0, paddingInline: 12 }} />
+          <ModelBuiltinSearch />
+        </>
+      )}
+    </Flexbox>
+  );
+});
+
+export default AINetworkSettings;