fix(chat): enforce max char limit (#422)

* fix(chat): disabled button when message is too long
* fix(Chat): add character count
---------
Co-authored-by: Jake Turner <jturner@cosmistack.com>

Author: AkhilTheBoss

client/src/components/Chat/index.tsx

@@ -369,13 +369,14 @@ const Chat: FC<Chatinterface>= ({
             onTextChange={(value) => setMessageCompose(value)}
             contentType="message"
             rows={1}
+            maxLength={2000}
           />
         </div>
         <div id="replycontainer-right">
           <Button
             id="replycontainer-sendbutton"
             color="blue"
-            disabled={activeThread === '' || messageCompose === ''}
+            disabled={activeThread === '' || messageCompose === '' || messageCompose.length > 2000}
             loading={messageSending}
             onClick={sendMessage}
             fluid

client/src/components/TextArea/index.tsx

@@ -12,6 +12,7 @@ interface TextAreaProps {
   innerRef?: React.RefObject<HTMLTextAreaElement>;
   className?: string;
   rows?: number;
+  maxLength?: number;
 }
 
 /**
@@ -26,7 +27,8 @@ const TextArea: React.FC<TextAreaProps> = ({
   error,
   innerRef,
   className,
-  rows = 5
+  rows = 5,
+  maxLength
 }) => {
 
   /**
@@ -48,11 +50,12 @@ const TextArea: React.FC<TextAreaProps> = ({
         rows={rows}
         ref={innerRef}
         className='!h-100'
+        maxLength={maxLength}
       />
       {!hideFormatMsg && (
         <div id={styles.format_msg}>
           <span id={styles.format_msg_text}>
-            You **<strong>can</strong>** `<code>format</code>` *<em>your</em>* {contentType}!
+            You **<strong>can</strong>** `<code>format</code>` *<em>your</em>* {contentType}! {maxLength && `${maxLength - textValue.length} characters left`}
           </span>
         </div>
       )}