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
- Add a file attachment button (paperclip/attach icon) next to the Settings button in the chat input area
- Add a hidden
<input type="file"> triggered by the attachment button
- Show file preview (name, size, type) as a chip/pill above the input when a file is attached
- Allow removing attached files before sending
- Modify
handleSend() to use multipart/form-data when files are attached
- Supported file types: Common text files (.txt, .md, .json, .yaml, .py, .go, .ts, .js, etc.), images (.png, .jpg), and PDFs
- 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.ts — chatApi.send() (lines 250-256)
src/types/index.ts — ChatRequest 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
Summary
Allow users to upload files directly from the chat interface and attach them to messages sent to the agent team.
Current State
<input>element inTeamMonitorPage.tsx(line 622-636)ChatRequesttype only accepts{ message: string }(types/index.ts, lines 272-274)<input type="file">, and noFormDatahandlingProposed Solution
<input type="file">triggered by the attachment buttonhandleSend()to usemultipart/form-datawhen files are attachedLayout Reference
When a file is attached:
Affected Files
src/pages/TeamMonitorPage.tsx— Chat input area (lines 613-644)src/services/api.ts—chatApi.send()(lines 250-256)src/types/index.ts—ChatRequestinterface (lines 272-274)Dependencies
POST /api/teams/:id/chatto acceptmultipart/form-datawith file attachments. See companion issue inhelmcode/agent_crew_api.Acceptance Criteria
runningstate