chore: fix blabsy image issue (#441)

Author: coodos

platforms/blabsy/src/components/input/image-preview.tsx

@@ -56,7 +56,34 @@ export function ImagePreview({
 
     // Combine accidentally separated base64 images
     const processedImages = useMemo(() => {
-        return combineBase64Images(imagesPreview);
+        console.log('[ImagePreview] Raw images received:', {
+            count: imagesPreview?.length || 0,
+            images: imagesPreview?.map((img, i) => ({
+                index: i,
+                id: img.id,
+                srcPreview: img.src.substring(0, 100),
+                srcLength: img.src.length,
+                alt: img.alt,
+                type: img.type
+            }))
+        });
+        
+        const processed = combineBase64Images(imagesPreview);
+        
+        console.log('[ImagePreview] Processed images:', {
+            originalCount: imagesPreview?.length || 0,
+            processedCount: processed.length,
+            processed: processed.map((img, i) => ({
+                index: i,
+                id: img.id,
+                srcPreview: img.src.substring(0, 100),
+                srcLength: img.src.length,
+                alt: img.alt,
+                type: img.type
+            }))
+        });
+        
+        return processed;
     }, [imagesPreview]);
 
     // Update previewCount based on processed images

platforms/blabsy/src/components/ui/next-image.tsx

@@ -36,6 +36,33 @@ export function NextImage({
 
     const handleLoad = (): void => setLoading(false);
 
+    // Check if the image source is a base64 data URI
+    const isBase64 = typeof src === 'string' && src.startsWith('data:');
+
+    // For base64 images, use a regular img tag to avoid Next.js optimization issues
+    if (isBase64) {
+        return (
+            <figure style={{ width }} className={className}>
+                <img
+                    className={cn(
+                        imgClassName,
+                        loading
+                            ? blurClassName ??
+                                  'animate-pulse bg-light-secondary dark:bg-dark-secondary'
+                            : previewCount === 1
+                            ? '!h-auto !min-h-0 !w-auto !min-w-0 rounded-lg object-contain'
+                            : 'object-cover',
+                        'w-full h-full'
+                    )}
+                    src={src}
+                    alt={alt}
+                    onLoad={handleLoad}
+                />
+                {children}
+            </figure>
+        );
+    }
+
     return (
         <figure style={{ width }} className={className}>
             <Image

platforms/blabsy/src/lib/utils/image-utils.ts

@@ -17,8 +17,6 @@ export function combineBase64Images(
         id: string;
     }> = [];
 
-    console.log('Processing images for base64 combining:', images.length);
-
     for (let i = 0; i < images.length; i += 2) {
         const dataPart = images[i];
         const chunkPart = images[i + 1];
@@ -31,11 +29,6 @@ export function combineBase64Images(
             ) {
                 // Combine the base64 parts
                 const combinedSrc = `${dataPart.src},${chunkPart.src}`;
-                console.log(`Combined base64 image at index ${i}:`, {
-                    original: dataPart.src.substring(0, 50) + '...',
-                    chunk: chunkPart.src.substring(0, 50) + '...',
-                    combined: combinedSrc.substring(0, 50) + '...'
-                });
 
                 result.push({
                     ...dataPart,
@@ -49,20 +42,15 @@ export function combineBase64Images(
         } else {
             // Handle odd number of images (last item)
             if (dataPart) {
-                if (dataPart.src.startsWith('data:')) {
-                    console.warn(
-                        `Incomplete base64 image at index ${i}, skipping`
-                    );
+                if (dataPart.src.startsWith('data:') && !dataPart.src.includes(',')) {
+                    // Incomplete base64 image, skip it
                 } else {
                     result.push(dataPart);
                 }
             }
         }
     }
 
-    console.log(
-        `Processed ${images.length} images into ${result.length} valid images`
-    );
     return result;
 }