Emoji picker bug in EmbeddedChat

[Sayan4444]

Description: When we try to choose an emoji from a emoji picker it doesnot show the emoji but rather the name of the emoji

Steps to reproduce:

1. Home page of EmbeddedChat
2. Click on the emoji picker and choose an emoji

Expected behavior:

The emoji should be on viewed ### Actual behavior: The name or description of the emoji is shown   

[Sayan4444]

I have solved this issue, should I write the fix in the chat or raise a PR against it?

[abhinavkrin]

Hi @Sayan4444 , Though this is not a bug but an expected behavior, We would like to know what improvements you want to make to it.

[Sayan4444]

I mean when we want to send our friend an emoji say 😊 and click it, instead of sending the emoji we are here at Rocket.Chat are sending the description of the emoji! i.e. " :slight_smile: ".... I mean I send my friends in social media emoji s every day I dont think I want to send them a description...thats all I am saying

[Sayan4444]

Hi @Sayan4444 , Though this is not a bug but an expected behavior, We would like to know what improvements you want to make to it.

I just added another slide to showcase what I meant.. it should turn into emoji as it is done it Rocket.Chat original app

[abhinavkrin]

Hey @Sayan4444, I understand the confusion. The feature is already implemented but there is one issue which I just found out. Actually, the texts like :hugging face: (returned from emoji picker) is not being parsed. Its working only for cases when emoji name does not have spaces. So general solution would be to replace white space with _ . Example in ChatInputFormattingToolbar

  const handleEmojiClick = (emojiEvent) => {
    const [emoji] = emojiEvent.names;
    messageRef.current.value += ` :${emoji.replace(/\s/g, '_')}: `;
  };

and in Message.js

  const handleEmojiClick = async (e, msg, canReact) => {
    const emoji = (e.names?.[0] || e.name).replace(/\s/g, '_');
    await RCInstance.reactToMessage(emoji, msg._id, canReact);
  };

Video Proof:

https://github.com/RocketChat/EmbeddedChat/assets/15830206/4e3cdaa6-c599-490b-8f03-f1e5f748fb5d

Wating for your PR

[Sayan4444]

Hey @Sayan4444, I understand the confusion. The feature is already implemented but there is one issue which I just found out. Actually, the texts like :hugging face: (returned from emoji picker) is not being parsed. Its working only for cases when emoji name does not have spaces. So general solution would be to replace white space with _ . Example in ChatInputFormattingToolbar

  const handleEmojiClick = (emojiEvent) => {
    const [emoji] = emojiEvent.names;
    messageRef.current.value += ` :${emoji.replace(/\s/g, '_')}: `;
  };

and in Message.js

  const handleEmojiClick = async (e, msg, canReact) => {
    const emoji = (e.names?.[0] || e.name).replace(/\s/g, '_');
    await RCInstance.reactToMessage(emoji, msg._id, canReact);
  };

Video Proof:

emoji-parsing-2023-12-07_19.29.41.mp4 Wating for your PR

https://github.com/RocketChat/EmbeddedChat/pull/346

I have made the PR, since its my first PR I apologize for any inconvenience caused by my lack of experience,do give me a review so that I can make better PR s

[abhinavkrin]

@Sayan4444 Thanks for your PR! No worries about being new - we all start somewhere. I have reviewed and merged your PR. Keep up the good work! Closing this issue as this has been fixed by #346