refactor(web): extract attachment upload into a composable#1034
Merged
Conversation
Move the image/video attachment state, the file-picker / paste / drag-drop handlers, the upload machinery, the preview lightbox, and the paste-listener + object-URL cleanup lifecycle out of Composer into useAttachmentUpload. The composer keeps handleSubmit / handleSteer (which read the attachments to build the payload) and the hasUpload toolbar flag; it consumes the returned refs and handlers directly. The destructured names match the originals so the template bindings are unchanged. handleSubmit / handleSteer now call the composable's clearAfterSubmit() to revoke object URLs and drop the list. Composer.vue: 1937 -> 1787 lines. Adds unit tests for useAttachmentUpload. No behavior change.
🦋 Changeset detectedLatest commit: 7dd86fa The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
commit: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related Issue
Part of the
apps/kimi-webgod-component split tracked inweb-refactor-plan.md(follows #1011, #1026, #1030, #1031). This is the final Composer slice. No standalone issue.Problem
Composer.vuewas the largest component in the web app (~1937 lines after #1031). The image/video attachment handling — the chip strip, the file picker, paste, drag & drop, the upload machinery, and the preview lightbox — is a cohesive feature that lived inline in the composer, intertwined with the draft, the slash/mention menus, and the keydown orchestration.What changed
apps/kimi-web/src/composables/useAttachmentUpload.ts:attachments/previewAttachment/fileInputRef/isDragOverstate, theAttachmenttype, the file-picker / paste / drag-drop handlers, theaddFilesupload machinery, and theclearAfterSubmit()helper.pastelistener on mount and revokes all object URLs + removes the listener on unmount.{ uploadImage: () => ... }as a dep.Composer.vue:Attachmentinterface with a singleuseAttachmentUpload({ uploadImage: () => props.uploadImage })call, destructured back to the original names so the template bindings (chip strip, lightbox, file input, drag handlers) are unchanged.handleSubmit/handleSteernow callclearAfterSubmit()to revoke object URLs and drop the list, instead of the inline revoke loop.onMounted/onUnmountedno longer touch the paste listener or attachment cleanup (the composable owns those).test/attachment-upload.test.ts(7 cases: file-input add, non-media ignore, no-op withoutuploadImage, remove + revoke, remove closing the preview, preview open/close,clearAfterSubmit).No user-visible behavior change. Logic moved verbatim; only the call sites were re-wired.
Verification
pnpm --filter @moonshot-ai/kimi-web typecheck— pass (vue-tsc --noEmit)pnpm --filter @moonshot-ai/kimi-web test— 83 passedpnpm --filter @moonshot-ai/kimi-web build— passoxlint --type-awareon the changed files — 0 warnings, 0 errorsChecklist
test/attachment-upload.test.ts.)gen-changesetsskill, or this PR needs no changeset. (Added.changeset/web-extract-attachment-upload.md,patchon@moonshot-ai/kimi-code.)gen-docsskill, or this PR needs no doc update. (No user-facing change.)