fix: keep send button disabled until message composer has content

Author: MartinCupela

social-messenger-ts/src/components/SendButton/SendButton.tsx

@@ -1,16 +1,20 @@
 import { SendIcon } from '../../assets';
 import React from 'react';
-import type { SendButtonProps } from 'stream-chat-react';
+import {SendButtonProps, useMessageComposerHasSendableData} from 'stream-chat-react';
 
-const SendButton = ({sendMessage, ...rest}: SendButtonProps) => (
-  <button
-    className='str-chat__send-button'
-    onClick={sendMessage}
-    type='button'
-    {...rest}
-  >
-    <SendIcon />
-  </button>
-);
+const SendButton = ({sendMessage, ...rest}: SendButtonProps) => {
+  const hasSendableData = useMessageComposerHasSendableData();
+  return (
+    <button
+      className='str-chat__send-button'
+      disabled={!hasSendableData}
+      onClick={sendMessage}
+      type='button'
+      {...rest}
+    >
+      <SendIcon/>
+    </button>
+  );
+};
 
 export default SendButton;

virtual-event/src/components/Chat/MessageInputUI.tsx

@@ -75,6 +75,7 @@ export const MessageInputUI = () => {
   const commandSearchSource = useMemo(() => new CommandSearchSource(textComposer.channel),
     [textComposer]
   );
+  const hasSendableData = useMessageComposerHasSendableData();
 
   return (
     <div className='input-ui-container'>
@@ -85,7 +86,7 @@ export const MessageInputUI = () => {
           <>
             <button
               className={`input-ui-input-commands-button ${cooldownRemaining ? 'cooldown' : ''}`}
-              disabled={!!cooldownRemaining}
+              disabled={!!cooldownRemaining || !hasSendableData}
               onClick={() => {
                 commandSearchSource.resetStateAndActivate();
                 commandSearchSource.search();