@lobehub/chat 0.159.12 → 0.160.0

package/src/services/global.ts

@@ -1,10 +1,8 @@
 import { DeepPartial } from 'utility-types';
 
-import { dataSync } from '@/database/client/core';
-import { trpcClient } from '@/libs/trpc/client';
+import { edgeClient } from '@/libs/trpc/client';
 import { LobeAgentConfig } from '@/types/agent';
 import { GlobalServerConfig } from '@/types/serverConfig';
-import { StartDataSyncParams } from '@/types/sync';
 
 const VERSION_URL = 'https://registry.npmmirror.com/@lobehub/chat';
 
@@ -20,24 +18,11 @@ class GlobalService {
   };
 
   getGlobalConfig = async (): Promise<GlobalServerConfig> => {
-    return trpcClient.config.getGlobalConfig.query();
+    return edgeClient.config.getGlobalConfig.query();
   };
 
   getDefaultAgentConfig = async (): Promise<DeepPartial<LobeAgentConfig>> => {
-    return trpcClient.config.getDefaultAgentConfig.query();
-  };
-
-  enabledSync = async (params: StartDataSyncParams) => {
-    if (typeof window === 'undefined') return false;
-
-    await dataSync.startDataSync(params);
-    return true;
-  };
-
-  disableSync = async () => {
-    await dataSync.disconnect();
-
-    return false;
+    return edgeClient.config.getDefaultAgentConfig.query();
   };
 }
 

package/src/services/sync.ts

@@ -0,0 +1,19 @@
+import { dataSync } from '@/database/client/core';
+import { StartDataSyncParams } from '@/types/sync';
+
+class SyncService {
+  enabledSync = async (params: StartDataSyncParams) => {
+    if (typeof window === 'undefined') return false;
+
+    await dataSync.startDataSync(params);
+    return true;
+  };
+
+  disableSync = async () => {
+    await dataSync.disconnect();
+
+    return false;
+  };
+}
+
+export const syncService = new SyncService();

package/src/services/upload.ts

@@ -0,0 +1,99 @@
+import { fileEnv } from '@/config/file';
+import { DB_File } from '@/database/client/schemas/files';
+import { edgeClient } from '@/libs/trpc/client';
+import { API_ENDPOINTS } from '@/services/_url';
+import { serverConfigSelectors } from '@/store/serverConfig/selectors';
+import compressImage from '@/utils/compressImage';
+import { uuid } from '@/utils/uuid';
+
+class UploadService {
+  async uploadFile(file: DB_File) {
+    if (this.enableServer) {
+      const { data, ...params } = file;
+      const filename = `${uuid()}.${file.name.split('.').at(-1)}`;
+
+      // 精确到以 h 为单位的 path
+      const date = (Date.now() / 1000 / 60 / 60).toFixed(0);
+
+      const pathname = `${fileEnv.NEXT_PUBLIC_S3_FILE_PATH}/${date}/${filename}`;
+
+      const url = await edgeClient.upload.createS3PreSignedUrl.mutate({ pathname });
+
+      const res = await fetch(url, {
+        body: data,
+        headers: { 'Content-Type': file.fileType },
+        method: 'PUT',
+      });
+
+      if (res.ok) {
+        return {
+          ...params,
+          metadata: { date, filename: file.name },
+          name: filename,
+          saveMode: 'url',
+          url: pathname,
+        } as DB_File;
+      } else {
+        throw new Error('Upload Error');
+      }
+    }
+
+    // 跳过图片上传测试
+    const isTestData = file.size === 1;
+    if (this.isImage(file.fileType) && !isTestData) {
+      return this.uploadImageFile(file);
+    }
+
+    // save to local storage
+    // we may want to save to a remote server later
+    return file;
+  }
+
+  async uploadImageByUrl(url: string, file: Pick<DB_File, 'name' | 'metadata'>) {
+    const res = await fetch(API_ENDPOINTS.proxy, { body: url, method: 'POST' });
+    const data = await res.arrayBuffer();
+    const fileType = res.headers.get('content-type') || 'image/webp';
+
+    return this.uploadFile({
+      data,
+      fileType,
+      metadata: file.metadata,
+      name: file.name,
+      saveMode: 'local',
+      size: data.byteLength,
+    });
+  }
+
+  private isImage(fileType: string) {
+    const imageRegex = /^image\//;
+    return imageRegex.test(fileType);
+  }
+
+  private async uploadImageFile(file: DB_File) {
+    // 加载图片
+    const url = file.url || URL.createObjectURL(new Blob([file.data!]));
+
+    const img = new Image();
+    img.src = url;
+    await (() =>
+      new Promise((resolve) => {
+        img.addEventListener('load', resolve);
+      }))();
+
+    // 压缩图片
+    const base64String = compressImage({ img, type: file.fileType });
+    const binaryString = atob(base64String.split('base64,')[1]);
+    const uint8Array = Uint8Array.from(binaryString, (char) => char.charCodeAt(0));
+    file.data = uint8Array.buffer;
+
+    return file;
+  }
+
+  private get enableServer() {
+    return serverConfigSelectors.enableUploadFileToServer(
+      window.global_serverConfigStore.getState(),
+    );
+  }
+}
+
+export const uploadService = new UploadService();

package/src/store/chat/slices/builtinTool/action.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it, vi } from 'vitest';
 
 import { fileService } from '@/services/file';
 import { imageGenerationService } from '@/services/textToImage';
+import { uploadService } from '@/services/upload';
 import { chatSelectors } from '@/store/chat/selectors';
 import { ChatMessage } from '@/types/message';
 import { DallEImageItem } from '@/types/tool/dalle';
@@ -35,7 +36,8 @@ describe('chatToolSlice', () => {
       const mockId = 'image-id';
 
       vi.spyOn(imageGenerationService, 'generateImage').mockResolvedValue(mockUrl);
-      vi.spyOn(fileService, 'uploadImageByUrl').mockResolvedValue({ id: mockId });
+      vi.spyOn(uploadService, 'uploadImageByUrl').mockResolvedValue({} as any);
+      vi.spyOn(fileService, 'createFile').mockResolvedValue({ id: mockId });
       vi.spyOn(result.current, 'toggleDallEImageLoading');
 
       await act(async () => {
@@ -43,7 +45,7 @@ describe('chatToolSlice', () => {
       });
       // For each prompt, loading is toggled on and then off
       expect(imageGenerationService.generateImage).toHaveBeenCalledTimes(prompts.length);
-      expect(fileService.uploadImageByUrl).toHaveBeenCalledTimes(prompts.length);
+      expect(uploadService.uploadImageByUrl).toHaveBeenCalledTimes(prompts.length);
 
       expect(result.current.toggleDallEImageLoading).toHaveBeenCalledTimes(prompts.length * 2);
     });

package/src/store/chat/slices/builtinTool/action.ts

@@ -4,6 +4,7 @@ import { StateCreator } from 'zustand/vanilla';
 
 import { fileService } from '@/services/file';
 import { imageGenerationService } from '@/services/textToImage';
+import { uploadService } from '@/services/upload';
 import { chatSelectors } from '@/store/chat/selectors';
 import { ChatStore } from '@/store/chat/store';
 import { DallEImageItem } from '@/types/tool/dalle';
@@ -60,14 +61,16 @@ export const chatToolSlice: StateCreator<
 
       toggleDallEImageLoading(messageId + params.prompt, false);
 
-      fileService
+      uploadService
         .uploadImageByUrl(url, {
           metadata: { ...params, originPrompt: originPrompt },
           name: `${originPrompt || params.prompt}_${index}.png`,
         })
-        .then(({ id }) => {
+        .then(async (res) => {
+          const data = await fileService.createFile(res);
+
           updateImageItem(messageId, (draft) => {
-            draft[index].imageId = id;
+            draft[index].imageId = data.id;
             draft[index].previewUrl = undefined;
           });
         });

package/src/store/file/slices/images/action.test.ts

@@ -2,21 +2,14 @@ import { act, renderHook } from '@testing-library/react';
 import useSWR from 'swr';
 import { Mock, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { DB_File } from '@/database/client/schemas/files';
 import { fileService } from '@/services/file';
+import { uploadService } from '@/services/upload';
 
 import { useFileStore as useStore } from '../../store';
 
 vi.mock('zustand/traditional');
 
-// Mocks for fileService
-vi.mock('@/services/file', () => ({
-  fileService: {
-    removeFile: vi.fn(),
-    uploadFile: vi.fn(),
-    getFile: vi.fn(),
-  },
-}));
-
 // Mock for useSWR
 vi.mock('swr', () => ({
   default: vi.fn(),
@@ -67,7 +60,7 @@ describe('useFileStore:images', () => {
     const fileId = 'test-id';
 
     // Mock the fileService.removeFile to resolve
-    (fileService.removeFile as Mock).mockResolvedValue(undefined);
+    vi.spyOn(fileService, 'removeFile').mockResolvedValue(undefined);
 
     // Populate the list to remove an item later
     act(() => {
@@ -96,7 +89,7 @@ describe('useFileStore:images', () => {
     };
 
     // Mock the fileService.getFile to resolve with fileData
-    (fileService.getFile as Mock).mockResolvedValue(fileData);
+    vi.spyOn(fileService, 'getFile').mockResolvedValue(fileData as any);
 
     // Mock useSWR to call the fetcher function immediately
     const useSWRMock = vi.mocked(useSWR);
@@ -124,7 +117,7 @@ describe('useFileStore:images', () => {
 
       // 模拟 fileService.uploadFile 抛出错误
       const errorMessage = 'Upload failed';
-      (fileService.uploadFile as Mock).mockRejectedValue(new Error(errorMessage));
+      vi.spyOn(uploadService, 'uploadFile').mockRejectedValue(new Error(errorMessage));
 
       // Mock console.error for testing
       const consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
@@ -133,7 +126,7 @@ describe('useFileStore:images', () => {
         await result.current.uploadFile(testFile);
       });
 
-      expect(fileService.uploadFile).toHaveBeenCalledWith({
+      expect(uploadService.uploadFile).toHaveBeenCalledWith({
         createdAt: testFile.lastModified,
         data: await testFile.arrayBuffer(),
         fileType: testFile.type,
@@ -156,7 +149,6 @@ describe('useFileStore:images', () => {
 
       // 模拟 fileService.uploadFile 返回的数据
       const uploadedFileData = {
-        id: 'new-file-id',
         createdAt: testFile.lastModified,
         data: await testFile.arrayBuffer(),
         fileType: testFile.type,
@@ -166,13 +158,14 @@ describe('useFileStore:images', () => {
       };
 
       // Mock the fileService.uploadFile to resolve with uploadedFileData
-      (fileService.uploadFile as Mock).mockResolvedValue(uploadedFileData);
+      vi.spyOn(uploadService, 'uploadFile').mockResolvedValue(uploadedFileData as DB_File);
+      vi.spyOn(fileService, 'createFile').mockResolvedValue({ id: 'new-file-id' });
 
       await act(async () => {
         await result.current.uploadFile(testFile);
       });
 
-      expect(fileService.uploadFile).toHaveBeenCalledWith({
+      expect(fileService.createFile).toHaveBeenCalledWith({
         createdAt: testFile.lastModified,
         data: await testFile.arrayBuffer(),
         fileType: testFile.type,
@@ -180,7 +173,7 @@ describe('useFileStore:images', () => {
         saveMode: 'local',
         size: testFile.size,
       });
-      expect(result.current.inputFilesList).toContain(uploadedFileData.id);
+      expect(result.current.inputFilesList).toContain('new-file-id');
     });
   });
 });

package/src/store/file/slices/images/action.ts

@@ -3,6 +3,7 @@ import useSWR, { SWRResponse } from 'swr';
 import { StateCreator } from 'zustand/vanilla';
 
 import { fileService } from '@/services/file';
+import { uploadService } from '@/services/upload';
 import { FilePreview } from '@/types/files';
 import { setNamespace } from '@/utils/storeDebug';
 
@@ -55,7 +56,7 @@ export const createFileSlice: StateCreator<
   },
   uploadFile: async (file) => {
     try {
-      const data = await fileService.uploadFile({
+      const result = await uploadService.uploadFile({
         createdAt: file.lastModified,
         data: await file.arrayBuffer(),
         fileType: file.type,
@@ -64,6 +65,8 @@ export const createFileSlice: StateCreator<
         size: file.size,
       });
 
+      const data = await fileService.createFile(result);
+
       set(
         ({ inputFilesList }) => ({ inputFilesList: [...inputFilesList, data.id] }),
         false,

package/src/store/file/slices/tts/action.test.ts

@@ -1,22 +1,14 @@
 import { act, renderHook } from '@testing-library/react';
 import useSWR from 'swr';
-import { Mock, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { fileService } from '@/services/file';
+import { createServerConfigStore } from '@/store/serverConfig/store';
 
 import { useFileStore as useStore } from '../../store';
 
 vi.mock('zustand/traditional');
 
-// Mocks for fileService
-vi.mock('@/services/file', () => ({
-  fileService: {
-    removeFile: vi.fn(),
-    uploadFile: vi.fn(),
-    getFile: vi.fn(),
-  },
-}));
-
 // Mock for useSWR
 vi.mock('swr', () => ({
   default: vi.fn(),
@@ -36,6 +28,8 @@ beforeAll(() => {
       });
     },
   });
+
+  createServerConfigStore();
 });
 
 beforeEach(() => {
@@ -49,7 +43,7 @@ describe('TTSFileAction', () => {
     const fileId = 'tts-file-id';
 
     // Mock the fileService.removeFile to resolve
-    (fileService.removeFile as Mock).mockResolvedValue(undefined);
+    vi.spyOn(fileService, 'removeFile').mockResolvedValue(undefined);
 
     await act(async () => {
       await useStore.getState().removeTTSFile(fileId);
@@ -72,14 +66,14 @@ describe('TTSFileAction', () => {
     };
 
     // Mock the fileService.uploadFile to resolve with uploadedFileData
-    (fileService.uploadFile as Mock).mockResolvedValue(uploadedFileData);
+    vi.spyOn(fileService, 'createFile').mockResolvedValue(uploadedFileData);
 
     let fileId;
     await act(async () => {
       fileId = await useStore.getState().uploadTTSFile(testFile);
     });
 
-    expect(fileService.uploadFile).toHaveBeenCalledWith({
+    expect(fileService.createFile).toHaveBeenCalledWith({
       createdAt: testFile.lastModified,
       data: await testFile.arrayBuffer(),
       fileType: testFile.type,
@@ -127,7 +121,7 @@ describe('TTSFileAction', () => {
     };
 
     // Mock the fileService.getFile to resolve with fileData
-    (fileService.getFile as Mock).mockResolvedValue(fileData);
+    vi.spyOn(fileService, 'getFile').mockResolvedValue(fileData as any);
 
     // Mock useSWR to call the fetcher function immediately
     const useSWRMock = vi.mocked(useSWR);

package/src/store/file/slices/tts/action.ts

@@ -2,6 +2,7 @@ import useSWR, { SWRResponse } from 'swr';
 import { StateCreator } from 'zustand/vanilla';
 
 import { fileService } from '@/services/file';
+import { uploadService } from '@/services/upload';
 import { FilePreview } from '@/types/files';
 
 import { FileStore } from '../../store';
@@ -41,7 +42,7 @@ export const createTTSFileSlice: StateCreator<
   },
   uploadTTSFile: async (file) => {
     try {
-      const data = await fileService.uploadFile({
+      const res = await uploadService.uploadFile({
         createdAt: file.lastModified,
         data: await file.arrayBuffer(),
         fileType: file.type,
@@ -50,6 +51,8 @@ export const createTTSFileSlice: StateCreator<
         size: file.size,
       });
 
+      const data = await fileService.createFile(res);
+
       return data.id;
     } catch (error) {
       // 提示用户上传失败

package/src/store/serverConfig/selectors.ts

@@ -6,6 +6,7 @@ export const featureFlagsSelectors = (s: ServerConfigStore) =>
   mapFeatureFlagsEnvToState(s.featureFlags);
 
 export const serverConfigSelectors = {
+  enableUploadFileToServer: (s: ServerConfigStore) => s.serverConfig.enableUploadFileToServer,
   enabledAccessCode: (s: ServerConfigStore) => !!s.serverConfig?.enabledAccessCode,
   enabledOAuthSSO: (s: ServerConfigStore) => s.serverConfig.enabledOAuthSSO,
   enabledTelemetryChat: (s: ServerConfigStore) => s.serverConfig.telemetry.langfuse || false,

package/src/store/serverConfig/store.ts

@@ -36,6 +36,12 @@ const createStore: CreateStore = (runtimeState) => () => ({
 
 let store: StoreApi<ServerConfigStore>;
 
+declare global {
+  interface Window {
+    global_serverConfigStore: StoreApi<ServerConfigStore>;
+  }
+}
+
 export const initServerConfigStore = (initState: Partial<ServerConfigStore>) =>
   createWithEqualityFn<ServerConfigStore>()(
     devtools(createStore(initState || {}), {
@@ -53,6 +59,10 @@ export const createServerConfigStore = (initState?: Partial<ServerConfigStore>)
       }),
       shallow,
     );
+
+    if (typeof window !== 'undefined') {
+      window.global_serverConfigStore = store;
+    }
   }
 
   return store;

package/src/store/user/slices/common/action.ts

@@ -2,7 +2,6 @@ import useSWR, { SWRResponse } from 'swr';
 import { DeepPartial } from 'utility-types';
 import type { StateCreator } from 'zustand/vanilla';
 
-import { globalService } from '@/services/global';
 import { messageService } from '@/services/message';
 import { userService } from '@/services/user';
 import type { UserStore } from '@/store/user';
@@ -53,22 +52,35 @@ export const createCommonSlice: StateCreator<
       },
     ),
 
+  /**
+   * TODO: need to be removed in the future
+   * the serverConfig should be fetched only in the serverConfigStore
+   * @deprecated
+   */
   useFetchServerConfig: () =>
-    useSWR<GlobalServerConfig>('fetchGlobalConfig', globalService.getGlobalConfig, {
-      onSuccess: (data) => {
-        if (data) {
-          const serverSettings: DeepPartial<GlobalSettings> = {
-            defaultAgent: data.defaultAgent,
-            languageModel: data.languageModel,
-          };
+    useSWR<GlobalServerConfig>(
+      'fetchGlobalConfig',
+      async () => {
+        const { globalService } = await import('@/services/global');
 
-          const defaultSettings = merge(get().defaultSettings, serverSettings);
+        return globalService.getGlobalConfig();
+      },
+      {
+        onSuccess: (data) => {
+          if (data) {
+            const serverSettings: DeepPartial<GlobalSettings> = {
+              defaultAgent: data.defaultAgent,
+              languageModel: data.languageModel,
+            };
+
+            const defaultSettings = merge(get().defaultSettings, serverSettings);
 
-          set({ defaultSettings, serverConfig: data }, false, n('initGlobalConfig'));
+            set({ defaultSettings, serverConfig: data }, false, n('initGlobalConfig'));
 
-          get().refreshDefaultModelProviderList({ trigger: 'fetchServerConfig' });
-        }
+            get().refreshDefaultModelProviderList({ trigger: 'fetchServerConfig' });
+          }
+        },
+        revalidateOnFocus: false,
       },
-      revalidateOnFocus: false,
-    }),
+    ),
 });

package/src/store/user/slices/sync/action.test.ts

@@ -2,10 +2,10 @@ import { act, renderHook, waitFor } from '@testing-library/react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { withSWR } from '~test-utils';
 
-import { globalService } from '@/services/global';
+import { syncService } from '@/services/sync';
 import { useUserStore } from '@/store/user';
-import { userProfileSelectors } from '@/store/user/slices/auth/selectors';
-import { syncSettingsSelectors } from '@/store/user/slices/settings/selectors';
+import { userProfileSelectors } from '@/store/user/selectors';
+import { syncSettingsSelectors } from '@/store/user/selectors';
 
 vi.mock('zustand/traditional');
 
@@ -86,7 +86,7 @@ describe('createSyncSlice', () => {
         enabled: true,
       });
       vi.spyOn(syncSettingsSelectors, 'deviceName').mockReturnValueOnce(deviceName);
-      const enabledSyncSpy = vi.spyOn(globalService, 'enabledSync').mockResolvedValueOnce(true);
+      const enabledSyncSpy = vi.spyOn(syncService, 'enabledSync').mockResolvedValueOnce(true);
       const { result } = renderHook(() => useUserStore());
 
       const data = await act(async () => {
@@ -114,8 +114,8 @@ describe('createSyncSlice', () => {
       await waitFor(() => expect(result.current.data).toBe(false));
     });
 
-    it('should call globalService.disableSync when userEnableSync is false', async () => {
-      const disableSyncSpy = vi.spyOn(globalService, 'disableSync').mockResolvedValueOnce(false);
+    it('should call syncService.disableSync when userEnableSync is false', async () => {
+      const disableSyncSpy = vi.spyOn(syncService, 'disableSync').mockResolvedValueOnce(false);
 
       const { result } = renderHook(
         () => useUserStore().useEnabledSync(false, 'user-id', vi.fn()),

package/src/store/user/slices/sync/action.ts

@@ -1,7 +1,7 @@
 import useSWR, { SWRResponse } from 'swr';
 import type { StateCreator } from 'zustand/vanilla';
 
-import { globalService } from '@/services/global';
+import { syncService } from '@/services/sync';
 import type { UserStore } from '@/store/user';
 import { OnSyncEvent, PeerSyncStatus } from '@/types/sync';
 import { browserInfo } from '@/utils/platform';
@@ -50,7 +50,7 @@ export const createSyncSlice: StateCreator<
     const defaultUserName = `My ${browserInfo.browser} (${browserInfo.os})`;
 
     set({ syncStatus: PeerSyncStatus.Connecting });
-    return globalService.enabledSync({
+    return syncService.enabledSync({
       channel: {
         name: sync.channelName,
         password: sync.channelPassword,
@@ -80,7 +80,7 @@ export const createSyncSlice: StateCreator<
         if (!userId) return false;
 
         // if user don't enable sync, stop sync
-        if (!userEnableSync) return globalService.disableSync();
+        if (!userEnableSync) return syncService.disableSync();
 
         return get().triggerEnableSync(userId, onEvent);
       },

package/src/types/serverConfig.ts

@@ -15,6 +15,7 @@ export interface ServerModelProviderConfig {
 
 export interface GlobalServerConfig {
   defaultAgent?: DeepPartial<GlobalDefaultAgent>;
+  enableUploadFileToServer?: boolean;
   enabledAccessCode?: boolean;
   enabledOAuthSSO?: boolean;
   languageModel?: Partial<Record<GlobalLLMProviderKey, ServerModelProviderConfig>>;

package/src/app/api/files/image/imgur.ts

@@ -1,72 +0,0 @@
-import { getServerConfig } from '@/config/server';
-
-interface UploadResponse {
-  data: UploadData;
-  status: number;
-  success: boolean;
-}
-
-interface UploadData {
-  account_id: any;
-  account_url: any;
-  ad_type: any;
-  ad_url: any;
-  animated: boolean;
-  bandwidth: number;
-  datetime: number;
-  deletehash: string;
-  description: any;
-  favorite: boolean;
-  has_sound: boolean;
-  height: number;
-  hls: string;
-  id: string;
-  in_gallery: boolean;
-  in_most_viral: boolean;
-  is_ad: boolean;
-  link: string;
-  mp4: string;
-  name: string;
-  nsfw: any;
-  section: any;
-  size: number;
-  tags: any[];
-  title: any;
-  type: string;
-  views: number;
-  vote: any;
-  width: number;
-}
-
-export class Imgur {
-  clientId: string;
-  api = 'https://api.imgur.com/3';
-
-  constructor() {
-    this.clientId = getServerConfig().IMGUR_CLIENT_ID;
-  }
-
-  async upload(image: Blob) {
-    const formData = new FormData();
-
-    formData.append('image', image, 'image.png');
-
-    const res = await fetch(`${this.api}/upload`, {
-      body: formData,
-      headers: {
-        Authorization: `Client-ID ${this.clientId}`,
-      },
-      method: 'POST',
-    });
-
-    if (!res.ok) {
-      console.log(await res.text());
-    }
-
-    const data: UploadResponse = await res.json();
-    if (data.success) {
-      return data.data.link;
-    }
-    return undefined;
-  }
-}