refactor(web): extract @-mention menu into a composable#1030
Merged
Conversation
Move the @-mention menu's open/items/active/loading state, the @token detection, debounced search, and insertion logic out of Composer into useMentionMenu. The composer keeps the keydown orchestration (it also juggles the slash menu and history recall) and consumes the returned refs directly; the destructured refs are aliased back to the original names so the rest of the component is unchanged. Move the FileItem view type into types.ts (mirroring the FileData move) so the .ts composable can import it without hitting the type-aware lint rule against importing types from .vue files; MentionMenu re-exports it for the existing .vue consumers. Composer.vue: 2035 -> 1987 lines. Adds unit tests for useMentionMenu. No behavior change.
🦋 Changeset detectedLatest commit: aa300c0 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: |
Merged
This was referenced Jun 23, 2026
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 #1011useInputHistory, #1026useSlashMenu). This is the next Composer slice. No standalone issue.Problem
Composer.vueis still the largest component (~2035 lines after #1026). The@file-mention menu is a self-contained feature — its open/items/active/loading state, the@tokendetection, the debounced search, and insertion — that lived inline in the composer alongside the draft, the slash menu, attachments, and the keydown orchestration.What changed
apps/kimi-web/src/composables/useMentionMenu.ts:open/items/active/loadingstate, the@tokendetection, the debounced search, andselect(item)insertion.{ text, textareaRef, autosize, searchFiles }as deps — same DI shape asuseSlashMenu/useInputHistory.Composer.vue:useMentionMenu(...)call, destructured back to the original names (mentionOpen,mentionItems,mentionActive,mentionLoading,updateMentionMenu,selectMentionItem) so the rest of the component — the keydown navigation,handleSubmit,handleSteer, and the<MentionMenu>template binding — is unchanged.FileItemview type intotypes.ts(mirroring the earlierFileDatamove) so the.tscomposable can import it without tripping the type-aware lint rule against importing types from.vuefiles.MentionMenu.vuere-exports it, so the existing.vueconsumers (Composer,ChatDock,ConversationPane) keep working unchanged.test/mention-menu.test.ts(6 cases: update with/without@token, missingsearchFiles, search results, search error, and select insertion / no-op).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— 70 passedpnpm --filter @moonshot-ai/kimi-web build— passoxlint --type-awareon the changed files — 0 warnings, 0 errorsChecklist
test/mention-menu.test.ts.)gen-changesetsskill, or this PR needs no changeset. (Added.changeset/web-extract-mention-menu.md,patchon@moonshot-ai/kimi-code.)gen-docsskill, or this PR needs no doc update. (No user-facing change.)