feat: replace upload button with dropdown menu for image and screenshot

[Rish-it]

Description

This PR implements the image + screenshot menu feature requested in issue #2197. The changes replace the single upload button with a dropdown menu containing two options:

Key Changes:

• ActionButtons Component: Replaced single image upload button with a DropdownMenu containing:
  • "Upload Image" option (preserves existing functionality)
  • "Screenshot" option (new functionality using existing frame capture API)
• ChatInput Layout: Updated button positioning from justify-between to justify-end to move both action buttons and send button to the right side (matching Cursor editor style)
• Screenshot Functionality: Integrates existing frameView.captureScreenshot() API to capture screenshots of the current frame
• Error Handling: Added proper user-facing error messages using toast notifications
• UX Improvements: Maintained focus management with proper button blur behavior

Screenshots are automatically labeled as "Screenshot" and appear as image pills above the prompt, just like regular uploaded images.

Related Issues

Closes #2197

Type of Change

• [ ] Bug fix
• [x] New feature
• [ ] Documentation update
• [ ] Release
• [ ] Refactor
• [ ] Other (please describe):

Testing

To test this feature:

1. Test Dropdown Menu:

   • Navigate to any project with an active frame
   • Look for the image button in the chat input area (should now be on the right side)
   • Click the image button to see the dropdown menu with two options

2. Test Upload Image (existing functionality):

   • Click "Upload Image" from the dropdown
   • Select an image file from your computer
   • Verify the image appears as a pill above the chat input
   • Verify the image can be used in chat messages

3. Test Screenshot (new functionality):

   • Ensure you have an active frame loaded in the canvas
   • Click "Screenshot" from the dropdown
   • Verify a screenshot is captured and appears as a pill labeled "Screenshot"
   • Verify the screenshot can be used in chat messages

4. Test Error Handling:

   • Try taking a screenshot when no frame is active
   • Verify appropriate error toast appears

5. Test Layout:

   • Verify both the image dropdown and send button are positioned on the right side
   • Verify proper spacing between buttons

Screenshots (if applicable)

Screenshots will be added once the feature is deployed and can be visually demonstrated.

Additional Notes

• Reused Existing APIs: The screenshot functionality leverages the same captureScreenshot() method used in the project breadcrumb for consistency
• TypeScript Compliance: All changes maintain proper TypeScript types and error handling
• UI Consistency: The dropdown menu follows existing design patterns used throughout the application
• Focus Management: Proper button blur behavior is maintained to prevent tooltip display issues after dropdown interactions
• Backwards Compatibility: All existing image upload functionality remains unchanged

The implementation closely follows the mockup and requirements specified in the original issue, providing a clean and intuitive way for users to add both uploaded images and screenshots to their chat context.

---

[!IMPORTANT] Replaces image upload button with a dropdown menu for image uploads and screenshots, updating ActionButtons and ChatInput components.

• Components:
  • ActionButtons: Replaces single upload button with DropdownMenu for "Upload Image" and "Screenshot" options.
  • ChatInput: Changes button layout to justify-end for right alignment.
• Functionality:
  • handleScreenshot: Uses frameView.captureScreenshot() to capture screenshots, with error handling via toast notifications.
  • handleOpenFileDialog: Opens file dialog for image upload, maintaining existing functionality.
• Error Handling:
  • Displays toast notifications for errors like no active frame or screenshot failures.
• UX Improvements:
  • Maintains focus management and button blur behavior to prevent tooltip issues.

^{This description was created by for f68740a2e46abd097bf7900b1833a226e9fc7c27. You can customize this summary. It will automatically update as commits are pushed.}

[vercel[bot]]

@Rish-it is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.

[Kitenite]

@Rish-it, while you're at it, I think the chat may not be receiving the image context. Not sure if it was disabled by default. Would you mind debuggin that? Looks great btw!

[Rish-it]

@Kitenite sure let me look into it, meanwhile #2178 is ready to merge and I still need your input on #1894

[Rish-it]

Issue was Images were getting cleared when selection change due to getChatContext() replacing the entire context array.

// Before:
const imageContext = await this.getImageContext();

// After:
const existingImages = this.context.filter(
    (context) => context.type === MessageContextType.IMAGE,
);

Images now persist and reach the chat as expected.