Image upload to code

[aboutphilippe]

No description provided.

[mesa-dot-dev]

Mesa Description

TL;DR

Implemented image upload and display capabilities across the application, enabling multi-modal input for app creation prompts and a new client-side chat interface.

Why we made these changes

To enhance user interaction by allowing images to be included in prompts, enriching the content users can provide when creating apps or engaging in chat, thus making the application more versatile and user-friendly.

What changed?

• Image Handling & APIs:
  • New /api/upload endpoint for image uploads.
  • New /api/initial-message endpoint to temporarily store multi-part initial messages (text + images).
  • createApp action updated to support initialMessageParts for text and images.
• User Interface & Components:
  • Home page refactored with EnhancedPromptInput for text and image input, using the new /api/initial-message.
  • New EnhancedPromptInput component with image attachment, preview, compression, and management.
  • New client-side chat interface (src/app/scroller/chat/page.tsx) for displaying and sending text/image messages.
  • Added Carousel UI component and ScrollerPage to showcase image carousels.
  • Introduced ClientWrapper to ensure client-side rendering.
• Backend & Infrastructure:
  • ai-service.ts updated to convert UI message parts (including images) to Anthropic AI model format.
  • Redis client connections (redis.ts, stream-manager.ts) refactored for lazy initialization and improved error handling.
  • Disabled React strict mode and experimental React compiler in next.config.ts.
  • Dependencies updated: Added embla-carousel-react and openai.

Validation

• Image uploads are successful and return valid URLs.
• Images are correctly displayed in chat and app creation previews.
• Creating an app with an initial message containing both text and images functions correctly.
• Backward compatibility for existing initialMessage formats is maintained.
• Redis temporary storage and fallback mechanism operate as expected.
• UI components like EnhancedPromptInput and Carousel are functional and responsive.

[mesa-dot-dev]

Performed full review of 74316d1...64ca70f

^{17 files reviewed | 0 comments | Review on Mesa | Edit Reviewer Settings}