@patternfly/chatbot 6.3.0-prerelease.6 → 6.3.0-prerelease.8

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { DropdownItem } from '@patternfly/react-core';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatbotHeaderOptionsDropdown } from './ChatbotHeaderOptionsDropdown';
+import '@testing-library/jest-dom';
 
 describe('ChatbotHeaderOptionsDropdown', () => {
   const dropdownItems = (
@@ -42,4 +43,9 @@ describe('ChatbotHeaderOptionsDropdown', () => {
       expect(onSelect).toHaveBeenCalled();
     });
   });
+
+  it('should handle isCompact', () => {
+    render(<ChatbotHeaderOptionsDropdown isCompact>{dropdownItems}</ChatbotHeaderOptionsDropdown>);
+    expect(screen.getByRole('button', { name: 'Chatbot options' })).toHaveClass('pf-m-compact');
+  });
 });

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx

@@ -20,6 +20,7 @@ export interface ChatbotHeaderOptionsDropdownProps extends Omit<DropdownProps, '
   tooltipProps?: TooltipProps;
   /** Aria label for menu toggle */
   menuToggleAriaLabel?: string;
+  isCompact?: boolean;
 }
 
 export const ChatbotHeaderOptionsDropdown: React.FunctionComponent<ChatbotHeaderOptionsDropdownProps> = ({
@@ -28,6 +29,7 @@ export const ChatbotHeaderOptionsDropdown: React.FunctionComponent<ChatbotHeader
   onSelect,
   tooltipProps,
   menuToggleAriaLabel = 'Chatbot options',
+  isCompact,
   ...props
 }: ChatbotHeaderOptionsDropdownProps) => {
   const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
@@ -42,17 +44,18 @@ export const ChatbotHeaderOptionsDropdown: React.FunctionComponent<ChatbotHeader
       {...tooltipProps}
     >
       <MenuToggle
-        className="pf-chatbot__button--toggle-options"
+        className={`pf-chatbot__button--toggle-options ${isCompact ? 'pf-m-compact' : ''}`}
         variant="plain"
         aria-label={menuToggleAriaLabel}
         ref={toggleRef}
         icon={
-          <Icon iconSize="xl" isInline>
+          <Icon size={isCompact ? 'lg' : 'xl'} isInline>
             <EllipsisIcon />
           </Icon>
         }
         isExpanded={isOptionsMenuOpen}
         onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}
+        size={isCompact ? 'sm' : undefined}
       />
     </Tooltip>
   );

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { DropdownItem } from '@patternfly/react-core';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatbotHeaderSelectorDropdown } from './ChatbotHeaderSelectorDropdown';
+import '@testing-library/jest-dom';
 
 describe('ChatbotHeaderSelectorDropdown', () => {
   const dropdownItems = (
@@ -40,4 +41,13 @@ describe('ChatbotHeaderSelectorDropdown', () => {
       expect(onSelect).toHaveBeenCalled();
     });
   });
+
+  it('should handle isCompact', () => {
+    render(
+      <ChatbotHeaderSelectorDropdown value="Option 1" isCompact>
+        {dropdownItems}
+      </ChatbotHeaderSelectorDropdown>
+    );
+    expect(screen.getByRole('button', { name: /Select model/i })).toHaveClass('pf-m-compact');
+  });
 });

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx

@@ -15,6 +15,7 @@ export interface ChatbotHeaderSelectorDropdownProps extends Omit<DropdownProps,
   menuToggleAriaLabel?: string;
   /** Text displayed in Tooltip wrapping the display mode dropdown */
   tooltipContent?: string;
+  isCompact?: boolean;
 }
 
 export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeaderSelectorDropdownProps> = ({
@@ -25,6 +26,7 @@ export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeade
   tooltipProps,
   tooltipContent = 'Select model',
   menuToggleAriaLabel,
+  isCompact,
   ...props
 }: ChatbotHeaderSelectorDropdownProps) => {
   const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
@@ -45,6 +47,8 @@ export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeade
         ref={toggleRef}
         isExpanded={isOptionsMenuOpen}
         onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}
+        size={isCompact ? 'sm' : undefined}
+        className={`${isCompact ? 'pf-m-compact' : ''}`}
       >
         {value}
       </MenuToggle>

package/src/ChatbotPopover/ChatbotPopover.scss

@@ -2,14 +2,19 @@
 // Chatbot Popover
 // ============================================================================
 .pf-chatbot__popover {
-  .pf-v6-c-popover__arrow { display: none; }
+  .pf-v6-c-popover__arrow {
+    display: none;
+  }
 
   // Footnote popover
   &--footnote.pf-chatbot__popover {
-
     // Contents
-    img { border-radius: var(--pf-t--global--border--radius--small); }
-    .pf-v6-c-content--h3 { font-weight: var(--pf-t--global--font--weight--body--bold); }
+    img {
+      border-radius: var(--pf-t--global--border--radius--small);
+    }
+    .pf-v6-c-content--h3 {
+      font-weight: var(--pf-t--global--font--weight--body--bold);
+    }
     .pf-v6-c-content--p {
       font-size: var(--pf-t--global--font--size--body--lg);
     }
@@ -23,5 +28,4 @@
       font-size: var(--pf-t--global--font--size--body--lg);
     }
   }
-
 }

package/src/ChatbotPopover/ChatbotPopover.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { Popover, PopoverProps } from '@patternfly/react-core';
 
 export const ChatbotPopover: React.FunctionComponent<PopoverProps> = ({ children, className, ...props }) => (
-  <Popover className={`pf-chatbot__popover ${className ?? ''}`} showClose={false} {...props}>
+  <Popover className={`pf-chatbot__popover  ${className ?? ''}`} showClose={false} {...props}>
     {children}
   </Popover>
 );

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss

@@ -8,7 +8,6 @@
   gap: var(--pf-t--global--spacer--lg);
 
   .pf-v6-c-content--h1 {
-    --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--3xl); // larger than any of our semantic tokens
     --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--400);
     --pf-v6-c-content--h1--MarginBlockEnd: 0;
   }
@@ -34,6 +33,15 @@
   }
 }
 
+.pf-chatbot--layout--welcome.pf-m-compact {
+  gap: var(--pf-t--global--spacer--md);
+  padding-block-end: var(--pf-t--global--spacer--md);
+
+  .pf-chatbot__prompt-suggestions {
+    gap: var(--pf-t--global--spacer--md);
+  }
+}
+
 // ============================================================================
 // Chatbot Display Mode - Fullscreen and Embedded
 // ============================================================================

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx

@@ -69,4 +69,17 @@ describe('ChatbotWelcomePrompt', () => {
     const element = screen.getByTestId('welcome-prompt');
     expect(element).toHaveClass('test');
   });
+
+  it('should handle isCompact', () => {
+    render(
+      <ChatbotWelcomePrompt
+        title="Hi, ChatBot User!"
+        description="How can I help you today?"
+        className="test"
+        testId="welcome-prompt"
+        isCompact
+      />
+    );
+    expect(screen.getByTestId('welcome-prompt')).toHaveClass('pf-m-compact');
+  });
 });

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx

@@ -16,6 +16,7 @@ export interface ChatbotWelcomePromptProps extends React.HTMLProps<HTMLDivElemen
   className?: string;
   /** Custom test id for the WelcomePrompt component */
   testId?: string;
+  isCompact?: boolean;
 }
 
 export interface WelcomePrompt {
@@ -33,9 +34,14 @@ export const ChatbotWelcomePrompt: React.FunctionComponent<ChatbotWelcomePromptP
   prompts,
   className,
   testId,
+  isCompact = false,
   ...props
 }: ChatbotWelcomePromptProps) => (
-  <div data-testid={testId} className={`pf-chatbot--layout--welcome ${className ?? ''}`} {...props}>
+  <div
+    data-testid={testId}
+    className={`pf-chatbot--layout--welcome ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
+    {...props}
+  >
     <Content component={ContentVariants.h1}>
       <span className="pf-chatbot__hello">{title}</span>
       <br />
@@ -45,7 +51,12 @@ export const ChatbotWelcomePrompt: React.FunctionComponent<ChatbotWelcomePromptP
     {prompts && (
       <div className="pf-chatbot__prompt-suggestions">
         {prompts?.map((prompt, index) => (
-          <Card key={`welcome-prompt-${index}`} className="pf-chatbot__prompt-suggestion" isClickable>
+          <Card
+            key={`welcome-prompt-${index}`}
+            className="pf-chatbot__prompt-suggestion"
+            isClickable
+            isCompact={isCompact}
+          >
             <CardHeader
               selectableActions={{
                 onClickAction: prompt.onClick,

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

@@ -3,7 +3,7 @@
 exports[`ChatbotWelcomePrompt should render welcome prompt 1`] = `
 <div>
   <div
-    class="pf-chatbot--layout--welcome "
+    class="pf-chatbot--layout--welcome  "
   >
     <h1
       class="pf-v6-c-content--h1"

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.tsx

@@ -339,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}
@@ -349,6 +349,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
                 prerequisiteWord={quickStarts.prerequisiteWord}
                 prerequisiteWordPlural={quickStarts.prerequisiteWordPlural}
                 quickStartButtonAriaLabel={quickStarts.quickStartButtonAriaLabel}
+                isCompact={isCompact}
               />
             )}
             {!isLoading && actions && <ResponseActions actions={actions} />}

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/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.tsx

@@ -76,6 +76,7 @@ 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> = ({
@@ -95,6 +96,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   onChange,
   displayMode,
   value,
+  isCompact = false,
   ...props
 }: MessageBarProps) => {
   // Text Input
@@ -105,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');
 
@@ -135,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);
       }
     }
   };
@@ -160,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);
     }
   };
 
@@ -274,6 +278,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
         <StopButton
           onClick={handleStopButton}
           tooltipContent={buttonProps?.stop?.tooltipContent}
+          isCompact={isCompact}
           {...buttonProps?.stop?.props}
         />
       );
@@ -286,6 +291,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             onClick={handleAttachMenuToggle}
             isDisabled={isListeningMessage}
             tooltipContent={buttonProps?.attach?.tooltipContent}
+            isCompact={isCompact}
             {...buttonProps?.attach?.props}
           />
         )}
@@ -295,6 +301,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             isDisabled={isListeningMessage}
             tooltipContent={buttonProps?.attach?.tooltipContent}
             inputTestId={buttonProps?.attach?.inputTestId}
+            isCompact={isCompact}
             {...buttonProps?.attach?.props}
           />
         )}
@@ -305,6 +312,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             onSpeechRecognition={handleSpeechRecognition}
             tooltipContent={buttonProps?.microphone?.tooltipContent}
             language={buttonProps?.microphone?.language}
+            isCompact={isCompact}
             {...buttonProps?.microphone?.props}
           />
         )}
@@ -314,6 +322,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             onClick={() => handleSend(message)}
             isDisabled={isSendButtonDisabled}
             tooltipContent={buttonProps?.send?.tooltipContent}
+            isCompact={isCompact}
             {...buttonProps?.send?.props}
           />
         )}
@@ -323,7 +332,7 @@ 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}

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

package/src/MessageBar/MicrophoneButton.tsx

@@ -24,6 +24,7 @@ export interface MicrophoneButtonProps extends ButtonProps {
   tooltipContent?: { active?: string; inactive?: string };
   /** Locale code for language speech recognition is conducted in. This should be in the format 'en-US', a.k.a. the ISO 639-1 code, a dash, and the ISO_3166-1 code. */
   language?: string;
+  isCompact?: boolean;
 }
 
 export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> = ({
@@ -34,6 +35,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
   tooltipProps,
   tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' },
   language = 'en-US',
+  isCompact,
   ...props
 }: MicrophoneButtonProps) => {
   // Microphone
@@ -102,14 +104,15 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
     >
       <Button
         variant="plain"
-        className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${className ?? ''}`}
+        className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
         aria-label={props['aria-label'] || 'Microphone button'}
         onClick={isListening ? stopListening : startListening}
         icon={
-          <Icon iconSize="xl" isInline>
+          <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
             <MicrophoneIcon />
           </Icon>
         }
+        size={isCompact ? 'sm' : undefined}
         {...props}
       />
     </Tooltip>

package/src/MessageBar/SendButton.scss

@@ -51,3 +51,13 @@
     transform: translate3d(0, 0, 0);
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.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/SendButton.test.tsx

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { SendButton } from './SendButton';
 import { TooltipProps } from '@patternfly/react-core';
 
-const renderSend = (props?: { [key: string]: string | Omit<TooltipProps, 'content'> }) => {
+const renderSend = (props?: { [key: string]: string | boolean | Omit<TooltipProps, 'content'> }) => {
   const spy = jest.fn();
   render(<SendButton onClick={spy} {...props} />);
 };
@@ -40,4 +40,8 @@ describe('Send button', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
     expect(screen.getByRole('tooltip', { name: 'Send' })).toHaveAttribute('id', 'test');
   });
+  it('should handle isCompact', () => {
+    renderSend({ 'data-testid': 'button', isCompact: true });
+    expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
+  });
 });

package/src/MessageBar/SendButton.tsx

@@ -17,6 +17,7 @@ export interface SendButtonProps extends ButtonProps {
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** English text "Send" used in the tooltip */
   tooltipContent?: string;
+  isCompact?: boolean;
 }
 
 export const SendButton: React.FunctionComponent<SendButtonProps> = ({
@@ -24,6 +25,7 @@ export const SendButton: React.FunctionComponent<SendButtonProps> = ({
   onClick,
   tooltipProps,
   tooltipContent = 'Send',
+  isCompact,
   ...props
 }: SendButtonProps) => (
   <Tooltip
@@ -40,14 +42,15 @@ export const SendButton: React.FunctionComponent<SendButtonProps> = ({
   >
     <Button
       variant="plain"
-      className={`pf-chatbot__button--send ${className ?? ''}`}
+      className={`pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
       aria-label={props['aria-label'] || 'Send button'}
       onClick={onClick}
       icon={
-        <Icon iconSize="xl" isInline>
+        <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
           <PaperPlaneIcon />
         </Icon>
       }
+      size={isCompact ? 'sm' : undefined}
       {...props}
     />
   </Tooltip>

package/src/MessageBar/StopButton.scss

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