@lobehub/chat 0.114.2 → 0.114.3

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 # Changelog
 
+### [Version 0.114.3](https://github.com/lobehub/lobe-chat/compare/v0.114.2...v0.114.3)
+
+<sup>Released on **2023-12-18**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.114.2](https://github.com/lobehub/lobe-chat/compare/v0.114.1...v0.114.2)
 
 <sup>Released on **2023-12-17**</sup>

package/README.md

@@ -525,8 +525,8 @@ Every bit counts and your one-time donation sparkles in our galaxy of support! Y
 
 <a href="https://opencollective.com/lobehub" target="_blank">
   <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://readme-wizard.lobehub.com/api/sponsor?themeMode=dark">
-    <img  src="https://readme-wizard.lobehub.com/api/sponsor">
+    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/lobehub/.github/blob/main/static/sponsor-dark.png?raw=true">
+    <img  src="https://github.com/lobehub/.github/blob/main/static/sponsor-light.png?raw=true">
   </picture>
 </a>
 

package/README.zh-CN.md

@@ -497,8 +497,8 @@ $ bun run dev
 
 <a href="https://opencollective.com/lobehub" target="_blank">
   <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://readme-wizard.lobehub.com/api/sponsor?themeMode=dark">
-    <img  src="https://readme-wizard.lobehub.com/api/sponsor">
+    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/lobehub/.github/blob/main/static/sponsor-dark.png?raw=true">
+    <img  src="https://github.com/lobehub/.github/blob/main/static/sponsor-light.png?raw=true">
   </picture>
 </a>
 

package/docs/Home.md

@@ -67,6 +67,8 @@ LobeChat is a open-source, extensible ([Function Calling][fc-url]), high-perform
 
  <!-- DOCS LIST -->
 
+---
+
 <details><summary><h4>📝 License</h4></summary>
 
 [![][fossa-license-shield]][fossa-license-url]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.114.2",
+  "version": "0.114.3",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -174,7 +174,8 @@
     "typescript": "^5",
     "unified": "^11",
     "unist-util-visit": "^5",
-    "vitest": "0.34.6"
+    "vitest": "0.34.6",
+    "vitest-canvas-mock": "^0.3.3"
   },
   "publishConfig": {
     "access": "public",

package/src/components/FileList/EditableFileList.tsx

@@ -3,7 +3,7 @@ import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import FileItem from '@/components/FileList/FileItem';
+import ImageFileItem from '@/components/FileList/ImageFileItem';
 
 interface EditableFileListProps {
   alwaysShowClose?: boolean;
@@ -24,7 +24,7 @@ const EditableFileList = memo<EditableFileListProps>(
       >
         <ImageGallery>
           {items.map((i) => (
-            <FileItem alwaysShowClose={alwaysShowClose} editable={editable} id={i} key={i} />
+            <ImageFileItem alwaysShowClose={alwaysShowClose} editable={editable} id={i} key={i} />
           ))}
         </ImageGallery>
       </Flexbox>

package/src/components/FileList/{FileItem.tsx → ImageFileItem.tsx}

@@ -34,7 +34,7 @@ interface FileItemProps {
   onClick?: () => void;
   style?: CSSProperties;
 }
-const FileItem = memo<FileItemProps>(({ editable, id, alwaysShowClose }) => {
+const ImageFileItem = memo<FileItemProps>(({ editable, id, alwaysShowClose }) => {
   const [useFetchFile, removeFile] = useFileStore((s) => [s.useFetchFile, s.removeFile]);
   const IMAGE_SIZE = editable ? MIN_IMAGE_SIZE : '100%';
   const { data, isLoading } = useFetchFile(id);
@@ -74,4 +74,4 @@ const FileItem = memo<FileItemProps>(({ editable, id, alwaysShowClose }) => {
   );
 });
 
-export default FileItem;
+export default ImageFileItem;

package/src/components/FileList/index.tsx

@@ -6,7 +6,7 @@ import { Flexbox } from 'react-layout-kit';
 import { MAX_SIZE_DESKTOP, MAX_SIZE_MOBILE } from '@/components/FileList/style';
 
 import FileGrid from './FileGrid';
-import FileItem from './FileItem';
+import ImageFileItem from './ImageFileItem';
 
 interface FileListProps {
   items: string[];
@@ -44,13 +44,13 @@ const FileList = memo<FileListProps>(({ items }) => {
       <Flexbox gap={gap}>
         <FileGrid col={firstRow.length} gap={gap} max={max}>
           {firstRow.map((i) => (
-            <FileItem id={i} key={i} />
+            <ImageFileItem id={i} key={i} />
           ))}
         </FileGrid>
         {lastRow.length > 0 && (
           <FileGrid col={lastRow.length > 2 ? 3 : lastRow.length} gap={gap} max={max}>
             {lastRow.map((i) => (
-              <FileItem id={i} key={i} />
+              <ImageFileItem id={i} key={i} />
             ))}
           </FileGrid>
         )}

package/src/services/file.ts

@@ -1,14 +1,47 @@
 import { FileModel } from '@/database/models/file';
 import { DB_File } from '@/database/schemas/files';
 import { FilePreview } from '@/types/files';
+import compressImage from '@/utils/compressImage';
 
 class FileService {
+  private isImage(fileType: string) {
+    const imageRegex = /^image\//;
+    return imageRegex.test(fileType);
+  }
   async uploadFile(file: DB_File) {
+    // 跳过图片上传测试
+    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 FileModel.create(file);
   }
 
+  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 fileType = 'image/webp';
+    const base64String = compressImage({
+      img,
+      type: fileType,
+    });
+    const binaryString = atob(base64String.split('base64,')[1]);
+    const uint8Array = Uint8Array.from(binaryString, (char) => char.charCodeAt(0));
+    file.data = uint8Array.buffer;
+
+    return FileModel.create(file);
+  }
+
   async removeFile(id: string) {
     return FileModel.delete(id);
   }

package/src/utils/compressImage.test.ts

@@ -0,0 +1,59 @@
+import compressImage from './compressImage';
+
+const getContextSpy = vi.spyOn(global.HTMLCanvasElement.prototype, 'getContext');
+const drawImageSpy = vi.spyOn(CanvasRenderingContext2D.prototype, 'drawImage');
+
+beforeEach(() => {
+  getContextSpy.mockClear();
+  drawImageSpy.mockClear();
+});
+
+describe('compressImage', () => {
+  it('should compress image with maxWidth', () => {
+    const img = document.createElement('img');
+    img.width = 3000;
+    img.height = 2000;
+
+    const r = compressImage({ img });
+
+    expect(r).toMatch(/^data:image\/webp;base64,/);
+
+    expect(getContextSpy).toBeCalledTimes(1);
+    expect(getContextSpy).toBeCalledWith('2d');
+
+    expect(drawImageSpy).toBeCalledTimes(1);
+    expect(drawImageSpy).toBeCalledWith(img, 0, 0, 3000, 2000, 0, 0, 2160, 1440);
+  });
+
+  it('should compress image with maxHeight', () => {
+    const img = document.createElement('img');
+    img.width = 2000;
+    img.height = 3000;
+
+    const r = compressImage({ img });
+
+    expect(r).toMatch(/^data:image\/webp;base64,/);
+
+    expect(getContextSpy).toBeCalledTimes(1);
+    expect(getContextSpy).toBeCalledWith('2d');
+
+    expect(drawImageSpy).toBeCalledTimes(1);
+    expect(drawImageSpy).toBeCalledWith(img, 0, 0, 2000, 3000, 0, 0, 1440, 2160);
+  });
+
+  it('should not compress image', () => {
+    const img = document.createElement('img');
+    img.width = 2000;
+    img.height = 2000;
+
+    const r = compressImage({ img });
+
+    expect(r).toMatch(/^data:image\/webp;base64,/);
+
+    expect(getContextSpy).toBeCalledTimes(1);
+    expect(getContextSpy).toBeCalledWith('2d');
+
+    expect(drawImageSpy).toBeCalledTimes(1);
+    expect(drawImageSpy).toBeCalledWith(img, 0, 0, 2000, 2000, 0, 0, 2000, 2000);
+  });
+});

package/src/utils/compressImage.ts

@@ -0,0 +1,29 @@
+const compressImage = ({ img, type = 'image/webp' }: { img: HTMLImageElement; type?: string }) => {
+  // 设置最大宽高
+  const maxWidth = 2160;
+  const maxHeight = 2160;
+  let width = img.width;
+  let height = img.height;
+
+  if (width > height && width > maxWidth) {
+    // 如果图片宽度大于高度且大于最大宽度限制
+    width = maxWidth;
+    height = Math.round((maxWidth / img.width) * img.height);
+  } else if (height > width && height > maxHeight) {
+    // 如果图片高度大于宽度且大于最大高度限制
+    height = maxHeight;
+    width = Math.round((maxHeight / img.height) * img.width);
+  }
+
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+
+  canvas.width = width;
+  canvas.height = height;
+
+  ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, width, height);
+
+  return canvas.toDataURL(type);
+};
+
+export default compressImage;

package/tests/setup.ts

@@ -5,6 +5,7 @@ import { theme } from 'antd';
 // refs: https://github.com/dumbmatter/fakeIndexedDB#dexie-and-other-indexeddb-api-wrappers
 import 'fake-indexeddb/auto';
 import React from 'react';
+import 'vitest-canvas-mock';
 
 // remove antd hash on test
 theme.defaultConfig.hashed = false;

package/vitest.config.ts

@@ -16,6 +16,10 @@ export default defineConfig({
       provider: 'v8',
       reporter: ['text', 'json', 'lcov', 'text-summary'],
     },
+    deps: {
+      inline: ['vitest-canvas-mock'],
+    },
+    // threads: false,
     environment: 'jsdom',
     globals: true,
     setupFiles: './tests/setup.ts',