@patternfly/chatbot 6.5.0-prerelease.22 → 6.5.0-prerelease.24

package/src/Message/ListMessage/OrderedListMessage.tsx

@@ -4,9 +4,23 @@
 
 import { ExtraProps } from 'react-markdown';
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 
-const OrderedListMessage = ({ children, start }: JSX.IntrinsicElements['ol'] & ExtraProps) => (
-  <div className="pf-chatbot__message-ordered-list">
+export interface OrderedListMessageProps {
+  /** The ordered list content */
+  children?: React.ReactNode;
+  /** The number to start the ordered list at. */
+  start?: number;
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
+}
+
+const OrderedListMessage = ({
+  children,
+  start,
+  shouldRetainStyles
+}: OrderedListMessageProps & JSX.IntrinsicElements['ol'] & ExtraProps) => (
+  <div className={css('pf-chatbot__message-ordered-list', shouldRetainStyles && 'pf-m-markdown')}>
     <List component={ListComponent.ol} type={OrderType.number} start={start}>
       {children}
     </List>

package/src/Message/ListMessage/UnorderedListMessage.tsx

@@ -4,9 +4,19 @@
 
 import { ExtraProps } from 'react-markdown';
 import { List } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+export interface UnrderedListMessageProps {
+  /** The ordered list content */
+  children?: React.ReactNode;
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
+}
 
-const UnorderedListMessage = ({ children }: JSX.IntrinsicElements['ul'] & ExtraProps) => (
-  <div className="pf-chatbot__message-unordered-list">
+const UnorderedListMessage = ({
+  children,
+  shouldRetainStyles
+}: UnrderedListMessageProps & JSX.IntrinsicElements['ul'] & ExtraProps) => (
+  <div className={css('pf-chatbot__message-unordered-list', shouldRetainStyles && 'pf-m-markdown')}>
     <List>{children}</List>
   </div>
 );

package/src/Message/Message.tsx

@@ -3,14 +3,12 @@
 // ============================================================================
 import { forwardRef, ReactNode, useEffect, useState } from 'react';
 import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
-import Markdown, { Options } from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+import { Options } from 'react-markdown';
 import {
   AlertProps,
   Avatar,
   AvatarProps,
   ButtonProps,
-  ContentVariants,
   FormProps,
   Label,
   LabelGroupProps,
@@ -18,42 +16,25 @@ import {
   Truncate
 } from '@patternfly/react-core';
 import MessageLoading from './MessageLoading';
-import CodeBlockMessage, { CodeBlockMessageProps } from './CodeBlockMessage/CodeBlockMessage';
-import TextMessage from './TextMessage/TextMessage';
+import { CodeBlockMessageProps } from './CodeBlockMessage/CodeBlockMessage';
 import FileDetailsLabel from '../FileDetailsLabel/FileDetailsLabel';
 import ResponseActions, { ActionProps } from '../ResponseActions/ResponseActions';
 import SourcesCard, { SourcesCardProps } from '../SourcesCard';
-import ListItemMessage from './ListMessage/ListItemMessage';
-import UnorderedListMessage from './ListMessage/UnorderedListMessage';
-import OrderedListMessage from './ListMessage/OrderedListMessage';
 import QuickStartTile from './QuickStarts/QuickStartTile';
 import { QuickStart, QuickstartAction } from './QuickStarts/types';
 import QuickResponse from './QuickResponse/QuickResponse';
 import UserFeedback, { UserFeedbackProps } from './UserFeedback/UserFeedback';
 import UserFeedbackComplete, { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
-import TableMessage from './TableMessage/TableMessage';
-import TrMessage from './TableMessage/TrMessage';
-import TdMessage from './TableMessage/TdMessage';
-import TbodyMessage from './TableMessage/TbodyMessage';
-import TheadMessage from './TableMessage/TheadMessage';
-import ThMessage from './TableMessage/ThMessage';
 import { TableProps } from '@patternfly/react-table';
-import ImageMessage from './ImageMessage/ImageMessage';
-import rehypeUnwrapImages from 'rehype-unwrap-images';
-import rehypeExternalLinks from 'rehype-external-links';
-import rehypeSanitize from 'rehype-sanitize';
-import rehypeHighlight from 'rehype-highlight';
 // see the full list of styles here: https://highlightjs.org/examples
 import 'highlight.js/styles/vs2015.css';
 import { PluggableList } from 'unified';
-import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
-import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
 import ToolResponse, { ToolResponseProps } from '../ToolResponse';
 import DeepThinking, { DeepThinkingProps } from '../DeepThinking';
-import SuperscriptMessage from './SuperscriptMessage/SuperscriptMessage';
 import ToolCall, { ToolCallProps } from '../ToolCall';
+import MarkdownContent from '../MarkdownContent';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -267,14 +248,8 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   }, [content]);
 
   const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-  let rehypePlugins: PluggableList = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs, rehypeHighlight];
-  if (openLinkInNewTab) {
-    rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
-  }
-  if (additionalRehypePlugins) {
-    rehypePlugins.push(...additionalRehypePlugins);
-  }
-  let avatarClassName;
+
+  let avatarClassName: string | undefined;
   if (avatarProps && 'className' in avatarProps) {
     const { className, ...rest } = avatarProps;
     avatarClassName = className;
@@ -284,157 +259,22 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
 
-  const disallowedElements = role === 'user' && hasNoImagesInUserMessages ? ['img'] : [];
-  if (reactMarkdownProps && reactMarkdownProps.disallowedElements) {
-    disallowedElements.push(...reactMarkdownProps.disallowedElements);
-  }
-
-  const handleMarkdown = () => {
-    if (isMarkdownDisabled) {
-      return (
-        <TextMessage component={ContentVariants.p} {...props}>
-          {messageText}
-        </TextMessage>
-      );
-    }
-    return (
-      <Markdown
-        components={{
-          section: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <section {...rest} className={`pf-chatbot__message-text ${rest?.className}`} />;
-          },
-          p: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.p} {...rest} isPrimary={isPrimary} />;
-          },
-          code: ({ children, ...props }) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...codeProps } = props;
-            return (
-              <CodeBlockMessage {...codeProps} {...codeBlockProps} isPrimary={isPrimary}>
-                {children}
-              </CodeBlockMessage>
-            );
-          },
-          h1: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h1} {...rest} />;
-          },
-          h2: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h2} {...rest} />;
-          },
-          h3: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h3} {...rest} />;
-          },
-          h4: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h4} {...rest} />;
-          },
-          h5: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h5} {...rest} />;
-          },
-          h6: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.h6} {...rest} />;
-          },
-          blockquote: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.blockquote} {...rest} />;
-          },
-          ul: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <UnorderedListMessage {...rest} />;
-          },
-          ol: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <OrderedListMessage {...rest} />;
-          },
-          li: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <ListItemMessage {...rest} />;
-          },
-          // table requires node attribute for calculating headers for mobile breakpoint
-          table: (props) => <TableMessage {...props} {...tableProps} isPrimary={isPrimary} />,
-          tbody: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TbodyMessage {...rest} />;
-          },
-          thead: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TheadMessage {...rest} />;
-          },
-          tr: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <TrMessage {...rest} />;
-          },
-          td: (props) => {
-            // Conflicts with Td type
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, width, ...rest } = props;
-            return <TdMessage {...rest} />;
-          },
-          th: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <ThMessage {...rest} />;
-          },
-          img: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <ImageMessage {...rest} />;
-          },
-          a: (props) => {
-            // node is just the details of the document structure - not needed
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return (
-              // some a types conflict with ButtonProps, but it's ok because we are using an a tag
-              // there are too many to handle manually
-              <LinkMessage {...(rest as any)} {...linkProps}>
-                {props.children}
-              </LinkMessage>
-            );
-          },
-          // used for footnotes
-          sup: (props) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { node, ...rest } = props;
-            return <SuperscriptMessage {...rest} />;
-          }
-        }}
-        remarkPlugins={[[remarkGfm, { ...remarkGfmProps }], ...additionalRemarkPlugins]}
-        rehypePlugins={rehypePlugins}
-        {...reactMarkdownProps}
-        remarkRehypeOptions={{
-          // removes sr-only class from footnote labels applied by default
-          footnoteLabelProperties: { className: [''] },
-          ...reactMarkdownProps?.remarkRehypeOptions
-        }}
-        disallowedElements={disallowedElements}
-      >
-        {messageText}
-      </Markdown>
-    );
-  };
+  const handleMarkdown = () => (
+    <MarkdownContent
+      content={messageText}
+      isMarkdownDisabled={isMarkdownDisabled}
+      codeBlockProps={codeBlockProps}
+      tableProps={tableProps}
+      openLinkInNewTab={openLinkInNewTab}
+      additionalRehypePlugins={additionalRehypePlugins}
+      additionalRemarkPlugins={additionalRemarkPlugins}
+      linkProps={linkProps}
+      reactMarkdownProps={reactMarkdownProps}
+      remarkGfmProps={remarkGfmProps}
+      hasNoImages={role === 'user' && hasNoImagesInUserMessages}
+      isPrimary={isPrimary}
+    />
+  );
 
   const renderMessage = () => {
     if (isLoading) {

package/src/Message/QuickResponse/QuickResponse.scss

@@ -1,6 +1,8 @@
 .pf-chatbot__message-quick-response {
   .pf-v6-c-label {
-    --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
+    &:not(.pf-m-compact) {
+      --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
+    }
 
     @media screen and (min-width: 401px) and (max-width: 600px) {
       --pf-v6-c-label__text--MaxWidth: 20ch;

package/src/Message/TableMessage/TableMessage.scss

@@ -25,4 +25,15 @@
   .pf-v6-c-table__tr:last-of-type {
     border-block-end: 0;
   }
+
+  &.pf-m-markdown {
+    table,
+    tbody,
+    td,
+    thead,
+    th,
+    tr {
+      font-size: inherit;
+    }
+  }
 }

package/src/Message/TableMessage/TableMessage.tsx

@@ -5,6 +5,7 @@
 import { Children, cloneElement } from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Table, TableProps } from '@patternfly/react-table';
+import { css } from '@patternfly/react-styles';
 
 interface Properties {
   line: number;
@@ -20,10 +21,20 @@ export interface TableNode {
 }
 
 export interface TableMessageProps {
+  /** Content of the table */
+  children?: React.ReactNode;
+  /** Flag indicating whether primary styles should be applied. */
   isPrimary?: boolean;
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
 }
 
-const TableMessage = ({ children, isPrimary, ...props }: Omit<TableProps, 'ref'> & ExtraProps & TableMessageProps) => {
+const TableMessage = ({
+  children,
+  isPrimary,
+  shouldRetainStyles,
+  ...props
+}: Omit<TableProps, 'ref'> & ExtraProps & TableMessageProps) => {
   const { className, ...rest } = props;
 
   // This allows us to parse the nested data we get back from the 3rd party Markdown parser
@@ -76,7 +87,12 @@ const TableMessage = ({ children, isPrimary, ...props }: Omit<TableProps, 'ref'>
     <Table
       aria-label={props['aria-label']}
       gridBreakPoint="grid"
-      className={`pf-chatbot__message-table ${isPrimary ? 'pf-m-primary' : ''} ${className ? className : ''}`}
+      className={css(
+        'pf-chatbot__message-table',
+        isPrimary && 'pf-m-primary',
+        shouldRetainStyles && 'pf-m-markdown',
+        className
+      )}
       {...rest}
     >
       {modifyChildren(children)}

package/src/Message/TextMessage/TextMessage.scss

@@ -53,6 +53,14 @@
       background-color: var(--pf-t--global--background--color--secondary--default);
     }
   }
+
+  &.pf-m-markdown {
+    display: block;
+  }
+  &.pf-m-markdown > [class^='pf-v6-c-content'] {
+    font-size: inherit;
+    color: inherit;
+  }
 }
 
 // ============================================================================

package/src/Message/TextMessage/TextMessage.tsx

@@ -4,19 +4,46 @@
 
 import { ExtraProps } from 'react-markdown';
 import { Content, ContentProps } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 
 export interface TextMessageProps {
+  /** The text message content */
+  children?: React.ReactNode;
+  /** Flag indicating whether primary styling is applied. */
   isPrimary?: boolean;
+  /** The wrapper component to use for the PatternFly Content component. Defaults to a div. */
+  component?:
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'p'
+    | 'a'
+    | 'small'
+    | 'blockquote'
+    | 'pre'
+    | 'hr'
+    | 'ul'
+    | 'ol'
+    | 'dl'
+    | 'li'
+    | 'dt'
+    | 'dd';
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
 }
 
 const TextMessage = ({
   component,
   children,
   isPrimary,
+  shouldRetainStyles,
   ...props
 }: Omit<ContentProps, 'ref'> & ExtraProps & TextMessageProps) => (
-  <span className={`pf-chatbot__message-text ${isPrimary ? 'pf-m-primary' : ''}`}>
-    <Content component={component} {...props}>
+  <span className={css('pf-chatbot__message-text', isPrimary && 'pf-m-primary', shouldRetainStyles && 'pf-m-markdown')}>
+    <Content component={component} {...props} className={css(props?.className)}>
       {children}
     </Content>
   </span>

package/src/Message/UserFeedback/UserFeedback.scss

@@ -36,6 +36,11 @@
 }
 
 // feedback card
+.pf-chatbot__feedback-card-complete-header {
+  .pf-v6-c-card__actions {
+    --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--xl) * -1);
+  }
+}
 .pf-chatbot__feedback-card-title {
   font-family: var(--pf-t--global--font--family--heading);
   font-size: var(--pf-t--global--font--size--md);
@@ -51,10 +56,32 @@
   font-weight: initial;
 }
 
+// Privacy statement
+.pf-chatbot__feedback-card-privacy {
+  font-size: var(--pf-t--global--font--size--body--sm);
+  font-weight: var(--pf-t--global--font--weight--body--default);
+  line-height: var(--pf-t--global--font--line-height--body);
+  color: var(--pf-t--global--text--color--subtle);
+}
+
 // Compact styles
 .pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card {
+  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-card--child--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-card--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+
   .pf-chatbot__feedback-card-form.pf-m-compact {
-    --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--md);
+    --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--sm);
+
+    .pf-v6-c-form__group.pf-m-action {
+      margin-block-start: var(--pf-t--global--spacer--sm);
+    }
+
+    .pf-v6-c-form-control {
+      font-size: var(--pf-t--global--font--size--body--sm);
+    }
   }
 }
 

package/src/Message/UserFeedback/UserFeedback.tsx

@@ -74,6 +74,8 @@ export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProp
   textAreaProps?: TextAreaProps;
   /** Additional props passed to action group */
   actionGroupProps?: ActionGroupProps;
+  /** Optional privacy statement text displayed under text area */
+  privacyStatement?: string;
 }
 
 const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
@@ -102,6 +104,7 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
   textAreaProps,
   actionGroupProps,
   submitButtonProps,
+  privacyStatement,
   ...props
 }: UserFeedbackProps) => {
   const [selectedResponse, setSelectedResponse] = useState<string>();
@@ -139,21 +142,28 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
               />
             )}
             {hasTextArea && (
-              <TextArea
-                value={value}
-                onChange={(_event, value) => {
-                  setValue(value);
-                  onTextAreaChange && onTextAreaChange(_event, value);
-                }}
-                placeholder={textAreaPlaceholder}
-                aria-label={textAreaAriaLabel}
-                resizeOrientation="vertical"
-                {...textAreaProps}
-              />
+              <>
+                <TextArea
+                  value={value}
+                  onChange={(_event, value) => {
+                    setValue(value);
+                    onTextAreaChange && onTextAreaChange(_event, value);
+                  }}
+                  placeholder={textAreaPlaceholder}
+                  aria-label={textAreaAriaLabel}
+                  resizeOrientation="vertical"
+                  {...textAreaProps}
+                />
+              </>
             )}
+            {privacyStatement && <div className="pf-chatbot__feedback-card-privacy">{privacyStatement}</div>}
             {children}
             <ActionGroup {...actionGroupProps}>
-              <Button onClick={() => onSubmit(selectedResponse, value)} {...submitButtonProps}>
+              <Button
+                onClick={() => onSubmit(selectedResponse, value)}
+                size={isCompact ? 'sm' : undefined}
+                {...submitButtonProps}
+              >
                 {submitWord}
               </Button>
             </ActionGroup>

package/src/MessageBar/AttachButton.scss

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

package/src/MessageBar/MessageBar.scss

@@ -147,13 +147,22 @@
   .pf-chatbot__message-textarea {
     font-size: var(--pf-t--global--font--size--sm) !important;
   }
+}
 
+.pf-m-compact {
   .pf-chatbot__message-bar-actions {
-    padding-block-start: var(--pf-t--global--spacer--md);
-    padding-block-end: var(--pf-t--global--spacer--md);
+    padding-block-start: var(--pf-t--global--spacer--sm);
+    padding-block-end: var(--pf-t--global--spacer--sm);
   }
 }
 
+// ============================================================================
+// Multiline textarea styles (2+ lines)
+// ============================================================================
+.pf-chatbot__message-bar.pf-m-multiline {
+  border-radius: calc(var(--pf-t--global--border--radius--small) * 2);
+}
+
 // ============================================================================
 // High contrast styles
 // ============================================================================

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;
 }