@lobehub/chat 1.114.5 → 1.115.0

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

@@ -7,30 +7,33 @@ import Image from 'next/image';
 import React, { type FC, memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useUploadFilesValidation } from '../../hooks/useUploadFilesValidation';
+
 // ======== Types ======== //
 
 /**
- * 统一的图片项数据结构
- * - url: 现有图片的远程URL
- * - file: 新选择的文件，需要上传
- * - previewUrl: 本地文件的预览URL（blob URL）
- * 有url的是现有图片，有file的是待上传文件
+ * Unified image item data structure
+ * - url: Remote URL of existing image
+ * - file: Newly selected file that needs to be uploaded
+ * - previewUrl: Preview URL for local file (blob URL)
+ * Items with url are existing images, items with file are files to be uploaded
  */
 export interface ImageItem {
-  // 现有图片的URL
+  // URL of existing image
   file?: File;
   id: string;
-  // 新选择的文件
+  // Newly selected file
   previewUrl?: string;
-  url?: string; // 本地文件的预览URL，仅在file存在时使用
+  url?: string; // Preview URL for local file, only used when file exists
 }
 
 interface ImageManageModalProps {
   images: string[];
-  // 现有图片URL数组
+  maxCount?: number;
+  // Array of existing image URLs
   onClose: () => void;
   onComplete: (imageItems: ImageItem[]) => void;
-  open: boolean; // 统一的完成回调
+  open: boolean; // Unified completion callback
 }
 
 // ======== Utils ======== //
@@ -194,19 +197,20 @@ const useStyles = createStyles(({ css, token }) => ({
 // ======== Main Component ======== //
 
 const ImageManageModal: FC<ImageManageModalProps> = memo(
-  ({ open, images, onClose, onComplete }) => {
+  ({ open, images, maxCount, onClose, onComplete }) => {
     const { styles } = useStyles();
     const { t } = useTranslation('components');
     const inputRef = useRef<HTMLInputElement>(null);
+    const { validateFiles } = useUploadFilesValidation(maxCount);
 
-    // 使用统一的数据结构管理所有图片
+    // Use unified data structure to manage all images
     const [imageItems, setImageItems] = useState<ImageItem[]>([]);
     const [selectedIndex, setSelectedIndex] = useState<number>(0);
 
-    // Modal 打开时初始化状态
+    // Initialize state when modal opens
     useEffect(() => {
       if (open) {
-        // 将现有URL转换为ImageItem格式
+        // Convert existing URLs to ImageItem format
         const initialItems: ImageItem[] = images.map((url) => ({
           id: generateId(),
           url,
@@ -253,7 +257,7 @@ const ImageManageModal: FC<ImageManageModalProps> = memo(
       const newItems = imageItems.filter((_, i) => i !== index);
       setImageItems(newItems);
 
-      // 调整选中索引
+      // Adjust selected index
       if (selectedIndex >= newItems.length) {
         setSelectedIndex(Math.max(0, newItems.length - 1));
       }
@@ -272,18 +276,23 @@ const ImageManageModal: FC<ImageManageModalProps> = memo(
       const files = event.target.files;
       if (!files || files.length === 0) return;
 
-      // 创建新的ImageItem，为每个文件生成一次性的预览URL
+      // Validate files, pass current image count
+      if (!validateFiles(Array.from(files), imageItems.length)) {
+        return;
+      }
+
+      // Create new ImageItem, generate one-time preview URL for each file
       const newItems: ImageItem[] = Array.from(files).map((file) => ({
         file,
         id: generateId(),
-        previewUrl: URL.createObjectURL(file), // 只创建一次
+        previewUrl: URL.createObjectURL(file), // Create only once
       }));
 
       setImageItems((prev) => [...prev, ...newItems]);
     };
 
     const handleComplete = () => {
-      // 直接传递当前完整状态给父组件处理
+      // Directly pass current complete state to parent component
       onComplete(imageItems);
       onClose();
     };
@@ -397,7 +406,12 @@ const ImageManageModal: FC<ImageManageModalProps> = memo(
 
         {/* Footer */}
         <div className={styles.footer}>
-          <Button icon={<Upload size={16} />} onClick={handleUpload} type="default">
+          <Button
+            disabled={maxCount ? imageItems.length >= maxCount : false}
+            icon={<Upload size={16} />}
+            onClick={handleUpload}
+            type="default"
+          >
             {t('MultiImagesUpload.modal.upload')}
           </Button>
 

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

@@ -13,6 +13,7 @@ import { FileUploadStatus } from '@/types/files/upload';
 
 import { CONFIG_PANEL_WIDTH } from '../../constants';
 import { useDragAndDrop } from '../../hooks/useDragAndDrop';
+import { useUploadFilesValidation } from '../../hooks/useUploadFilesValidation';
 import { useConfigPanelStyles } from '../../style';
 import ImageManageModal, { type ImageItem } from './ImageManageModal';
 
@@ -36,9 +37,15 @@ interface DisplayItem {
 }
 
 export interface MultiImagesUploadProps {
-  // Callback when URLs change
+  // Callback when URLs change - supports both old API (string[]) and new API (object with dimensions)
   className?: string; // Array of image URLs
-  onChange?: (urls: string[]) => void;
+  maxCount?: number;
+  maxFileSize?: number;
+  onChange?: (
+    data:
+      | string[] // Old API: just URLs
+      | { dimensions?: { height: number, width: number; }, urls: string[]; }, // New API: URLs with first image dimensions
+  ) => void;
   style?: React.CSSProperties;
   value?: string[];
 }
@@ -311,7 +318,7 @@ const ImageUploadPlaceholder: FC<ImageUploadPlaceholderProps> = memo(({ isDragOv
 
 ImageUploadPlaceholder.displayName = 'ImageUploadPlaceholder';
 
-// ======== 圆形进度组件 ======== //
+// ======== Circular Progress Component ======== //
 
 interface CircularProgressProps {
   className?: string;
@@ -466,7 +473,7 @@ const ImageThumbnails: FC<ImageThumbnailsProps> = memo(
       const showOverlay = isLastItem && remainingCount > 1;
 
       return (
-        <div className={styles.imageItem} key={imageUrl}>
+        <div className={styles.imageItem} key={`${imageUrl}-${index}`}>
           <Image
             alt={`Uploaded image ${index + 1}`}
             fill
@@ -559,12 +566,13 @@ SingleImageDisplay.displayName = 'SingleImageDisplay';
 // ======== Main Component ======== //
 
 const MultiImagesUpload: FC<MultiImagesUploadProps> = memo(
-  ({ value, onChange, style, className }) => {
+  ({ value, onChange, style, className, maxCount, maxFileSize }) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const uploadWithProgress = useFileStore((s) => s.uploadWithProgress);
     const [displayItems, setDisplayItems] = useState<DisplayItem[]>([]);
     const [modalOpen, setModalOpen] = useState(false);
     const { styles: configStyles } = useConfigPanelStyles();
+    const { validateFiles } = useUploadFilesValidation(maxCount, maxFileSize);
 
     // Cleanup blob URLs to prevent memory leaks
     useEffect(() => {
@@ -601,6 +609,11 @@ const MultiImagesUpload: FC<MultiImagesUploadProps> = memo(
 
       const currentUrls = baseUrls !== undefined ? baseUrls : value || [];
 
+      // Validate files, pass current image count
+      if (!validateFiles(files, currentUrls.length)) {
+        return;
+      }
+
       // Create initial display items with blob URLs for immediate preview
       const newDisplayItems: DisplayItem[] = files.map((file) => ({
         file,
@@ -639,9 +652,10 @@ const MultiImagesUpload: FC<MultiImagesUploadProps> = memo(
         }),
       );
 
-      // Wait for all uploads to complete and collect successful URLs
+      // Wait for all uploads to complete and collect successful URLs and dimensions
       const uploadResults = await Promise.allSettled(uploadPromises);
       const successfulUrls: string[] = [];
+      let firstImageDimensions: { height: number, width: number; } | undefined;
 
       uploadResults.forEach((result, index) => {
         const displayItem = newDisplayItems[index];
@@ -649,6 +663,11 @@ const MultiImagesUpload: FC<MultiImagesUploadProps> = memo(
         if (result.status === 'fulfilled' && result.value) {
           successfulUrls.push(result.value.url);
 
+          // Collect the first image's dimensions for auto-setting parameters
+          if (index === 0 && result.value.dimensions) {
+            firstImageDimensions = result.value.dimensions;
+          }
+
           // Update display item with final URL and success status
           setDisplayItems((prev) =>
             prev.map((item) =>
@@ -685,10 +704,18 @@ const MultiImagesUpload: FC<MultiImagesUploadProps> = memo(
         }
       });
 
-      // Update parent component with new URLs
+      // Update parent component with new URLs and dimensions (if applicable)
       if (successfulUrls.length > 0) {
         const updatedUrls = [...currentUrls, ...successfulUrls];
-        onChange?.(updatedUrls);
+
+        // Pass dimensions if this is the first upload (no existing images) and only one image uploaded
+        const shouldPassDimensions = currentUrls.length === 0 && successfulUrls.length === 1;
+
+        if (shouldPassDimensions && firstImageDimensions) {
+          onChange?.({ dimensions: firstImageDimensions, urls: updatedUrls });
+        } else {
+          onChange?.(updatedUrls);
+        }
       }
 
       // Clear display items after all uploads complete
@@ -716,17 +743,17 @@ const MultiImagesUpload: FC<MultiImagesUploadProps> = memo(
       onDrop: handleDrop,
     });
 
-    // 处理 Modal 完成回调
+    // Handle Modal completion callback
     const handleModalComplete = async (imageItems: ImageItem[]) => {
-      // 分离现有URL和新文件
+      // Separate existing URLs and new files
       const existingUrls = imageItems.filter((item) => item.url).map((item) => item.url!);
 
       const newFiles = imageItems.filter((item) => item.file).map((item) => item.file!);
 
-      // 立即更新现有URL（删除的图片会被过滤掉）
+      // Immediately update existing URLs (deleted images will be filtered out)
       onChange?.(existingUrls);
 
-      // 如果有新文件需要上传，基于 existingUrls 启动上传流程
+      // If there are new files to upload, start upload process based on existingUrls
       if (newFiles.length > 0) {
         await handleFilesSelected(newFiles, existingUrls);
       }
@@ -793,6 +820,7 @@ const MultiImagesUpload: FC<MultiImagesUploadProps> = memo(
         {/* Image Management Modal */}
         <ImageManageModal
           images={value || []}
+          maxCount={maxCount}
           onClose={handleCloseModal}
           onComplete={handleModalComplete}
           open={modalOpen}

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/hooks/useAutoDimensions.ts

@@ -0,0 +1,56 @@
+import { DEFAULT_DIMENSION_CONSTRAINTS } from '@lobechat/const';
+
+import { constrainDimensions } from '@/app/[variants]/(main)/image/@menu/features/ConfigPanel/utils/dimensionConstraints';
+import { useImageStore } from '@/store/image';
+import { imageGenerationConfigSelectors } from '@/store/image/slices/generationConfig/selectors';
+
+/**
+ * Extract URL and dimensions from callback data (supports both old and new API)
+ */
+const extractUrlAndDimensions = (
+  data?: string | { dimensions?: { height: number; width: number }; url: string },
+) => {
+  const url = typeof data === 'string' ? data : data?.url;
+  const dimensions = typeof data === 'object' ? data?.dimensions : undefined;
+  return { dimensions, url };
+};
+
+/**
+ * Custom hook for automatically setting image dimensions with model constraints
+ * @returns Function to auto-set dimensions and type processing utilities
+ */
+export const useAutoDimensions = () => {
+  const paramsSchema = useImageStore(imageGenerationConfigSelectors.parametersSchema);
+  const isSupportWidth = useImageStore(imageGenerationConfigSelectors.isSupportedParam('width'));
+  const isSupportHeight = useImageStore(imageGenerationConfigSelectors.isSupportedParam('height'));
+  const setWidth = useImageStore((s) => s.setWidth);
+  const setHeight = useImageStore((s) => s.setHeight);
+
+  /**
+   * Auto-set dimensions with model constraints if parameters are supported
+   */
+  const autoSetDimensions = (dimensions: { height: number; width: number }) => {
+    if (!isSupportWidth || !isSupportHeight) return;
+
+    const constraints = {
+      height: {
+        max: paramsSchema.height?.max || DEFAULT_DIMENSION_CONSTRAINTS.MAX_SIZE,
+        min: paramsSchema.height?.min || DEFAULT_DIMENSION_CONSTRAINTS.MIN_SIZE,
+      },
+      width: {
+        max: paramsSchema.width?.max || DEFAULT_DIMENSION_CONSTRAINTS.MAX_SIZE,
+        min: paramsSchema.width?.min || DEFAULT_DIMENSION_CONSTRAINTS.MIN_SIZE,
+      },
+    };
+
+    const adjusted = constrainDimensions(dimensions.width, dimensions.height, constraints);
+    setWidth(adjusted.width);
+    setHeight(adjusted.height);
+  };
+
+  return {
+    autoSetDimensions,
+    canAutoSet: isSupportWidth && isSupportHeight,
+    extractUrlAndDimensions,
+  };
+};

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/hooks/useUploadFilesValidation.ts

@@ -0,0 +1,77 @@
+import { App } from 'antd';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { formatFileSize, validateImageFiles } from '../utils/imageValidation';
+
+/**
+ * File upload validation hook
+ * Encapsulates file size and count validation logic, provides user-friendly error messages
+ */
+export const useUploadFilesValidation = (maxCount?: number, maxFileSize?: number) => {
+  const { t } = useTranslation('components');
+  const { message } = App.useApp();
+
+  const validateFiles = useCallback(
+    (files: File[], currentCount: number = 0): boolean => {
+      const validationResult = validateImageFiles(files, {
+        maxAddedFiles: maxCount ? maxCount - currentCount : undefined,
+        maxFileSize,
+      });
+
+      if (!validationResult.valid) {
+        // Display user-friendly error messages
+        validationResult.errors.forEach((error) => {
+          if (error === 'fileSizeExceeded') {
+            // Collect all failed files info
+            const fileSizeFailures =
+              validationResult.failedFiles?.filter(
+                (failedFile) =>
+                  failedFile.error === 'fileSizeExceeded' &&
+                  failedFile.actualSize &&
+                  failedFile.maxSize,
+              ) || [];
+
+            if (fileSizeFailures.length === 1) {
+              // Single file error - show detailed message
+              const failedFile = fileSizeFailures[0];
+              const actualSizeStr = formatFileSize(failedFile.actualSize!);
+              const maxSizeStr = formatFileSize(failedFile.maxSize!);
+              const fileName = failedFile.fileName || 'File';
+              message.error(
+                t('MultiImagesUpload.validation.fileSizeExceededDetail', {
+                  actualSize: actualSizeStr,
+                  fileName,
+                  maxSize: maxSizeStr,
+                }),
+              );
+            } else if (fileSizeFailures.length > 1) {
+              // Multiple files error - show summary message
+              const maxSizeStr = formatFileSize(fileSizeFailures[0].maxSize!);
+              const fileList = fileSizeFailures
+                .map((f) => `${f.fileName || 'File'} (${formatFileSize(f.actualSize!)})`)
+                .join(', ');
+              message.error(
+                t('MultiImagesUpload.validation.fileSizeExceededMultiple', {
+                  count: fileSizeFailures.length,
+                  fileList,
+                  maxSize: maxSizeStr,
+                }),
+              );
+            }
+          } else if (error === 'imageCountExceeded') {
+            message.error(t('MultiImagesUpload.validation.imageCountExceeded'));
+          }
+        });
+        return false;
+      }
+
+      return true;
+    },
+    [maxCount, maxFileSize, message, t],
+  );
+
+  return {
+    validateFiles,
+  };
+};

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

@@ -1,7 +1,8 @@
 'use client';
 
 import { Text } from '@lobehub/ui';
-import { ReactNode, memo } from 'react';
+import { useTheme } from 'antd-style';
+import { ReactNode, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -36,6 +37,9 @@ const isSupportedParamSelector = imageGenerationConfigSelectors.isSupportedParam
 
 const ConfigPanel = memo(() => {
   const { t } = useTranslation('image');
+  const theme = useTheme();
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [isScrollable, setIsScrollable] = useState(false);
 
   const isSupportImageUrl = useImageStore(isSupportedParamSelector('imageUrl'));
   const isSupportSize = useImageStore(isSupportedParamSelector('size'));
@@ -45,8 +49,79 @@ const ConfigPanel = memo(() => {
 
   const { showDimensionControl } = useDimensionControl();
 
+  // Check if content exceeds container height and needs scrolling
+  const checkScrollable = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (container) {
+      const hasScrollbar = container.scrollHeight > container.clientHeight;
+      setIsScrollable(hasScrollbar);
+    }
+  }, []);
+
+  // Re-check when content changes
+  useEffect(() => {
+    checkScrollable();
+  }, [
+    checkScrollable,
+    isSupportImageUrl,
+    isSupportSize,
+    isSupportSeed,
+    isSupportSteps,
+    isSupportImageUrls,
+    showDimensionControl,
+  ]);
+
+  // Setup observers for container changes
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    // Initial check
+    checkScrollable();
+
+    // Use ResizeObserver for container size changes
+    const resizeObserver = new ResizeObserver(checkScrollable);
+    resizeObserver.observe(container);
+
+    // Use MutationObserver for content changes
+    const mutationObserver = new MutationObserver(checkScrollable);
+    mutationObserver.observe(container, { childList: true, subtree: true });
+
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [checkScrollable]);
+
+  // Memoize sticky styles to prevent unnecessary re-renders
+  const stickyStyles = useMemo(
+    () => ({
+      bottom: 0,
+      position: 'sticky' as const,
+      zIndex: 1,
+      ...(isScrollable && {
+        backgroundColor: theme.colorBgContainer,
+        borderTop: `1px solid ${theme.colorBorder}`,
+        // Use negative margin to extend background to container edges
+marginLeft: -12,
+        
+        marginRight: -12,
+        marginTop: 20,
+        // Add back internal padding
+        paddingLeft: 12,
+        paddingRight: 12,
+      }),
+    }),
+    [isScrollable, theme.colorBgContainer, theme.colorBorder],
+  );
+
   return (
-    <Flexbox gap={32} padding={12} style={{ overflow: 'auto' }}>
+    <Flexbox
+      gap={32}
+      padding="12px 12px 0 12px"
+      ref={scrollContainerRef}
+      style={{ height: '100%', overflow: 'auto' }}
+    >
       <ConfigItemLayout>
         <ModelSelect />
       </ConfigItemLayout>
@@ -83,9 +158,11 @@ const ConfigPanel = memo(() => {
         </ConfigItemLayout>
       )}
 
-      <ConfigItemLayout label={t('config.imageNum.label')}>
-        <ImageNum />
-      </ConfigItemLayout>
+      <Flexbox padding="12px 0" style={stickyStyles}>
+        <ConfigItemLayout label={t('config.imageNum.label')}>
+          <ImageNum />
+        </ConfigItemLayout>
+      </Flexbox>
     </Flexbox>
   );
 });