@lobehub/chat 0.109.0 → 0.110.0

package/src/store/chat/actions/enhance.test.ts

@@ -0,0 +1,139 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { chainLangDetect } from '@/chains/langDetect';
+import { chainTranslate } from '@/chains/translate';
+import { chatService } from '@/services/chat';
+import { messageService } from '@/services/message';
+
+import { useChatStore } from '../store';
+
+// Mock messageService 和 chatService
+vi.mock('@/services/message', () => ({
+  messageService: {
+    updateMessageTTS: vi.fn(),
+    updateMessageTranslate: vi.fn(),
+  },
+}));
+
+vi.mock('@/services/chat', () => ({
+  chatService: {
+    fetchPresetTaskResult: vi.fn(),
+  },
+}));
+
+vi.mock('@/chains/langDetect', () => ({
+  chainLangDetect: vi.fn(),
+}));
+
+vi.mock('@/chains/translate', () => ({
+  chainTranslate: vi.fn(),
+}));
+
+// Mock supportLocales
+vi.mock('@/locales/options', () => ({
+  supportLocales: ['en-US', 'zh-CN'],
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  useChatStore.setState(
+    {
+      // ... 初始状态
+    },
+    false,
+  );
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('ChatEnhanceAction', () => {
+  describe('clearTTS', () => {
+    it('should clear TTS for a message and refresh messages', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const messageId = 'message-id';
+
+      await act(async () => {
+        await result.current.clearTTS(messageId);
+      });
+
+      expect(messageService.updateMessageTTS).toHaveBeenCalledWith(messageId, null);
+    });
+  });
+
+  describe('translateMessage', () => {
+    it('should translate a message to the target language and refresh messages', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const messageId = 'message-id';
+      const targetLang = 'zh-CN';
+      const messageContent = 'Hello World';
+      const detectedLang = 'en-US';
+
+      // 设置初始消息状态
+      useChatStore.setState({
+        messages: [
+          {
+            id: messageId,
+            content: messageContent,
+            createdAt: Date.now(),
+            updatedAt: Date.now(),
+            role: 'user',
+            sessionId: 'test',
+            topicId: 'test',
+            meta: {},
+          },
+        ],
+      });
+
+      // 模拟语言检测和翻译结果
+      (chatService.fetchPresetTaskResult as Mock).mockImplementation(({ params }) => {
+        if (params === chainLangDetect(messageContent)) {
+          return Promise.resolve(detectedLang);
+        }
+        if (params === chainTranslate(messageContent, targetLang)) {
+          return Promise.resolve('Hola Mundo');
+        }
+        return Promise.resolve(undefined);
+      });
+
+      await act(async () => {
+        await result.current.translateMessage(messageId, targetLang);
+      });
+
+      expect(messageService.updateMessageTranslate).toHaveBeenCalled();
+    });
+  });
+
+  describe('clearTranslate', () => {
+    it('should clear translation for a message and refresh messages', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const messageId = 'message-id';
+
+      await act(async () => {
+        await result.current.clearTranslate(messageId);
+      });
+
+      expect(messageService.updateMessageTranslate).toHaveBeenCalledWith(messageId, null);
+    });
+  });
+
+  describe('ttsMessage', () => {
+    it('should update TTS state for a message and refresh messages', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const messageId = 'message-id';
+      const ttsState = {
+        contentMd5: 'some-md5',
+        file: 'path-to-tts-file',
+        voice: 'voice-type',
+      };
+
+      await act(async () => {
+        await result.current.ttsMessage(messageId, ttsState);
+      });
+
+      expect(messageService.updateMessageTTS).toHaveBeenCalledWith(messageId, ttsState);
+    });
+  });
+});

package/src/store/chat/actions/enhance.ts

@@ -20,7 +20,10 @@ export interface ChatEnhanceAction {
 
   clearTranslate: (id: string) => Promise<void>;
   translateMessage: (id: string, targetLang: string) => Promise<void>;
-  ttsMessage: (id: string, init?: boolean) => Promise<void>;
+  ttsMessage: (
+    id: string,
+    state?: { contentMd5?: string; file?: string; voice?: string },
+  ) => Promise<void>;
 }
 
 export const chatEnhance: StateCreator<
@@ -88,8 +91,8 @@ export const chatEnhance: StateCreator<
     toggleChatLoading(false);
   },
 
-  ttsMessage: async (id, init) => {
-    await messageService.updateMessageTTS(id, { init: Boolean(init) });
+  ttsMessage: async (id, state = {}) => {
+    await messageService.updateMessageTTS(id, state);
     await get().refreshMessages();
   },
 });

package/src/store/file/selectors.ts

@@ -1,34 +1,7 @@
-import { FilesStoreState } from './initialState';
-
-const getImageDetailByList = (list: string[]) => (s: FilesStoreState) =>
-  list.map((i) => s.imagesMap[i]).filter(Boolean);
-
-const imageDetailList = (s: FilesStoreState) => getImageDetailByList(s.inputFilesList)(s);
-
-const getImageUrlOrBase64ById =
-  (id: string) =>
-  (s: FilesStoreState): { id: string; url: string } | undefined => {
-    const preview = s.imagesMap[id];
-
-    if (!preview) return undefined;
-
-    const url = preview.saveMode === 'local' ? (preview.base64Url as string) : preview.url;
-
-    return { id, url: url };
-  };
-
-const getImageUrlOrBase64ByList = (idList: string[]) => (s: FilesStoreState) =>
-  idList.map((i) => getImageUrlOrBase64ById(i)(s)).filter(Boolean) as {
-    id: string;
-    url: string;
-  }[];
-
-const imageUrlOrBase64List = (s: FilesStoreState) => getImageUrlOrBase64ByList(s.inputFilesList)(s);
+import { filesSelectors as imageFilesSelectors } from './slices/images';
+import { ttsFilesSelectors } from './slices/tts';
 
 export const filesSelectors = {
-  getImageDetailByList,
-  getImageUrlOrBase64ById,
-  getImageUrlOrBase64ByList,
-  imageDetailList,
-  imageUrlOrBase64List,
+  ...imageFilesSelectors,
+  ...ttsFilesSelectors,
 };

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

@@ -1,3 +1,3 @@
 export * from './action';
 export * from './initialState';
-// export * from './selectors';
+export * from './selectors';

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

@@ -0,0 +1,34 @@
+import { FilesStoreState } from '../../initialState';
+
+const getImageDetailByList = (list: string[]) => (s: FilesStoreState) =>
+  list.map((i) => s.imagesMap[i]).filter(Boolean);
+
+const imageDetailList = (s: FilesStoreState) => getImageDetailByList(s.inputFilesList)(s);
+
+const getImageUrlOrBase64ById =
+  (id: string) =>
+  (s: FilesStoreState): { id: string; url: string } | undefined => {
+    const preview = s.imagesMap[id];
+
+    if (!preview) return undefined;
+
+    const url = preview.saveMode === 'local' ? (preview.base64Url as string) : preview.url;
+
+    return { id, url: url };
+  };
+
+const getImageUrlOrBase64ByList = (idList: string[]) => (s: FilesStoreState) =>
+  idList.map((i) => getImageUrlOrBase64ById(i)(s)).filter(Boolean) as {
+    id: string;
+    url: string;
+  }[];
+
+const imageUrlOrBase64List = (s: FilesStoreState) => getImageUrlOrBase64ByList(s.inputFilesList)(s);
+
+export const filesSelectors = {
+  getImageDetailByList,
+  getImageUrlOrBase64ById,
+  getImageUrlOrBase64ByList,
+  imageDetailList,
+  imageUrlOrBase64List,
+};

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

@@ -0,0 +1,147 @@
+import { act, renderHook } from '@testing-library/react';
+import useSWR from 'swr';
+import { Mock, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { fileService } from '@/services/file';
+
+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(),
+}));
+
+//  mock the arrayBuffer
+beforeAll(() => {
+  Object.defineProperty(File.prototype, 'arrayBuffer', {
+    writable: true,
+    value: function () {
+      return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          resolve(reader.result);
+        };
+        reader.readAsArrayBuffer(this);
+      });
+    },
+  });
+});
+
+beforeEach(() => {
+  // Reset all mocks before each test
+  vi.resetAllMocks();
+});
+
+describe('TTSFileAction', () => {
+  // Test for removeTTSFile
+  it('removeTTSFile should call fileService.removeFile', async () => {
+    const fileId = 'tts-file-id';
+
+    // Mock the fileService.removeFile to resolve
+    (fileService.removeFile as Mock).mockResolvedValue(undefined);
+
+    await act(async () => {
+      await useStore.getState().removeTTSFile(fileId);
+    });
+
+    expect(fileService.removeFile).toHaveBeenCalledWith(fileId);
+  });
+
+  // Test for uploadTTSFile
+  it('uploadTTSFile should upload the file and return the file id', async () => {
+    const testFile = new File(['content'], 'test.mp3', { type: 'audio/mp3' });
+    const uploadedFileData = {
+      id: 'new-tts-file-id',
+      createdAt: testFile.lastModified,
+      data: await testFile.arrayBuffer(),
+      fileType: testFile.type,
+      name: testFile.name,
+      saveMode: 'local',
+      size: testFile.size,
+    };
+
+    // Mock the fileService.uploadFile to resolve with uploadedFileData
+    (fileService.uploadFile as Mock).mockResolvedValue(uploadedFileData);
+
+    let fileId;
+    await act(async () => {
+      fileId = await useStore.getState().uploadTTSFile(testFile);
+    });
+
+    expect(fileService.uploadFile).toHaveBeenCalledWith({
+      createdAt: testFile.lastModified,
+      data: await testFile.arrayBuffer(),
+      fileType: testFile.type,
+      name: testFile.name,
+      saveMode: 'local',
+      size: testFile.size,
+    });
+    expect(fileId).toBe(uploadedFileData.id);
+  });
+
+  // Test for uploadTTSByArrayBuffers
+  it('uploadTTSByArrayBuffers should create a file and call uploadTTSFile', async () => {
+    const messageId = 'message-id';
+    const arrayBuffers = [new ArrayBuffer(10)];
+    const fileType = 'audio/mp3';
+    const fileName = `${messageId}.mp3`;
+
+    // Spy on uploadTTSFile to simulate a successful upload
+    const uploadTTSFileSpy = vi
+      .spyOn(useStore.getState(), 'uploadTTSFile')
+      .mockResolvedValue('new-tts-file-id');
+
+    let fileId;
+    await act(async () => {
+      fileId = await useStore.getState().uploadTTSByArrayBuffers(messageId, arrayBuffers);
+    });
+
+    expect(uploadTTSFileSpy).toHaveBeenCalled();
+    expect(fileId).toBe('new-tts-file-id');
+
+    // Cleanup spy
+    uploadTTSFileSpy.mockRestore();
+  });
+
+  // Test for useFetchTTSFile
+  it('useFetchTTSFile should call useSWR and return file data', async () => {
+    const fileId = 'tts-file-id';
+    const fileData = {
+      id: fileId,
+      name: 'test',
+      url: 'blob:test',
+      fileType: 'audio/mp3',
+      base64Url: '',
+      saveMode: 'local',
+    };
+
+    // Mock the fileService.getFile to resolve with fileData
+    (fileService.getFile as Mock).mockResolvedValue(fileData);
+
+    // Mock useSWR to call the fetcher function immediately
+    const useSWRMock = vi.mocked(useSWR);
+    useSWRMock.mockImplementation(((key: string, fetcher: any) => {
+      const data = fetcher(key);
+      return { data, error: undefined, isValidating: false, mutate: vi.fn() };
+    }) as any);
+
+    const { result } = renderHook(() => useStore.getState().useFetchTTSFile(fileId));
+
+    await act(async () => {
+      await result.current.data;
+    });
+
+    expect(fileService.getFile).toHaveBeenCalledWith(fileId);
+  });
+});

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

@@ -0,0 +1,60 @@
+import useSWR, { SWRResponse } from 'swr';
+import { StateCreator } from 'zustand/vanilla';
+
+import { fileService } from '@/services/file';
+import { FilePreview } from '@/types/files';
+
+import { FileStore } from '../../store';
+
+export interface TTSFileAction {
+  removeTTSFile: (id: string) => Promise<void>;
+
+  uploadTTSByArrayBuffers: (
+    messageId: string,
+    arrayBuffers: ArrayBuffer[],
+  ) => Promise<string | undefined>;
+
+  uploadTTSFile: (file: File) => Promise<string | undefined>;
+
+  useFetchTTSFile: (id: string | null) => SWRResponse<FilePreview>;
+}
+
+export const createTTSFileSlice: StateCreator<
+  FileStore,
+  [['zustand/devtools', never]],
+  [],
+  TTSFileAction
+> = (_, get) => ({
+  removeTTSFile: async (id) => {
+    await fileService.removeFile(id);
+  },
+  uploadTTSByArrayBuffers: async (messageId, arrayBuffers) => {
+    const fileType = 'audio/mp3';
+    const blob = new Blob(arrayBuffers, { type: fileType });
+    const fileName = `${messageId}.mp3`;
+    const fileOptions = {
+      lastModified: Date.now(),
+      type: fileType,
+    };
+    const file = new File([blob], fileName, fileOptions);
+    return get().uploadTTSFile(file);
+  },
+  uploadTTSFile: async (file) => {
+    try {
+      const data = await fileService.uploadFile({
+        createdAt: file.lastModified,
+        data: await file.arrayBuffer(),
+        fileType: file.type,
+        name: file.name,
+        saveMode: 'local',
+        size: file.size,
+      });
+
+      return data.id;
+    } catch (error) {
+      // 提示用户上传失败
+      console.error('upload error:', error);
+    }
+  },
+  useFetchTTSFile: (id) => useSWR(id, fileService.getFile),
+});

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

@@ -0,0 +1,2 @@
+export * from './action';
+export * from './selectors';

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

@@ -0,0 +1,3 @@
+// import { FileStore } from '../../store';
+
+export const ttsFilesSelectors = {};

package/src/store/file/store.ts

@@ -7,14 +7,16 @@ import { isDev } from '@/utils/env';
 
 import { FilesStoreState, initialState } from './initialState';
 import { FileAction, createFileSlice } from './slices/images';
+import { TTSFileAction, createTTSFileSlice } from './slices/tts';
 
 //  ===============  聚合 createStoreFn ============ //
 
-export type FileStore = FilesStoreState & FileAction;
+export type FileStore = FilesStoreState & FileAction & TTSFileAction;
 
 const createStore: StateCreator<FileStore, [['zustand/devtools', never]]> = (...parameters) => ({
   ...initialState,
   ...createFileSlice(...parameters),
+  ...createTTSFileSlice(...parameters),
 });
 
 //  ===============  实装 useStore ============ //