@lobehub/chat 1.22.14 → 1.22.15

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.22.15](https://github.com/lobehub/lobe-chat/compare/v1.22.14...v1.22.15)
+
+<sup>Released on **2024-10-21**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Update format utils and shared layout.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Update format utils and shared layout, closes [#4431](https://github.com/lobehub/lobe-chat/issues/4431) ([56ed073](https://github.com/lobehub/lobe-chat/commit/56ed073))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.22.14](https://github.com/lobehub/lobe-chat/compare/v1.22.13...v1.22.14)
 
 <sup>Released on **2024-10-20**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.22.14",
+  "version": "1.22.15",
   "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/components/server/MobileNavLayout.tsx

@@ -11,12 +11,13 @@ const MobileContentLayout = ({
   withNav,
   style,
   header,
+  id = 'lobe-mobile-scroll-container',
   ...rest
 }: MobileContentLayoutProps) => {
   const content = (
     <Flexbox
       height="100%"
-      id={'lobe-mobile-scroll-container'}
+      id={id}
       style={{
         overflowX: 'hidden',
         overflowY: 'auto',

package/src/features/Setting/SettingContainer.tsx

@@ -2,30 +2,41 @@
 
 import { useResponsive } from 'antd-style';
 import { PropsWithChildren, ReactNode, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
-interface SettingContainerProps {
+interface SettingContainerProps extends FlexboxProps {
   addonAfter?: ReactNode;
   addonBefore?: ReactNode;
-  fullWidth?: boolean;
+
+  maxWidth?: number;
 }
 const SettingContainer = memo<PropsWithChildren<SettingContainerProps>>(
-  ({ children, addonAfter, addonBefore, fullWidth }) => {
+  ({
+    id = 'lobe-desktop-scroll-container',
+    maxWidth = 1024,
+    children,
+    addonAfter,
+    addonBefore,
+    style,
+    ...rest
+  }) => {
     const { mobile = false } = useResponsive();
     return (
       <Flexbox
         align={'center'}
         height={'100%'}
+        id={id}
         paddingBlock={mobile ? undefined : 32}
-        style={{ overflowX: 'hidden', overflowY: 'auto' }}
+        style={{ overflowX: 'hidden', overflowY: 'auto', ...style }}
         width={'100%'}
+        {...rest}
       >
         {addonBefore}
         <Flexbox
           gap={64}
           paddingInline={mobile ? undefined : 24}
           style={{
-            maxWidth: fullWidth ? undefined : 1024,
+            maxWidth,
           }}
           width={'100%'}
         >

package/src/utils/format.test.ts

@@ -1,6 +1,11 @@
+import dayjs from 'dayjs';
 import { describe, expect, it } from 'vitest';
 
+import { CNY_TO_USD } from '@/const/discover';
+
 import {
+  formatDate,
+  formatIntergerNumber,
   formatNumber,
   formatPrice,
   formatPriceByCurrency,
@@ -37,6 +42,15 @@ describe('format', () => {
       expect(formatSize(1023)).toBe('1.0 KB');
       expect(formatSize(1073741823)).toBe('1024.0 MB');
     });
+
+    it('should handle undefined input', () => {
+      expect(formatSize(undefined as any)).toBe('--');
+    });
+
+    it('should use custom fraction digits', () => {
+      expect(formatSize(1536, 2)).toBe('1.50 KB');
+      expect(formatSize(1572864, 3)).toBe('1.500 MB');
+    });
   });
 
   describe('formatSpeed', () => {
@@ -60,6 +74,14 @@ describe('format', () => {
       expect(formatSpeed(1000 * 1024)).toBe('1000.00 KB/s');
       expect(formatSpeed(1000.01 * 1024)).toBe('0.98 MB/s');
     });
+
+    it('should handle undefined input', () => {
+      expect(formatSpeed(undefined as any)).toBe('--');
+    });
+
+    it('should use custom fraction digits', () => {
+      expect(formatSpeed(1024, 3)).toBe('1.000 KB/s');
+    });
   });
 
   describe('formatTime', () => {
@@ -88,12 +110,16 @@ describe('format', () => {
       expect(formatTime(59.99)).toBe('60.0 s');
       expect(formatTime(3599.99)).toBe('60.0 min');
     });
+    it('should handle non-number inputs', () => {
+      expect(formatTime('not a number' as any)).toBe('not a number');
+      expect(formatTime(undefined as any)).toBe('--');
+    });
   });
 
   describe('formatShortenNumber', () => {
     it('should return the input if it is not a number', () => {
       expect(formatShortenNumber('not a number')).toBe('not a number');
-      expect(formatShortenNumber(null)).toBe(null);
+      expect(formatShortenNumber(null)).toBe('--');
     });
 
     it('should format numbers less than 10,000 correctly', () => {
@@ -125,7 +151,22 @@ describe('format', () => {
     it('should handle non-number inputs', () => {
       expect(formatNumber('1000')).toBe('1,000');
       expect(formatNumber('not a number')).toBe(Number.NaN.toString());
-      expect(formatNumber(null)).toBe(undefined);
+      expect(formatNumber(0)).toBe('0');
+      expect(formatNumber(0, 1)).toBe('0.0');
+      expect(formatNumber(null)).toBe('--');
+    });
+
+    it('should handle fraction digits correctly', () => {
+      expect(formatNumber(1234.5678, 2)).toBe('1,234.57');
+      expect(formatNumber(1234.5678, 3)).toBe('1,234.568');
+    });
+  });
+
+  describe('formatIntergerNumber', () => {
+    it('should format numbers with commas correctly', () => {
+      expect(formatIntergerNumber(1000.12)).toBe('1,000');
+      expect(formatIntergerNumber(0)).toBe('0');
+      expect(formatIntergerNumber(null)).toBe('--');
     });
   });
 
@@ -150,6 +191,12 @@ describe('format', () => {
       expect(formatPriceByCurrency(1000, 'CNY')).toBe('140.06');
       expect(formatPriceByCurrency(6500, 'CNY')).toBe('910.36');
     });
+
+    it('should use the correct CNY_TO_USD conversion rate', () => {
+      const price = 1000;
+      const expectedCNY = formatPrice(price / CNY_TO_USD);
+      expect(formatPriceByCurrency(price, 'CNY')).toBe(expectedCNY);
+    });
   });
 
   describe('formatTokenNumber', () => {
@@ -192,4 +239,21 @@ describe('format', () => {
       expect(formatTokenNumber(2097152)).toBe('2M'); // Gemini Pro
     });
   });
+
+  describe('formatDate', () => {
+    it('should format date correctly', () => {
+      const date = new Date('2023-05-15T12:00:00Z');
+      expect(formatDate(date)).toBe('2023-05-15');
+    });
+
+    it('should handle undefined input', () => {
+      expect(formatDate(undefined)).toBe('--');
+    });
+
+    it('should use dayjs for formatting', () => {
+      const date = new Date('2023-05-15T12:00:00Z');
+      const expectedFormat = dayjs(date).format('YYYY-MM-DD');
+      expect(formatDate(date)).toBe(expectedFormat);
+    });
+  });
 });

package/src/utils/format.ts

@@ -1,10 +1,13 @@
+import dayjs from 'dayjs';
 import { isNumber } from 'lodash-es';
 import numeral from 'numeral';
 
 import { CNY_TO_USD } from '@/const/discover';
 import { ModelPriceCurrency } from '@/types/llm';
 
-export const formatSize = (bytes: number, fractionDigits = 1): string => {
+export const formatSize = (bytes: number, fractionDigits: number = 1): string => {
+  if (!bytes && bytes !== 0) return '--';
+
   const kbSize = bytes / 1024;
   if (kbSize < 1024) {
     return `${kbSize.toFixed(fractionDigits)} KB`;
@@ -21,6 +24,8 @@ export const formatSize = (bytes: number, fractionDigits = 1): string => {
  * format speed from Byte number to string like KB/s, MB/s or GB/s
  */
 export const formatSpeed = (byte: number, fractionDigits = 2) => {
+  if (!byte && byte !== 0) return '--';
+
   let word = '';
 
   // Byte
@@ -44,6 +49,9 @@ export const formatSpeed = (byte: number, fractionDigits = 2) => {
 };
 
 export const formatTime = (timeInSeconds: number): string => {
+  if (!timeInSeconds && timeInSeconds !== 0) return '--';
+  if (!isNumber(timeInSeconds)) return timeInSeconds;
+
   if (timeInSeconds < 60) {
     return `${timeInSeconds.toFixed(1)} s`;
   } else if (timeInSeconds < 3600) {
@@ -54,7 +62,9 @@ export const formatTime = (timeInSeconds: number): string => {
 };
 
 export const formatShortenNumber = (num: any) => {
+  if (!num && num !== 0) return '--';
   if (!isNumber(num)) return num;
+
   // 使用Intl.NumberFormat来添加千分号
   const formattedWithComma = new Intl.NumberFormat('en-US').format(num);
 
@@ -70,16 +80,23 @@ export const formatShortenNumber = (num: any) => {
   }
 };
 
-/**
- * format number with comma
- * @param num
- */
-export const formatNumber = (num: any) => {
-  if (!num) return;
-  return new Intl.NumberFormat('en-US').format(num);
+export const formatNumber = (num: any, fractionDigits?: number) => {
+  if (!num && num !== 0) return '--';
+
+  if (!fractionDigits) return new Intl.NumberFormat('en-US').format(num);
+  const [a, b] = num.toFixed(fractionDigits).split('.');
+  return `${numeral(a).format('0,0')}.${b}`;
+};
+
+export const formatIntergerNumber = (num: any) => {
+  if (!num && num !== 0) return '--';
+
+  return numeral(num).format('0,0');
 };
 
 export const formatTokenNumber = (num: number): string => {
+  if (!num && num !== 0) return '--';
+
   if (num > 0 && num < 1024) return '1K';
 
   let kiloToken = Math.floor(num / 1024);
@@ -90,8 +107,10 @@ export const formatTokenNumber = (num: number): string => {
   return kiloToken < 1000 ? `${kiloToken}K` : `${Math.floor(kiloToken / 1000)}M`;
 };
 
-export const formatPrice = (price: number) => {
-  const [a, b] = price.toFixed(2).split('.');
+export const formatPrice = (price: number, fractionDigits: number = 2) => {
+  if (!price && price !== 0) return '--';
+
+  const [a, b] = price.toFixed(fractionDigits).split('.');
   return `${numeral(a).format('0,0')}.${b}`;
 };
 
@@ -101,3 +120,9 @@ export const formatPriceByCurrency = (price: number, currency?: ModelPriceCurren
   }
   return formatPrice(price);
 };
+
+export const formatDate = (date?: Date) => {
+  if (!date) return '--';
+
+  return dayjs(date).format('YYYY-MM-DD');
+};