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

[waleedlatif1]

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]

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

1 Skipped Deployment

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

[greptile-apps]

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