Hermes Switch UI — Chat Attachment Flow

From file drop / paste to provider content block — with size caps enforced at each stage

USER / BROWSER COMPOSER (chat-composer.tsx) SERVER + AGENT User drag & drop file or paperclip picker or paste image ① INPUT cap: 50 MB (UI) Composer detects onDrop / onPaste / onChange preview chip appears ② DETECT image? file type check yes Compress canvas resize ≤ 1920px JPEG 85% quality ③ COMPRESS cap: 1 MB (transport) no (text/code: read as UTF-8) Base64 encode image → image content block text → data:text/…;base64, ④ ENCODE Attach to payload content: [{type,data}, ...] Zustand chat-store ⑤ ASSEMBLE POST /api/send rate-limit + CSRF check auth-gated server handler ⑥ SEND hermes-agent decodes content blocks forwards to provider ⑦ FORWARD AI Provider multipart content blocks model reads file + prompt ⑧ PROVIDER Legend browser / UI image compress path server / agent auth-gated + rate-limited size cap enforced

Size caps

  • · UI input cap: 50 MB per file
  • · Transport cap: 1 MB per image after compress
  • · Images: resized to ≤ 1920 px longest side
  • · Compression: JPEG 85% quality via canvas

Supported types

  • · Images: PNG, JPEG, GIF, WebP, BMP, SVG, AVIF, HEIC, TIFF
  • · Text: .md, .txt, .json, .csv, .ts, .tsx, .js, .py
  • · Binary (PDF, Word): not yet supported

Encoding on wire

  • · Images → base64 image content block
  • · Text → data:text/…;base64, URI prefix
  • · Agent decodes and presents to model
  • · Consumes context window proportionally
Hermes Switch UI · Chat Attachment Flow · chat-composer.tsx → /api/send → hermes-agent → provider