Skip to content

feat(ui): update context menu - #4362

Merged
TheodoreSpeaks merged 7 commits into
stagingfrom
feat/remove-search-context-menu
Apr 30, 2026
Merged

feat(ui): update context menu#4362
TheodoreSpeaks merged 7 commits into
stagingfrom
feat/remove-search-context-menu

Conversation

@TheodoreSpeaks

Copy link
Copy Markdown
Collaborator

Summary

Change context menu for copilot/mothership inputs.

  • Attachments is now a separate paperclip icon to reduce nested dropdown menu. Now plus icon is exclusively for mothership resources
  • @ ing a resource by typing doesn't steal focus but rather continues typing while opening down a minimal search menu fixed above the text input box. This way you can still use the @ symbol without referencing a resource and the text focus doesn't get stolen.

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation
  • Other: ___________

Testing

  • Tested locally, on copilot, mothership home and task views

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

imageimageimageimageimageimage

@vercel

vercelBot commented Apr 30, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
ProjectDeploymentActionsUpdated (UTC)
docsSkippedSkippedApr 30, 2026 8:46pm

Request Review

@TheodoreSpeaks

Copy link
Copy Markdown
CollaboratorAuthor

@BugBot review

@cursor

cursorBot commented Apr 30, 2026

Copy link
Copy Markdown

PR Summary

Medium Risk
Moderate UI/UX behavior changes to chat input focus, keyboard handling, and dropdown menu interactions; risk is mainly regressions in mention insertion, navigation, and focus management rather than data/security issues.

Overview
Updates the chat input’s context/plus menu flow by splitting attachments into a dedicated paperclip button and making the + dropdown exclusively for inserting workspace resources.

Adds a new mention-driven resource picker mode: typing @ opens the same dropdown in a non-focus-stealing mode (no search input, filtered by the live mention query, anchored above the input), with new imperative controls (close, moveActive, selectActive) to support Arrow/Tab/Enter selection and correct replacement of the active @... range.

Extends the shared DropdownMenuContent wrapper to expose Radix’s onOpenAutoFocus typing so mention mode can prevent the default focus trap behavior, and includes a small styling tweak to ShortInput to keep selection text transparent.

Reviewed by Cursor Bugbot for commit e6e091b. Bugbot is set up for automated code reviews on this repo. Configure here.

Resolved conflicts:
- user-input.tsx: kept HEAD's mention-menu logic (syncMentionState, mentionRangeRef, useCallback handleInputChange) over staging's simplified inline handleInputChange
- short-input.tsx: kept HEAD's selection:text-transparent fix from #4318
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Programmatic plusMenuRef.close() sets the dropdown's internal open=false but
Radix doesn't fire onOpenChange for controlled changes, so handlePlusMenuClose
never ran and mentionRangeRef stayed truthy after submitting a message with
an active @mention. That caused the keydown handler to keep intercepting
ArrowUp/ArrowDown/Tab post-submit, breaking the "edit last queued message"
ArrowUp shortcut until the user typed again.
Clear mentionRangeRef and mentionQuery inline alongside the close() call.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@TheodoreSpeaks
TheodoreSpeaks marked this pull request as ready for review April 30, 2026 19:57
@greptile-apps

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR redesigns the context menu for copilot/mothership inputs: the paperclip attachment action moves to its own standalone Button + Tooltip, and the @ mention trigger no longer steals textarea focus — instead, a floating resource picker appears above the input while typing continues uninterrupted, with keyboard navigation via ArrowUp/ArrowDown/Tab.

  • P1folder type items are not excluded from the mention-mode filteredItems list (the non-mention view explicitly filters them out), so folders appear as selectable mentions and can be inserted as @FolderName references that the backend parser likely won't resolve.
  • P1 — Pressing Enter while the mention dropdown is open and an item is highlighted does not select the mention; it falls through to handleSubmit() and fires the form, which is surprising when a visible selection exists.

Confidence Score: 3/5

Two P1 logic bugs in the new mention flow should be fixed before merging.

Two P1 findings present: folder items leaking into the mention list, and Enter submitting the form while a highlighted mention item is visible. Both affect the primary new feature added in this PR.

plus-menu-dropdown.tsx (folder filter in mention mode) and user-input.tsx (Enter key handling in mention block)

Important Files Changed

FilenameOverview
apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsxReworked to support mention mode: adds isMention state, exposes close/moveActive/selectActive via imperative handle, hides the search input in mention mode, and prevents Radix focus-trap on open. Two issues: folder items aren't excluded from the mention-mode filtered list, and the type cast on DropdownMenuContent props spread is unnecessary.
apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsxMajor refactor: removes the DOM-mirror caret-anchor helper, introduces mentionRangeRef/mentionQuery state, adds syncMentionState to track live mention ranges, and moves the paperclip into a standalone Button + Tooltip. The Enter key is not intercepted while the mention dropdown is open, causing form submission instead of mention selection.
apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.tsExtends PlusMenuHandle interface with close, moveActive, and selectActive to support the new imperative control surface — clean additive change.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsxOne-line CSS fix: adds selection:text-transparent to prevent visible text selection highlights in the transparent-text overlay input.
apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsxSurfaces the undocumented Radix onOpenAutoFocus prop via a local DropdownMenuContentProps extension; the type cast that strips it back when spreading is redundant and slightly misleading.

Sequence Diagram

sequenceDiagram
participant U as User (textarea)
participant UI as UserInput
participant PM as PlusMenuDropdown
U->>UI: type "@foo"
UI->>UI: handleInputChange -> syncMentionState
UI->>UI: mentionRangeRef = {start, end}
UI->>PM: open(anchor, {mention: true})
PM->>PM: isMention=true, onOpenAutoFocus prevented
Note over PM: Focus stays in textarea
U->>UI: ArrowDown / ArrowUp
UI->>PM: moveActive(+-1)
PM->>PM: setActiveIndex
U->>UI: Tab
UI->>PM: selectActive()
PM->>UI: onResourceSelect({type, id, title})
UI->>UI: replace mentionRange with @Title
UI->>UI: mentionRangeRef=null, setMentionQuery(null)
U->>UI: Enter (no mention guard)
UI->>UI: handleSubmit() -- dropdown still open!
U->>UI: Paperclip button click
UI->>UI: handleFileSelectStable()
Loading

Reviews (1): Last reviewed commit: "fix(user-input): clear mention state on ..." | Re-trigger Greptile

Long resource names were truncating in a 320px-wide menu. Bump to 420px and
cap with max-w on viewport so it can't overflow on small screens. Overrides
the emcn DropdownMenuContent's default max-w-[220px] via twMerge.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
420px felt too wide; 360px gives long resource names enough room without
dominating the input area.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

@cursorcursorBot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 3087995. Configure here.

- plus-menu-dropdown: drop folder type from the flat mention list (folders organize
resources but aren't an insertable mention target — the nested rendering already
excludes them).
- user-input: fold Enter into the mention-mode keydown guard so Enter confirms the
highlighted resource instead of submitting the form. Falls through to the normal
Enter-submit path when no match is highlighted (Tab keeps prior behavior).
- dropdown-menu wrapper: drop the misleading cast on the spread — runtime accepts
onOpenAutoFocus regardless and the cast was hiding any future props added to
DropdownMenuContentProps.
- plus-menu-dropdown: trim mention-mode + submenu widths to 300px (320px clipped on
the narrower copilot panel).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for freeto 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

@TheodoreSpeaks