@lobehub/chat 1.1.10 → 1.1.11

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.1.11](https://github.com/lobehub/lobe-chat/compare/v1.1.10...v1.1.11)
+
+<sup>Released on **2024-06-25**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor format utils.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor format utils, closes [#3034](https://github.com/lobehub/lobe-chat/issues/3034) ([8e54ca0](https://github.com/lobehub/lobe-chat/commit/8e54ca0))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.1.10](https://github.com/lobehub/lobe-chat/compare/v1.1.9...v1.1.10)
 
 <sup>Released on **2024-06-24**</sup>

package/README.md

@@ -39,7 +39,7 @@ One-click **FREE** deployment of your private OpenAI ChatGPT/Claude/Gemini/Groq/
 
 <sup>Pioneering the new age of thinking and creating. Built for you, the Super Individual.</sup>
 
-[![][github-trending-shield]][github-trending-url]
+[![][github-trending-shield]][github-trending-url] <a href="https://hellogithub.com/repository/39701baf5a734cb894ec812248a5655a" target="_blank"><img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=39701baf5a734cb894ec812248a5655a&claim_uid=HxYvFN34htJzGCD" alt="Featured｜HelloGitHub" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
 [![][image-overview]][vercel-link]
 

package/README.zh-CN.md

@@ -39,6 +39,7 @@
 <sup>探索私人生产力的未来。在个体崛起的时代中为你打造.</sup>
 
 [![][github-trending-shield]][github-trending-url]
+[![][github-hello-shield]][github-hello-url]
 
 [![][image-overview]][vercel-link]
 
@@ -752,6 +753,8 @@ This project is [Apache 2.0](./LICENSE) licensed.
 [github-contributors-shield]: https://img.shields.io/github/contributors/lobehub/lobe-chat?color=c4f042&labelColor=black&style=flat-square
 [github-forks-link]: https://github.com/lobehub/lobe-chat/network/members
 [github-forks-shield]: https://img.shields.io/github/forks/lobehub/lobe-chat?color=8ae8ff&labelColor=black&style=flat-square
+[github-hello-shield]: https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=39701baf5a734cb894ec812248a5655a&claim_uid=HxYvFN34htJzGCD&theme=dark&theme=neutral&theme=dark&theme=neutral
+[github-hello-url]: https://hellogithub.com/repository/39701baf5a734cb894ec812248a5655a
 [github-issues-link]: https://github.com/lobehub/lobe-chat/issues
 [github-issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-chat?color=ff80eb&labelColor=black&style=flat-square
 [github-license-link]: https://github.com/lobehub/lobe-chat/blob/main/LICENSE

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "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",

package/src/features/Conversation/Error/OllamaBizError/InvalidOllamaModel/index.tsx

@@ -8,9 +8,10 @@ import useSWR from 'swr';
 
 import { ollamaService } from '@/services/ollama';
 import { useChatStore } from '@/store/chat';
+import { formatSize } from '@/utils/format';
 
 import { ErrorActionContainer, FormAction } from '../../style';
-import { formatSize, useDownloadMonitor } from './useDownloadMonitor';
+import { useDownloadMonitor } from './useDownloadMonitor';
 
 interface OllamaModelFormProps {
   id: string;

package/src/features/Conversation/Error/OllamaBizError/InvalidOllamaModel/useDownloadMonitor.ts

@@ -1,23 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-import { formatTime } from '@/utils/speed';
-
-export const formatSize = (bytes: number): string => {
-  const kbSize = bytes / 1024;
-  if (kbSize < 1024) {
-    return `${kbSize.toFixed(1)} KB`;
-  } else if (kbSize < 1_048_576) {
-    const mbSize = kbSize / 1024;
-    return `${mbSize.toFixed(1)} MB`;
-  } else {
-    const gbSize = kbSize / 1_048_576;
-    return `${gbSize.toFixed(1)} GB`;
-  }
-};
-
-const formatSpeed = (speed: number): string => {
-  return `${formatSize(speed)}/s`;
-};
+import { formatSpeed, formatTime } from '@/utils/format';
 
 export const useDownloadMonitor = (totalSize: number, completedSize: number) => {
   const [downloadSpeed, setDownloadSpeed] = useState<string>('0 KB/s');

package/src/features/DataImporter/FileUploading.tsx

@@ -4,7 +4,7 @@ import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { formatSpeed, formatTime } from '@/utils/speed';
+import { formatSpeed, formatTime } from '@/utils/format';
 
 import DataLoading from './Loading';
 
@@ -40,7 +40,7 @@ export const FileUploading = memo<FileUploadingProps>(({ progress = 0, speed = 0
               {t('importModal.uploading.restTime')}: {restTime ? formatTime(restTime) : '-'}
             </span>
             <span>
-              {t('importModal.uploading.speed')}: {formatSpeed(speed)}
+              {t('importModal.uploading.speed')}: {formatSpeed(speed * 1024)}
             </span>
           </Flexbox>
         </Flexbox>

package/src/utils/format.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest';
+
+import { formatSize, formatSpeed, formatTime } from './format';
+
+describe('formatSize', () => {
+  it('should format bytes to KB correctly', () => {
+    expect(formatSize(1024)).toBe('1.0 KB');
+    expect(formatSize(2048)).toBe('2.0 KB');
+    expect(formatSize(1536)).toBe('1.5 KB');
+  });
+
+  it('should format bytes to MB correctly', () => {
+    expect(formatSize(1048576)).toBe('1.0 MB');
+    expect(formatSize(2097152)).toBe('2.0 MB');
+    expect(formatSize(1572864)).toBe('1.5 MB');
+  });
+
+  it('should format bytes to GB correctly', () => {
+    expect(formatSize(1073741824)).toBe('1.0 GB');
+    expect(formatSize(2147483648)).toBe('2.0 GB');
+    expect(formatSize(1610612736)).toBe('1.5 GB');
+  });
+
+  it('should handle edge cases', () => {
+    expect(formatSize(0)).toBe('0.0 KB');
+    expect(formatSize(1023)).toBe('1.0 KB');
+    expect(formatSize(1073741823)).toBe('1024.0 MB');
+  });
+});
+
+describe('formatSpeed', () => {
+  it('should format speed in KB/s correctly', () => {
+    expect(formatSpeed(10 * 1024)).toBe('10.00 KB/s');
+    expect(formatSpeed(999.99 * 1024)).toBe('999.99 KB/s');
+  });
+
+  it('should format speed in MB/s correctly', () => {
+    expect(formatSpeed(1024 * 1024)).toBe('1.00 MB/s');
+    expect(formatSpeed(10240 * 1024)).toBe('10.00 MB/s');
+  });
+
+  it('should format speed in GB/s correctly', () => {
+    expect(formatSpeed(1048576 * 1024)).toBe('1.00 GB/s');
+    expect(formatSpeed(10485760 * 1024)).toBe('10.00 GB/s');
+  });
+
+  it('should handle edge cases', () => {
+    expect(formatSpeed(0)).toBe('0.00 Byte/s');
+    expect(formatSpeed(1000 * 1024)).toBe('1000.00 KB/s');
+    expect(formatSpeed(1000.01 * 1024)).toBe('0.98 MB/s');
+  });
+});
+
+describe('formatTime', () => {
+  it('should format time in seconds correctly', () => {
+    expect(formatTime(30)).toBe('30.0 s');
+    expect(formatTime(59.9)).toBe('59.9 s');
+  });
+
+  it('should format time in minutes correctly', () => {
+    expect(formatTime(60)).toBe('1.0 min');
+    expect(formatTime(3599)).toBe('60.0 min');
+  });
+
+  it('should format time in hours correctly', () => {
+    expect(formatTime(3600)).toBe('1.00 h');
+    expect(formatTime(7200)).toBe('2.00 h');
+  });
+
+  it('should handle edge cases', () => {
+    expect(formatTime(0)).toBe('0.0 s');
+    expect(formatTime(59.99)).toBe('60.0 s');
+    expect(formatTime(3599.99)).toBe('60.0 min');
+  });
+});

package/src/utils/format.ts

@@ -0,0 +1,48 @@
+export const formatSize = (bytes: number, fractionDigits = 1): string => {
+  const kbSize = bytes / 1024;
+  if (kbSize < 1024) {
+    return `${kbSize.toFixed(fractionDigits)} KB`;
+  } else if (kbSize < 1_048_576) {
+    const mbSize = kbSize / 1024;
+    return `${mbSize.toFixed(fractionDigits)} MB`;
+  } else {
+    const gbSize = kbSize / 1_048_576;
+    return `${gbSize.toFixed(fractionDigits)} GB`;
+  }
+};
+
+/**
+ * format speed from Byte number to string like KB/s, MB/s or GB/s
+ */
+export const formatSpeed = (byte: number, fractionDigits = 2) => {
+  let word = '';
+
+  // Byte
+  if (byte <= 1000) {
+    word = byte.toFixed(fractionDigits) + ' Byte/s';
+  }
+  // KB
+  else if (byte / 1024 <= 1000) {
+    word = (byte / 1024).toFixed(fractionDigits) + ' KB/s';
+  }
+  // MB
+  else if (byte / 1024 / 1024 <= 1000) {
+    word = (byte / 1024 / 1024).toFixed(fractionDigits) + ' MB/s';
+  }
+  // GB
+  else {
+    word = (byte / 1024 / 1024 / 1024).toFixed(fractionDigits) + ' GB/s';
+  }
+
+  return word;
+};
+
+export const formatTime = (timeInSeconds: number): string => {
+  if (timeInSeconds < 60) {
+    return `${timeInSeconds.toFixed(1)} s`;
+  } else if (timeInSeconds < 3600) {
+    return `${(timeInSeconds / 60).toFixed(1)} min`;
+  } else {
+    return `${(timeInSeconds / 3600).toFixed(2)} h`;
+  }
+};

package/src/hooks/useDownloadSpeed.ts

@@ -1,50 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { formatSpeed } from '@/utils/speed';
-
-// 用于测试的文件路径和尺寸
-const targetFile = { size: 15.4, url: '/favicon-32x32.ico' };
-
-const testDownloadSpeed = (url: string, size: number) =>
-  new Promise<{ costTime: number; speed: number }>((resolve, reject) => {
-    const img = new Image();
-
-    img.src = `${url}?_t=${Math.random()}`; // 加个时间戳以避免浏览器只发起一次请求
-
-    const startTime = Date.now();
-
-    // eslint-disable-next-line unicorn/prefer-add-event-listener
-    img.onload = function () {
-      const fileSize = size; // 单位是 kb
-      const endTime = Date.now();
-      const costTime = endTime - startTime;
-      const speed = (fileSize / (endTime - startTime)) * 1000; // 单位是 kb/s
-      resolve({ costTime, speed });
-    };
-
-    // eslint-disable-next-line unicorn/prefer-add-event-listener
-    img.onerror = reject;
-  });
-
-/**
- * return the download speed of the network
- */
-export const useDownloadSpeed = () => {
-  const [speed, setSpeed] = useState('-');
-
-  useEffect(() => {
-    const handleSpeed = async () => {
-      let { speed } = await testDownloadSpeed(targetFile.url, targetFile.size);
-
-      setSpeed(formatSpeed(speed));
-    };
-
-    const interval = setInterval(handleSpeed, 3000);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  return speed;
-};

package/src/utils/speed.ts

@@ -1,32 +0,0 @@
-/**
- * format speed from KB number to string like KB/s, MB/s or GB/s
- * @param speed
- */
-export const formatSpeed = (speed: number) => {
-  let word = '';
-
-  // KB
-  if (speed <= 1000) {
-    word = speed.toFixed(2) + 'KB/s';
-  }
-  // MB
-  else if (speed / 1024 <= 1000) {
-    word = (speed / 1024).toFixed(2) + 'MB/s';
-  }
-  // GB
-  else {
-    word = (speed / 1024 / 1024).toFixed(2) + 'GB/s';
-  }
-
-  return word;
-};
-
-export const formatTime = (timeInSeconds: number): string => {
-  if (timeInSeconds < 60) {
-    return `${timeInSeconds.toFixed(1)} s`;
-  } else if (timeInSeconds < 3600) {
-    return `${(timeInSeconds / 60).toFixed(1)} min`;
-  } else {
-    return `${(timeInSeconds / 3600).toFixed(2)} h`;
-  }
-};