feat: add AI chatbot demo with modern mobile-focused UI and picture-in-picture

[devin-ai-integration[bot]]

trafficstars

AI Chatbot Demo with Modern Mobile-Focused UI and Picture-in-Picture

This PR adds a new demo to the Cupertino Panes playground that showcases a modern, mobile-focused AI chatbot interface integrated with the pane component, featuring picture-in-picture functionality, synthwave grid background, and a collapsible UI.

Features

• Picture-in-Picture functionality: Movable pane on X-Y axis with horizontal module integration
• Synthwave grid background: Animated grid with purple gradient for modern aesthetic
• Collapsible UI: Minimizes to a glowing robot square when inactive
• Modern mobile-first design: Dark theme with backdrop blur, responsive breakpoints
• AI conversation simulation: Keyword-based responses with typing indicators
• CupertinoPane integration: Auto-height adjustment, swipe gestures, multiple breakpoints
• Directional movement indicators: Animated arrows showing available movement directions

Screenshots

Testing

The implementation has been tested in the browser and verified to work correctly:

• Pane can be moved on both X and Y axis
• Chat interface allows sending and receiving messages
• AI typing indicator displays correctly
• Pane collapses to a glowing robot icon when dismissed
• Clicking the robot icon expands the chat back
• Directional arrows appear to guide movement
• Synthwave grid background displays and animates correctly

Link to Devin run

https://app.devin.ai/sessions/4765e918ebf74aec8c7ba15fad724846

Requested by

Roman ([email protected])

[devin-ai-integration[bot]]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• [ ] Disable automatic comment and CI monitoring

[roman-rr]

@preechapon-cmd Thank you to Approve my friend, its works good but not perfect, I will adjust in couple days.

[devin-ai-integration[bot]]

Devin is currently unreachable - the session may have died.

[devin-ai-integration[bot]]

Closing due to inactivity for more than 7 days.