[coodos]

Description of change

fix the issue with blabsy not rendering some images

Issue Number

closes #440

Type of change

• Fix (a change which fixes an issue)

How the change has been tested

Change checklist

• I have ensured that the CI Checks pass locally
• I have removed any unnecessary logic
• My code is well documented
• I have signed my commits
• My code follows the pattern of the application
• I have self reviewed my code

Summary by CodeRabbit

• New Features
  • Added support for rendering base64-encoded image data URIs directly in the application.
• Bug Fixes
  • Improved image data validation logic for edge cases.
• Performance
  • Removed debug logging for cleaner operation and better performance.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

These changes fix base64-encoded image rendering in Blabsy by adding detection and fallback logic to render plain <img> tags for base64 sources, removing debug logging from the image processing utility, adjusting base64 validation logic, and adding instrumentation to the image preview component.

Changes

Cohort / File(s)	Change Summary
Base64 detection and rendering platforms/blabsy/src/components/ui/next-image.tsx	Added early-return branch to detect base64 data URIs in src prop and render plain <img> tag inside <figure> instead of Next Image component, while preserving className, onLoad handler, and children for base64 sources.
Image processing cleanup platforms/blabsy/src/lib/utils/image-utils.ts	Removed debug and progress logs from combineBase64Images; refined base64 validation to skip only when dataPart.src starts with "data:" and lacks a comma (previously unconditional warning).
Debug instrumentation platforms/blabsy/src/components/input/image-preview.tsx	Added console logging to useMemo to output raw and processed images with indexed metadata (id, srcPreview, srcLength, alt, type); introduced intermediate processed variable before return.

Sequence Diagram

sequenceDiagram
    participant User
    participant ImagePreview as ImagePreview
    participant NextImage as NextImage
    participant ImageUtils as ImageUtils
    
    User->>ImagePreview: Provide image(s)
    ImagePreview->>ImagePreview: Log raw images (console)
    ImagePreview->>ImageUtils: combineBase64Images()
    ImageUtils->>ImageUtils: Process & validate base64
    ImageUtils-->>ImagePreview: Return processed images
    ImagePreview->>ImagePreview: Log processed images (console)
    ImagePreview-->>NextImage: Pass src (base64 or URL)
    
    alt src is base64 data URI
        NextImage->>NextImage: Detect base64 prefix
        NextImage->>NextImage: Render plain img tag
    else src is standard URL
        NextImage->>NextImage: Render Next Image component
    end
    
    NextImage-->>User: Display image

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• next-image.tsx: Verify base64 detection regex/logic correctly identifies all base64 data URIs and doesn't conflict with existing src values; ensure fallback <img> rendering maintains parity with Next Image behavior (loading, error handling).
• image-utils.ts: Confirm the refined base64 validation logic (checking for "data:" prefix and comma presence) handles edge cases and doesn't introduce new failures for malformed base64.
• image-preview.tsx: Validate that logging side effects don't cause performance issues in useMemo and that the intermediate variable doesn't mask any underlying issues.

Suggested reviewers

• sosweetham
• xPathin

Poem

🐰 Base64 images hopped with care,
Now plain img tags flourish everywhere,
With logs to guide and logic refined,
Blabsy renders—no more behind!
The rabbit's fix brings pixels to light. ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/blabsy-image-rendering-issue

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2ab846e and eff866b.

📒 Files selected for processing (3)

• platforms/blabsy/src/components/input/image-preview.tsx (1 hunks)
• platforms/blabsy/src/components/ui/next-image.tsx (1 hunks)
• platforms/blabsy/src/lib/utils/image-utils.ts (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}