@lobehub/chat 1.104.0 → 1.104.2

package/src/app/[variants]/(main)/image/features/GenerationFeed/GenerationItem/SuccessState.tsx

@@ -8,10 +8,20 @@ import ImageItem from '@/components/ImageItem';
 import { ActionButtons } from './ActionButtons';
 import { useStyles } from './styles';
 import { SuccessStateProps } from './types';
+import { getThumbnailMaxWidth } from './utils';
 
 // 成功状态组件
 export const SuccessState = memo<SuccessStateProps>(
-  ({ generation, prompt, aspectRatio, onDelete, onDownload, onCopySeed, seedTooltip }) => {
+  ({
+    generation,
+    generationBatch,
+    prompt,
+    aspectRatio,
+    onDelete,
+    onDownload,
+    onCopySeed,
+    seedTooltip,
+  }) => {
     const { styles } = useStyles();
 
     return (
@@ -21,7 +31,7 @@ export const SuccessState = memo<SuccessStateProps>(
         justify={'center'}
         style={{
           aspectRatio,
-          maxWidth: generation.asset?.width ? generation.asset.width / 2 : 'unset',
+          maxWidth: getThumbnailMaxWidth(generation, generationBatch),
         }}
         variant={'filled'}
       >
@@ -31,7 +41,8 @@ export const SuccessState = memo<SuccessStateProps>(
             src: generation.asset!.url,
           }}
           style={{ height: '100%', width: '100%' }}
-          url={generation.asset!.thumbnailUrl}
+          // Thumbnail quality is too bad
+          url={generation.asset!.url}
         />
         <ActionButtons
           onCopySeed={onCopySeed}

package/src/app/[variants]/(main)/image/features/GenerationFeed/GenerationItem/index.tsx

@@ -37,13 +37,7 @@ export const GenerationItem = memo<GenerationItemProps>(
     const shouldPoll = !isFinalized;
     useCheckGenerationStatus(generation.id, generation.task.id, activeTopicId!, shouldPoll);
 
-    const aspectRatio = getAspectRatio(
-      generation.asset ?? {
-        height: generationBatch.config?.height,
-        type: 'image',
-        width: generationBatch.config?.width,
-      },
-    );
+    const aspectRatio = getAspectRatio(generation, generationBatch);
 
     // 事件处理函数
     const handleDeleteGeneration = async () => {
@@ -120,6 +114,7 @@ export const GenerationItem = memo<GenerationItemProps>(
         <SuccessState
           aspectRatio={aspectRatio}
           generation={generation}
+          generationBatch={generationBatch}
           onCopySeed={handleCopySeed}
           onDelete={handleDeleteGeneration}
           onDownload={handleDownloadImage}
@@ -134,6 +129,7 @@ export const GenerationItem = memo<GenerationItemProps>(
         <ErrorState
           aspectRatio={aspectRatio}
           generation={generation}
+          generationBatch={generationBatch}
           onCopyError={handleCopyError}
           onDelete={handleDeleteGeneration}
         />
@@ -145,6 +141,7 @@ export const GenerationItem = memo<GenerationItemProps>(
       <LoadingState
         aspectRatio={aspectRatio}
         generation={generation}
+        generationBatch={generationBatch}
         onDelete={handleDeleteGeneration}
       />
     );

package/src/app/[variants]/(main)/image/features/GenerationFeed/GenerationItem/types.ts

@@ -18,6 +18,7 @@ export interface ActionButtonsProps {
 export interface SuccessStateProps {
   aspectRatio: string;
   generation: Generation;
+  generationBatch: GenerationBatch;
   onCopySeed?: () => void;
   onDelete: () => void;
   onDownload: () => void;
@@ -28,6 +29,7 @@ export interface SuccessStateProps {
 export interface ErrorStateProps {
   aspectRatio: string;
   generation: Generation;
+  generationBatch: GenerationBatch;
   onCopyError: () => void;
   onDelete: () => void;
 }
@@ -35,5 +37,6 @@ export interface ErrorStateProps {
 export interface LoadingStateProps {
   aspectRatio: string;
   generation: Generation;
+  generationBatch: GenerationBatch;
   onDelete: () => void;
 }

package/src/app/[variants]/(main)/image/features/GenerationFeed/GenerationItem/utils.test.ts

@@ -0,0 +1,600 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { Generation, GenerationBatch } from '@/types/generation';
+
+// Import functions for testing
+import {
+  DEFAULT_MAX_ITEM_WIDTH,
+  getAspectRatio,
+  getImageDimensions,
+  getThumbnailMaxWidth,
+} from './utils';
+
+describe('getImageDimensions', () => {
+  // Mock base generation object
+  const baseGeneration: Generation = {
+    id: 'test-gen-id',
+    seed: 12345,
+    createdAt: new Date(),
+    asyncTaskId: null,
+    task: {
+      id: 'task-id',
+      status: 'success' as any,
+    },
+  };
+
+  describe('with asset dimensions', () => {
+    it('should return width, height and aspect ratio from asset', () => {
+      const generation: Generation = {
+        ...baseGeneration,
+        asset: {
+          type: 'image',
+          width: 1920,
+          height: 1080,
+        },
+      };
+
+      const result = getImageDimensions(generation);
+      expect(result).toEqual({
+        width: 1920,
+        height: 1080,
+        aspectRatio: '1920 / 1080',
+      });
+    });
+
+    it('should prioritize asset even when other sources exist', () => {
+      const generation: Generation = {
+        ...baseGeneration,
+        asset: {
+          type: 'image',
+          width: 800,
+          height: 600,
+        },
+      };
+
+      const generationBatch: GenerationBatch = {
+        id: 'batch-id',
+        provider: 'test',
+        model: 'test-model',
+        prompt: 'test prompt',
+        width: 1024,
+        height: 1024,
+        config: {
+          prompt: 'test',
+          width: 512,
+          height: 512,
+        },
+        createdAt: new Date(),
+        generations: [],
+      };
+
+      const result = getImageDimensions(generation, generationBatch);
+      expect(result).toEqual({
+        width: 800,
+        height: 600,
+        aspectRatio: '800 / 600',
+      });
+    });
+  });
+
+  describe('with config dimensions', () => {
+    it('should return dimensions from config when asset is not available', () => {
+      const generation: Generation = {
+        ...baseGeneration,
+        asset: null,
+      };
+
+      const generationBatch: GenerationBatch = {
+        id: 'batch-id',
+        provider: 'test',
+        model: 'test-model',
+        prompt: 'test prompt',
+        config: {
+          prompt: 'test',
+          width: 1024,
+          height: 768,
+        },
+        createdAt: new Date(),
+        generations: [],
+      };
+
+      const result = getImageDimensions(generation, generationBatch);
+      expect(result).toEqual({
+        width: 1024,
+        height: 768,
+        aspectRatio: '1024 / 768',
+      });
+    });
+  });
+
+  describe('with batch top-level dimensions', () => {
+    it('should return dimensions from batch when config is not available', () => {
+      const generation: Generation = {
+        ...baseGeneration,
+        asset: null,
+      };
+
+      const generationBatch: GenerationBatch = {
+        id: 'batch-id',
+        provider: 'test',
+        model: 'test-model',
+        prompt: 'test prompt',
+        width: 1280,
+        height: 720,
+        createdAt: new Date(),
+        generations: [],
+      };
+
+      const result = getImageDimensions(generation, generationBatch);
+      expect(result).toEqual({
+        width: 1280,
+        height: 720,
+        aspectRatio: '1280 / 720',
+      });
+    });
+  });
+
+  describe('with size parameter', () => {
+    it('should parse dimensions from size parameter', () => {
+      const generation: Generation = {
+        ...baseGeneration,
+        asset: null,
+      };
+
+      const generationBatch: GenerationBatch = {
+        id: 'batch-id',
+        provider: 'test',
+        model: 'test-model',
+        prompt: 'test prompt',
+        config: {
+          prompt: 'test',
+          size: '1920x1080',
+        },
+        createdAt: new Date(),
+        generations: [],
+      };
+
+      const result = getImageDimensions(generation, generationBatch);
+      expect(result).toEqual({
+        width: 1920,
+        height: 1080,
+        aspectRatio: '1920 / 1080',
+      });
+    });
+
+    it('should ignore size when it is "auto"', () => {
+      const generation: Generation = {
+        ...baseGeneration,
+        asset: null,
+      };
+
+      const generationBatch: GenerationBatch = {
+        id: 'batch-id',
+        provider: 'test',
+        model: 'test-model',
+        prompt: 'test prompt',
+        config: {
+          prompt: 'test',
+          size: 'auto',
+          aspectRatio: '16:9',
+        },
+        createdAt: new Date(),
+        generations: [],
+      };
+
+      const result = getImageDimensions(generation, generationBatch);
+      expect(result).toEqual({
+        width: null,
+        height: null,
+        aspectRatio: '16 / 9',
+      });
+    });
+  });
+
+  describe('with aspectRatio parameter only', () => {
+    it('should return aspect ratio without dimensions', () => {
+      const generation: Generation = {
+        ...baseGeneration,
+        asset: null,
+      };
+
+      const generationBatch: GenerationBatch = {
+        id: 'batch-id',
+        provider: 'test',
+        model: 'test-model',
+        prompt: 'test prompt',
+        config: {
+          prompt: 'test',
+          aspectRatio: '16:9',
+        },
+        createdAt: new Date(),
+        generations: [],
+      };
+
+      const result = getImageDimensions(generation, generationBatch);
+      expect(result).toEqual({
+        width: null,
+        height: null,
+        aspectRatio: '16 / 9',
+      });
+    });
+
+    it('should handle various aspect ratio formats', () => {
+      const testCases = [
+        { aspectRatio: '1:1', expected: '1 / 1' },
+        { aspectRatio: '4:3', expected: '4 / 3' },
+        { aspectRatio: '16:9', expected: '16 / 9' },
+        { aspectRatio: '21:9', expected: '21 / 9' },
+      ];
+
+      testCases.forEach(({ aspectRatio, expected }) => {
+        const generation: Generation = {
+          ...baseGeneration,
+          asset: null,
+        };
+
+        const generationBatch: GenerationBatch = {
+          id: 'batch-id',
+          provider: 'test',
+          model: 'test-model',
+          prompt: 'test prompt',
+          config: {
+            prompt: 'test',
+            aspectRatio,
+          },
+          createdAt: new Date(),
+          generations: [],
+        };
+
+        const result = getImageDimensions(generation, generationBatch);
+        expect(result.aspectRatio).toBe(expected);
+      });
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should return all null when no dimensions are available', () => {
+      const generation: Generation = {
+        ...baseGeneration,
+        asset: null,
+      };
+
+      const result = getImageDimensions(generation);
+      expect(result).toEqual({
+        width: null,
+        height: null,
+        aspectRatio: null,
+      });
+    });
+
+    it('should handle partial asset dimensions', () => {
+      const generation: Generation = {
+        ...baseGeneration,
+        asset: {
+          type: 'image',
+          width: 1920,
+          // height is missing
+        },
+      };
+
+      const generationBatch: GenerationBatch = {
+        id: 'batch-id',
+        provider: 'test',
+        model: 'test-model',
+        prompt: 'test prompt',
+        config: {
+          prompt: 'test',
+          width: 1024,
+          height: 768,
+        },
+        createdAt: new Date(),
+        generations: [],
+      };
+
+      const result = getImageDimensions(generation, generationBatch);
+      expect(result).toEqual({
+        width: 1024,
+        height: 768,
+        aspectRatio: '1024 / 768',
+      });
+    });
+
+    it('should handle invalid size format', () => {
+      const generation: Generation = {
+        ...baseGeneration,
+        asset: null,
+      };
+
+      const generationBatch: GenerationBatch = {
+        id: 'batch-id',
+        provider: 'test',
+        model: 'test-model',
+        prompt: 'test prompt',
+        config: {
+          prompt: 'test',
+          size: 'invalid-format',
+        },
+        createdAt: new Date(),
+        generations: [],
+      };
+
+      const result = getImageDimensions(generation, generationBatch);
+      expect(result).toEqual({
+        width: null,
+        height: null,
+        aspectRatio: null,
+      });
+    });
+
+    it('should handle invalid aspectRatio format', () => {
+      const generation: Generation = {
+        ...baseGeneration,
+        asset: null,
+      };
+
+      const generationBatch: GenerationBatch = {
+        id: 'batch-id',
+        provider: 'test',
+        model: 'test-model',
+        prompt: 'test prompt',
+        config: {
+          prompt: 'test',
+          aspectRatio: 'invalid-format',
+        },
+        createdAt: new Date(),
+        generations: [],
+      };
+
+      const result = getImageDimensions(generation, generationBatch);
+      expect(result).toEqual({
+        width: null,
+        height: null,
+        aspectRatio: null,
+      });
+    });
+
+    it('should handle zero dimensions', () => {
+      const generation: Generation = {
+        ...baseGeneration,
+        asset: {
+          type: 'image',
+          width: 0,
+          height: 0,
+        },
+      };
+
+      const result = getImageDimensions(generation);
+      expect(result).toEqual({
+        width: null,
+        height: null,
+        aspectRatio: null,
+      });
+    });
+  });
+});
+
+describe('getAspectRatio (isolated unit testing)', () => {
+  const mockGeneration: Generation = {
+    id: 'test-gen-id',
+    seed: 12345,
+    createdAt: new Date(),
+    asyncTaskId: null,
+    task: {
+      id: 'task-id',
+      status: 'success' as any,
+    },
+  };
+  const mockGenerationBatch: GenerationBatch = {
+    id: 'test-batch-id',
+    provider: 'test-provider',
+    model: 'test-model',
+    prompt: 'test prompt',
+    createdAt: new Date(),
+    generations: [],
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return aspectRatio from getImageDimensions when dimensions have aspectRatio', () => {
+    // Test the actual implementation directly with mock data
+    const mockGen: Generation = {
+      ...mockGeneration,
+      asset: {
+        type: 'image',
+        width: 1920,
+        height: 1080,
+      },
+    };
+
+    const result = getAspectRatio(mockGen);
+    expect(result).toBe('1920 / 1080');
+  });
+
+  it('should return default "1 / 1" when no dimensions are available', () => {
+    const result = getAspectRatio(mockGeneration, mockGenerationBatch);
+    expect(result).toBe('1 / 1');
+  });
+
+  it('should work with different aspectRatio sources', () => {
+    const mockBatch: GenerationBatch = {
+      id: 'test-batch',
+      provider: 'test-provider',
+      model: 'test-model',
+      prompt: 'test prompt',
+      createdAt: new Date(),
+      generations: [],
+      config: {
+        prompt: 'test prompt',
+        aspectRatio: '16:9',
+      },
+    };
+
+    const result = getAspectRatio(mockGeneration, mockBatch);
+    expect(result).toBe('16 / 9');
+  });
+});
+
+describe('getThumbnailMaxWidth (isolated unit testing)', () => {
+  const mockGeneration: Generation = {
+    id: 'test-gen-id',
+    seed: 12345,
+    createdAt: new Date(),
+    asyncTaskId: null,
+    task: {
+      id: 'task-id',
+      status: 'success' as any,
+    },
+  };
+  const mockGenerationBatch: GenerationBatch = {
+    id: 'test-batch-id',
+    provider: 'test-provider',
+    model: 'test-model',
+    prompt: 'test prompt',
+    createdAt: new Date(),
+    generations: [],
+  };
+
+  // Mock window.innerHeight for tests
+  const originalWindow = global.window;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    Object.defineProperty(global, 'window', {
+      writable: true,
+      value: {
+        innerHeight: 800,
+      },
+    });
+  });
+
+  afterEach(() => {
+    global.window = originalWindow;
+  });
+
+  it('should return DEFAULT_MAX_ITEM_WIDTH when no dimensions available', () => {
+    const result = getThumbnailMaxWidth(mockGeneration, mockGenerationBatch);
+    expect(result).toBe(DEFAULT_MAX_ITEM_WIDTH);
+  });
+
+  it('should return DEFAULT_MAX_ITEM_WIDTH when width is missing', () => {
+    const mockGen: Generation = {
+      ...mockGeneration,
+      // No asset with width/height, should fall back to default
+    };
+    const result = getThumbnailMaxWidth(mockGen);
+    expect(result).toBe(DEFAULT_MAX_ITEM_WIDTH);
+  });
+
+  it('should return DEFAULT_MAX_ITEM_WIDTH when height is missing', () => {
+    const mockGen: Generation = {
+      ...mockGeneration,
+      // No asset with valid dimensions
+    };
+    const result = getThumbnailMaxWidth(mockGen);
+    expect(result).toBe(DEFAULT_MAX_ITEM_WIDTH);
+  });
+
+  it('should calculate width based on screen height constraint', () => {
+    const mockGen: Generation = {
+      ...mockGeneration,
+      asset: {
+        type: 'image',
+        width: 300,
+        height: 200,
+      },
+    };
+
+    // aspectRatio = 300/200 = 1.5
+    // maxScreenHeight = 800/2 = 400
+    // maxWidthFromHeight = 400 * 1.5 = 600
+    // maxReasonableWidth = 200 * 2 = 400
+    // min(600, 400) = 400
+    const result = getThumbnailMaxWidth(mockGen);
+    expect(result).toBe(400);
+  });
+
+  it('should apply maxReasonableWidth limit', () => {
+    const mockGen: Generation = {
+      ...mockGeneration,
+      asset: {
+        type: 'image',
+        width: 600,
+        height: 200,
+      },
+    };
+
+    // aspectRatio = 600/200 = 3
+    // maxScreenHeight = 800/2 = 400
+    // maxWidthFromHeight = 400 * 3 = 1200
+    // maxReasonableWidth = 200 * 2 = 400
+    // min(1200, 400) = 400
+    const result = getThumbnailMaxWidth(mockGen);
+    expect(result).toBe(400);
+  });
+
+  it('should use screen height constraint when smaller', () => {
+    const mockGen: Generation = {
+      ...mockGeneration,
+      asset: {
+        type: 'image',
+        width: 200,
+        height: 400,
+      },
+    };
+
+    // aspectRatio = 200/400 = 0.5
+    // maxScreenHeight = 800/2 = 400
+    // maxWidthFromHeight = 400 * 0.5 = 200
+    // maxReasonableWidth = 200 * 2 = 400
+    // min(200, 400) = 200
+    const result = getThumbnailMaxWidth(mockGen);
+    expect(result).toBe(200);
+  });
+
+  it('should handle different window.innerHeight values', () => {
+    Object.defineProperty(global, 'window', {
+      writable: true,
+      value: {
+        innerHeight: 600,
+      },
+    });
+
+    const mockGen: Generation = {
+      ...mockGeneration,
+      asset: {
+        type: 'image',
+        width: 400,
+        height: 200,
+      },
+    };
+
+    // aspectRatio = 400/200 = 2
+    // maxScreenHeight = 600/2 = 300
+    // maxWidthFromHeight = 300 * 2 = 600
+    // maxReasonableWidth = 200 * 2 = 400
+    // min(600, 400) = 400
+    const result = getThumbnailMaxWidth(mockGen);
+    expect(result).toBe(400);
+  });
+
+  it('should round calculated width correctly', () => {
+    const mockGen: Generation = {
+      ...mockGeneration,
+      asset: {
+        type: 'image',
+        width: 512,
+        height: 1000,
+      },
+    };
+
+    // aspectRatio = 512/1000 = 0.512
+    // maxScreenHeight = 800/2 = 400
+    // maxWidthFromHeight = Math.round(400 * 0.512) = Math.round(204.8) = 205
+    // maxReasonableWidth = 200 * 2 = 400
+    // min(205, 400) = 205
+    const result = getThumbnailMaxWidth(mockGen);
+    expect(result).toBe(205);
+  });
+});