@patternfly/chatbot 6.3.0-prerelease.1 → 6.3.0-prerelease.10

package/src/CodeModal/CodeModal.tsx

@@ -40,6 +40,8 @@ export interface CodeModalProps {
   title: string;
   /** Display mode for the Chatbot parent; this influences the styles applied */
   displayMode?: ChatbotDisplayMode;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
 }
 
 export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
@@ -57,6 +59,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
   secondaryActionBtn,
   title,
   displayMode = ChatbotDisplayMode.default,
+  isCompact,
   ...props
 }: CodeModalProps) => {
   const [newCode, setNewCode] = React.useState(code);
@@ -94,8 +97,9 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
       ouiaId="CodeModal"
       aria-labelledby="code-modal-title"
       aria-describedby="code-modal"
-      className={`pf-chatbot__code-modal pf-chatbot__code-modal--${displayMode}`}
+      className={`pf-chatbot__code-modal ${isCompact ? 'pf-m-compact' : ''} pf-chatbot__code-modal--${displayMode}`}
       displayMode={displayMode}
+      isCompact={isCompact}
     >
       <ModalHeader title={title} labelId="code-modal-title" />
       <ModalBody id="code-modal-body">
@@ -103,7 +107,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
           <StackItem className="pf-chatbot__code-modal-file-details">
             <FileDetails fileName={fileName} />
           </StackItem>
-          <StackItem className="pf-chatbot__code-modal-body">
+          <StackItem className="pf-chatbot__code-modal-editor">
             <CodeEditor
               isDarkTheme
               isLineNumbersVisible={isLineNumbersVisible}

package/src/FileDetails/FileDetails.tsx

@@ -946,7 +946,7 @@ export const FileDetails = ({
 }: PropsWithChildren<FileDetailsProps>) => {
   const language = extensionToLanguage[path.extname(fileName).slice(1)]?.toUpperCase();
   return (
-    <Flex className={`pf-chatbot__file-details ${className}`} gap={{ default: 'gapSm' }}>
+    <Flex className={`pf-chatbot__file-details ${className ? className : ''}`} gap={{ default: 'gapSm' }}>
       <Flex
         className="pf-chatbot__code-icon"
         justifyContent={{ default: 'justifyContentCenter' }}

package/src/FileDetails/__snapshots__/FileDetails.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`FileDetails should render file details 1`] = `
 <div>
   <div
-    class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details undefined"
+    class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details "
   >
     <div
       class="pf-v6-l-flex pf-m-align-items-center pf-m-align-self-center pf-m-justify-content-center pf-chatbot__code-icon"

package/src/FileDetailsLabel/__snapshots__/FileDetailsLabel.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`FileDetailsLabel should render file details label 1`] = `
           class="pf-chatbot__file-label-contents"
         >
           <div
-            class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details undefined"
+            class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details "
           >
             <div
               class="pf-v6-l-flex pf-m-align-items-center pf-m-align-self-center pf-m-justify-content-center pf-chatbot__code-icon"

package/src/Message/Message.scss

@@ -104,3 +104,30 @@
 @import './MessageLoading';
 @import './CodeBlockMessage/CodeBlockMessage';
 @import './TextMessage/TextMessage';
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-chatbot.pf-m-compact {
+  .pf-chatbot__message {
+    gap: var(--pf-t--global--spacer--md);
+    padding-bottom: var(--pf-t--global--spacer--sm);
+
+    .pf-chatbot__message-contents  {
+      gap: var(--pf-t--global--spacer--xs);
+    }
+  }
+
+  .pf-chatbot__message-name {
+    font-size: var(--pf-t--global--font--size--xs);
+  }
+
+  .pf-chatbot__message-avatar.pf-chatbot__message-avatar--round.pf-v6-c-avatar {
+    --pf-v6-c-avatar--Width: 2rem;
+    --pf-v6-c-avatar--Height: 2rem;
+  }
+
+  .pf-chatbot__message-contents {
+    gap: var(--pf-t--global--spacer--xs);
+  }
+}

package/src/Message/Message.test.tsx

@@ -334,6 +334,27 @@ describe('Message', () => {
     await userEvent.click(quickResponse);
     expect(spy).toHaveBeenCalledTimes(1);
   });
+  it('should be able to handle isCompact', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        quickResponses={[
+          {
+            id: '1',
+            content: 'Yes',
+            onClick: jest.fn(),
+            className: 'test'
+          }
+        ]}
+        isCompact
+      />
+    );
+    const parent = screen.getByRole('button', { name: /Yes/i }).parentNode;
+    expect(parent).toHaveClass('pf-m-compact');
+  });
   it('should be able to show more than 1 quick response', async () => {
     const spy = jest.fn();
     render(

package/src/Message/Message.tsx

@@ -164,6 +164,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   /** Props for edit form */
   editFormProps?: FormProps;
+  /** Sets message to compact styling. */
+  isCompact?: boolean;
 }
 
 export const MessageBase: React.FunctionComponent<MessageProps> = ({
@@ -201,6 +203,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   onEditUpdate,
   onEditCancel,
   editFormProps,
+  isCompact,
   ...props
 }: MessageProps) => {
   const [messageText, setMessageText] = React.useState(content);
@@ -336,7 +339,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
           <div className="pf-chatbot__message-and-actions">
             {renderMessage()}
             {afterMainContent && <>{afterMainContent}</>}
-            {!isLoading && sources && <SourcesCard {...sources} />}
+            {!isLoading && sources && <SourcesCard {...sources} isCompact={isCompact} />}
             {quickStarts && quickStarts.quickStart && (
               <QuickStartTile
                 quickStart={quickStarts.quickStart}
@@ -346,15 +349,19 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
                 prerequisiteWord={quickStarts.prerequisiteWord}
                 prerequisiteWordPlural={quickStarts.prerequisiteWordPlural}
                 quickStartButtonAriaLabel={quickStarts.quickStartButtonAriaLabel}
+                isCompact={isCompact}
               />
             )}
             {!isLoading && actions && <ResponseActions actions={actions} />}
-            {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} />}
-            {userFeedbackComplete && <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} />}
+            {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} isCompact={isCompact} />}
+            {userFeedbackComplete && (
+              <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} isCompact={isCompact} />
+            )}
             {!isLoading && quickResponses && (
               <QuickResponse
                 quickResponses={quickResponses}
                 quickResponseContainerProps={quickResponseContainerProps}
+                isCompact={isCompact}
               />
             )}
           </div>

package/src/Message/QuickResponse/QuickResponse.tsx

@@ -15,12 +15,15 @@ export interface QuickResponseProps {
   quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
   /** Callback when a response is clicked; used in feedback cards */
   onSelect?: (id: string) => void;
+  /** Sets the quick responses to compact styling */
+  isCompact?: boolean;
 }
 
 export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
   quickResponses,
   quickResponseContainerProps = { numLabels: 5 },
-  onSelect
+  onSelect,
+  isCompact
 }: QuickResponseProps) => {
   const [selectedQuickResponse, setSelectedQuickResponse] = React.useState<string>();
 
@@ -42,6 +45,7 @@ export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
           key={id}
           onClick={() => handleQuickResponseClick(id, onClick)}
           className={`${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`}
+          isCompact={isCompact}
           {...props}
         >
           {content}

package/src/Message/QuickStarts/QuickStartTile.tsx

@@ -49,6 +49,8 @@ export interface QuickStartTileProps {
   prerequisiteWordPlural?: string;
   /** Aria-label for the quick start description button */
   quickStartButtonAriaLabel?: string;
+  /** Sets the tile to compact styling */
+  isCompact?: boolean;
 }
 
 const QuickStartTile: React.FC<QuickStartTileProps> = ({
@@ -61,7 +63,8 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
   prerequisiteWord,
   prerequisiteWordPlural,
   quickStartButtonAriaLabel,
-  action
+  action,
+  isCompact
 }) => {
   const {
     metadata: { name: id },
@@ -105,6 +108,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
       id={`${id}-chatbot-qs-tile`}
       style={{ height: '100%' }}
       data-testid={`chatbot-qs-card-${camelize(displayName)}`}
+      isCompact={isCompact}
     >
       <CardHeader
         {...(action && {

package/src/Message/TextMessage/TextMessage.scss

@@ -58,3 +58,28 @@
     }
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-chatbot.pf-m-compact {
+  // Need to inline shorter text
+  .pf-chatbot__message-text {
+    .pf-v6-c-button.pf-m-link {
+      font-size: var(--pf-t--global--font--size--sm);
+    }
+
+    .pf-v6-c-content,
+    .pf-v6-c-content--small,
+    .pf-v6-c-content--blockquote,
+    p,
+    a {
+      --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--sm);
+    }
+
+    .pf-v6-c-content--blockquote {
+      --pf-v6-c-content--blockquote--PaddingBlockStart: 0;
+      --pf-v6-c-content--blockquote--PaddingBlockEnd: 0;
+    }
+  }
+}

package/src/Message/UserFeedback/UserFeedback.scss

@@ -11,6 +11,7 @@
   flex-direction: column;
   gap: var(--pf-t--global--spacer--lg);
   align-items: center;
+  text-align: center;
 }
 .pf-chatbot__feedback-complete-text {
   display: flex;
@@ -26,9 +27,6 @@
   align-items: center;
   justify-content: center;
 }
-.pf-chatbot__feedback-complete-body {
-  text-align: center;
-}
 .pf-chatbot__feedback-complete-title {
   font-family: var(--pf-t--global--font--family--heading);
   font-size: var(--pf-t--global--font--size--lg);
@@ -51,3 +49,26 @@
 .pf-chatbot__feedback-card-optional {
   font-weight: initial;
 }
+
+// Compact styles
+.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card {
+  .pf-chatbot__feedback-card-form.pf-m-compact {
+    --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--md);
+  }
+}
+
+.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card.pf-chatbot__feedback-card-complete {
+  div.pf-chatbot__feedback-complete-body {
+    gap: var(--pf-t--global--spacer--sm);
+  }
+
+  .pf-chatbot__feedback-complete-image {
+    width: 40px;
+  }
+
+  .pf-chatbot__feedback-card-complete-empty-header {
+    .pf-v6-c-card__header:first-child {
+      --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+    }
+  }
+}

package/src/Message/UserFeedback/UserFeedback.test.tsx

@@ -233,4 +233,17 @@ describe('UserFeedback', () => {
     );
     expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
   });
+  it('should handle isCompact', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        data-testid="card"
+        isCompact
+      />
+    );
+    expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
+  });
 });

package/src/Message/UserFeedback/UserFeedback.tsx

@@ -71,6 +71,7 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
   id,
   headingLevel: HeadingLevel = 'h1',
   focusOnLoad = true,
+  isCompact,
   ...props
 }: UserFeedbackProps) => {
   const [selectedResponse, setSelectedResponse] = React.useState<string>();
@@ -86,7 +87,7 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
   return (
     /* card does not have ref forwarding; hence wrapper div */
     <div ref={divRef} id={id} tabIndex={0} aria-label={title}>
-      <Card className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
+      <Card isCompact={isCompact} className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
         <CardHeader
           actions={{
             actions: <CloseButton onClose={onClose} ariaLabel={closeButtonAriaLabel} />
@@ -95,12 +96,13 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
           <HeadingLevel className="pf-chatbot__feedback-card-title">{title}</HeadingLevel>
         </CardHeader>
         <CardBody>
-          <Form className="pf-chatbot__feedback-card-form">
+          <Form className={`pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`}>
             {quickResponses && (
               <QuickResponse
                 quickResponses={quickResponses}
                 quickResponseContainerProps={quickResponseContainerProps}
                 onSelect={(id) => setSelectedResponse(id)}
+                isCompact={isCompact}
               />
             )}
             {hasTextArea && (

package/src/Message/UserFeedback/UserFeedbackComplete.test.tsx

@@ -252,4 +252,8 @@ describe('UserFeedbackComplete', () => {
     render(<UserFeedbackComplete timestamp="12/12/12" data-testid="card" focusOnLoad={false} />);
     expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
   });
+  it('should handle isCompact', () => {
+    render(<UserFeedbackComplete timestamp="12/12/12" data-testid="card" isCompact />);
+    expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
+  });
 });

package/src/Message/UserFeedback/UserFeedbackComplete.tsx

@@ -63,6 +63,7 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
   isLiveRegion,
   id,
   focusOnLoad = true,
+  isCompact,
   ...props
 }: UserFeedbackCompleteProps) => {
   const [timedOut, setTimedOut] = React.useState(false);
@@ -143,8 +144,15 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
       aria-label={title}
       {...ouiaProps}
     >
-      <Card className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
+      <Card
+        isCompact={isCompact}
+        className={`pf-chatbot__feedback-card pf-chatbot__feedback-card-complete${className ? ` ${className}` : ''}`}
+        {...props}
+      >
         <CardHeader
+          className={
+            onClose ? 'pf-chatbot__feedback-card-complete-header' : 'pf-chatbot__feedback-card-complete-empty-header'
+          }
           actions={
             /* eslint-disable indent */
             onClose
@@ -200,7 +208,7 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
           </div>
           <div className="pf-chatbot__feedback-complete-text">
             <CardTitle className="pf-chatbot__feedback-complete-title">{title}</CardTitle>
-            <CardBody className={`pf-chatbot__feedback-complete-body`}>{body}</CardBody>
+            <CardBody className={`pf-chatbot__feedback-complete-card-body`}>{body}</CardBody>
           </div>
         </div>
       </Card>

package/src/MessageBar/AttachButton.scss

@@ -34,3 +34,13 @@
     }
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.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/AttachButton.test.tsx

@@ -50,4 +50,8 @@ describe('Attach button', () => {
     expect(input.files).toHaveLength(1);
     expect(spy).toHaveBeenCalledTimes(1);
   });
+  it('should handle isCompact', () => {
+    render(<AttachButton isCompact data-testid="button" />);
+    expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
+  });
 });

package/src/MessageBar/AttachButton.tsx

@@ -25,6 +25,7 @@ export interface AttachButtonProps extends ButtonProps {
   tooltipContent?: string;
   /** Test id applied to input */
   inputTestId?: string;
+  isCompact?: boolean;
 }
 
 const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
@@ -36,6 +37,7 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
   innerRef,
   tooltipContent = 'Attach',
   inputTestId,
+  isCompact,
   ...props
 }: AttachButtonProps) => {
   const { open, getInputProps } = useDropzone({
@@ -62,15 +64,16 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
         <Button
           variant="plain"
           ref={innerRef}
-          className={`pf-chatbot__button--attach ${className ?? ''}`}
+          className={`pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
           aria-label={props['aria-label'] || 'Attach button'}
           isDisabled={isDisabled}
           onClick={onClick ?? open}
           icon={
-            <Icon iconSize="xl" isInline>
+            <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
               <PaperclipIcon />
             </Icon>
           }
+          size={isCompact ? 'sm' : undefined}
           {...props}
         />
       </Tooltip>

package/src/MessageBar/MessageBar.scss

@@ -110,3 +110,20 @@
     }
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-chatbot__message-bar-input.pf-m-compact {
+  padding-block-start: 0;
+  padding-block-end: 0;
+
+  .pf-chatbot__message-textarea {
+    font-size: var(--pf-t--global--font--size--sm) !important;
+  }
+
+  .pf-chatbot__message-bar-actions {
+    padding-block-start: var(--pf-t--global--spacer--md);
+    padding-block-end: var(--pf-t--global--spacer--md);
+  }
+}

package/src/MessageBar/MessageBar.test.tsx

@@ -96,6 +96,12 @@ describe('Message bar', () => {
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(expect.any(Object), 'A');
   });
+  it('can use specified placeholder text', async () => {
+    render(<MessageBar onSendMessage={jest.fn} placeholder="test placeholder" />);
+    const input = screen.getByRole('textbox', { name: /test placeholder/i });
+    await userEvent.type(input, 'Hello world');
+    expect(input).toHaveTextContent('Hello world');
+  });
 
   // Send button
   // --------------------------------------------------------------------------
@@ -304,6 +310,13 @@ describe('Message bar', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
     expect(screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
   });
+  it('can customize the listening placeholder', async () => {
+    mockSpeechRecognition();
+    render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton listeningText="I am listening" />);
+    await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+    const input = screen.getByRole('textbox', { name: /I am listening/i });
+    expect(input).toBeTruthy();
+  });
   it('can handle buttonProps props appropriately for microphone', async () => {
     mockSpeechRecognition();
     render(

package/src/MessageBar/MessageBar.tsx

@@ -37,10 +37,14 @@ export interface MessageBarProps extends TextAreaProps {
   className?: string;
   /** Flag to always to show the send button. By default send button is shown when there is a message in the input field */
   alwayShowSendButton?: boolean;
+  /** Placeholder for message input */
+  placeholder?: string;
   /** Flag to disable/enable the Attach button  */
   hasAttachButton?: boolean;
   /** Flag to enable the Microphone button  */
   hasMicrophoneButton?: boolean;
+  /** Placeholder text when listening */
+  listeningText?: string;
   /** Flag to enable the Stop button, used for streaming content */
   hasStopButton?: boolean;
   /** Callback function for when stop button is clicked */
@@ -72,14 +76,17 @@ export interface MessageBarProps extends TextAreaProps {
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string | number) => void;
   /** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
   displayMode?: ChatbotDisplayMode;
+  isCompact?: boolean;
 }
 
 export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   onSendMessage,
   className,
   alwayShowSendButton,
+  placeholder = 'Send a message...',
   hasAttachButton = true,
   hasMicrophoneButton,
+  listeningText = 'Listening',
   handleAttach,
   attachMenuProps,
   isSendButtonDisabled,
@@ -89,6 +96,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   onChange,
   displayMode,
   value,
+  isCompact = false,
   ...props
 }: MessageBarProps) => {
   // Text Input
@@ -99,11 +107,13 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
   const attachButtonRef = React.useRef<HTMLButtonElement>(null);
 
+  const topMargin = '1rem';
+
   const setInitialLineHeight = (field: HTMLTextAreaElement) => {
     field.style.setProperty('line-height', '1rem');
     const parent = field.parentElement;
     if (parent) {
-      parent.style.setProperty('margin-top', `1rem`);
+      parent.style.setProperty('margin-top', topMargin);
       parent.style.setProperty('margin-bottom', `0rem`);
       parent.style.setProperty('height', 'inherit');
 
@@ -129,8 +139,8 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
       parent.style.setProperty('height', `${height}px`);
 
       if (height > 32 || window.innerWidth <= 507) {
-        parent.style.setProperty('margin-bottom', `1rem`);
-        parent.style.setProperty('margin-top', `1rem`);
+        parent.style.setProperty('margin-bottom', topMargin);
+        parent.style.setProperty('margin-top', topMargin);
       }
     }
   };
@@ -154,8 +164,8 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   const handleNewLine = (field: HTMLTextAreaElement) => {
     const parent = field.parentElement;
     if (parent) {
-      parent.style.setProperty('margin-bottom', `1rem`);
-      parent.style.setProperty('margin-top', `1rem`);
+      parent.style.setProperty('margin-bottom', topMargin);
+      parent.style.setProperty('margin-top', topMargin);
     }
   };
 
@@ -268,6 +278,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
         <StopButton
           onClick={handleStopButton}
           tooltipContent={buttonProps?.stop?.tooltipContent}
+          isCompact={isCompact}
           {...buttonProps?.stop?.props}
         />
       );
@@ -280,6 +291,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             onClick={handleAttachMenuToggle}
             isDisabled={isListeningMessage}
             tooltipContent={buttonProps?.attach?.tooltipContent}
+            isCompact={isCompact}
             {...buttonProps?.attach?.props}
           />
         )}
@@ -289,6 +301,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             isDisabled={isListeningMessage}
             tooltipContent={buttonProps?.attach?.tooltipContent}
             inputTestId={buttonProps?.attach?.inputTestId}
+            isCompact={isCompact}
             {...buttonProps?.attach?.props}
           />
         )}
@@ -299,6 +312,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             onSpeechRecognition={handleSpeechRecognition}
             tooltipContent={buttonProps?.microphone?.tooltipContent}
             language={buttonProps?.microphone?.language}
+            isCompact={isCompact}
             {...buttonProps?.microphone?.props}
           />
         )}
@@ -308,6 +322,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             onClick={() => handleSend(message)}
             isDisabled={isSendButtonDisabled}
             tooltipContent={buttonProps?.send?.tooltipContent}
+            isCompact={isCompact}
             {...buttonProps?.send?.props}
           />
         )}
@@ -317,13 +332,13 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
 
   const messageBarContents = (
     <>
-      <div className="pf-chatbot__message-bar-input">
+      <div className={`pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`}>
         <TextArea
           className="pf-chatbot__message-textarea"
           value={message}
           onChange={handleChange}
-          aria-label={isListeningMessage ? 'Listening' : 'Send a message...'}
-          placeholder={isListeningMessage ? 'Listening' : 'Send a message...'}
+          aria-label={isListeningMessage ? listeningText : placeholder}
+          placeholder={isListeningMessage ? listeningText : placeholder}
           ref={textareaRef}
           onKeyDown={handleKeyDown}
           {...props}

package/src/MessageBar/MicrophoneButton.scss

@@ -46,3 +46,13 @@
     box-shadow: 0 0 0 16px rgba(0, 102, 204, 0);
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.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;
+}