📐 fix: Replace JS Image Scaling with CSS Viewport Constraints (#12089)

* fix: remove scaleImage function that stretched vertical images

* chore: lint

* refactor: Simplify Image Component Usage Across Chat Parts

- Removed height and width props from the Image component in various parts (Files, Part, ImageAttachment, LogContent) to streamline image rendering.
- Introduced a constant for maximum image height in the Image component for consistent styling.
- Updated related components to utilize the new simplified Image component structure, enhancing maintainability and reducing redundancy.

* refactor: Simplify LogContent and Enhance Image Component Tests

- Removed height and width properties from the ImageAttachment type in LogContent for cleaner code.
- Updated the image rendering logic to rely solely on the filepath, improving clarity.
- Enhanced the Image component tests with additional assertions for rendering behavior and accessibility.
- Introduced new tests for OpenAIImageGen to validate image preloading and progress handling, ensuring robust functionality.

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

client/src/utils/index.ts

@@ -29,7 +29,6 @@ export * from './share';
 export * from './timestamps';
 export { default as cn } from './cn';
 export { default as logger } from './logger';
-export { default as scaleImage } from './scaleImage';
 export { default as getLoginError } from './getLoginError';
 export { default as cleanupPreset } from './cleanupPreset';
 export { default as buildDefaultConvo } from './buildDefaultConvo';

client/src/utils/scaleImage.ts

@@ -1,21 +0,0 @@
-export default function scaleImage({
-  originalWidth,
-  originalHeight,
-  containerRef,
-}: {
-  originalWidth?: number;
-  originalHeight?: number;
-  containerRef: React.RefObject<HTMLDivElement>;
-}) {
-  const containerWidth = containerRef.current?.offsetWidth ?? 0;
-
-  if (containerWidth === 0 || originalWidth == null || originalHeight == null) {
-    return { width: 'auto', height: 'auto' };
-  }
-
-  const aspectRatio = originalWidth / originalHeight;
-  const scaledWidth = Math.min(containerWidth, originalWidth);
-  const scaledHeight = scaledWidth / aspectRatio;
-
-  return { width: `${scaledWidth}px`, height: `${scaledHeight}px` };
-}