From afa6b81bafb150fa960a561b9a28fdb819aa8019 Mon Sep 17 00:00:00 2001
From: Anirban Singha <143536290+SinghaAnirban005@users.noreply.github.com>
Date: Sun, 10 Nov 2024 21:30:55 +0530
Subject: [PATCH] Fix: Display emoji in visual format and enable send icon on
 emoji selection (#663)

* Fix: Display emoji in visual format and enable send icon on emoji selection

* Revised code
---
 packages/react/src/views/ChatInput/ChatInput.js   | 15 +++++++++------
 .../views/ChatInput/ChatInputFormattingToolbar.js |  7 ++++++-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js
index ba9f569b2..eae9573ae 100644
--- a/packages/react/src/views/ChatInput/ChatInput.js
+++ b/packages/react/src/views/ChatInput/ChatInput.js
@@ -25,7 +25,6 @@ import useAttachmentWindowStore from '../../store/attachmentwindow';
 import MembersList from '../Mentions/MembersList';
 import { TypingUsers } from '../TypingUsers';
 import createPendingMessage from '../../lib/createPendingMessage';
-import { parseEmoji } from '../../lib/emoji';
 import { CommandsList } from '../CommandList';
 import useSettingsStore from '../../store/settingsStore';
 import ChannelState from '../ChannelState/ChannelState';
@@ -34,6 +33,7 @@ import { getChatInputStyles } from './ChatInput.styles';
 import useShowCommands from '../../hooks/useShowCommands';
 import useSearchMentionUser from '../../hooks/useSearchMentionUser';
 import formatSelection from '../../lib/formatSelection';
+import { parseEmoji } from '../../lib/emoji';
 
 const ChatInput = ({ scrollToBottom }) => {
   const { styleOverrides, classNames } = useComponentOverrides('ChatInput');
@@ -362,14 +362,16 @@ const ChatInput = ({ scrollToBottom }) => {
     setData(event.target.files[0]);
   };
 
-  const onTextChange = (e) => {
+  const onTextChange = (e, val) => {
     sendTypingStart();
-    const message = e.target.value;
+    const message = val || e.target.value;
     messageRef.current.value = parseEmoji(message);
     setDisableButton(!messageRef.current.value.length);
-    handleNewLine(e, false);
-    searchMentionUser(message);
-    showCommands(e);
+    if (e !== null) {
+      handleNewLine(e, false);
+      searchMentionUser(message);
+      showCommands(e);
+    }
   };
 
   const handleFocus = () => {
@@ -532,6 +534,7 @@ const ChatInput = ({ scrollToBottom }) => {
           <ChatInputFormattingToolbar
             messageRef={messageRef}
             inputRef={inputRef}
+            triggerButton={onTextChange}
           />
         )}
       </Box>
diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
index 634b2255a..fd96f5036 100644
--- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
@@ -19,6 +19,7 @@ import formatSelection from '../../lib/formatSelection';
 const ChatInputFormattingToolbar = ({
   messageRef,
   inputRef,
+  triggerButton,
   optionConfig = {
     surfaceItems: ['emoji', 'formatter', 'audio', 'video', 'file'],
     formatters: ['bold', 'italic', 'strike', 'code', 'multiline'],
@@ -46,7 +47,11 @@ const ChatInputFormattingToolbar = ({
 
   const handleEmojiClick = (emojiEvent) => {
     const [emoji] = emojiEvent.names;
-    messageRef.current.value += ` :${emoji.replace(/[\s-]+/g, '_')}: `;
+    const message = `${messageRef.current.value} :${emoji.replace(
+      /[\s-]+/g,
+      '_'
+    )}: `;
+    triggerButton?.(null, message);
   };
 
   const chatToolMap = {