Try subbing textarea

Author: rebeccaalpert

packages/module/src/MessageBar/MessageBar.scss

@@ -34,7 +34,7 @@
     display: flex;
     justify-content: end;
     padding-block-start: var(--pf-chatbot__message-bar-child--PaddingBlockStart);
-    padding-block-end: var(--pf-t--global--spacer--sm);
+    padding-block-end: var(--pf-t--global--spacer--xs);
     gap: var(--pf-t--global--spacer--xs);
   }
 
@@ -47,12 +47,9 @@
 
 // - Form control textarea
 .pf-chatbot__message-textarea {
-  padding-block-start: var(--pf-t--global--spacer--md);
-  padding-block-end: var(--pf-t--global--spacer--md);
-  padding-inline-start: var(--pf-t--global--spacer--md);
-  padding-inline-end: var(--pf-t--global--spacer--md);
   --pf-v6-c-form-control--before--BorderStyle: none;
   --pf-v6-c-form-control--after--BorderStyle: none;
+  resize: none;
   background-color: transparent;
   font-size: var(--pf-t--global--font--size--md);
   line-height: 1.5rem;
@@ -63,4 +60,13 @@
   .pf-v6-c-form-control__textarea:focus-visible {
     outline: none;
   }
+  textarea {
+    outline-offset: 0px;
+    --pf-v6-c-form-control--PaddingBlockStart: 0;
+    --pf-v6-c-form-control--PaddingBlockEnd: 0;
+    --pf-v6-c-form-control--BorderRadius: 0;
+  }
+  textarea:focus-visible {
+    outline: none;
+  }
 }

packages/module/src/MessageBar/MessageBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DropEvent, TextAreaProps } from '@patternfly/react-core';
+import { DropEvent, TextArea, TextAreaProps, TextInput } from '@patternfly/react-core';
 import { AutoTextArea } from 'react-textarea-auto-witdth-height';
 
 // Import Chatbot components
@@ -63,11 +63,79 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   // --------------------------------------------------------------------------
   const [message, setMessage] = React.useState<string>('');
   const [isListeningMessage, setIsListeningMessage] = React.useState<boolean>(false);
+  const [height, setHeight] = React.useState<number>();
 
-  const textareaRef = React.useRef(null);
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
   const attachButtonRef = React.useRef<HTMLButtonElement>(null);
 
+  const setInitialLineHeight = (field: HTMLTextAreaElement) => {
+    field.style.setProperty('line-height', '1rem');
+    const parent = field.parentElement;
+    if (parent) {
+      parent.style.setProperty('margin-top', `0rem`);
+      parent.style.setProperty('margin-bottom', `0rem`);
+    }
+  };
+
+  const setAutoHeight = (field: HTMLTextAreaElement) => {
+    const parent = field.parentElement;
+    if (parent) {
+      parent.style.setProperty('height', 'inherit');
+      const computed = window.getComputedStyle(field);
+      // Calculate the height
+      const height =
+        parseInt(computed.getPropertyValue('border-top-width')) +
+        parseInt(computed.getPropertyValue('padding-top')) +
+        field.scrollHeight +
+        parseInt(computed.getPropertyValue('padding-bottom')) +
+        parseInt(computed.getPropertyValue('border-bottom-width'));
+      parent.style.setProperty('height', `${height}px`);
+
+      if (height > 32 || window.innerWidth <= 359) {
+        parent.style.setProperty('margin-bottom', `1rem`);
+        parent.style.setProperty('margin-top', `1rem`);
+      }
+
+      setHeight(height);
+    }
+  };
+
+  const handleNewLine = (field: HTMLTextAreaElement) => {
+    const parent = field.parentElement;
+    const oldHeight = height ?? 0;
+    if (parent) {
+      if (oldHeight === 0) {
+        parent.style.setProperty('margin-bottom', `1rem`);
+        parent.style.setProperty('margin-top', `1rem`);
+      } else {
+        parent.style.setProperty('height', `${oldHeight + 16}px`);
+      }
+    }
+  };
+
+  const handleMobileHeight = (field: HTMLTextAreaElement) => {
+    const parent = field.parentElement;
+    if (parent) {
+      parent.style.setProperty('margin-bottom', `1rem`);
+      parent.style.setProperty('margin-top', `1rem`);
+    }
+  };
+
+  React.useEffect(() => {
+    const field = textareaRef.current;
+    if (field) {
+      setInitialLineHeight(field);
+      setAutoHeight(field);
+    }
+  }, []);
+
   const handleChange = React.useCallback((event) => {
+    if (textareaRef.current) {
+      if (event.target.value === '') {
+        setInitialLineHeight(textareaRef.current);
+      }
+      setAutoHeight(textareaRef.current);
+    }
     setMessage(event.target.value);
   }, []);
 
@@ -79,6 +147,13 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     });
   }, [onSendMessage]);
 
+  // want to exclude things like delete, shift, etc.
+  const isTypeableKey = (key) => {
+    if (key.length > 1) {
+      return false;
+    }
+    return true;
+  };
   const handleKeyDown = React.useCallback(
     (event) => {
       if (event.key === 'Enter' && !event.shiftKey) {
@@ -87,6 +162,16 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
           handleSend();
         }
       }
+      if (event.key === 'Enter' && event.shiftKey) {
+        if (textareaRef.current) {
+          handleNewLine(textareaRef.current);
+        }
+      }
+      if (window.innerWidth <= 411 && isTypeableKey(event.key)) {
+        if (textareaRef.current) {
+          handleMobileHeight(textareaRef.current);
+        }
+      }
     },
     [handleSend]
   );
@@ -99,7 +184,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   const messageBarContents = (
     <>
       <div className="pf-chatbot__message-bar-input">
-        <AutoTextArea
+        {/* <AutoTextArea
           ref={textareaRef}
           className="pf-chatbot__message-textarea"
           value={message as any} // Added any to make the third part TextArea component types happy. Remove when replced with PF TextArea
@@ -108,6 +193,16 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
           placeholder={isListeningMessage ? 'Listening' : 'Send a message...'}
           aria-label={isListeningMessage ? 'Listening' : 'Send a message...'}
           {...props}
+        />*/}
+        <TextArea
+          className="pf-chatbot__message-textarea"
+          value={message}
+          onChange={handleChange}
+          aria-label={isListeningMessage ? 'Listening' : 'Send a message...'}
+          placeholder={isListeningMessage ? 'Listening' : 'Send a message...'}
+          ref={textareaRef}
+          onKeyDown={handleKeyDown}
+          {...props}
         />
       </div>
       <div className="pf-chatbot__message-bar-actions">