@lobehub/chat 1.114.6 → 1.115.0

package/CLAUDE.md

@@ -2,39 +2,20 @@
 
 This document serves as a shared guideline for all team members when using Claude Code in this repository.
 
-## Suggestions
+## Tech Stack
 
-- When searching the project source code, it is recommended to exclude: `src/database/migrations/meta`, `**/*.test.*`, `**/__snapshots__`, `**/fixtures`
-- Please store all temporary scripts (such as migration and refactoring scripts) in the `docs/.local/` directory; the contents of this folder will not be committed.
+read @.cursor/rules/project-introduce.mdc
 
-## Technologies Stack
+## Directory Structure
 
-read @.cursor/rules/project-introduce.mdc for more details.
-
-### Directory Structure
-
-```plaintext
-src/
-├── app/                 # Next.js App Router
-├── features/            # Feature-based UI components
-├── store/              # Zustand state stores
-├── services/           # Client services (tRPC/Model calls)
-├── server/             # Server-side (tRPC routers, services)
-├── database/           # Schemas, models, repositories
-├── libs/               # External library integrations
-```
-
-### Data Flow
-
-- **Client DB Version**: UI → Zustand → Service → Model → PGLite
-- **Server DB Version**: UI → Zustand → Service → tRPC → Repository/Model → PostgreSQL
+read @.cursor/rules/project-structure.mdc
 
 ## Development
 
 ### Git Workflow
 
-- use rebase for git pull.
-- git commit message should prefix with gitmoji.
+- use rebase for git pull
+- git commit message should prefix with gitmoji
 - git branch name format example: tj/feat/feature-name
 - use .github/PULL_REQUEST_TEMPLATE.md to generate pull request description
 
@@ -59,10 +40,13 @@ see @.cursor/rules/typescript.mdc
 Testing work follows the Rule-Aware Task Execution system above.
 
 - **Required Rule**: `testing-guide/testing-guide.mdc`
-- **Command**: `npx vitest run --config vitest.config.ts '[file-path-pattern]'`, wrapped in single quotes to avoid shell expansion
+- **Command**:
+  - web: `bunx vitest run --silent='passed-only' '[file-path-pattern]'`
+  - packages(eg: database): `cd packages/database && bunx vitest run --silent='passed-only' '[file-path-pattern]'`
 
 **Important**:
 
+- wrapped the file path in single quotes to avoid shell expansion
 - Never run `bun run test` etc to run tests, this will run all tests and cost about 10mins
 - If try to fix the same test twice, but still failed, stop and ask for help.
 
@@ -96,7 +80,7 @@ Some useful rules of this project. Read them when needed.
 
 - `zustand-slice-organization.mdc` - Store organization
 - `zustand-action-patterns.mdc` - Action patterns
-- `packages/react-layout-kit.mdc` - Layout components usage
+- `packages/react-layout-kit.mdc` - flex layout components usage
 
 **Testing & Quality**
 

package/changelog/v1.json

@@ -1,4 +1,9 @@
 [
+  {
+    "children": {},
+    "date": "2025-08-26",
+    "version": "1.115.0"
+  },
   {
     "children": {},
     "date": "2025-08-22",

package/docs/development/basic/feature-development.mdx

@@ -456,7 +456,7 @@ The project uses vitest for unit testing.
 
 Since our two new configuration fields are both optional, theoretically you could pass the tests without updating them. However, since we added the `openingQuestions` field to the `DEFAULT_AGENT_CONFIG` mentioned earlier, this causes many tests to calculate configurations that include this field, so we still need to update some test snapshots.
 
-For the current scenario, I recommend running the tests locally to see which tests fail, and then update them as needed. For example, for the test file `src/store/agent/slices/chat/selectors/agent.test.ts`, you need to run `npx vitest -u src/store/agent/slices/chat/selectors/agent.test.ts` to update the snapshot.
+For the current scenario, I recommend running the tests locally to see which tests fail, and then update them as needed. For example, for the test file `src/store/agent/slices/chat/selectors/agent.test.ts`, you need to run `bunx vitest -u src/store/agent/slices/chat/selectors/agent.test.ts` to update the snapshot.
 
 ## Summary
 

package/docs/development/basic/feature-development.zh-CN.mdx

@@ -456,7 +456,7 @@ export default WelcomeMessage;
 
 由于我们目前两个新的配置字段都是可选的，所以理论上你不更新测试也能跑通，不过由于我们把前面提到的默认配置 `DEFAULT_AGENT_CONFIG` 增加了 `openingQuestions` 字段，这导致很多测试计算出的配置都是有这个字段的，因此我们还是需要更新一部分测试的快照。
 
-对于当前这个场景，我建议是本地直接跑下测试，看哪些测试失败了，针对需要更新，例如测试文件 `src/store/agent/slices/chat/selectors/agent.test.ts` 需要执行一下 `npx vitest -u src/store/agent/slices/chat/selectors/agent.test.ts` 更新快照。
+对于当前这个场景，我建议是本地直接跑下测试，看哪些测试失败了，针对需要更新，例如测试文件 `src/store/agent/slices/chat/selectors/agent.test.ts` 需要执行一下 `bunx vitest -u src/store/agent/slices/chat/selectors/agent.test.ts` 更新快照。
 
 ## 总结
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.114.6",
+  "version": "1.115.0",
   "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",
@@ -71,8 +71,8 @@
     "start": "next start -p 3210",
     "stylelint": "stylelint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
     "test": "npm run test-app && npm run test-server",
-    "test-app": "vitest run --config vitest.config.ts",
-    "test-app:coverage": "vitest run --config vitest.config.ts  --coverage",
+    "test-app": "vitest run",
+    "test-app:coverage": "vitest run --coverage",
     "test:update": "vitest -u",
     "type-check": "tsgo --noEmit",
     "webhook:ngrok": "ngrok http http://localhost:3011",
@@ -206,7 +206,7 @@
     "langfuse": "^3.38.4",
     "langfuse-core": "^3.38.4",
     "lodash-es": "^4.17.21",
-    "lucide-react": "^0.539.0",
+    "lucide-react": "^0.541.0",
     "mammoth": "^1.10.0",
     "markdown-to-txt": "^2.0.1",
     "mdast-util-to-markdown": "^2.1.2",

package/packages/const/src/image.ts

@@ -12,3 +12,31 @@ export const PRESET_ASPECT_RATIOS = [
   '3:2', // 经典照片比例横屏
   '2:3', // 经典照片比例竖屏
 ];
+
+/**
+ * Image generation and processing configuration constants
+ */
+export const IMAGE_GENERATION_CONFIG = {
+  /**
+   * Maximum cover image size in pixels (longest edge)
+   * Used for generating cover images from source images
+   */
+  COVER_MAX_SIZE: 256,
+
+  /**
+   * Maximum thumbnail size in pixels (longest edge)
+   * Used for generating thumbnail images from original images
+   */
+  THUMBNAIL_MAX_SIZE: 512,
+} as const;
+
+/**
+ * Default dimension constraints for image upload auto-setting
+ * Used when model schema doesn't provide min/max values
+ */
+export const DEFAULT_DIMENSION_CONSTRAINTS = {
+  MAX_SIZE: 1024,
+  MIN_SIZE: 512,
+} as const;
+
+export const MAX_SEED = 2 ** 31 - 1;

package/packages/const/src/index.ts

@@ -1,3 +1,4 @@
+export * from './image';
 export * from './locale';
 export * from './message';
 export * from './settings';

package/packages/database/package.json

@@ -5,8 +5,10 @@
   "main": "src/index.ts",
   "types": "src/index.ts",
   "scripts": {
-    "test": "vitest",
-    "test:coverage": "vitest --coverage"
+    "test": "npm run test:client-db && npm run test:server-db",
+    "test:client-db": "vitest run",
+    "test:coverage": "vitest --coverage --config vitest.config.server.mts",
+    "test:server-db": "vitest run --config vitest.config.server.mts"
   },
   "dependencies": {
     "@electric-sql/pglite": "^0.2.17",

package/packages/database/src/repositories/aiInfra/index.ts

@@ -201,7 +201,7 @@ export class AiInfraRepos {
     providerId: string,
   ): Promise<AiProviderModelListItem[] | undefined> => {
     try {
-      const { default: providerModels } = await import(`@/config/aiModels/${providerId}`);
+      const { default: providerModels } = await import(`@/config/aiModels/${providerId}.ts`);
 
       // use the serverModelLists as the defined server model list
       const presetList = this.providerConfigs[providerId]?.serverModelLists || providerModels;

package/packages/database/tests/setup-db.ts

@@ -1,4 +1,7 @@
 // import env
 import * as dotenv from 'dotenv';
+// mock indexedDB to test with dexie
+// refs: https://github.com/dumbmatter/fakeIndexedDB#dexie-and-other-indexeddb-api-wrappers
+import 'fake-indexeddb/auto';
 
 dotenv.config();

package/packages/database/vitest.config.mts

@@ -0,0 +1,33 @@
+import { resolve } from 'node:path';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  optimizeDeps: {
+    exclude: ['crypto', 'util', 'tty'],
+    include: ['@lobehub/tts'],
+  },
+  test: {
+    alias: {
+      /* eslint-disable sort-keys-fix/sort-keys-fix */
+      '@/const': resolve(__dirname, '../const/src'),
+      '@/utils/errorResponse': resolve(__dirname, '../../src/utils/errorResponse'),
+      '@/utils': resolve(__dirname, '../utils/src'),
+      '@/database': resolve(__dirname, '../database/src'),
+      '@/types': resolve(__dirname, '../types/src'),
+      '@': resolve(__dirname, '../../src'),
+      /* eslint-enable */
+    },
+    environment: 'happy-dom',
+    exclude: [
+      'node_modules/**/**',
+      'src/server/**/**',
+      'src/repositories/dataImporter/deprecated/**/**',
+    ],
+    server: {
+      deps: {
+        inline: ['vitest-canvas-mock'],
+      },
+    },
+    setupFiles: './tests/setup-db.ts',
+  },
+});

package/packages/model-runtime/src/utils/modelParse.ts

@@ -358,7 +358,7 @@ export const processMultiProviderModelList = async (
   let providerLocalConfig: any[] | null = null;
   if (providerid) {
     try {
-      const moduleImport = await import(`@/config/aiModels/${providerid}`);
+      const moduleImport = await import(`@/config/aiModels/${providerid}.ts`);
       providerLocalConfig = moduleImport.default;
     } catch {
       // 如果配置文件不存在或导入失败，保持为 null

package/packages/utils/src/client/imageDimensions.test.ts

@@ -0,0 +1,95 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { getImageDimensions } from './imageDimensions';
+
+// Mock functions - need to be accessible in tests
+const mockAddEventListener = vi.fn();
+let mockImage: ReturnType<typeof vi.fn>;
+let mockCreateObjectURL: any;
+let mockRevokeObjectURL: any;
+
+// Store event handlers for manual triggering
+let loadHandler: (() => void) | null = null;
+let errorHandler: (() => void) | null = null;
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  loadHandler = null;
+  errorHandler = null;
+
+  // Mock Image constructor using vi.stubGlobal (modern approach)
+  const mockImageInstance = {
+    addEventListener: mockAddEventListener.mockImplementation(
+      (event: string, handler: () => void) => {
+        if (event === 'load') loadHandler = handler;
+        if (event === 'error') errorHandler = handler;
+      },
+    ),
+    naturalHeight: 600,
+    naturalWidth: 800,
+    src: '',
+  };
+
+  mockImage = vi.fn().mockImplementation(() => mockImageInstance);
+  vi.stubGlobal('Image', mockImage);
+
+  // Mock URL methods using vi.spyOn (preserves other URL functionality)
+  mockCreateObjectURL = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:mock-url');
+  mockRevokeObjectURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {});
+});
+
+describe('getImageDimensions', () => {
+  it('should return correct dimensions for valid File object', async () => {
+    const imageFile = new File(['fake image data'], 'test.png', { type: 'image/png' });
+
+    const resultPromise = getImageDimensions(imageFile);
+    loadHandler?.();
+    const result = await resultPromise;
+
+    expect(result).toEqual({ height: 600, width: 800 });
+    expect(mockImage).toHaveBeenCalledTimes(1);
+    expect(mockCreateObjectURL).toHaveBeenCalledWith(imageFile);
+    expect(mockRevokeObjectURL).toHaveBeenCalledWith('blob:mock-url');
+  });
+
+  it('should return correct dimensions for valid data URI', async () => {
+    const dataUri =
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+
+    const resultPromise = getImageDimensions(dataUri);
+    loadHandler?.();
+    const result = await resultPromise;
+
+    expect(result).toEqual({ height: 600, width: 800 });
+    expect(mockImage).toHaveBeenCalledTimes(1);
+    // Data URI should not use createObjectURL
+    expect(mockCreateObjectURL).not.toHaveBeenCalled();
+    expect(mockRevokeObjectURL).not.toHaveBeenCalled();
+  });
+
+  it('should return undefined for invalid inputs', async () => {
+    // Test non-image file
+    const textFile = new File(['content'], 'test.txt', { type: 'text/plain' });
+    const result1 = await getImageDimensions(textFile);
+    expect(result1).toBeUndefined();
+
+    // Test non-data URI string
+    const result2 = await getImageDimensions('https://example.com/image.jpg');
+    expect(result2).toBeUndefined();
+  });
+
+  it('should return undefined when image fails to load', async () => {
+    const imageFile = new File(['fake image data'], 'test.png', { type: 'image/png' });
+
+    const resultPromise = getImageDimensions(imageFile);
+    errorHandler?.(); // Simulate load error
+    const result = await resultPromise;
+
+    expect(result).toBeUndefined();
+    expect(mockCreateObjectURL).toHaveBeenCalledWith(imageFile);
+    expect(mockRevokeObjectURL).toHaveBeenCalledWith('blob:mock-url');
+  });
+});

package/packages/utils/src/client/imageDimensions.ts

@@ -0,0 +1,54 @@
+/**
+ * Helper function to extract image dimensions from File objects or base64 data URIs
+ * @param source The image source - either a File object or base64 data URI string
+ * @returns Promise resolving to dimensions or undefined if not an image or error occurs
+ */
+export const getImageDimensions = async (
+  source: File | string,
+): Promise<{ height: number; width: number } | undefined> => {
+  // Type guard and validation
+  if (typeof source === 'string') {
+    // Handle base64 data URI
+    if (!source.startsWith('data:image/')) return undefined;
+  } else {
+    // Handle File object
+    if (!source.type.startsWith('image/')) return undefined;
+  }
+
+  return new Promise((resolve) => {
+    const img = new Image();
+    let objectUrl: string | null = null;
+
+    const handleLoad = () => {
+      resolve({
+        height: img.naturalHeight,
+        width: img.naturalWidth,
+      });
+      // Clean up object URL if created
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+
+    const handleError = () => {
+      // Clean up object URL if created
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+      resolve(undefined);
+    };
+
+    img.addEventListener('load', handleLoad);
+    img.addEventListener('error', handleError);
+
+    // Set source based on input type
+    if (typeof source === 'string') {
+      // Base64 data URI - use directly
+      img.src = source;
+    } else {
+      // File object - create object URL
+      objectUrl = URL.createObjectURL(source);
+      img.src = objectUrl;
+    }
+  });
+};

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

@@ -18,10 +18,14 @@ 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
   maxFileSize?: number;
-  onChange?: (url?: string) => void;
+  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;
 }
@@ -483,8 +487,11 @@ const ImageUpload: FC<ImageUploadProps> = memo(
         });
 
         if (result?.url) {
-          // Upload successful
-          onChange?.(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
@@ -563,8 +570,11 @@ const ImageUpload: FC<ImageUploadProps> = memo(
         });
 
         if (result?.url) {
-          // Upload successful
-          onChange?.(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

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

@@ -2,14 +2,26 @@ 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, 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 maxFileSize={maxFileSize} onChange={handleChange} value={imageUrl} />;

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

@@ -2,16 +2,29 @@ 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, maxCount, maxFileSize } = useGenerationConfigParam('imageUrls');
+  const { autoSetDimensions, extractUrlAndDimensions } = useAutoDimensions();
 
   // When maxCount is 1, use ImageUpload for single image upload
   if (maxCount === 1) {
-    const handleSingleChange = (url?: string) => {
+    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 (
@@ -24,10 +37,22 @@ const ImageUrlsUpload = memo(() => {
   }
 
   // Otherwise use MultiImagesUpload for multiple images
-  const handleChange = (urls: string[]) => {
+  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;
+
     // 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 (

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

@@ -37,11 +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
   maxCount?: number;
   maxFileSize?: number;
-  onChange?: (urls: string[]) => void;
+  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[];
 }
@@ -648,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];
@@ -658,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) =>
@@ -694,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