feat: Add Emoji Autocomplete functionality that displays matching emoji suggestions on : colon type

[snehalsaurabh]

Add Emoji Autocomplete on Colon Type

Acceptance Criteria fulfillment

• When a user types a colon (:) followed by at least two characters (e.g., :la), a suggestion pop-up appears above the input box.
• The pop-up displays a scrollable list of emojis that match the text typed after the colon.
• Feature provides faster workflow for keyboard-focused users, matching main Rocket.Chat web and desktop clients.

Fixes #1013 (issue)

Video/Screenshots

Demo Video: EmbeddedChat - Emoji Autocomplete Feature

Key Features Implemented

✅ Trigger: : + 2 characters minimum
✅ Display format: emoji unicode + :shortname: (matching Rocket.Chat)
✅ Keyboard navigation: ArrowUp/Down, Enter, Escape
✅ Click selection support
✅ Auto-scroll to highlighted item
✅ Consistent styling with existing autocomplete lists
✅ Limited to 10 results for better performance
✅ Proper state management and cleanup
✅ No interference with @ mentions or / commands

Implementation Details

This PR adds emoji autocomplete functionality to the EmbeddedChat component, allowing users to quickly find and insert emojis by typing : followed by text in the message input box. The implementation follows the same patterns as existing autocomplete features (mentions and commands) for consistency.

Files Added/Modified:

New Files:

• packages/react/src/lib/emojiList.js - Comprehensive emoji data source with shortnames and aliases
• packages/react/src/hooks/useSearchEmoji.js - Hook for emoji filtering logic
• packages/react/src/views/EmojiList/ - Complete EmojiList component with styling

Modified Files:

• packages/react/src/views/ChatInput/ChatInput.js - Integrated emoji autocomplete functionality

Technical Highlights:

• Performance Optimized: Limited to 10 suggestions with efficient filtering
• Accessibility: Full keyboard navigation support
• Theme Integration: Consistent styling with existing UI components
• State Management: Proper cleanup and no memory leaks
• User Experience: Smooth interaction with existing features

PR Test Details

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-1015 after approval. Contributors are requested to replace <pr_number> with the actual PR number.

Testing Instructions:

• Basic Functionality: Type :sm in the message input to see emoji suggestions
• Keyboard Navigation: Use ArrowUp/Down to navigate, Enter to select, Escape to cancel
• Click Selection: Click on any emoji in the list to select it
• Integration Tests: Verify no interference with @ mentions or / commands
• Edge Cases: Test with empty input, special characters, and rapid typing

[CLAassistant]

All committers have signed the CLA.

[Spiral-Memory]

Hi @snehalsaurabh
Please format it with prettier and push it again. Thanks

[snehalsaurabh]

@Spiral-Memory I have done the formatting with prettier. Waiting for your review and approval.

[snehalsaurabh]

Hi @Spiral-Memory. Sorry to bother. Looking for a follow up on this and if anything else that needs to be done in here.

[Spiral-Memory]

LGTM. Approving to test.
Thanks for the great work @snehalsaurabh

[Spiral-Memory]

Is it not possible to use the existing SingleSelect we have for mentions?

[Spiral-Memory]

What do you think which will be better to go with ? A new custom component or SingleSelect we have

[Spiral-Memory]

This is a great PR, @snehalsaurabh. Thanks a lot for the wonderful work. Once we’re aligned on the approach, it will be merged.