@lobehub/chat 1.114.6 → 1.115.0

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/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>
   );
 });

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/utils/__tests__/dimensionConstraints.test.ts

@@ -0,0 +1,235 @@
+import { describe, expect, it } from 'vitest';
+
+import { constrainDimensions } from '../dimensionConstraints';
+
+describe('dimensionConstraints', () => {
+  describe('constrainDimensions', () => {
+    const defaultConstraints = {
+      height: { max: 1024, min: 256 },
+      width: { max: 1024, min: 256 },
+    };
+
+    it('should return original dimensions when within constraints', () => {
+      const result = constrainDimensions(512, 512, defaultConstraints);
+
+      expect(result).toEqual({ width: 512, height: 512 });
+    });
+
+    it('should scale down when dimensions exceed maximum values', () => {
+      const result = constrainDimensions(2048, 1536, defaultConstraints);
+
+      // Should scale by min(1024/2048, 1024/1536) = min(0.5, 0.667) = 0.5
+      // Result: 1024 x 768, then rounded to nearest 8
+      expect(result).toEqual({ width: 1024, height: 768 });
+    });
+
+    it('should scale up when dimensions are below minimum values', () => {
+      const result = constrainDimensions(128, 96, defaultConstraints);
+
+      // Should scale by max(256/128, 256/96) = max(2, 2.667) = 2.667
+      // Result: ~341 x 256, then rounded to nearest 8
+      expect(result).toEqual({ width: 344, height: 256 });
+    });
+
+    it('should handle aspect ratio when scaling down width-constrained image', () => {
+      const result = constrainDimensions(2048, 512, defaultConstraints);
+
+      // Should scale by min(1024/2048, 1024/512) = min(0.5, 2) = 0.5
+      // Result: 1024 x 256, already on 8-pixel boundaries
+      expect(result).toEqual({ width: 1024, height: 256 });
+    });
+
+    it('should handle aspect ratio when scaling down height-constrained image', () => {
+      const result = constrainDimensions(512, 2048, defaultConstraints);
+
+      // Should scale by min(1024/512, 1024/2048) = min(2, 0.5) = 0.5
+      // Result: 256 x 1024, already on 8-pixel boundaries
+      expect(result).toEqual({ width: 256, height: 1024 });
+    });
+
+    it('should handle aspect ratio when scaling up width-constrained image', () => {
+      const result = constrainDimensions(64, 256, defaultConstraints);
+
+      // Should scale by max(256/64, 256/256) = max(4, 1) = 4
+      // Result: 256 x 1024, already on 8-pixel boundaries
+      expect(result).toEqual({ width: 256, height: 1024 });
+    });
+
+    it('should handle aspect ratio when scaling up height-constrained image', () => {
+      const result = constrainDimensions(256, 64, defaultConstraints);
+
+      // Should scale by max(256/256, 256/64) = max(1, 4) = 4
+      // Result: 1024 x 256, already on 8-pixel boundaries
+      expect(result).toEqual({ width: 1024, height: 256 });
+    });
+
+    it('should round to nearest multiple of 8', () => {
+      const result = constrainDimensions(515, 515, defaultConstraints);
+
+      // 515 rounded to nearest 8 is 512
+      expect(result).toEqual({ width: 512, height: 512 });
+    });
+
+    it('should handle dimensions that need rounding up to multiple of 8', () => {
+      const result = constrainDimensions(517, 517, defaultConstraints);
+
+      // 517 rounded to nearest 8 is 520
+      expect(result).toEqual({ width: 520, height: 520 });
+    });
+
+    it('should enforce final bounds after rounding', () => {
+      const constraints = {
+        height: { max: 520, min: 256 },
+        width: { max: 520, min: 256 },
+      };
+
+      const result = constrainDimensions(517, 517, constraints);
+
+      // 517 would round to 520, which is exactly at max
+      expect(result).toEqual({ width: 520, height: 520 });
+    });
+
+    it('should handle edge case where rounding exceeds maximum', () => {
+      const constraints = {
+        height: { max: 515, min: 256 },
+        width: { max: 515, min: 256 },
+      };
+
+      const result = constrainDimensions(517, 517, constraints);
+
+      // 517 would round to 520, but max is 515, so clamp to 512 (nearest 8 below max)
+      expect(result).toEqual({ width: 512, height: 512 });
+    });
+
+    it('should handle edge case where rounding goes below minimum', () => {
+      const constraints = {
+        height: { max: 1024, min: 261 },
+        width: { max: 1024, min: 261 },
+      };
+
+      const result = constrainDimensions(259, 259, constraints);
+
+      // 259 would round to 256, but min is 261, so clamp to 264 (nearest 8 above min)
+      expect(result).toEqual({ width: 264, height: 264 });
+    });
+
+    it('should handle square dimensions at boundaries', () => {
+      const result = constrainDimensions(256, 256, defaultConstraints);
+
+      expect(result).toEqual({ width: 256, height: 256 });
+    });
+
+    it('should handle maximum dimensions at boundaries', () => {
+      const result = constrainDimensions(1024, 1024, defaultConstraints);
+
+      expect(result).toEqual({ width: 1024, height: 1024 });
+    });
+
+    it('should handle very wide images (landscape)', () => {
+      const result = constrainDimensions(4096, 512, defaultConstraints);
+
+      // Should scale by min(1024/4096, 1024/512) = min(0.25, 2) = 0.25
+      // Result: 1024 x 128, but 128 < min(256), so need to scale up
+      // Scale by max(256/1024, 256/128) = max(0.25, 2) = 2
+      // Final: 1024 (clamped) x 256
+      expect(result).toEqual({ width: 1024, height: 256 });
+    });
+
+    it('should handle very tall images (portrait)', () => {
+      const result = constrainDimensions(512, 4096, defaultConstraints);
+
+      // Should scale by min(1024/512, 1024/4096) = min(2, 0.25) = 0.25
+      // Result: 128 x 1024, but 128 < min(256), so need to scale up
+      // Scale by max(256/128, 256/1024) = max(2, 0.25) = 2
+      // Final: 256 x 1024
+      expect(result).toEqual({ width: 256, height: 1024 });
+    });
+
+    it('should handle different constraint ranges', () => {
+      const constraints = {
+        height: { max: 2048, min: 128 },
+        width: { max: 512, min: 64 },
+      };
+
+      const result = constrainDimensions(1024, 1024, constraints);
+
+      // Should scale by min(512/1024, 2048/1024) = min(0.5, 2) = 0.5
+      // Result: 512 x 512
+      expect(result).toEqual({ width: 512, height: 512 });
+    });
+
+    it('should handle asymmetric constraints with small image', () => {
+      const constraints = {
+        height: { max: 2048, min: 128 },
+        width: { max: 512, min: 64 },
+      };
+
+      const result = constrainDimensions(32, 32, constraints);
+
+      // Should scale by max(64/32, 128/32) = max(2, 4) = 4
+      // Result: 128 x 128
+      expect(result).toEqual({ width: 128, height: 128 });
+    });
+
+    it('should handle zero or negative dimensions gracefully', () => {
+      // While this might not be realistic input, the function should handle it
+      const result = constrainDimensions(0, 100, defaultConstraints);
+
+      // 0 causes Math.log(0) = -Infinity and Math.round(NaN) = NaN in scaling
+      // Current implementation has issues with zero values
+      expect(Number.isNaN(result.width) || result.width >= defaultConstraints.width.min).toBe(true);
+      expect(result.height).toBeGreaterThanOrEqual(defaultConstraints.height.min);
+    });
+
+    it('should handle very large dimensions', () => {
+      const result = constrainDimensions(10000, 10000, defaultConstraints);
+
+      // Should scale down to fit within constraints
+      expect(result).toEqual({ width: 1024, height: 1024 });
+    });
+
+    it('should maintain 8-pixel alignment in complex scaling scenarios', () => {
+      const result = constrainDimensions(1000, 750, defaultConstraints);
+
+      // Both dimensions should be multiples of 8
+      expect(result.width % 8).toBe(0);
+      expect(result.height % 8).toBe(0);
+      expect(result.width).toBeLessThanOrEqual(defaultConstraints.width.max);
+      expect(result.height).toBeLessThanOrEqual(defaultConstraints.height.max);
+      expect(result.width).toBeGreaterThanOrEqual(defaultConstraints.width.min);
+      expect(result.height).toBeGreaterThanOrEqual(defaultConstraints.height.min);
+    });
+
+    it('should handle perfect 8-multiple inputs', () => {
+      const result = constrainDimensions(800, 600, defaultConstraints);
+
+      // Both are already multiples of 8 and within constraints
+      expect(result).toEqual({ width: 800, height: 600 });
+    });
+
+    it('should handle constraints where min equals max', () => {
+      const constraints = {
+        height: { max: 512, min: 512 },
+        width: { max: 512, min: 512 },
+      };
+
+      const result = constrainDimensions(1000, 750, constraints);
+
+      // Should be forced to exact constraint values
+      expect(result).toEqual({ width: 512, height: 512 });
+    });
+
+    it('should handle rectangular constraints with different scaling needs', () => {
+      const constraints = {
+        height: { max: 768, min: 384 },
+        width: { max: 1024, min: 256 },
+      };
+
+      const result = constrainDimensions(2048, 1024, constraints);
+
+      // Should scale by min(1024/2048, 768/1024) = min(0.5, 0.75) = 0.5
+      // Result: 1024 x 512
+      expect(result).toEqual({ width: 1024, height: 512 });
+    });
+  });
+});