Skip to content

fix(copilot): rewrote user input popover to optimize UX #2814

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
waleedlatif1 merged 4 commits into from
Jan 14, 2026
Merged

fix(copilot): rewrote user input popover to optimize UX #2814

waleedlatif1 merged 4 commits into from
Jan 14, 2026

Conversation

@waleedlatif1
Copy link
Collaborator

@waleedlatif1 waleedlatif1 commented Jan 14, 2026

Summary

  • rewrote user input popover to optimize UX
  • use factory to vend popover options since the handler and structure of each popover folder is the same
  • added search in child folder
  • consolidated code between mention menu and slash menu

Type of Change

  • Bug fix
  • Other: Code hygiene

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
Copy link

vercel bot commented Jan 14, 2026 •
edited
Loading

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

1 Skipped Deployment
Project Deployment Review Updated (UTC)
docs Skipped Skipped Jan 14, 2026 7:04pm

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Jan 14, 2026

Greptile Summary

This PR consolidates the user input popover implementation by introducing a config-driven factory pattern for mention and slash menus.

Key improvements:

  • Centralized folder configurations in constants.ts with unified FolderConfig interface defining data access, filtering, and context building
  • Created reusable utility functions in utils.ts for folder data access and context comparison
  • Refactored both mention-menu.tsx and slash-menu.tsx to use Popover context API instead of managing folder state locally
  • Extracted FolderContent component for rendering folder items with search support
  • Simplified keyboard navigation by using config-driven handlers instead of separate logic per folder type
  • Reduced code by ~426 lines while adding search functionality in child folders

Confidence Score: 5/5

  • This PR is safe to merge with minimal risk
  • Well-structured refactoring with clear architectural improvements. The factory pattern consolidates repetitive code while maintaining type safety. The changes reduce complexity and improve maintainability without altering core functionality. All abstractions are well-documented and follow established patterns.
  • No files require special attention

Important Files Changed

Filename Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/constants.ts Added comprehensive folder config system using factory pattern for mention menu configuration
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/utils.ts New utility file for folder data access and context comparison logic
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx Refactored to use Popover context and config-driven rendering, significantly reduced complexity
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-keyboard.ts Refactored keyboard navigation to use config-driven approach with unified handlers
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-insert-handlers.ts Simplified insert handlers using factory pattern with config-driven context building

Sequence Diagram

sequenceDiagram
    participant User
    participant UserInput
    participant MentionMenu
    participant PopoverContext
    participant FOLDER_CONFIGS
    participant useMentionKeyboard
    participant useMentionInsertHandlers
    participant Utils

    User->>UserInput: Type `@` character
    UserInput->>MentionMenu: Show mention menu
    MentionMenu->>PopoverContext: Initialize context
    MentionMenu->>FOLDER_CONFIGS: Get folder configurations
    FOLDER_CONFIGS-->>MentionMenu: Return folder configs (chats, workflows, etc.)
    MentionMenu->>User: Display root menu items

    User->>UserInput: Type query after `@`
    UserInput->>MentionMenu: Update with query
    MentionMenu->>FOLDER_CONFIGS: Filter items using config.filterFn
    MentionMenu->>User: Show aggregated search results

    User->>UserInput: Press ArrowRight on folder
    UserInput->>useMentionKeyboard: handleArrowRight
    useMentionKeyboard->>PopoverContext: openFolder(folderId, title)
    PopoverContext-->>MentionMenu: Update currentFolder state
    MentionMenu->>Utils: getFolderData(folderId)
    Utils->>FOLDER_CONFIGS: Access config.dataKey
    Utils-->>MentionMenu: Return folder items
    MentionMenu->>User: Display folder contents

    User->>UserInput: Select item (Enter/Click)
    UserInput->>useMentionKeyboard: handleEnterSelection
    useMentionKeyboard->>useMentionInsertHandlers: Call insert handler
    useMentionInsertHandlers->>FOLDER_CONFIGS: Get config.buildContext
    FOLDER_CONFIGS-->>useMentionInsertHandlers: Return context builder
    useMentionInsertHandlers->>Utils: isContextAlreadySelected
    Utils-->>useMentionInsertHandlers: Validate not duplicate
    useMentionInsertHandlers->>UserInput: replaceActiveMentionWith(label)
    useMentionInsertHandlers->>UserInput: onContextAdd(context)
    useMentionInsertHandlers->>PopoverContext: closeFolder()
    MentionMenu->>User: Hide menu, insert `@label`
Loading

@waleedlatif1 waleedlatif1 merged commit a353563 into staging Jan 14, 2026
6 checks passed
@waleedlatif1 waleedlatif1 mentioned this pull request Jan 14, 2026
Merged
@waleedlatif1 waleedlatif1 deleted the fix/copilot-commands branch January 14, 2026 20:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@waleedlatif1