@patternfly/chatbot 6.5.0-prerelease.23 → 6.5.0-prerelease.25

package/src/MessageBar/MessageBar.tsx

@@ -161,6 +161,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   const [isListeningMessage, setIsListeningMessage] = useState<boolean>(false);
   const [hasSentMessage, setHasSentMessage] = useState(false);
   const [isComposing, setIsComposing] = useState(false);
+  const [isMultiline, setIsMultiline] = useState(false);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const textareaRef = (innerRef as React.RefObject<HTMLTextAreaElement>) ?? inputRef;
   const attachButtonRef = useRef<HTMLButtonElement>(null);
@@ -209,6 +210,19 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     return lines > 2;
   };
 
+  const checkIfMultiline = useCallback(
+    (field: HTMLTextAreaElement) => {
+      const parent = field.parentElement;
+      const grandparent = parent?.parentElement;
+      if (grandparent) {
+        const containerHeight = grandparent.offsetHeight;
+        const threshold = isCompact ? 56 : 70;
+        setIsMultiline(containerHeight > threshold);
+      }
+    },
+    [isCompact]
+  );
+
   const setAutoWidth = useCallback((field: HTMLTextAreaElement) => {
     const parent = field.parentElement;
     if (parent) {
@@ -263,12 +277,14 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     if (field) {
       if (field.value === '') {
         setInitialLineHeight(field);
+        setIsMultiline(false);
       } else {
         setAutoHeight(field);
         setAutoWidth(field);
+        checkIfMultiline(field);
       }
     }
-  }, [displayMode, message, setAutoWidth]);
+  }, [displayMode, message, setAutoWidth, checkIfMultiline]);
 
   useEffect(() => {
     const field = textareaRef.current;
@@ -284,13 +300,15 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
       if (textareaRef.current) {
         if (event.target.value === '') {
           setInitialLineHeight(textareaRef.current);
+          setIsMultiline(false);
         } else {
           setAutoHeight(textareaRef.current);
+          checkIfMultiline(textareaRef.current);
         }
       }
       setMessage(event.target.value);
     },
-    [onChange]
+    [onChange, checkIfMultiline]
   );
 
   // Handle sending message
@@ -453,7 +471,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     return (
       <AttachMenu
         toggle={(toggleRef) => (
-          <div ref={toggleRef} className={`pf-chatbot__message-bar ${className ?? ''}`}>
+          <div ref={toggleRef} className={css('pf-chatbot__message-bar', isMultiline && 'pf-m-multiline', className)}>
             {messageBarContents}
           </div>
         )}
@@ -481,6 +499,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
         isPrimary && 'pf-m-primary',
         hasAiIndicator && 'pf-v6-m-ai-indicator',
         isThinking && 'pf-v6-m-thinking',
+        isMultiline && 'pf-m-multiline',
         className
       )}
     >

package/src/MessageBar/MicrophoneButton.scss

@@ -53,6 +53,5 @@
 .pf-v6-c-button.pf-chatbot__button--microphone.pf-m-compact {
   width: 1.5rem;
   height: 1.5rem;
-  padding: var(--pf-t--global--spacer--sm);
   align-items: center;
 }

package/src/MessageBar/SendButton.scss

@@ -58,6 +58,5 @@
 .pf-v6-c-button.pf-chatbot__button--send.pf-m-compact {
   width: 1.5rem;
   height: 1.5rem;
-  padding: var(--pf-t--global--spacer--sm);
   align-items: center;
 }

package/src/MessageBar/StopButton.scss

@@ -41,6 +41,5 @@
 .pf-v6-c-button.pf-chatbot__button--stop.pf-m-compact {
   width: 1.5rem;
   height: 1.5rem;
-  padding: var(--pf-t--global--spacer--sm);
   align-items: center;
 }