@lobehub/chat 1.43.6 → 1.44.0

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

@@ -0,0 +1,234 @@
+import { and, asc, desc, eq } from 'drizzle-orm/expressions';
+
+import { LobeChatDatabase } from '@/database/type';
+import { ModelProvider } from '@/libs/agent-runtime';
+import {
+  AiProviderDetailItem,
+  AiProviderListItem,
+  AiProviderRuntimeConfig,
+  CreateAiProviderParams,
+  UpdateAiProviderConfigParams,
+} from '@/types/aiProvider';
+
+import { AiProviderSelectItem, aiModels, aiProviders } from '../../schemas';
+
+type DecryptUserKeyVaults = (encryptKeyVaultsStr: string | null) => Promise<any>;
+
+type EncryptUserKeyVaults = (keyVaults: string) => Promise<string>;
+
+export class AiProviderModel {
+  private userId: string;
+  private db: LobeChatDatabase;
+
+  constructor(db: LobeChatDatabase, userId: string) {
+    this.userId = userId;
+    this.db = db;
+  }
+
+  create = async (
+    { keyVaults: userKey, ...params }: CreateAiProviderParams,
+    encryptor?: EncryptUserKeyVaults,
+  ) => {
+    // eslint-disable-next-line unicorn/consistent-function-scoping
+    const defaultSerialize = (s: string) => s;
+    const encrypt = encryptor ?? defaultSerialize;
+    const keyVaults = await encrypt(JSON.stringify(userKey));
+
+    const [result] = await this.db
+      .insert(aiProviders)
+      .values({
+        ...params,
+        // each new ai provider we will set it to enabled by default
+        enabled: true,
+        keyVaults,
+        userId: this.userId,
+      })
+      .returning();
+
+    return result;
+  };
+
+  delete = async (id: string) => {
+    return this.db.transaction(async (trx) => {
+      // 1. delete all models of the provider
+      await trx
+        .delete(aiModels)
+        .where(and(eq(aiModels.providerId, id), eq(aiModels.userId, this.userId)));
+
+      // 2. delete the provider
+      await trx
+        .delete(aiProviders)
+        .where(and(eq(aiProviders.id, id), eq(aiProviders.userId, this.userId)));
+    });
+  };
+
+  deleteAll = async () => {
+    return this.db.delete(aiProviders).where(eq(aiProviders.userId, this.userId));
+  };
+
+  query = async () => {
+    return this.db.query.aiProviders.findMany({
+      orderBy: [desc(aiProviders.updatedAt)],
+      where: eq(aiProviders.userId, this.userId),
+    });
+  };
+
+  getAiProviderList = async (): Promise<AiProviderListItem[]> => {
+    const result = await this.db
+      .select({
+        description: aiProviders.description,
+        enabled: aiProviders.enabled,
+        id: aiProviders.id,
+        logo: aiProviders.logo,
+        name: aiProviders.name,
+        sort: aiProviders.sort,
+        source: aiProviders.source,
+      })
+      .from(aiProviders)
+      .where(eq(aiProviders.userId, this.userId))
+      .orderBy(asc(aiProviders.sort), desc(aiProviders.updatedAt));
+
+    return result as AiProviderListItem[];
+  };
+
+  findById = async (id: string) => {
+    return this.db.query.aiProviders.findFirst({
+      where: and(eq(aiProviders.id, id), eq(aiProviders.userId, this.userId)),
+    });
+  };
+
+  update = async (id: string, value: Partial<AiProviderSelectItem>) => {
+    return this.db
+      .update(aiProviders)
+      .set({ ...value, updatedAt: new Date() })
+      .where(and(eq(aiProviders.id, id), eq(aiProviders.userId, this.userId)));
+  };
+
+  updateConfig = async (
+    id: string,
+    value: UpdateAiProviderConfigParams,
+    encryptor?: EncryptUserKeyVaults,
+  ) => {
+    // eslint-disable-next-line unicorn/consistent-function-scoping
+    const defaultSerialize = (s: string) => s;
+    const encrypt = encryptor ?? defaultSerialize;
+    const keyVaults = await encrypt(JSON.stringify(value.keyVaults));
+
+    return this.db
+      .update(aiProviders)
+      .set({ ...value, keyVaults, updatedAt: new Date() })
+      .where(and(eq(aiProviders.id, id), eq(aiProviders.userId, this.userId)));
+  };
+
+  toggleProviderEnabled = async (id: string, enabled: boolean) => {
+    const isBuiltin = Object.values(ModelProvider).includes(id as any);
+
+    return this.db
+      .insert(aiProviders)
+      .values({
+        enabled,
+        id,
+        source: isBuiltin ? 'builtin' : 'custom',
+        updatedAt: new Date(),
+        userId: this.userId,
+      })
+      .onConflictDoUpdate({
+        set: { enabled },
+        target: [aiProviders.id, aiProviders.userId],
+      });
+  };
+
+  updateOrder = async (sortMap: { id: string; sort: number }[]) => {
+    await this.db.transaction(async (tx) => {
+      const updates = sortMap.map(({ id, sort }) => {
+        const isBuiltin = Object.values(ModelProvider).includes(id as any);
+
+        return tx
+          .insert(aiProviders)
+          .values({
+            enabled: true,
+            id,
+            sort,
+            source: isBuiltin ? 'builtin' : 'custom',
+            updatedAt: new Date(),
+            userId: this.userId,
+          })
+          .onConflictDoUpdate({
+            set: { sort, updatedAt: new Date() },
+            target: [aiProviders.id, aiProviders.userId],
+          });
+      });
+
+      await Promise.all(updates);
+    });
+  };
+
+  getAiProviderById = async (
+    id: string,
+    decryptor: DecryptUserKeyVaults,
+  ): Promise<AiProviderDetailItem | undefined> => {
+    const query = this.db
+      .select({
+        checkModel: aiProviders.checkModel,
+        enabled: aiProviders.enabled,
+        fetchOnClient: aiProviders.fetchOnClient,
+        id: aiProviders.id,
+        keyVaults: aiProviders.keyVaults,
+        logo: aiProviders.logo,
+        name: aiProviders.name,
+        settings: aiProviders.settings,
+        source: aiProviders.source,
+      })
+      .from(aiProviders)
+      .where(and(eq(aiProviders.id, id), eq(aiProviders.userId, this.userId)))
+      .limit(1);
+
+    const [result] = await query;
+
+    if (!result) {
+      // if the provider is builtin but not init, we will insert it to the db
+      if (this.isBuiltInProvider(id)) {
+        await this.db.insert(aiProviders).values({ id, source: 'builtin', userId: this.userId });
+
+        const resultAgain = await query;
+
+        return { ...resultAgain[0] } as unknown as AiProviderDetailItem;
+      }
+
+      return;
+    }
+
+    const decrypt = decryptor ?? JSON.parse;
+
+    const keyVaults = !!result.keyVaults ? await decrypt(result.keyVaults) : {};
+
+    return { ...result, keyVaults } as AiProviderDetailItem;
+  };
+
+  getAiProviderRuntimeConfig = async (decryptor: DecryptUserKeyVaults) => {
+    const result = await this.db
+      .select({
+        fetchOnClient: aiProviders.fetchOnClient,
+        id: aiProviders.id,
+        keyVaults: aiProviders.keyVaults,
+        settings: aiProviders.settings,
+      })
+      .from(aiProviders)
+      .where(and(eq(aiProviders.userId, this.userId)));
+
+    const decrypt = decryptor ?? JSON.parse;
+    let runtimeConfig: Record<string, AiProviderRuntimeConfig> = {};
+
+    for (const item of result) {
+      runtimeConfig[item.id] = {
+        fetchOnClient: typeof item.fetchOnClient === 'boolean' ? item.fetchOnClient : undefined,
+        keyVaults: !!item.keyVaults ? await decrypt(item.keyVaults) : {},
+        settings: item.settings || {},
+      };
+    }
+
+    return runtimeConfig;
+  };
+
+  private isBuiltInProvider = (id: string) => Object.values(ModelProvider).includes(id as any);
+}

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

@@ -15,14 +15,14 @@ export const useStyles = createStyles(({ css, token, responsive }) => ({
   container: css`
     position: relative;
     width: 100%;
-    background: ${token.colorFillSecondary};
     border-radius: ${token.borderRadiusLG}px;
+    background: ${token.colorFillSecondary};
   `,
   content: css`
     z-index: 2;
     padding: 8px;
-    background: ${token.colorBgContainer};
     border-radius: ${token.borderRadiusLG - 1}px;
+    background: ${token.colorBgContainer};
   `,
   markdown: css`
     border: unset;

package/src/features/ChatInput/ActionBar/Token/TokenTag.tsx

@@ -6,6 +6,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
+import { useModelSupportToolUse } from '@/hooks/useModelSupportToolUse';
 import { useTokenCount } from '@/hooks/useTokenCount';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
@@ -45,7 +46,7 @@ const Token = memo<TokenTagProps>(({ total: messageString }) => {
   const maxTokens = useUserStore(modelProviderSelectors.modelMaxToken(model));
 
   // Tool usage token
-  const canUseTool = useUserStore(modelProviderSelectors.isModelEnabledFunctionCall(model));
+  const canUseTool = useModelSupportToolUse(model);
   const plugins = useAgentStore(agentSelectors.currentAgentPlugins);
   const toolsString = useToolStore((s) => {
     const pluginSystemRoles = toolSelectors.enabledSystemRoles(plugins)(s);

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

@@ -3,11 +3,10 @@ import { Blocks, LucideLoader2 } from 'lucide-react';
 import { Suspense, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useModelSupportToolUse } from '@/hooks/useModelSupportToolUse';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
-import { useUserStore } from '@/store/user';
-import { modelProviderSelectors } from '@/store/user/selectors';
 
 import DropdownMenu from './Dropdown';
 
@@ -16,7 +15,7 @@ const Tools = memo(() => {
   const { enablePlugins } = useServerConfigStore(featureFlagsSelectors);
 
   const model = useAgentStore(agentSelectors.currentAgentModel);
-  const enableFC = useUserStore(modelProviderSelectors.isModelEnabledFunctionCall(model));
+  const enableFC = useModelSupportToolUse(model);
 
   return (
     enablePlugins && (

package/src/features/ChatInput/ActionBar/Upload/ServerMode.tsx

@@ -5,11 +5,10 @@ import { FileUp, FolderUp, ImageUp, Paperclip } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useModelSupportVision } from '@/hooks/useModelSupportVision';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { useFileStore } from '@/store/file';
-import { useUserStore } from '@/store/user';
-import { modelProviderSelectors } from '@/store/user/selectors';
 
 const hotArea = css`
   &::before {
@@ -27,7 +26,7 @@ const FileUpload = memo(() => {
 
   const model = useAgentStore(agentSelectors.currentAgentModel);
 
-  const canUploadImage = useUserStore(modelProviderSelectors.isModelEnabledVision(model));
+  const canUploadImage = useModelSupportVision(model);
 
   const items: MenuProps['items'] = [
     {

package/src/features/ChatInput/Desktop/FilePreview/FileItem/index.tsx

@@ -20,8 +20,9 @@ const useStyles = createStyles(({ css, token }) => ({
     inset-block-start: -4px;
     inset-inline-end: -4px;
 
-    background: ${token.colorBgElevated};
     border-radius: 5px;
+
+    background: ${token.colorBgElevated};
     box-shadow:
       0 0 0 0.5px ${token.colorFillSecondary} inset,
       ${token.boxShadowTertiary};
@@ -32,9 +33,9 @@ const useStyles = createStyles(({ css, token }) => ({
     width: ${FILE_ITEM_SIZE}px;
     min-width: ${FILE_ITEM_SIZE}px;
     height: ${FILE_ITEM_SIZE}px;
+    border-radius: 8px;
 
     background: ${token.colorBgContainer};
-    border-radius: 8px;
   `,
   image: css`
     margin-block: 0 !important;

package/src/features/ChatInput/Desktop/FilePreview/FileList.tsx

@@ -12,10 +12,10 @@ const useStyles = createStyles(({ css, token }) => ({
     overflow-x: scroll;
 
     width: 100%;
-
-    background: ${lighten(0.01, token.colorBgLayout)};
     border-start-start-radius: 8px;
     border-start-end-radius: 8px;
+
+    background: ${lighten(0.01, token.colorBgLayout)};
   `,
 }));
 

package/src/features/ChatInput/Mobile/Files/FileItem/File.tsx

@@ -22,10 +22,10 @@ const useStyles = createStyles(({ css, token }) => ({
     height: 64px;
     padding-block: 4px;
     padding-inline: 8px 24px;
-
-    background: ${token.colorFillTertiary};
     border: 1px solid ${token.colorBorder};
     border-radius: 8px;
+
+    background: ${token.colorFillTertiary};
   `,
   deleteButton: css`
     position: absolute;

package/src/features/ChatInput/Mobile/InputArea/index.tsx

@@ -15,8 +15,8 @@ const useStyles = createStyles(({ css, token }) => {
     container: css`
       flex: none;
       padding-block: 12px 12px;
-      background: ${token.colorFillQuaternary};
       border-block-start: 1px solid ${rgba(token.colorBorder, 0.25)};
+      background: ${token.colorFillQuaternary};
     `,
     expand: css`
       position: absolute;

package/src/features/ChatInput/STT/common.tsx

@@ -12,8 +12,8 @@ const useStyles = createStyles(({ css, token }) => ({
   recording: css`
     width: 8px;
     height: 8px;
-    background: ${token.colorError};
     border-radius: 50%;
+    background: ${token.colorError};
   `,
 }));
 

package/src/features/Conversation/Error/style.tsx

@@ -5,10 +5,10 @@ import { Center, CenterProps, Flexbox } from 'react-layout-kit';
 
 export const useStyles = createStyles(({ css, token }) => ({
   container: css`
-    color: ${token.colorText};
-    background: ${token.colorBgContainer};
     border: 1px solid ${token.colorSplit};
     border-radius: 8px;
+    color: ${token.colorText};
+    background: ${token.colorBgContainer};
   `,
   desc: css`
     color: ${token.colorTextTertiary};

package/src/features/Conversation/Messages/Assistant/FileChunks/Item/style.ts

@@ -5,13 +5,13 @@ export const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   badge: css`
     padding-block: 4px;
     padding-inline: 6px;
+    border-radius: 2222px;
 
     font-size: 12px;
     line-height: 12px;
     color: ${token.colorTextSecondary};
 
     background: ${token.colorFillSecondary};
-    border-radius: 2222px;
   `,
 
   container: css`
@@ -21,11 +21,11 @@ export const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     padding-block: 6px;
     padding-inline: 8px;
     padding-inline-end: 12px;
+    border-radius: 8px;
 
     color: ${token.colorText};
 
     background: ${lighten(0.1, token.colorBgElevated)};
-    border-radius: 8px;
     box-shadow: ${token.boxShadowTertiary};
 
     transition: all 0.2s;

package/src/features/Conversation/Messages/Assistant/FileChunks/index.tsx

@@ -16,11 +16,11 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     padding-block: 8px;
     padding-inline: 12px;
     padding-inline-end: 12px;
+    border-radius: 8px;
 
     color: ${token.colorText};
 
     background: ${token.colorFillTertiary};
-    border-radius: 8px;
 
     &:hover {
       background: ${isDarkMode ? '' : token.colorFillSecondary};

package/src/features/Conversation/Messages/Assistant/ToolCallItem/Inspector/style.ts

@@ -17,12 +17,11 @@ export const useStyles = createStyles(({ css, token }) => ({
     padding-block: 6px;
     padding-inline: 8px;
     padding-inline-end: 12px;
-
-    color: ${token.colorText};
-
     border: 1px solid ${token.colorBorder};
     border-radius: 8px;
 
+    color: ${token.colorText};
+
     &:hover {
       background: ${token.colorFillTertiary};
     }

package/src/features/Conversation/Messages/Assistant/ToolCallItem/style.ts

@@ -17,12 +17,11 @@ export const useStyles = createStyles(({ css, token }) => ({
     padding-block: 6px;
     padding-inline: 8px;
     padding-inline-end: 12px;
-
-    color: ${token.colorText};
-
     border: 1px solid ${token.colorBorder};
     border-radius: 8px;
 
+    color: ${token.colorText};
+
     &:hover {
       background: ${token.colorFillTertiary};
     }

package/src/features/Conversation/Messages/User/FileListViewer/Item.tsx

@@ -17,7 +17,6 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     max-width: 420px;
     padding-block: 8px;
     padding-inline: 12px 32px;
-
     border: 1px solid ${isDarkMode ? token.colorBorder : token.colorSplit};
     border-radius: 8px;
 

package/src/features/Conversation/components/BackBottom/style.ts

@@ -14,11 +14,11 @@ export const useStyles = createStyles(({ token, css, stylish, cx, responsive })
       transform: translateY(16px);
 
       padding-inline: 12px !important;
+      border-color: ${token.colorFillTertiary} !important;
+      border-radius: 16px !important;
 
       opacity: 0;
       background: ${rgba(token.colorBgContainer, 0.5)};
-      border-color: ${token.colorFillTertiary} !important;
-      border-radius: 16px !important;
 
       ${responsive.mobile} {
         inset-inline-end: 0;

package/src/features/Conversation/components/MarkdownElements/LobeArtifact/Render/Icon.tsx

@@ -9,12 +9,11 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     cursor: pointer;
 
     margin-block-start: 12px;
-
-    color: ${token.colorText};
-
     border: 1px solid ${token.colorBorder};
     border-radius: 8px;
 
+    color: ${token.colorText};
+
     &:hover {
       background: ${isDarkMode ? '' : token.colorFillSecondary};
     }

package/src/features/Conversation/components/MarkdownElements/LobeArtifact/Render/index.tsx

@@ -16,18 +16,18 @@ import ArtifactIcon from './Icon';
 
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   avatar: css`
-    background: ${token.colorFillQuaternary};
     border-inline-end: 1px solid ${token.colorSplit};
+    background: ${token.colorFillQuaternary};
   `,
   container: css`
     cursor: pointer;
 
     margin-block-start: 12px;
+    border: 1px solid ${token.colorBorder};
+    border-radius: 8px;
 
     color: ${token.colorText};
 
-    border: 1px solid ${token.colorBorder};
-    border-radius: 8px;
     box-shadow: ${isDarkMode ? token.boxShadowSecondary : token.boxShadowTertiary};
 
     &:hover {

package/src/features/Conversation/components/MarkdownElements/LobeThinking/Render.tsx

@@ -29,11 +29,11 @@ const useStyles = createStyles(({ css, token }) => ({
     padding-block: 8px;
     padding-inline: 12px;
     padding-inline-end: 12px;
+    border-radius: 8px;
 
     color: ${token.colorText};
 
     background: ${token.colorFillQuaternary};
-    border-radius: 8px;
   `,
   title: css`
     overflow: hidden;

package/src/features/Conversation/components/OTPInput.tsx

@@ -7,14 +7,14 @@ const useStyles = createStyles(
   ({ css, token }) => css`
     width: ${token.controlHeight}px;
     height: ${token.controlHeight}px;
+    border: 1px solid ${token.colorBorder};
+    border-radius: 8px;
 
     font-size: 16px;
     color: ${token.colorText};
     text-align: center;
 
     background: ${token.colorBgContainer};
-    border: 1px solid ${token.colorBorder};
-    border-radius: 8px;
 
     &:focus,
     &:focus-visible {

package/src/features/DataImporter/Loading.tsx

@@ -13,10 +13,10 @@ const useStyles = createStyles(({ css, token }) => {
 
       aspect-ratio: 1;
       width: 6px;
+      border-radius: 50%;
 
       color: ${token.colorPrimary};
 
-      border-radius: 50%;
       box-shadow:
         ${size}px -${size}px 0 0,
         ${size * 2}px -${size}px 0 0,

package/src/features/FileManager/FileList/EmptyStatus.tsx

@@ -25,12 +25,12 @@ const useStyles = createStyles(({ css, token }) => ({
 
     width: 200px;
     height: 140px;
+    border-radius: ${token.borderRadiusLG}px;
 
     font-weight: 500;
     text-align: center;
 
     background: ${token.colorFillTertiary};
-    border-radius: ${token.borderRadiusLG}px;
     box-shadow: 0 0 0 1px ${token.colorFillTertiary} inset;
 
     transition: background 0.3s ease-in-out;

package/src/features/FileManager/FileList/index.tsx

@@ -22,8 +22,8 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   header: css`
     height: 40px;
     min-height: 40px;
-    color: ${token.colorTextDescription};
     border-block-end: 1px solid ${isDarkMode ? token.colorSplit : rgba(token.colorSplit, 0.06)};
+    color: ${token.colorTextDescription};
   `,
   headerItem: css`
     padding-block: 0;

package/src/features/FileManager/UploadDock/Item.tsx

@@ -16,9 +16,9 @@ const useStyles = createStyles(({ css, token }) => {
       inset-inline: 0 1%;
 
       height: 100%;
+      border-block-end: 3px solid ${token.geekblue};
 
       background: ${token.colorFillTertiary};
-      border-block-end: 3px solid ${token.geekblue};
     `,
     title: css`
       overflow: hidden;

package/src/features/FileManager/UploadDock/index.tsx

@@ -18,8 +18,8 @@ const useStyles = createStyles(({ css, token }) => {
   return {
     body: css`
       height: 400px;
-      background: ${lighten(0.05, token.colorBgLayout)};
       border-radius: 8px;
+      background: ${lighten(0.05, token.colorBgLayout)};
     `,
     container: css`
       position: fixed;
@@ -30,9 +30,9 @@ const useStyles = createStyles(({ css, token }) => {
       overflow: hidden;
 
       width: 360px;
-
       border: 1px solid ${token.colorSplit};
       border-radius: 8px;
+
       box-shadow: ${token.boxShadow};
     `,
     header: css`
@@ -40,9 +40,9 @@ const useStyles = createStyles(({ css, token }) => {
 
       padding-block: 8px;
       padding-inline: 24px 12px;
+      border-radius: 8px;
 
       background: ${token.colorBgContainer};
-      border-radius: 8px;
 
       transition: all 0.3s ease-in-out;
 
@@ -58,9 +58,9 @@ const useStyles = createStyles(({ css, token }) => {
       inset-inline: 0 1%;
 
       height: 100%;
+      border-block-end: 3px solid ${token.geekblue};
 
       background: ${token.colorFillTertiary};
-      border-block-end: 3px solid ${token.geekblue};
     `,
     title: css`
       height: 36px;

package/src/features/FileViewer/NotSupport/index.tsx

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