Emoji Feature

[lyjeileen]

Hi everyone,

I'd like to start a discussion about the upcoming Emoji feature. Our goal is to support emojis in the chat interface, and I've found a few libraries that could help us achieve this:

• Emoji Picker React
• Emoji Picker Element
• EmojiMart

After some research, I noticed that EmojiMart has many unresolved issues, so I believe the first two options might be safer to use.

Benefits of Each Library:

• Emoji Picker Element:
  • Lightweight
  • Pure JavaScript library
• Emoji Picker React:
  • Supports reactions picker
  • Has significantly more downloads
  • Provides descriptions/labels for each emoji, making it more user-friendly

Given these points, I am leaning towards using Emoji Picker React.

Additionally, I have a question regarding implementation: Do we want to expose this emoji component as a standalone feature, or should we integrate it directly into the TextInput?

Looking forward to your thoughts and feedback.

[kaseyvee]

If we decide to use Emoji Picker React, unless we're adding additional functionality, I don't think it should be exposed and can just be directly used in the TextInput. We can then make reference to it in our docs.

Though if we end up going with Emoji Picker Element, since it's purely javascript, I don't think it hurts to expose it as a standalone component? We'd be helping take a purely javascript library and allowing others to easily integrate it in other areas of their apps if need be, like we do with PerpectiveViz or MermaidViz.

[Shiti]

@lyjeileen could you share feature comparison ? I think that the following factors should also be considered:

• software license
• integration effort
• project status - active issues, frequent updates, accept contributions, no of files, etc
• ease of customization - styling and extending functionality

I think the emoji picker element is lightweight and serves our requirements.

I'm not sure how the component will be implemented. I dont think we need to expose it as a component of its own.
It could be used with the input and/or reactions/replies. I cannot think of any other use-case.

[lyjeileen]

Sure, we can use emoji picker element. Here's the feature comparison table:

Feature	emoji-picker-element	emoji-picker-react
Library Size	Small, lightweight	Small to moderate
Dependencies	Pure web component	React, requires React and React DOM
Theming	Basic customization via attributes. Need to handle shadow root if we want to do more customization	Can change styling through css variables
Customization	Limited, basic customization via attributes	High, extensive customization options via props
Usage	Web Component, can be used in any framework or vanilla JS	React Component, must be used within a React application
Integration effort	easy	easy
Emoji Data Source	Unicode CLDR data	Unicode CLDR data
Accessibility	Basic accessibility support	Good accessibility support
Language Support	Supports multiple languages	Supports multiple languages
Search Functionality	Built-in search bar	Built-in search bar
Category Filtering	Categories provided out-of-the-box	Categories provided out-of-the-box
Skin Tone Selection	Yes	Yes
Reaction Picker	Not supported	Supported
Custom Emoji Support	Yes	Yes
Community	Smaller community	Larger community
License	Apache-2.0	MIT
Project Status	has PRs every month, most PRs were from the same contributor, less active issues, less downloads	has PRs every month, more contributors, more active issues, more downloads

[lyjeileen]

Closing this discussion as the emoji feature has been implemented and merged in PR #218. Thank you for your input!