Fix: Display emoji in visual format and enable send icon on emoji sel…

…ection

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';
@@ -150,6 +149,10 @@ const ChatInput = ({ scrollToBottom }) => {
     });
   }, [RCInstance, isChannelPrivate, setMembersHandler]);
 
+  const trigger = (val) => {
+    setDisableButton(!val.trim().length);
+  };
+
   useEffect(() => {
     if (editMessage.attachments) {
       messageRef.current.value =
@@ -365,7 +368,7 @@ const ChatInput = ({ scrollToBottom }) => {
   const onTextChange = (e) => {
     sendTypingStart();
     const message = e.target.value;
-    messageRef.current.value = parseEmoji(message);
+    messageRef.current.value = message;
     setDisableButton(!messageRef.current.value.length);
     handleNewLine(e, false);
     searchMentionUser(message);
@@ -528,6 +531,7 @@ const ChatInput = ({ scrollToBottom }) => {
           <ChatInputFormattingToolbar
             messageRef={messageRef}
             inputRef={inputRef}
+            triggerButton={trigger}
           />
         )}
       </Box>

packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js

@@ -15,10 +15,12 @@ import AudioMessageRecorder from './AudioMessageRecorder';
 import VideoMessageRecorder from './VideoMessageRecoder';
 import { getChatInputFormattingToolbarStyles } from './ChatInput.styles';
 import formatSelection from '../../lib/formatSelection';
+import { parseEmoji } from '../../lib/emoji';
 
 const ChatInputFormattingToolbar = ({
   messageRef,
   inputRef,
+  triggerButton,
   optionConfig = {
     surfaceItems: ['emoji', 'formatter', 'audio', 'video', 'file'],
     formatters: ['bold', 'italic', 'strike', 'code', 'multiline'],
@@ -46,7 +48,12 @@ 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,
+      '_'
+    )}: `;
+    messageRef.current.value = parseEmoji(message);
+    triggerButton?.(message);
   };
 
   const chatToolMap = {