Support file/image sending in Gateway Chat UI

[imadaitelarabi]

Feature Request: Gateway Chat UI File/Image Upload

The input component should support file attachments via drag-and-drop, paste, and a dedicated upload button.

Requirements

• Drag and Drop: Users can drag files into the chat input area to attach them.
• Paste: Users can paste images from the clipboard directly into the input.
• Upload Button: A button inside the input area triggers the device's file picker.
• Tooltip: Hovering over the upload button displays file limits and requirements (e.g., max size, allowed types).
• Error Handling: Upload errors should use the existing toast notification system for consistency.
• Preview: Display thumbnails of attached files with a remove option before sending.

Context

This enhances the Gateway Chat experience by providing standard file sharing capabilities expected in modern chat interfaces.

Technical Implementation

Client-Side (Control UI / WebChat):

1. State Management:

   • Add chatAttachments state to the chat component to track pending files.
   • Store metadata: file, previewUrl (for images), and uploadStatus.

2. Input Handling:

   • Drag & Drop: Add dragover and drop listeners to the chat input container.
   • Paste: Listen for paste events on the textarea; check clipboardData.items for file types.
   • File Picker: Implement a hidden <input type="file" multiple> triggered by the attachment icon button.

3. Processing & Validation:

   • Limits: Validate against channel configuration (if available in session/hello snapshot) or enforce a safe WebSocket frame limit (e.g., 10MB).
   • Conversion: Read files using FileReader to convert them to Base64 Data URIs.

4. Protocol (WebSocket):

   • Use the existing chat.send method.
   • Populate the attachments field in the payload:

     {
       "method": "chat.send",
       "params": {
         "sessionKey": "...",
         "message": "...",
         "attachments": [
           {
             "name": "filename.png",
             "mimeType": "image/png",
             "media": "data:image/png;base64,..."
           }
         ]
       }
     }

5. UI Components:

   • Render an attachment preview strip above the text input.
   • Show thumbnails for images and generic file icons for other types.
   • Include a "Remove" (X) button for each attachment.

[imadaitelarabi]

Closing as requested; moving to Mission Control repository.