tree c4bc73898f0d8be2723efd00866f4e53eb279532
parent 5f778949e023268d0bd39cb7f102952e575e9602
author Philip Zeyliger <philip@bold.dev> 1749254787 +0000
committer Philip Zeyliger <philip@bold.dev> 1749269577 +0000

webui: add image paste functionality to mobile chat input

Add comprehensive file paste support to mobile input matching desktop
functionality with upload progress indicators and error handling.

Problem Analysis:
Mobile webui lacked image paste functionality available on desktop,
preventing users from easily sharing screenshots, images, and files
via clipboard paste. This created workflow friction for mobile users
who needed to upload images for code assistance, debugging, or
documentation purposes.

Implementation Changes:

1. Clipboard Paste Handler:
   - Added paste event listener for detecting clipboard files
   - Integrated with existing upload infrastructure via fetch API
   - Cursor position preservation for inline file insertion
   - Prevented default paste behavior for file content

2. File Upload Infrastructure:
   - Reused desktop upload patterns with FormData and ./upload endpoint
   - Added loading placeholder with emoji indicator during upload
   - Implemented error handling with user-friendly error messages
   - File path insertion in [bracket] format matching desktop behavior

3. Upload Progress Management:
   - Added upload counter to track multiple concurrent uploads
   - Upload progress indicator with file count display
   - Disabled send button during active uploads to prevent premature sending
   - Visual feedback with hourglass icon and tooltip messages

4. Mobile-Optimized UI:
   - Positioned upload progress indicator above input field
   - Touch-friendly styling with appropriate spacing
   - Responsive design for various mobile screen sizes
   - Integrated seamlessly with existing mobile input styling

5. Lifecycle Management:
   - Proper event listener setup and cleanup
   - Component disconnection cleanup to prevent memory leaks
   - Textarea reference management for event binding
   - Focus restoration after upload completion

Technical Details:
- Uses ClipboardEvent.clipboardData.files for file detection
- FormData upload with POST to ./upload endpoint matching desktop
- Upload state management with progress counter and visual indicators
- Cursor position tracking via selectionStart for inline insertion
- Error handling with try/catch and user feedback

Benefits:
- Consistent file upload experience across desktop and mobile
- Improved mobile workflow for image sharing and file uploads
- Visual feedback during upload process prevents user confusion
- Proper error handling with informative messages
- Seamless integration with existing mobile chat functionality

Testing:
- Verified paste event detection works on mobile browsers
- Confirmed upload progress indicators display correctly
- Tested error handling with network failures
- Validated file path insertion and cursor positioning

This enhancement brings mobile webui file paste functionality to feature
parity with desktop while maintaining mobile-specific optimizations.

Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s495601fcaa89f012k