improvement(home): position @ mention popup at caret and fix icon consistency by waleedlatif1 · Pull Request #3831 · simstudioai/sim

waleedlatif1 · 2026-03-28T21:26:26Z

Summary

@ mention popup now opens relative to where `@` was typed (mirror div technique for caret position) instead of always anchoring to the + button
- button click still opens the menu anchored to the button as before
Full keyboard navigation: ArrowDown from search focuses first item, ArrowUp from first item returns to search, Enter selects first filtered result
Fixed icon spacing inconsistency across resource types — workflow, file, knowledge base, and table items now all use consistent `gap-2` from the parent `DropdownMenuItem`
Added icons to knowledge base and table dropdown items (previously showed text only)

Type of Change

Bug fix
Improvement

Testing

Tested manually

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)

vercel · 2026-03-28T21:26:31Z

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 28, 2026 9:43pm

cursor · 2026-03-28T21:26:32Z

PR Summary

Medium Risk
UI behavior changes in the chat input dropdown (anchoring and keyboard focus handling) could introduce regressions in menu positioning/focus across browsers, but scope is limited to client-side interaction. Small auth helper tweak changes a boolean return path but should remain functionally equivalent (undefined vs false).

Overview
The @ mention/plus menu in UserInput is now opened anchored to the caret position (via a mirrored textarea measurement) instead of always anchoring to the + button, while + clicks still open relative to the button.

The dropdown was refactored to support an explicit anchor point and improved keyboard navigation (ArrowDown moves focus into results, ArrowUp from first result returns to search, Enter selects the first match).

Resource dropdown rendering was standardized by adding a reusable IconDropdownItem and updating table/knowledgebase items to include consistent icons/spacing in the registry.

^{Written by Cursor Bugbot for commit 617983e. Configure here.}

…sistency

waleedlatif1 · 2026-03-28T21:31:28Z

@greptile

waleedlatif1 · 2026-03-28T21:31:32Z

@cursor review

greptile-apps · 2026-03-28T21:36:49Z

Greptile Summary

This PR improves the @ mention popup to open at the caret position (using a mirror-div technique) instead of always anchoring to the + button, refactors PlusMenuDropdown keyboard navigation to use native focus rather than a managed active-index, and fixes icon consistency across resource dropdown items (knowledge base and table now show icons matching the other resource types).

Key changes:

getCaretAnchor() in user-input.tsx correctly implements the mirror-div approach with top:0/left:0 origin pinning and scroll offset correction
plus-menu-dropdown.tsx decouples the visible + button from DropdownMenuTrigger, using a zero-size invisible div as the trigger anchor and calling doOpen() directly from the button; ArrowDown from search focuses the first item, ArrowUp on the first item returns focus to search
resource-registry.tsx introduces IconDropdownItem and removes redundant spacing overrides (mr-[0px], mr-2) in favour of the parent DropdownMenuItem's existing gap-2
hybrid.ts: removing ?? false from hasExternalApiCredentials makes the function return boolean | undefined instead of boolean, which is a type error under the project's strict: true TypeScript configuration — the ?? false guard needs to be restored

Confidence Score: 4/5

Safe to merge after restoring the ?? false guard in hybrid.ts to fix the strict-mode TypeScript type error.

All UI improvements are well-implemented and the previously raised concerns (mirror-div origin pinning, early-return for null button rect) have been addressed. A single one-line type regression in hybrid.ts (boolean | undefined returned as boolean under strict: true) needs to be fixed before merge.

apps/sim/lib/auth/hybrid.ts — missing ?? false guard introduces a TypeScript strict-mode type error.

Important Files Changed

Filename	Overview
apps/sim/lib/auth/hybrid.ts	Removes `?? false` guard, causing `hasExternalApiCredentials` to return `boolean
apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx	Adds `getCaretAnchor()` mirror-div helper (with correctly pinned `top:0`/`left:0` origin and scroll correction) and passes the computed anchor to `plusMenuRef.current?.open()`.
apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx	Refactors to zero-size anchor trigger div + external button pattern; replaces index-based keyboard nav with native focus; adds ArrowUp-to-search-field shortcut; early-returns when button ref is unavailable.
apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx	Introduces `IconDropdownItem` to add icons to knowledge-base and table items; removes no-op `mr-[0px]` and redundant `mr-2` from items that rely on parent `gap-2` for spacing.
apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts	Updates `PlusMenuHandle.open` to accept an optional `anchor` argument — a clean, backward-compatible interface change.

Sequence Diagram

sequenceDiagram
    participant User
    participant Textarea as UserInput (textarea)
    participant getCaretAnchor
    participant PlusMenu as PlusMenuDropdown
    participant DropdownMenu as Radix DropdownMenu

    User->>Textarea: types "@"
    Textarea->>getCaretAnchor: getCaretAnchor(textarea, caretPos)
    getCaretAnchor-->>Textarea: { left, top } (viewport coords)
    Textarea->>PlusMenu: plusMenuRef.open({ left, top })
    PlusMenu->>PlusMenu: setAnchorPos({ left, top })
    PlusMenu->>DropdownMenu: setOpen(true)
    DropdownMenu-->>User: popup appears at caret

    User->>PlusMenu: clicks + button
    PlusMenu->>PlusMenu: doOpen() — reads buttonRef.getBoundingClientRect()
    PlusMenu->>PlusMenu: setAnchorPos({ left, top })
    PlusMenu->>DropdownMenu: setOpen(true)
    DropdownMenu-->>User: popup appears at + button

    User->>PlusMenu: ArrowDown from search input
    PlusMenu->>DropdownMenu: firstItem.focus()
    User->>PlusMenu: ArrowUp from first item
    PlusMenu->>PlusMenu: searchRef.focus()

Comments Outside Diff (1)

apps/sim/lib/auth/hybrid.ts, line 28 (link)

Type error: boolean | undefined returned as boolean

Headers.get() returns string | null, so auth?.startsWith(BEARER_PREFIX) evaluates to boolean | undefined (optional chaining on a null value returns undefined). The function declares a boolean return type, and the project's strict: true / strictNullChecks configuration (set in packages/tsconfig/base.json) will flag this as a compilation error.

The previous ?? false was the correct nullish coalescing guard to collapse undefined into false.

_{Reviews (2): Last reviewed commit: "chore(auth): restore hybrid.ts to stagin..." | Re-trigger Greptile}

apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx

...sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx

waleedlatif1 · 2026-03-28T21:40:09Z

@greptile

waleedlatif1 · 2026-03-28T21:40:12Z

@cursor review

cursor

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

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

apps/sim/lib/auth/hybrid.ts

…sistency (#3831) * improvement(home): position @ mention popup at caret and fix icon consistency * fix(home): pin mirror div to document origin and guard button anchor * chore(auth): restore hybrid.ts to staging

improvement(home): position @ mention popup at caret and fix icon con…

68986c3

…sistency

waleedlatif1 force-pushed the feat/drop branch from f4b818c to 68986c3 Compare March 28, 2026 21:30

vercel bot temporarily deployed to Preview March 28, 2026 21:30 Inactive

greptile-apps bot reviewed Mar 28, 2026

View reviewed changes

apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx Show resolved Hide resolved

...sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx Show resolved Hide resolved

cursor bot reviewed Mar 28, 2026

View reviewed changes

...sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx Outdated Show resolved Hide resolved

fix(home): pin mirror div to document origin and guard button anchor

617983e

vercel bot temporarily deployed to Preview March 28, 2026 21:39 Inactive

chore(auth): restore hybrid.ts to staging

120bd88

vercel bot temporarily deployed to Preview March 28, 2026 21:43 Inactive

cursor bot reviewed Mar 28, 2026

View reviewed changes

apps/sim/lib/auth/hybrid.ts Outdated Show resolved Hide resolved

waleedlatif1 merged commit d013132 into staging Mar 28, 2026
11 checks passed

waleedlatif1 deleted the feat/drop branch March 28, 2026 21:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

improvement(home): position @ mention popup at caret and fix icon consistency#3831

improvement(home): position @ mention popup at caret and fix icon consistency#3831
waleedlatif1 merged 3 commits intostagingfrom
feat/drop

waleedlatif1 commented Mar 28, 2026

Uh oh!

vercel bot commented Mar 28, 2026 •

edited

Loading

Uh oh!

cursor bot commented Mar 28, 2026 •

edited

Loading

Uh oh!

waleedlatif1 commented Mar 28, 2026

Uh oh!

waleedlatif1 commented Mar 28, 2026

Uh oh!

greptile-apps bot commented Mar 28, 2026 •

edited

Loading

Comments Outside Diff (1)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

waleedlatif1 commented Mar 28, 2026

Uh oh!

waleedlatif1 commented Mar 28, 2026

Uh oh!

cursor bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

waleedlatif1 commented Mar 28, 2026

Summary

Type of Change

Testing

Checklist

Uh oh!

vercel bot commented Mar 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor bot commented Mar 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Uh oh!

waleedlatif1 commented Mar 28, 2026

Uh oh!

waleedlatif1 commented Mar 28, 2026

Uh oh!

greptile-apps bot commented Mar 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 4/5

Important Files Changed

Sequence Diagram

Comments Outside Diff (1)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

waleedlatif1 commented Mar 28, 2026

Uh oh!

waleedlatif1 commented Mar 28, 2026

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel bot commented Mar 28, 2026 •

edited

Loading

cursor bot commented Mar 28, 2026 •

edited

Loading

greptile-apps bot commented Mar 28, 2026 •

edited

Loading