Support Attachments in Chat Inputs

[hussufo]

Problem Description

The current front-end implementation already supports file attachments in chat inputs (e.g. in components/ui/ChatInput/index.tsx), allowing users to select images (PNG/JPEG) with validations (e.g., maximum size of 30MB, maximum of 5 files). However, the backend has not been updated to process these attachments, so the end-to-end flow is incomplete.

Proposed Solution

• Update the Chat API Endpoint: Modify the backend endpoint (e.g., /api/chat) to accept file attachments as part of the request payload.
• File Validation and Processing:
  • Validate file types (allow only PNG and JPEG) and file sizes (limit to 30MB per file).
  • Decide whether to temporarily store attachments or convert them (e.g., encode as Base64) and pass them along with the chat message.
• Integrate with the Agent Flow:
  • Ensure that the attachments are forwarded to the relevant agent for further processing or response generation.
  • Update the models if necessary to include an attachment field and update any related logic.
• Error Handling and Logging:
  • Provide clear error messages if file validation fails.
  • Log any issues encountered during the processing of attachments on the backend.

Alternatives Considered

• Separate Upload Endpoint: Implement a separate endpoint for file uploads and link the attachment URL or identifier with the chat message.
• Direct Base64 Encoding: Encode attachments as Base64 strings directly within the chat payload. This approach, however, could increase the payload size significantly and may not be optimal for larger files.

Additional Context

The front-end has implemented much of the attachment functionality. For example, the relevant code snippet from components/ui/ChatInput/index.tsx handles file selection and validations:

function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
  if (!e.target.files) return;
  const chosenFiles = Array.from(e.target.files);
  let updated = [...attachments];
  for (let file of chosenFiles) {
    // Enforce limit: only .png or .jpeg
    if (!/\.(png|jpe?g)$/i.test(file.name)) {
      console.warn(`Skipping file ${file.name}: not a PNG/JPEG`);
      continue;
    }
    // Enforce 30MB max
    if (file.size > 30 * 1024 * 1024) {
      console.warn(`Skipping file ${file.name}: exceeds 30MB limit`);
      continue;
    }
    // Do not exceed total of 5
    if (updated.length >= 5) break;
    updated.push(file);
  }
  setAttachments(updated);
  // Reset the file input so the same file can be picked again if needed
  e.target.value = "";
}

Implementing the complete back-end logic to handle these attachments will close the loop, providing users with an end to end attachment experience from file selection in the UI to attachment processing by the AI agents.