@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.21

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -137,3 +137,28 @@
 :where(.pf-v6-theme-dark) .show-dark .pf-m-picture {
   display: inline-flex;
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-chatbot.pf-m-compact {
+  .pf-chatbot__header {
+    gap: var(--pf-t--global--spacer--sm);
+    padding: var(--pf-t--global--spacer--sm);
+  }
+
+  .pf-chatbot__header .pf-chatbot__title img {
+    max-height: 24px;
+    vertical-align: middle;
+  }
+}
+
+.pf-v6-c-menu-toggle.pf-chatbot__button--toggle-options.pf-m-compact,
+.pf-chatbot__button--toggle-menu.pf-m-compact {
+  width: 2rem;
+  height: 2rem;
+}
+
+.pf-chatbot__header .pf-chatbot__actions .pf-v6-c-menu-toggle.pf-m-secondary.pf-m-compact {
+  width: initial;
+}

package/src/ChatbotHeader/ChatbotHeader.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import ChatbotHeader from './ChatbotHeader';
 

package/src/ChatbotHeader/ChatbotHeader.tsx

@@ -1,20 +1,17 @@
-import React from 'react';
+import type { HTMLProps, FunctionComponent } from 'react';
 
 import { Divider } from '@patternfly/react-core';
 
-export interface ChatbotHeaderProps extends React.HTMLProps<HTMLDivElement> {
+export interface ChatbotHeaderProps extends HTMLProps<HTMLDivElement> {
   /** Content to be displayed in the chatbot header */
   children: React.ReactNode;
   /** Custom classname for the header component */
   className?: string;
 }
 
-export const ChatbotHeader: React.FunctionComponent<ChatbotHeaderProps> = ({
-  className,
-  children
-}: ChatbotHeaderProps) => (
+export const ChatbotHeader: FunctionComponent<ChatbotHeaderProps> = ({ className, children }: ChatbotHeaderProps) => (
   <div className="pf-chatbot__header-container">
-    <div className={`pf-chatbot__header ${className ?? ''}`}>{children}</div>
+    <div className={`pf-chatbot__header${className ? ` ${className}` : ''}`}>{children}</div>
     <Divider className="pf-chatbot__header__divider" />
   </div>
 );

package/src/ChatbotHeader/ChatbotHeaderActions.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import ChatbotHeaderActions from './ChatbotHeaderActions';
 

package/src/ChatbotHeader/ChatbotHeaderActions.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 export interface ChatbotHeaderActionsProps {
   /** Content to be displayed in the chatbot header */
@@ -7,7 +7,7 @@ export interface ChatbotHeaderActionsProps {
   className?: string;
 }
 
-export const ChatbotHeaderActions: React.FunctionComponent<ChatbotHeaderActionsProps> = ({
+export const ChatbotHeaderActions: FunctionComponent<ChatbotHeaderActionsProps> = ({
   className,
   children
 }: ChatbotHeaderActionsProps) => <div className={`pf-chatbot__actions ${className || ''}`}>{children}</div>;

package/src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { ChatbotHeaderCloseButton } from './ChatbotHeaderCloseButton';
+import '@testing-library/jest-dom';
 
 describe('ChatbotHeaderCloseButton', () => {
   it('should render ChatbotHeaderCloseButton', () => {
@@ -17,4 +17,9 @@ describe('ChatbotHeaderCloseButton', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Close' }));
     expect(onClick).toHaveBeenCalled();
   });
+
+  it('should render button with isCompact', () => {
+    render(<ChatbotHeaderCloseButton data-testid="close-button" onClick={jest.fn()} isCompact />);
+    expect(screen.getByTestId('close-button')).toHaveClass('pf-m-compact');
+  });
 });

package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import type { Ref, FunctionComponent } from 'react';
+import { forwardRef } from 'react';
 
-import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import { CloseIcon } from '@patternfly/react-icons';
 
-export interface ChatbotHeaderCloseButtonProps {
+export interface ChatbotHeaderCloseButtonProps extends ButtonProps {
   /** Callback function for when button is clicked */
   onClick: () => void;
   /** Custom classname for the header component */
@@ -16,17 +17,21 @@ export interface ChatbotHeaderCloseButtonProps {
   innerRef?: React.Ref<HTMLButtonElement>;
   /** Content used in tooltip */
   tooltipContent?: string;
+  /** Sets button to compact styling. */
+  isCompact?: boolean;
 }
 
-const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseButtonProps> = ({
+const ChatbotHeaderCloseButtonBase: FunctionComponent<ChatbotHeaderCloseButtonProps> = ({
   className,
   onClick,
   tooltipProps,
   menuAriaLabel = 'Close',
   innerRef,
-  tooltipContent = 'Close'
+  tooltipContent = 'Close',
+  isCompact,
+  ...props
 }: ChatbotHeaderCloseButtonProps) => (
-  <div className={`pf-chatbot__menu ${className}`}>
+  <div className={`pf-chatbot__menu${className ? ` ${className}` : ''}`}>
     <Tooltip
       content={tooltipContent}
       position="bottom"
@@ -35,23 +40,25 @@ const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseBu
       {...tooltipProps}
     >
       <Button
-        className="pf-chatbot__button--toggle-menu"
+        className={`pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`}
         variant="plain"
         onClick={onClick}
         aria-label={menuAriaLabel}
         ref={innerRef}
         icon={
-          <Icon size="xl" isInline>
+          <Icon size={isCompact ? 'lg' : 'xl'} isInline>
             <CloseIcon />
           </Icon>
         }
+        size={isCompact ? 'sm' : undefined}
+        {...props}
       />
     </Tooltip>
   </div>
 );
 
-export const ChatbotHeaderCloseButton = React.forwardRef(
-  (props: ChatbotHeaderCloseButtonProps, ref: React.Ref<HTMLButtonElement>) => (
+export const ChatbotHeaderCloseButton = forwardRef(
+  (props: ChatbotHeaderCloseButtonProps, ref: Ref<HTMLButtonElement>) => (
     <ChatbotHeaderCloseButtonBase innerRef={ref} {...props} />
   )
 );

package/src/ChatbotHeader/ChatbotHeaderMain.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import ChatbotHeaderMain from './ChatbotHeaderMain';
 

package/src/ChatbotHeader/ChatbotHeaderMain.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 export interface ChatbotHeaderMainProps {
   /** Custom classname for the header component */
@@ -7,9 +7,11 @@ export interface ChatbotHeaderMainProps {
   children: React.ReactNode;
 }
 
-export const ChatbotHeaderMain: React.FunctionComponent<ChatbotHeaderMainProps> = ({
+export const ChatbotHeaderMain: FunctionComponent<ChatbotHeaderMainProps> = ({
   className,
   children
-}: ChatbotHeaderMainProps) => <div className={`pf-chatbot__header-main ${className}`}>{children}</div>;
+}: ChatbotHeaderMainProps) => (
+  <div className={`pf-chatbot__header-main${className ? ` ${className}` : ''}`}>{children}</div>
+);
 
 export default ChatbotHeaderMain;

package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { ChatbotHeaderMenu } from './ChatbotHeaderMenu';
+import '@testing-library/jest-dom';
 
 describe('ChatbotHeaderMenu', () => {
   it('should render ChatbotHeaderMenu with custom class', () => {
@@ -16,4 +16,11 @@ describe('ChatbotHeaderMenu', () => {
 
     expect(onMenuToggle).toHaveBeenCalled();
   });
+
+  it('should handle isCompact', () => {
+    render(
+      <ChatbotHeaderMenu className="custom-header-menu" onMenuToggle={jest.fn()} isCompact data-testid="button" />
+    );
+    expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
+  });
 });

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import type { Ref, FunctionComponent } from 'react';
+import { forwardRef } from 'react';
 
-import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
-export interface ChatbotHeaderMenuProps {
+export interface ChatbotHeaderMenuProps extends ButtonProps {
   /** Callback function to attach to menu toggle on top right of chatbot header. */
   onMenuToggle: () => void;
   /** Custom classname for the header component */
@@ -16,15 +17,19 @@ export interface ChatbotHeaderMenuProps {
   innerRef?: React.Ref<HTMLButtonElement>;
   /** Content used in tooltip */
   tooltipContent?: string;
+  /** Sets menu to compact styling. */
+  isCompact?: boolean;
 }
 
-const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = ({
+const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
   className,
   onMenuToggle,
   tooltipProps,
   menuAriaLabel = 'Toggle menu',
   innerRef,
-  tooltipContent = 'Menu'
+  tooltipContent = 'Menu',
+  isCompact,
+  ...props
 }: ChatbotHeaderMenuProps) => (
   <div className={`pf-chatbot__menu ${className}`}>
     <Tooltip
@@ -35,23 +40,23 @@ const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = (
       {...tooltipProps}
     >
       <Button
-        className="pf-chatbot__button--toggle-menu"
+        className={`pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`}
         variant="plain"
         onClick={onMenuToggle}
         aria-label={menuAriaLabel}
         ref={innerRef}
         icon={
-          <Icon size="xl" isInline>
+          <Icon size={isCompact ? 'lg' : 'xl'} isInline>
             <BarsIcon />
           </Icon>
         }
+        size={isCompact ? 'sm' : undefined}
+        {...props}
       />
     </Tooltip>
   </div>
 );
 
-export const ChatbotHeaderMenu = React.forwardRef(
-  (props: ChatbotHeaderMenuProps, ref: React.Ref<HTMLButtonElement>) => (
-    <ChatbotHeaderMenuBase innerRef={ref} {...props} />
-  )
-);
+export const ChatbotHeaderMenu = forwardRef((props: ChatbotHeaderMenuProps, ref: Ref<HTMLButtonElement>) => (
+  <ChatbotHeaderMenuBase innerRef={ref} {...props} />
+));

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx

@@ -1,7 +1,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 +42,18 @@ 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');
+  });
+
+  it('should handle toggleProps', () => {
+    render(
+      <ChatbotHeaderOptionsDropdown isCompact toggleProps={{ isDisabled: true }}>
+        {dropdownItems}
+      </ChatbotHeaderOptionsDropdown>
+    );
+    expect(screen.getByRole('button', { name: /Chatbot options/i })).toBeDisabled();
+  });
 });

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type { FunctionComponent, Ref } from 'react';
+import { useState } from 'react';
 
 import {
   Tooltip,
@@ -7,7 +8,8 @@ import {
   DropdownProps,
   MenuToggle,
   MenuToggleElement,
-  Icon
+  Icon,
+  MenuToggleProps
 } from '@patternfly/react-core';
 import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
@@ -20,19 +22,25 @@ export interface ChatbotHeaderOptionsDropdownProps extends Omit<DropdownProps, '
   tooltipProps?: TooltipProps;
   /** Aria label for menu toggle */
   menuToggleAriaLabel?: string;
+  /** Sets menu to compact styling. */
+  isCompact?: boolean;
+  /** Additional props passed to toggle */
+  toggleProps?: MenuToggleProps;
 }
 
-export const ChatbotHeaderOptionsDropdown: React.FunctionComponent<ChatbotHeaderOptionsDropdownProps> = ({
+export const ChatbotHeaderOptionsDropdown: FunctionComponent<ChatbotHeaderOptionsDropdownProps> = ({
   className,
   children,
   onSelect,
   tooltipProps,
   menuToggleAriaLabel = 'Chatbot options',
+  isCompact,
+  toggleProps,
   ...props
 }: ChatbotHeaderOptionsDropdownProps) => {
-  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
+  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = useState(false);
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <Tooltip
       className="pf-chatbot__tooltip"
       content="Chatbot options"
@@ -42,17 +50,19 @@ 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}
+        {...toggleProps}
       />
     </Tooltip>
   );

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx

@@ -1,7 +1,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 +40,22 @@ 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');
+  });
+
+  it('should handle toggleProps', () => {
+    render(
+      <ChatbotHeaderSelectorDropdown value="Option 1" toggleProps={{ isDisabled: true }}>
+        {dropdownItems}
+      </ChatbotHeaderSelectorDropdown>
+    );
+    expect(screen.getByRole('button', { name: /Select model/i })).toBeDisabled();
+  });
 });

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx

@@ -1,6 +1,15 @@
-import React from 'react';
+import type { FunctionComponent, Ref } from 'react';
+import { useState } from 'react';
 
-import { Tooltip, TooltipProps, Dropdown, DropdownProps, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import {
+  Tooltip,
+  TooltipProps,
+  Dropdown,
+  DropdownProps,
+  MenuToggle,
+  MenuToggleElement,
+  MenuToggleProps
+} from '@patternfly/react-core';
 
 export interface ChatbotHeaderSelectorDropdownProps extends Omit<DropdownProps, 'toggle'> {
   /** Value of the selected dropdown item */
@@ -15,9 +24,15 @@ export interface ChatbotHeaderSelectorDropdownProps extends Omit<DropdownProps,
   menuToggleAriaLabel?: string;
   /** Text displayed in Tooltip wrapping the display mode dropdown */
   tooltipContent?: string;
+  /** Sets menu to compact styling. */
+  isCompact?: boolean;
+  /** Additional props passed to toggle */
+  toggleProps?: MenuToggleProps;
+  /** Custom width for the dropdown */
+  dropdownWidth?: string;
 }
 
-export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeaderSelectorDropdownProps> = ({
+export const ChatbotHeaderSelectorDropdown: FunctionComponent<ChatbotHeaderSelectorDropdownProps> = ({
   value,
   className,
   children,
@@ -25,12 +40,15 @@ export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeade
   tooltipProps,
   tooltipContent = 'Select model',
   menuToggleAriaLabel,
+  isCompact,
+  toggleProps,
+  dropdownWidth,
   ...props
 }: ChatbotHeaderSelectorDropdownProps) => {
-  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
-  const [defaultAriaLabel, setDefaultAriaLabel] = React.useState('Select model');
+  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = useState(false);
+  const [defaultAriaLabel, setDefaultAriaLabel] = useState('Select model');
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <Tooltip
       className="pf-chatbot__tooltip"
       content={tooltipContent}
@@ -45,6 +63,12 @@ export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeade
         ref={toggleRef}
         isExpanded={isOptionsMenuOpen}
         onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}
+        size={isCompact ? 'sm' : undefined}
+        className={`${isCompact ? 'pf-m-compact' : ''}`}
+        {...toggleProps}
+        style={{
+          width: dropdownWidth
+        }}
       >
         {value}
       </MenuToggle>

package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotHeaderTitle from './ChatbotHeaderTitle';

package/src/ChatbotHeader/ChatbotHeaderTitle.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 import { SplitItem } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
@@ -22,7 +22,7 @@ export interface ChatbotHeaderTitleProps {
   showOnDefault?: React.ReactNode | string;
 }
 
-export const ChatbotHeaderTitle: React.FunctionComponent<ChatbotHeaderTitleProps> = ({
+export const ChatbotHeaderTitle: FunctionComponent<ChatbotHeaderTitleProps> = ({
   className,
   children,
   displayMode,

package/src/ChatbotModal/ChatbotModal.scss

@@ -14,10 +14,7 @@
   .pf-v6-c-modal-box__title {
     --pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--h3);
   }
-  .pf-v6-c-button.pf-m-primary.pf-m-block,
-  .pf-v6-c-button.pf-m-link.pf-m-block {
-    --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  }
+
   .pf-v6-c-modal-box__footer {
     padding-block-start: var(--pf-t--global--spacer--xl);
     padding-block-end: var(--pf-t--global--spacer--xl);
@@ -91,3 +88,17 @@
 .pf-v6-c-backdrop.pf-chatbot__backdrop {
   position: absolute;
 }
+
+// ============================================================================
+// Compact
+// ============================================================================
+.pf-chatbot__chatbot-modal.pf-m-compact {
+  .pf-v6-c-modal-box__header {
+    padding-block-end: 0;
+  }
+
+  .pf-v6-c-modal-box__footer {
+    padding-block-start: var(--pf-t--global--spacer--lg);
+    padding-block-end: var(--pf-t--global--spacer--lg);
+  }
+}

package/src/ChatbotModal/ChatbotModal.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react';
+import ChatbotModal from './ChatbotModal';
+import '@testing-library/jest-dom';
+import { ModalBody, ModalHeader } from '@patternfly/react-core';
+
+describe('ChatbotModal', () => {
+  it('should render compact modal', () => {
+    render(
+      <ChatbotModal data-testid="modal" isCompact isOpen>
+        <ModalHeader
+          title="Modal with description"
+          labelId="modal-with-description-title"
+          description="A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body."
+        />
+        <ModalBody tabIndex={0} id="modal-box-body-with-description">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Semper auctor neque vitae
+          tempus. Diam donec adipiscing tristique risus. Augue eget arcu dictum varius duis. Ut enim blandit volutpat
+          maecenas volutpat blandit aliquam. Sit amet mauris commodo quis imperdiet massa tincidunt. Habitant morbi
+          tristique senectus et netus. Fames ac turpis egestas sed tempus urna. Neque laoreet suspendisse interdum
+          consectetur libero id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Porta nibh venenatis cras
+          sed felis eget velit. Nullam non nisi est sit amet facilisis. Nunc mi ipsum faucibus vitae. Lorem sed risus
+          ultricies tristique nulla aliquet enim tortor at. Egestas sed tempus urna et pharetra pharetra massa massa
+          ultricies. Lacinia quis vel eros donec ac odio tempor orci. Malesuada fames ac turpis egestas integer eget
+          aliquet.
+          <br />
+          <br />
+          Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Molestie at elementum eu facilisis sed odio
+          morbi. Elit pellentesque habitant morbi tristique. Consequat nisl vel pretium lectus quam id leo in vitae.
+          Quis varius quam quisque id diam vel quam elementum. Viverra nam libero justo laoreet sit amet cursus.
+          Sollicitudin tempor id eu nisl nunc. Orci nulla pellentesque dignissim enim sit amet venenatis. Dignissim enim
+          sit amet venenatis urna cursus eget. Iaculis at erat pellentesque adipiscing commodo elit. Faucibus pulvinar
+          elementum integer enim neque volutpat. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Nunc mattis
+          enim ut tellus elementum sagittis vitae. Blandit cursus risus at ultrices. Tellus mauris a diam maecenas sed
+          enim. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla.
+          <br />
+          <br />
+          Nulla pharetra diam sit amet nisl suscipit adipiscing. Ac tortor vitae purus faucibus ornare suspendisse sed
+          nisi. Sed felis eget velit aliquet sagittis id consectetur purus. Tincidunt tortor aliquam nulla facilisi cras
+          fermentum. Volutpat est velit egestas dui id ornare arcu odio. Pharetra magna ac placerat vestibulum. Ultrices
+          sagittis orci a scelerisque purus semper eget duis at. Nisi est sit amet facilisis magna etiam tempor orci eu.
+          Convallis tellus id interdum velit. Facilisis sed odio morbi quis commodo odio aenean sed.
+          <br />
+          <br />
+          Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Facilisi etiam dignissim diam quis enim
+          lobortis scelerisque fermentum. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Magna
+          etiam tempor orci eu lobortis elementum. Quis auctor elit sed vulputate mi sit. Eleifend quam adipiscing vitae
+          proin sagittis nisl rhoncus mattis rhoncus. Erat velit scelerisque in dictum non. Sit amet nulla facilisi
+          morbi tempus iaculis urna. Enim ut tellus elementum sagittis vitae et leo duis ut. Lectus arcu bibendum at
+          varius vel pharetra vel turpis. Morbi tristique senectus et netus et. Eget aliquet nibh praesent tristique
+          magna sit amet purus gravida. Nisl purus in mollis nunc sed id semper risus. Id neque aliquam vestibulum
+          morbi. Mauris a diam maecenas sed enim ut sem. Egestas tellus rutrum tellus pellentesque.
+        </ModalBody>
+      </ChatbotModal>
+    );
+    expect(screen.getByTestId('modal')).toHaveClass('pf-m-compact');
+  });
+});

package/src/ChatbotModal/ChatbotModal.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Code Modal - Chatbot Modal with Code Editor
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Modal, ModalProps } from '@patternfly/react-core';
@@ -10,14 +10,18 @@ import { ChatbotDisplayMode } from '../Chatbot';
 export interface ChatbotModalProps extends Omit<ModalProps, 'ref'> {
   /** Display mode for the Chatbot parent; this influences the styles applied */
   displayMode?: ChatbotDisplayMode;
+  /** Additional className applied to modal */
   className?: string;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
 }
 
-export const ChatbotModal: React.FunctionComponent<ChatbotModalProps> = ({
+export const ChatbotModal: FunctionComponent<ChatbotModalProps> = ({
   children,
   displayMode = ChatbotDisplayMode.default,
   className,
   isOpen,
+  isCompact,
   ...props
 }: ChatbotModalProps) => {
   const modal = (
@@ -26,7 +30,7 @@ export const ChatbotModal: React.FunctionComponent<ChatbotModalProps> = ({
       ouiaId="ChatbotModal"
       aria-labelledby="chatbot-modal-title"
       aria-describedby="chatbot-modal"
-      className={`pf-chatbot__chatbot-modal pf-chatbot__chatbot-modal--${displayMode} ${className}`}
+      className={`pf-chatbot__chatbot-modal pf-chatbot__chatbot-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className}`}
       backdropClassName="pf-chatbot__chatbot-modal-backdrop"
       {...props}
     >

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