@lobehub/chat 1.43.6 → 1.44.0

package/src/features/FileViewer/Renderer/MSDoc/index.tsx

@@ -15,7 +15,6 @@ const content = css`
 
   width: calc(100% + 2px);
   height: calc(100% + 2px);
-
   border: 0;
 `;
 

package/src/features/FileViewer/Renderer/TXT/index.tsx

@@ -10,9 +10,9 @@ const useStyles = createStyles(({ css, token }) => ({
   page: css`
     width: 100%;
     padding: 24px;
+    border-radius: 4px;
 
     background: ${token.colorBgContainer};
-    border-radius: 4px;
     box-shadow: ${token.boxShadowTertiary};
   `,
 }));

package/src/features/InitClientDB/EnableModal.tsx

@@ -31,8 +31,8 @@ const useStyles = createStyles(({ css, token, isDarkMode, responsive }) => ({
   iconCtn: css`
     width: 72px;
     height: 72px;
-    background: ${isDarkMode ? token.blue1 : token.geekblue1};
     border-radius: 50%;
+    background: ${isDarkMode ? token.blue1 : token.geekblue1};
   `,
   intro: css`
     ${responsive.mobile} {

package/src/features/InitClientDB/ErrorResult.tsx

@@ -19,9 +19,9 @@ const useStyles = createStyles(({ css, token }) => ({
 
     padding-block: 8px;
     padding-inline: 24px;
+    border-radius: 40px;
 
     background: ${token.red6};
-    border-radius: 40px;
 
     transition: transform 0.2s;
 

package/src/features/InitClientDB/InitIndicator.tsx

@@ -17,8 +17,8 @@ const useStyles = createStyles(({ css, token, prefixCls }) => ({
   bg: css`
     padding-block: 8px;
     padding-inline: 8px 32px;
-    background: ${token.colorText};
     border-radius: 40px;
+    background: ${token.colorText};
   `,
   container: css`
     position: fixed;

package/src/features/KnowledgeBaseModal/AddFilesToKnowledgeBase/SelectForm.tsx

@@ -14,7 +14,6 @@ const useStyles = createStyles(({ css, token }) => ({
     height: 48px;
     padding-block: 4px;
     padding-inline: 8px;
-
     border: 1px solid ${token.colorSplit};
     border-radius: 6px;
   `,

package/src/features/ModelSwitchPanel/index.tsx

@@ -9,12 +9,12 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
+import { isServerMode } from '@/const/version';
 import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { EnabledProviderWithModels } from '@/types/aiModel';
-import { withBasePath } from '@/utils/basePath';
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
   menu: css`
@@ -76,7 +76,7 @@ const ModelSwitchPanel = memo<PropsWithChildren>(({ children }) => {
               </Flexbox>
             ),
             onClick: () => {
-              router.push(withBasePath('/settings/llm'));
+              router.push(!isServerMode ? '/settings/llm' : `/settings/provider/${provider.id}`);
             },
           },
         ];

package/src/features/PluginsUI/Render/Loading.tsx

@@ -12,7 +12,6 @@ const useStyles = createStyles(
 
     width: 300px;
     height: 12px;
-
     border: 1px solid ${token.colorBorder};
     border-radius: 10px;
 

package/src/features/Portal/Home/Body/Files/FileList/Item.tsx

@@ -17,9 +17,9 @@ const useStyles = createStyles(({ css, token }) => ({
     max-width: 420px;
     padding-block: 8px;
     padding-inline: 12px;
+    border-radius: 8px;
 
     background: ${token.colorFillTertiary};
-    border-radius: 8px;
 
     &:hover {
       background: ${token.colorFillSecondary};

package/src/features/Portal/Home/Body/Plugins/ArtifactList/Item/style.ts

@@ -8,11 +8,11 @@ export const useStyles = createStyles(({ css, token }) => ({
     padding-block: 10px;
     padding-inline: 8px;
     padding-inline-end: 12px;
+    border-radius: 8px;
 
     color: ${token.colorText};
 
     background: ${token.colorBgElevated};
-    border-radius: 8px;
 
     &:hover {
       background: ${token.colorFillSecondary};
@@ -33,7 +33,6 @@ export const useStyles = createStyles(({ css, token }) => ({
 
     width: 24px;
     height: 24px;
-
     border-radius: 4px;
   `,
   tagBlue: css`

package/src/features/Setting/SettingContainer.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useResponsive } from 'antd-style';
+import { usePathname } from 'next/navigation';
 import { PropsWithChildren, ReactNode, memo } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
@@ -21,7 +22,13 @@ const SettingContainer = memo<PropsWithChildren<SettingContainerProps>>(
     ...rest
   }) => {
     const { mobile = false } = useResponsive();
-    return (
+    const pathname = usePathname();
+
+    const isProviderPath = pathname.startsWith('/settings/provider');
+
+    return isProviderPath ? (
+      children
+    ) : (
       <Flexbox
         align={'center'}
         height={'100%'}

package/src/features/ShareModal/ShareImage/style.ts

@@ -30,14 +30,14 @@ export const useStyles = createStyles(({ css, token, cx }, withBackground: boole
   header: css`
     margin-block-end: -24px;
     padding: 16px;
-    background: ${token.colorBgContainer};
     border-block-end: 1px solid ${token.colorBorder};
+    background: ${token.colorBgContainer};
   `,
   role: css`
     margin-block-start: 12px;
     padding-block-start: 12px;
-    opacity: 0.75;
     border-block-start: 1px dashed ${token.colorBorderSecondary};
+    opacity: 0.75;
 
     * {
       font-size: 12px !important;

package/src/features/ShareModal/style.ts

@@ -8,11 +8,11 @@ export const useContainerStyles = createStyles(({ css, token, stylish, cx, respo
 
       width: 100%;
       max-height: 70dvh;
-
-      background: ${token.colorBgLayout};
       border: 1px solid ${token.colorBorder};
       border-radius: ${token.borderRadiusLG}px;
 
+      background: ${token.colorBgLayout};
+
       * {
         pointer-events: none;
 

package/src/features/User/DataStatistics.tsx

@@ -21,8 +21,8 @@ const useStyles = createStyles(({ css, token }) => ({
   card: css`
     padding-block: 6px;
     padding-inline: 8px;
-    background: ${token.colorFillTertiary};
     border-radius: ${token.borderRadius}px;
+    background: ${token.colorFillTertiary};
 
     &:hover {
       background: ${token.colorFillSecondary};

package/src/hooks/useEnabledChatModels.ts

@@ -1,9 +1,18 @@
 import isEqual from 'fast-deep-equal';
 
+import { isServerMode } from '@/const/version';
+import { useAiInfraStore } from '@/store/aiInfra';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
 import { EnabledProviderWithModels } from '@/types/aiModel';
 
 export const useEnabledChatModels = (): EnabledProviderWithModels[] => {
-  return useUserStore(modelProviderSelectors.modelProviderListForModelSelect, isEqual);
+  const enabledList = useUserStore(modelProviderSelectors.modelProviderListForModelSelect, isEqual);
+  const enabledChatModelList = useAiInfraStore((s) => s.enabledChatModelList, isEqual);
+
+  if (!isServerMode) {
+    return enabledList;
+  }
+
+  return enabledChatModelList || [];
 };

package/src/hooks/useModelSupportToolUse.ts

@@ -0,0 +1,15 @@
+import { isServerMode } from '@/const/version';
+import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
+import { useUserStore } from '@/store/user';
+import { modelProviderSelectors } from '@/store/user/selectors';
+
+export const useModelSupportToolUse = (model: string) => {
+  const newValue = useAiInfraStore(aiModelSelectors.isModelSupportToolUse(model));
+
+  // TODO: remove this in V2.0
+  const oldValue = useUserStore(modelProviderSelectors.isModelEnabledFunctionCall(model));
+  if (!isServerMode) return oldValue;
+  //
+
+  return newValue;
+};

package/src/hooks/useModelSupportVision.ts

@@ -0,0 +1,15 @@
+import { isServerMode } from '@/const/version';
+import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
+import { useUserStore } from '@/store/user';
+import { modelProviderSelectors } from '@/store/user/selectors';
+
+export const useModelSupportVision = (model: string) => {
+  const newValue = useAiInfraStore(aiModelSelectors.isModelSupportVision(model));
+
+  // TODO: remove this in V2.0
+  const oldValue = useUserStore(modelProviderSelectors.isModelEnabledVision(model));
+  if (!isServerMode) return oldValue;
+  //
+
+  return newValue;
+};

package/src/layout/AuthProvider/Clerk/useAppearance.ts

@@ -16,8 +16,8 @@ export const useStyles = createStyles(
         height: 40px;
       `,
       cardBox: css`
-        background: ${token.colorBgContainer};
         border-radius: ${token.borderRadiusLG}px;
+        background: ${token.colorBgContainer};
         box-shadow: 0 0 0 1px ${token.colorBorderSecondary};
       `,
       header: css`
@@ -66,17 +66,17 @@ export const useStyles = createStyles(
           .${prefixCls}-cardBox {
             width: 100%;
             height: 100%;
-
             border: unset;
             border-radius: unset;
+
             box-shadow: unset;
           }
         }
       `,
       scrollBox: css`
-        background: ${isDarkMode ? token.colorFillQuaternary : token.colorBgElevated};
         border: unset;
         border-radius: unset;
+        background: ${isDarkMode ? token.colorFillQuaternary : token.colorBgElevated};
         box-shadow: 0 1px 0 1px ${token.colorFillTertiary};
       `,
       socialButtons: css`

package/src/layout/GlobalProvider/AppTheme.tsx

@@ -69,9 +69,9 @@ const useStyles = createStyles(({ css, token }) => ({
     }
 
     :hover::-webkit-scrollbar-thumb {
+      border: 3px solid transparent;
       background-color: ${token.colorText};
       background-clip: content-box;
-      border: 3px solid transparent;
     }
 
     ::-webkit-scrollbar-track {

package/src/layout/GlobalProvider/StoreInitialization.tsx

@@ -9,6 +9,7 @@ import { LOBE_URL_IMPORT_NAME } from '@/const/url';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useEnabledDataSync } from '@/hooks/useSyncData';
 import { useAgentStore } from '@/store/agent';
+import { useAiInfraStore } from '@/store/aiInfra';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 import { useServerConfigStore } from '@/store/serverConfig';
@@ -35,6 +36,7 @@ const StoreInitialization = memo(() => {
   const useInitSystemStatus = useGlobalStore((s) => s.useInitSystemStatus);
 
   const useInitAgentStore = useAgentStore((s) => s.useInitAgentStore);
+  const useInitAiProviderKeyVaults = useAiInfraStore((s) => s.useFetchAiProviderRuntimeState);
 
   // init the system preference
   useInitSystemStatus();
@@ -57,6 +59,9 @@ const StoreInitialization = memo(() => {
   // init inbox agent and default agent config
   useInitAgentStore(isLoginOnInit, serverConfig.defaultAgent?.config);
 
+  // init user provider key vaults
+  useInitAiProviderKeyVaults(isLoginOnInit);
+
   // init user state
   useInitUserState(isLoginOnInit, serverConfig, {
     onSuccess: (state) => {

package/src/locales/default/common.ts

@@ -269,6 +269,7 @@ export default {
   },
   temp: '临时',
   terms: '服务条款',
+  update: '更新',
   updateAgent: '更新助理信息',
   upgradeVersion: {
     action: '升级',

package/src/locales/default/modelProvider.ts

@@ -64,6 +64,44 @@ export default {
       title: 'Cloudflare 账户 ID / API 地址',
     },
   },
+  createNewAiProvider: {
+    apiKey: {
+      placeholder: '请填写你的 API Key',
+      required: '请填写你的 API Key',
+      title: 'API Key',
+    },
+    basicTitle: '基本信息',
+    configTitle: '配置信息',
+    confirm: '新建',
+    createSuccess: '新建成功',
+    description: {
+      placeholder: '服务商简介（选填）',
+      title: '服务商简介',
+    },
+    id: {
+      placeholder: '建议全小写，例如 openai，创建后将不可修改',
+      required: '请填写服务商 ID',
+      title: '服务商 ID',
+    },
+    logo: {
+      required: '请上传正确的服务商 Logo',
+      title: '服务商 Logo',
+    },
+    name: {
+      placeholder: '请输入服务商的展示名称',
+      required: '请填写服务商名称',
+      title: '服务商名称',
+    },
+    proxyUrl: {
+      placeholder: '请填写你的请求地址，如果不填则会使用 SDK 对应的请求地址',
+      title: '代理地址',
+    },
+    sdkType: {
+      required: '请选择 SDK 类型',
+      title: '请求格式',
+    },
+    title: '创建自定义 AI 服务商',
+  },
   github: {
     personalAccessToken: {
       desc: '填入你的 Github PAT，点击 [这里](https://github.com/settings/tokens) 创建',
@@ -78,6 +116,23 @@ export default {
       title: 'HuggingFace Token',
     },
   },
+  list: {
+    title: {
+      disabled: '未启用服务商',
+      enabled: '已启用服务商',
+    },
+  },
+  menu: {
+    addCustomProvider: '添加自定义服务商',
+    all: '全部',
+    list: {
+      disabled: '未启用',
+      enabled: '已启用',
+    },
+    notFound: '未找到搜索结果',
+    searchProviders: '搜索服务商...',
+    sort: '自定义排序',
+  },
   ollama: {
     checker: {
       desc: '测试代理地址是否正确填写',
@@ -134,6 +189,129 @@ export default {
       title: '下载指定的 Ollama 模型',
     },
   },
+  providerModels: {
+    config: {
+      aesGcm: '您的秘钥与代理地址等将使用 <1>AES-GCM</1> 加密算法进行加密',
+      apiKey: {
+        desc: '请填写你的 {{name}} API Key',
+        placeholder: '{{name}} API Key',
+        title: 'API Key',
+      },
+      baseURL: {
+        desc: '必须包含 http(s)://',
+        placeholder: 'https://your-proxy-url.com/v1',
+        title: 'API 代理地址',
+      },
+      checker: {
+        button: '检查',
+        desc: '测试 Api Key 与代理地址是否正确填写',
+        pass: '检查通过',
+        title: '连通性检查',
+      },
+      fetchOnClient: {
+        desc: '客户端请求模式将从浏览器直接发起会话请求，可提升响应速度',
+        title: '使用客户端请求模式',
+      },
+      helpDoc: '配置教程',
+      waitingForMore: '更多模型正在 <1>计划接入</1> 中，敬请期待',
+    },
+    createNew: {
+      title: '创建自定义 AI 模型',
+    },
+    item: {
+      config: '配置模型',
+      customModelCards: {
+        addNew: '创建并添加 {{id}} 模型',
+        confirmDelete: '即将删除该自定义模型，删除后将不可恢复，请谨慎操作。',
+      },
+      delete: {
+        confirm: '确认删除模型 {{displayName}}？',
+        success: '删除成功',
+        title: '删除模型',
+      },
+      modelConfig: {
+        azureDeployName: {
+          extra: '在 Azure OpenAI 中实际请求的字段',
+          placeholder: '请输入 Azure 中的模型部署名称',
+          title: '模型部署名称',
+        },
+        displayName: {
+          placeholder: '请输入模型的展示名称，例如 ChatGPT、GPT-4 等',
+          title: '模型展示名称',
+        },
+        files: {
+          extra: '当前文件上传实现仅为一种 Hack 方案，仅限自行尝试。完整文件上传能力请等待后续实现',
+          title: '支持文件上传',
+        },
+        functionCall: {
+          extra:
+            '此配置将仅开启应用中的函数调用能力，是否支持函数调用完全取决于模型本身，请自行测试该模型的函数调用能力可用性',
+          title: '支持函数调用',
+        },
+        id: {
+          extra: '将作为模型标签进行展示',
+          placeholder: '请输入模型id，例如 gpt-4-turbo-preview 或 claude-2.1',
+          title: '模型 ID',
+        },
+        modalTitle: '自定义模型配置',
+        tokens: {
+          title: '最大 token 数',
+          unlimited: '无限制',
+        },
+        vision: {
+          extra:
+            '此配置将仅开启应用中的图片上传配置，是否支持识别完全取决于模型本身，请自行测试该模型的视觉识别能力可用性',
+          title: '支持视觉识别',
+        },
+      },
+      pricing: {
+        image: '${{amount}}/图片',
+        inputCharts: '${{amount}}/M 字符',
+        inputMinutes: '${{amount}}/分钟',
+        inputTokens: '输入 ${{amount}}/M',
+        outputTokens: '输出 ${{amount}}/M',
+      },
+      releasedAt: '发布于{{releasedAt}}',
+    },
+    list: {
+      addNew: '添加模型',
+      disabled: '未启用',
+      empty: {
+        desc: '请创建自定义模型或拉取模型后开始使用吧',
+        title: '暂无可用模型',
+      },
+      enabled: '已启用',
+      enabledActions: {
+        disableAll: '全部禁用',
+        enableAll: '全部启用',
+        sort: '自定义模型排序',
+      },
+      enabledEmpty: '暂无启用模型，请从下方列表中启用心仪的模型吧~',
+      fetcher: {
+        clear: '清除获取的模型',
+        fetch: '获取模型列表',
+        fetching: '正在获取模型列表...',
+        latestTime: '上次更新时间：{{time}}',
+        noLatestTime: '暂未获取列表',
+      },
+      search: '搜索模型...',
+      searchResult: '搜索到 {{count}} 个模型',
+      title: '模型列表',
+      total: '共 {{count}} 个模型可用',
+    },
+    searchNotFound: '未找到搜索结果',
+  },
+  sortModal: {
+    success: '排序更新成功',
+    title: '自定义排序',
+    update: '更新',
+  },
+  updateAiProvider: {
+    confirmDelete: '即将删除该 AI 服务商，删除后将无法找回，确认是否删除？',
+    deleteSuccess: '删除成功',
+    tooltip: '更新服务商基础配置',
+    updateSuccess: '更新成功',
+  },
   wenxin: {
     accessKey: {
       desc: '填入百度千帆平台的 Access Key',

package/src/locales/default/setting.ts

@@ -413,6 +413,7 @@ export default {
     'common': '通用设置',
     'experiment': '实验',
     'llm': '语言模型',
+    'provider': 'AI 服务商',
     'sync': '云端同步',
     'system-agent': '系统助手',
     'tts': '语音服务',

package/src/server/modules/KeyVaultsEncrypt/index.ts

@@ -105,7 +105,7 @@ If you don't have it, please run \`openssl rand -base64 32\` to create one.
 
     if (wasAuthentic) {
       try {
-        decryptKeyVaults = JSON.parse(plaintext);
+        if (!!plaintext) decryptKeyVaults = JSON.parse(plaintext);
       } catch (e) {
         console.error(`Failed to parse keyVaults, userId: ${userId}. Error:`, e);
       }

package/src/server/routers/lambda/aiModel.ts

@@ -0,0 +1,128 @@
+import { z } from 'zod';
+
+import { AiInfraRepos } from '@/database/repositories/aiInfra';
+import { serverDB } from '@/database/server';
+import { AiModelModel } from '@/database/server/models/aiModel';
+import { UserModel } from '@/database/server/models/user';
+import { authedProcedure, router } from '@/libs/trpc';
+import { getServerGlobalConfig } from '@/server/globalConfig';
+import { KeyVaultsGateKeeper } from '@/server/modules/KeyVaultsEncrypt';
+import {
+  AiProviderModelListItem,
+  CreateAiModelSchema,
+  ToggleAiModelEnableSchema,
+  UpdateAiModelSchema,
+} from '@/types/aiModel';
+import { ProviderConfig } from '@/types/user/settings';
+
+const aiModelProcedure = authedProcedure.use(async (opts) => {
+  const { ctx } = opts;
+
+  const gateKeeper = await KeyVaultsGateKeeper.initWithEnvKey();
+  const { languageModel } = getServerGlobalConfig();
+
+  return opts.next({
+    ctx: {
+      aiInfraRepos: new AiInfraRepos(
+        serverDB,
+        ctx.userId,
+        languageModel as Record<string, ProviderConfig>,
+      ),
+      aiModelModel: new AiModelModel(serverDB, ctx.userId),
+      gateKeeper,
+      userModel: new UserModel(serverDB, ctx.userId),
+    },
+  });
+});
+
+export const aiModelRouter = router({
+  batchToggleAiModels: aiModelProcedure
+    .input(
+      z.object({
+        enabled: z.boolean(),
+        id: z.string(),
+        models: z.array(z.string()),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      return ctx.aiModelModel.batchToggleAiModels(input.id, input.models, input.enabled);
+    }),
+  batchUpdateAiModels: aiModelProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        // TODO: 补齐校验 Schema
+        models: z.array(z.any()),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      return ctx.aiModelModel.batchUpdateAiModels(input.id, input.models);
+    }),
+
+  clearRemoteModels: aiModelProcedure
+    .input(z.object({ providerId: z.string() }))
+    .mutation(async ({ input, ctx }) => {
+      return ctx.aiModelModel.clearRemoteModels(input.providerId);
+    }),
+
+  createAiModel: aiModelProcedure.input(CreateAiModelSchema).mutation(async ({ input, ctx }) => {
+    const data = await ctx.aiModelModel.create(input);
+
+    return data?.id;
+  }),
+
+  getAiModelById: aiModelProcedure
+    .input(z.object({ id: z.string() }))
+
+    .query(async ({ input, ctx }) => {
+      return ctx.aiModelModel.findById(input.id);
+    }),
+
+  getAiProviderModelList: aiModelProcedure
+    .input(z.object({ id: z.string() }))
+    .query(async ({ ctx, input }): Promise<AiProviderModelListItem[]> => {
+      return ctx.aiInfraRepos.getAiProviderModelList(input.id);
+    }),
+
+  removeAiModel: aiModelProcedure
+    .input(z.object({ id: z.string(), providerId: z.string() }))
+    .mutation(async ({ input, ctx }) => {
+      return ctx.aiModelModel.delete(input.id, input.providerId);
+    }),
+
+  toggleModelEnabled: aiModelProcedure
+    .input(ToggleAiModelEnableSchema)
+    .mutation(async ({ input, ctx }) => {
+      return ctx.aiModelModel.toggleModelEnabled(input);
+    }),
+
+  updateAiModel: aiModelProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        providerId: z.string(),
+        value: UpdateAiModelSchema,
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      return ctx.aiModelModel.update(input.id, input.providerId, input.value);
+    }),
+
+  updateAiModelOrder: aiModelProcedure
+    .input(
+      z.object({
+        providerId: z.string(),
+        sortMap: z.array(
+          z.object({
+            id: z.string(),
+            sort: z.number(),
+          }),
+        ),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      return ctx.aiModelModel.updateModelsOrder(input.providerId, input.sortMap);
+    }),
+});
+
+export type AiModelRouter = typeof aiModelRouter;