[PR #23763] feat: add filtering support for @ command selector in goto-anything #30390

Closed
opened 2026-02-21 20:47:24 -05:00 by yindo · 0 comments
Owner

Original Pull Request: https://github.com/langgenius/dify/pull/23763

State: closed
Merged: Yes


Summary

Fixes #23761

This PR enhances the goto-anything component by adding filtering support to the @ command selector. Previously, typing anything after @ (like @k or @app) would show no results. Now the command selector filters options based on user input, providing a more intuitive and consistent experience.

Key Changes:

  • Added optional searchFilter, commandValue, and onCommandValueChange props to CommandSelector
  • Implemented filtering logic that matches commands by partial string (case-insensitive)
  • Added automatic highlight management to select the first filtered item
  • Added user-friendly empty state when no commands match the filter
  • Extended isCommandsMode detection to include partial @ commands
  • Preserved keyboard navigation and highlight state during filtering

Implementation Details:

  • All new props are optional, ensuring 100% backward compatibility
  • Filtering supports partial matches and is case-insensitive
  • When filter results change, automatically highlights the first available option
  • Shows friendly empty state with helpful message when no matches found
  • Uses useEffect to manage highlight state synchronization

Screenshots

Before After
Typing @k shows nothing Typing @k shows only @kb command with proper highlight
No feedback for invalid input Clear empty state message when no matches found

Testing

  • 16 comprehensive test cases covering all scenarios
  • 100% code coverage (statements, branches, functions, lines)
  • Tests include: basic rendering, filtering logic, empty states, highlight management, edge cases, and backward compatibility verification

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/23763 **State:** closed **Merged:** Yes --- ## Summary Fixes #23761 This PR enhances the goto-anything component by adding filtering support to the @ command selector. Previously, typing anything after @ (like @k or @app) would show no results. Now the command selector filters options based on user input, providing a more intuitive and consistent experience. ### Key Changes: - Added optional searchFilter, commandValue, and onCommandValueChange props to CommandSelector - Implemented filtering logic that matches commands by partial string (case-insensitive) - Added automatic highlight management to select the first filtered item - Added user-friendly empty state when no commands match the filter - Extended isCommandsMode detection to include partial @ commands - Preserved keyboard navigation and highlight state during filtering ### Implementation Details: - All new props are optional, ensuring 100% backward compatibility - Filtering supports partial matches and is case-insensitive - When filter results change, automatically highlights the first available option - Shows friendly empty state with helpful message when no matches found - Uses useEffect to manage highlight state synchronization ## Screenshots | Before | After | |--------|-------| | Typing @k shows nothing | Typing @k shows only @kb command with proper highlight | | No feedback for invalid input | Clear empty state message when no matches found | ## Testing - 16 comprehensive test cases covering all scenarios - 100% code coverage (statements, branches, functions, lines) - Tests include: basic rendering, filtering logic, empty states, highlight management, edge cases, and backward compatibility verification ## Checklist - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos\!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:47:24 -05:00
yindo closed this issue 2026-02-21 20:47:24 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#30390