Skip to content

feat(web): splash composer image attachment (drag, paste, +) - #7

Merged
jlmcmich merged 1 commit into
mainfrom
feat/splash-composer-images
Apr 19, 2026
Merged

feat(web): splash composer image attachment (drag, paste, +)#7
jlmcmich merged 1 commit into
mainfrom
feat/splash-composer-images

Conversation

@jlmcmich

Copy link
Copy Markdown
Owner

Summary

The splash composer (NoActiveThreadState) now accepts image attachments via the same patterns as the in-thread chat composer:

  • Paperclip + button next to submit (file picker, image/* multi-select)
  • Drag-and-drop anywhere on the form card (border tints blue while dragging)
  • Paste clipboard images via ⌘+V on the textarea
  • Thumbnail strip above the textarea with a per-image remove X
  • Image-only MIME validation, per-file size cap, total attachment count cap; errors surface in the existing error message slot
  • Object URLs revoked on remove and on unmount

Submit flow

After setPrompt and before the auto-submit signal, attached images are pushed into the new draft via `draftStore.addImages(draftId, ...)`. ChatView's onSend then picks them up via `composerImagesRef` like any other draft attachment.

Notes

The reusable-hook extract from ChatComposer was deferred — splash state lives locally (until the draft exists) while ChatComposer state is store-backed, so bridging both behind one hook is more complex than the splash-side duplication is worth right now.

Test plan

  • Typecheck clean
  • Drag, paste, and + button each add a thumbnail
  • Submitted message lands in chat with images intact

Bring the splash composer to feature parity with the in-thread chat
composer's image handling:

- Paperclip + button next to the submit button opens a hidden file
  input (image/* multi-select).
- Paste handler on the textarea picks up clipboard images and adds them.
- Drag-and-drop anywhere on the form card adds files; the card border
  tints blue while dragging.
- Thumbnail strip above the textarea, each thumbnail with a remove X.
- Validation: image MIME types only, per-file PROVIDER_SEND_TURN_MAX_IMAGE_BYTES,
  total PROVIDER_SEND_TURN_MAX_ATTACHMENTS. Errors render in the
  existing error message slot.
- Object URLs revoked on remove + on unmount so we don't leak.
- Submit button enables when prompt OR images are present (was: prompt
  only). + button disables at the attachment limit.
- On submit: attached images flow into the new draft via
  draftStore.addImages(draftId, ...) before the auto-submit signal —
  ChatView's onSend then picks them up via composerImagesRef like
  any other draft attachment.

The reusable-hook extract from ChatComposer was deferred — the splash
state lives locally (until the draft exists) while the chat composer
state is store-backed, so a single shared hook would have to bridge
both. Splash-side is self-contained for now.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@jlmcmich
jlmcmich merged commit 213e4b0 into main Apr 19, 2026
@jlmcmich
jlmcmich deleted the feat/splash-composer-images branch April 19, 2026 23:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant