@lobehub/chat 1.114.5 → 1.115.0

package/packages/utils/src/number.test.ts

@@ -1,6 +1,8 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { MAX_SEED, calculateThumbnailDimensions, generateUniqueSeeds } from './number';
+import { MAX_SEED } from '@/const/image';
+
+import { calculateThumbnailDimensions, generateUniqueSeeds } from './number';
 
 describe('number utilities', () => {
   describe('MAX_SEED constant', () => {

package/packages/utils/src/number.ts

@@ -1,8 +1,7 @@
 import prand from 'pure-rand';
 
-import { IMAGE_GENERATION_CONFIG } from '@/const/imageGeneration';
+import { IMAGE_GENERATION_CONFIG, MAX_SEED } from '@/const/image';
 
-export const MAX_SEED = 2 ** 31 - 1;
 export function generateUniqueSeeds(seedCount: number): number[] {
   // Use current timestamp as the initial seed
   const initialSeed = Date.now();

package/src/app/[variants]/(main)/files/[id]/page.tsx

@@ -39,5 +39,3 @@ const FilePage = async (props: PagePropsWithId) => {
 };
 
 export default FilePage;
-
-export const dynamic = 'force-static';

package/src/app/[variants]/(main)/image/@menu/components/SeedNumberInput/index.tsx

@@ -6,7 +6,7 @@ import { CSSProperties, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { MAX_SEED } from '@/libs/standard-parameters/index';
+import { MAX_SEED } from '@/const/image';
 import { generateUniqueSeeds } from '@/utils/number';
 
 export interface SeedNumberInputProps {

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/DimensionControlGroup.tsx

@@ -15,7 +15,6 @@ const styles = {
     width: '100%',
   },
   label: {
-    fontSize: 12,
     fontWeight: 500,
   },
 } as const;

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/ImageUpload.tsx

@@ -12,14 +12,20 @@ import { useFileStore } from '@/store/file';
 import { FileUploadStatus } from '@/types/files/upload';
 
 import { useDragAndDrop } from '../hooks/useDragAndDrop';
+import { useUploadFilesValidation } from '../hooks/useUploadFilesValidation';
 import { useConfigPanelStyles } from '../style';
 
 // ======== Business Types ======== //
 
 export interface ImageUploadProps {
-  // Callback when URL changes
+  // Callback when URL changes - supports both old API (string) and new API (object with dimensions)
   className?: string; // Image URL
-  onChange?: (url?: string) => void;
+  maxFileSize?: number;
+  onChange?: (
+    data?:
+      | string // Old API: just URL
+      | { dimensions?: { height: number, width: number; }, url: string; }, // New API: URL with dimensions
+  ) => void;
   style?: React.CSSProperties;
   value?: string | null;
 }
@@ -414,212 +420,227 @@ SuccessDisplay.displayName = 'SuccessDisplay';
 
 // ======== Main Component ======== //
 
-const ImageUpload: FC<ImageUploadProps> = memo(({ value, onChange, style, className }) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const uploadWithProgress = useFileStore((s) => s.uploadWithProgress);
-  const [uploadState, setUploadState] = useState<UploadState | null>(null);
-  const { t } = useTranslation('components');
-  const { message } = App.useApp();
-
-  // Cleanup blob URLs to prevent memory leaks
-  useEffect(() => {
-    return () => {
-      if (uploadState?.previewUrl && isLocalBlobUrl(uploadState.previewUrl)) {
-        URL.revokeObjectURL(uploadState.previewUrl);
-      }
+const ImageUpload: FC<ImageUploadProps> = memo(
+  ({ value, onChange, style, className, maxFileSize }) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const uploadWithProgress = useFileStore((s) => s.uploadWithProgress);
+    const [uploadState, setUploadState] = useState<UploadState | null>(null);
+    const { t } = useTranslation('components');
+    const { message } = App.useApp();
+    const { validateFiles } = useUploadFilesValidation(undefined, maxFileSize);
+
+    // Cleanup blob URLs to prevent memory leaks
+    useEffect(() => {
+      return () => {
+        if (uploadState?.previewUrl && isLocalBlobUrl(uploadState.previewUrl)) {
+          URL.revokeObjectURL(uploadState.previewUrl);
+        }
+      };
+    }, [uploadState?.previewUrl]);
+
+    const handleFileSelect = () => {
+      inputRef.current?.click();
     };
-  }, [uploadState?.previewUrl]);
 
-  const handleFileSelect = () => {
-    inputRef.current?.click();
-  };
+    const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file) return;
 
-  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
+      // Validate file using unified validation hook
+      if (!validateFiles([file])) return;
 
-    // Create preview URL
-    const previewUrl = URL.createObjectURL(file);
+      // Create preview URL
+      const previewUrl = URL.createObjectURL(file);
 
-    // Set initial upload state
-    setUploadState({
-      previewUrl,
-      progress: 0,
-      status: 'pending',
-    });
-
-    try {
-      // Start upload
-      const result = await uploadWithProgress({
-        file,
-        onStatusUpdate: (updateData) => {
-          if (updateData.type === 'updateFile') {
-            setUploadState((prev) => {
-              if (!prev) return null;
-
-              const fileStatus = updateData.value.status;
-              if (!fileStatus) return prev;
-
-              return {
-                ...prev,
-                error: fileStatus === 'error' ? 'Upload failed' : undefined,
-                progress: updateData.value.uploadState?.progress || 0,
-                status: fileStatus,
-              };
-            });
-          } else if (updateData.type === 'removeFile') {
-            // Handle file removal
-            setUploadState(null);
-          }
-        },
-        skipCheckFileType: true,
+      // Set initial upload state
+      setUploadState({
+        previewUrl,
+        progress: 0,
+        status: 'pending',
       });
 
-      if (result?.url) {
-        // Upload successful
-        onChange?.(result.url);
-      }
-    } catch {
-      // Upload failed
-      setUploadState((prev) =>
-        prev
-          ? {
-              ...prev,
-              error: 'Upload failed',
-              status: 'error',
+      try {
+        // Start upload
+        const result = await uploadWithProgress({
+          file,
+          onStatusUpdate: (updateData) => {
+            if (updateData.type === 'updateFile') {
+              setUploadState((prev) => {
+                if (!prev) return null;
+
+                const fileStatus = updateData.value.status;
+                if (!fileStatus) return prev;
+
+                return {
+                  ...prev,
+                  error: fileStatus === 'error' ? 'Upload failed' : undefined,
+                  progress: updateData.value.uploadState?.progress || 0,
+                  status: fileStatus,
+                };
+              });
+            } else if (updateData.type === 'removeFile') {
+              // Handle file removal
+              setUploadState(null);
             }
-          : null,
-      );
-    } finally {
-      // Cleanup
-      if (isLocalBlobUrl(previewUrl)) {
-        URL.revokeObjectURL(previewUrl);
+          },
+          skipCheckFileType: true,
+        });
+
+        if (result?.url) {
+          // Upload successful - pass dimensions if available
+          const callbackData = result.dimensions
+            ? { dimensions: result.dimensions, url: result.url }
+            : result.url;
+          onChange?.(callbackData);
+        }
+      } catch {
+        // Upload failed
+        setUploadState((prev) =>
+          prev
+            ? {
+                ...prev,
+                error: 'Upload failed',
+                status: 'error',
+              }
+            : null,
+        );
+      } finally {
+        // Cleanup
+        if (isLocalBlobUrl(previewUrl)) {
+          URL.revokeObjectURL(previewUrl);
+        }
+
+        // Clear upload state after a delay to show completion
+        setTimeout(() => {
+          setUploadState(null);
+        }, 1000);
       }
+    };
 
-      // Clear upload state after a delay to show completion
-      setTimeout(() => {
-        setUploadState(null);
-      }, 1000);
-    }
-  };
-
-  const handleDelete = () => {
-    onChange?.(undefined);
-  };
-
-  const handleDrop = async (files: File[]) => {
-    // Show warning if multiple files detected
-    if (files.length > 1) {
-      message.warning(t('ImageUpload.actions.dropMultipleFiles'));
-    }
-
-    // Take the first image file
-    const file = files[0];
+    const handleDelete = () => {
+      onChange?.(undefined);
+    };
 
-    // Create preview URL
-    const previewUrl = URL.createObjectURL(file);
+    const handleDrop = async (files: File[]) => {
+      // Show warning if multiple files detected
+      if (files.length > 1) {
+        message.warning(t('ImageUpload.actions.dropMultipleFiles'));
+      }
 
-    // Set initial upload state
-    setUploadState({
-      previewUrl,
-      progress: 0,
-      status: 'pending',
-    });
+      // Take the first image file
+      const file = files[0];
 
-    try {
-      // Start upload using the same logic as handleFileChange
-      const result = await uploadWithProgress({
-        file,
-        onStatusUpdate: (updateData) => {
-          if (updateData.type === 'updateFile') {
-            setUploadState((prev) => {
-              if (!prev) return null;
+      // Validate file using unified validation hook
+      if (!validateFiles([file])) return;
 
-              const fileStatus = updateData.value.status;
-              if (!fileStatus) return prev;
+      // Create preview URL
+      const previewUrl = URL.createObjectURL(file);
 
-              return {
-                ...prev,
-                error: fileStatus === 'error' ? 'Upload failed' : undefined,
-                progress: updateData.value.uploadState?.progress || 0,
-                status: fileStatus,
-              };
-            });
-          } else if (updateData.type === 'removeFile') {
-            setUploadState(null);
-          }
-        },
-        skipCheckFileType: true,
+      // Set initial upload state
+      setUploadState({
+        previewUrl,
+        progress: 0,
+        status: 'pending',
       });
 
-      if (result?.url) {
-        // Upload successful
-        onChange?.(result.url);
-      }
-    } catch {
-      // Upload failed
-      setUploadState((prev) =>
-        prev
-          ? {
-              ...prev,
-              error: 'Upload failed',
-              status: 'error',
+      try {
+        // Start upload using the same logic as handleFileChange
+        const result = await uploadWithProgress({
+          file,
+          onStatusUpdate: (updateData) => {
+            if (updateData.type === 'updateFile') {
+              setUploadState((prev) => {
+                if (!prev) return null;
+
+                const fileStatus = updateData.value.status;
+                if (!fileStatus) return prev;
+
+                return {
+                  ...prev,
+                  error: fileStatus === 'error' ? 'Upload failed' : undefined,
+                  progress: updateData.value.uploadState?.progress || 0,
+                  status: fileStatus,
+                };
+              });
+            } else if (updateData.type === 'removeFile') {
+              setUploadState(null);
             }
-          : null,
-      );
-    } finally {
-      // Cleanup
-      if (isLocalBlobUrl(previewUrl)) {
-        URL.revokeObjectURL(previewUrl);
+          },
+          skipCheckFileType: true,
+        });
+
+        if (result?.url) {
+          // Upload successful - pass dimensions if available
+          const callbackData = result.dimensions
+            ? { dimensions: result.dimensions, url: result.url }
+            : result.url;
+          onChange?.(callbackData);
+        }
+      } catch {
+        // Upload failed
+        setUploadState((prev) =>
+          prev
+            ? {
+                ...prev,
+                error: 'Upload failed',
+                status: 'error',
+              }
+            : null,
+        );
+      } finally {
+        // Cleanup
+        if (isLocalBlobUrl(previewUrl)) {
+          URL.revokeObjectURL(previewUrl);
+        }
+
+        // Clear upload state after a delay to show completion
+        setTimeout(() => {
+          setUploadState(null);
+        }, 1000);
       }
+    };
 
-      // Clear upload state after a delay to show completion
-      setTimeout(() => {
-        setUploadState(null);
-      }, 1000);
-    }
-  };
-
-  const { isDragOver, dragHandlers } = useDragAndDrop({
-    accept: 'image/*',
-    onDrop: handleDrop,
-  });
-
-  // Determine which view to render
-  const hasImage = Boolean(value);
-  const isUploading = Boolean(uploadState);
+    const { isDragOver, dragHandlers } = useDragAndDrop({
+      accept: 'image/*',
+      onDrop: handleDrop,
+    });
 
-  return (
-    <div className={className} {...dragHandlers} style={style}>
-      {/* Hidden file input */}
-      <input
-        accept="image/*"
-        onChange={handleFileChange}
-        onClick={(e) => {
-          // Reset value to allow re-selecting the same file
-          e.currentTarget.value = '';
-        }}
-        ref={inputRef}
-        style={{ display: 'none' }}
-        type="file"
-      />
+    // Determine which view to render
+    const hasImage = Boolean(value);
+    const isUploading = Boolean(uploadState);
 
-      {/* Conditional rendering based on state */}
-      {isUploading && uploadState ? (
-        <UploadingDisplay previewUrl={uploadState.previewUrl} progress={uploadState.progress} />
-      ) : hasImage ? (
-        <SuccessDisplay
-          imageUrl={value!}
-          isDragOver={isDragOver}
-          onChangeImage={handleFileSelect}
-          onDelete={handleDelete}
+    return (
+      <div className={className} {...dragHandlers} style={style}>
+        {/* Hidden file input */}
+        <input
+          accept="image/*"
+          onChange={handleFileChange}
+          onClick={(e) => {
+            // Reset value to allow re-selecting the same file
+            e.currentTarget.value = '';
+          }}
+          ref={inputRef}
+          style={{ display: 'none' }}
+          type="file"
         />
-      ) : (
-        <Placeholder isDragOver={isDragOver} onClick={handleFileSelect} />
-      )}
-    </div>
-  );
-});
+
+        {/* Conditional rendering based on state */}
+        {isUploading && uploadState ? (
+          <UploadingDisplay previewUrl={uploadState.previewUrl} progress={uploadState.progress} />
+        ) : hasImage ? (
+          <SuccessDisplay
+            imageUrl={value!}
+            isDragOver={isDragOver}
+            onChangeImage={handleFileSelect}
+            onDelete={handleDelete}
+          />
+        ) : (
+          <Placeholder isDragOver={isDragOver} onClick={handleFileSelect} />
+        )}
+      </div>
+    );
+  },
+);
 
 ImageUpload.displayName = 'ImageUpload';
 

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/ImageUrl.tsx

@@ -2,17 +2,29 @@ import { memo } from 'react';
 
 import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
 
+import { useAutoDimensions } from '../hooks/useAutoDimensions';
 import ImageUpload from './ImageUpload';
 
 const ImageUrl = memo(() => {
-  const { value: imageUrl, setValue } = useGenerationConfigParam('imageUrl');
+  const { value: imageUrl, setValue, maxFileSize } = useGenerationConfigParam('imageUrl');
+  const { autoSetDimensions, extractUrlAndDimensions } = useAutoDimensions();
+
+  const handleChange = (
+    data?:
+      | string // Old API: just URL
+      | { dimensions?: { height: number; width: number }; url: string }, // New API: URL with dimensions
+  ) => {
+    const { url, dimensions } = extractUrlAndDimensions(data);
 
-  // Extract the first URL from the array for single image display
-  const handleChange = (url?: string) => {
     setValue(url ?? null);
+
+    // Auto-set dimensions if available
+    if (dimensions) {
+      autoSetDimensions(dimensions);
+    }
   };
 
-  return <ImageUpload onChange={handleChange} value={imageUrl} />;
+  return <ImageUpload maxFileSize={maxFileSize} onChange={handleChange} value={imageUrl} />;
 });
 
 export default ImageUrl;

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/ImageUrlsUpload.tsx

@@ -2,18 +2,67 @@ import { memo } from 'react';
 
 import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
 
+import { useAutoDimensions } from '../hooks/useAutoDimensions';
+import ImageUpload from './ImageUpload';
 import MultiImagesUpload from './MultiImagesUpload';
 
 const ImageUrlsUpload = memo(() => {
-  const { value, setValue } = useGenerationConfigParam('imageUrls');
+  const { value, setValue, maxCount, maxFileSize } = useGenerationConfigParam('imageUrls');
+  const { autoSetDimensions, extractUrlAndDimensions } = useAutoDimensions();
+
+  // When maxCount is 1, use ImageUpload for single image upload
+  if (maxCount === 1) {
+    const handleSingleChange = (
+      data?:
+        | string // Old API: just URL
+        | { dimensions?: { height: number; width: number }; url: string }, // New API: URL with dimensions
+    ) => {
+      const { url, dimensions } = extractUrlAndDimensions(data);
+
+      setValue(url ? [url] : []);
+
+      // Auto-set dimensions if available
+      if (dimensions) {
+        autoSetDimensions(dimensions);
+      }
+    };
+
+    return (
+      <ImageUpload
+        maxFileSize={maxFileSize}
+        onChange={handleSingleChange}
+        value={value?.[0] ?? null}
+      />
+    );
+  }
+
+  // Otherwise use MultiImagesUpload for multiple images
+  const handleChange = (
+    data:
+      | string[] // Old API: just URLs
+      | { dimensions?: { height: number; width: number }; urls: string[] }, // New API: URLs with first image dimensions
+  ) => {
+    const urls = Array.isArray(data) ? data : data.urls;
+    const dimensions = Array.isArray(data) ? undefined : data.dimensions;
 
-  const handleChange = (urls: string[]) => {
     // Directly set the URLs to the store
     // The store will handle URL to path conversion when needed
     setValue(urls);
+
+    // Only auto-set dimensions if no existing images and only uploading one image
+    if (!value?.length && urls.length === 1 && dimensions) {
+      autoSetDimensions(dimensions);
+    }
   };
 
-  return <MultiImagesUpload onChange={handleChange} value={value} />;
+  return (
+    <MultiImagesUpload
+      maxCount={maxCount}
+      maxFileSize={maxFileSize}
+      onChange={handleChange}
+      value={value}
+    />
+  );
 });
 
 export default ImageUrlsUpload;