Skip to content

feat: Add file upload support in chat #48

@sre-helmcode

Description

@sre-helmcode

Summary

Allow users to upload files directly from the chat interface and attach them to messages sent to the agent team.

Current State

  • The chat input is a standard HTML <input> element in TeamMonitorPage.tsx (line 622-636)
  • The ChatRequest type only accepts { message: string } (types/index.ts, lines 272-274)
  • There is no file upload UI component, no <input type="file">, and no FormData handling
  • The Settings button (SkillStatusPanel) is the only icon next to the input

Proposed Solution

  1. Add a file attachment button (paperclip/attach icon) next to the Settings button in the chat input area
  2. Add a hidden <input type="file"> triggered by the attachment button
  3. Show file preview (name, size, type) as a chip/pill above the input when a file is attached
  4. Allow removing attached files before sending
  5. Modify handleSend() to use multipart/form-data when files are attached
  6. Supported file types: Common text files (.txt, .md, .json, .yaml, .py, .go, .ts, .js, etc.), images (.png, .jpg), and PDFs
  7. File size limit: Define a max file size (e.g., 10MB) with client-side validation

Layout Reference

┌──────────────────────────────────────────────────────┐
│ [📎 Attach] [⚙️ Settings] [textarea...]   [Send]    │
└──────────────────────────────────────────────────────┘

When a file is attached:

┌──────────────────────────────────────────────────────┐
│  📄 config.yaml (2.3 KB)  ✕                         │
├──────────────────────────────────────────────────────┤
│ [📎 Attach] [⚙️ Settings] [textarea...]   [Send]    │
└──────────────────────────────────────────────────────┘

Affected Files

  • src/pages/TeamMonitorPage.tsx — Chat input area (lines 613-644)
  • src/services/api.tschatApi.send() (lines 250-256)
  • src/types/index.tsChatRequest interface (lines 272-274)

Dependencies

  • Requires backend changes: New endpoint or modified POST /api/teams/:id/chat to accept multipart/form-data with file attachments. See companion issue in helmcode/agent_crew_api.

Acceptance Criteria

  • Attach button visible next to Settings icon in chat
  • Clicking attach opens file picker
  • Attached file shown as preview chip with remove option
  • File sent with message to backend
  • File size validation with user-friendly error
  • Supported file types validated
  • Works when team is in running state
  • Disabled when team is not running (like other chat controls)

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions