@patternfly/chatbot 2.2.1 → 6.3.0-prerelease.10

package/src/Chatbot/Chatbot.scss

@@ -125,3 +125,10 @@
     border-radius: var(--pf-t--global--border--radius--sharp);
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-chatbot.pf-m-compact {
+  font-size: var(--pf-t--global--font--size--sm);
+}

package/src/Chatbot/Chatbot.test.tsx

@@ -28,4 +28,13 @@ describe('Chatbot', () => {
     render(<Chatbot isVisible={false}>Chatbot Content</Chatbot>);
     expect(screen.queryByLabelText('Chatbot')).toBeFalsy();
   });
+
+  it('should handle isCompact', () => {
+    render(
+      <Chatbot data-testid="chatbot" isVisible={true} isCompact>
+        Chatbot Content
+      </Chatbot>
+    );
+    expect(screen.getByTestId('chatbot')).toHaveClass('pf-m-compact');
+  });
 });

package/src/Chatbot/Chatbot.tsx

@@ -17,6 +17,8 @@ export interface ChatbotProps {
   innerRef?: React.Ref<HTMLDivElement>;
   /** Custom aria label applied to focusable container */
   ariaLabel?: string;
+  /** Density of information within the ChatBot */
+  isCompact?: boolean;
 }
 
 export enum ChatbotDisplayMode {
@@ -34,6 +36,7 @@ const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
   className,
   innerRef,
   ariaLabel,
+  isCompact,
   ...props
 }: ChatbotProps) => {
   // Configure animations
@@ -44,7 +47,7 @@ const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
 
   return (
     <motion.div
-      className={`pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''} ${className ?? ''}`}
+      className={`pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''}  ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
       variants={motionChatbot}
       initial="hidden"
       animate={isVisible ? 'visible' : 'hidden'}

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -9,8 +9,8 @@
   // Drawer input
   // ----------------------------------------------------------------------------
   .pf-chatbot__input {
-    padding-inline-start: var(--pf-t--global--spacer--xl);
-    padding-inline-end: var(--pf-t--global--spacer--xl);
+    padding-inline-start: var(--pf-t--global--spacer--lg);
+    padding-inline-end: var(--pf-t--global--spacer--lg);
   }
 
   // Drawer menu
@@ -118,7 +118,6 @@
       border-radius: var(--pf-t--global--border--radius--pill);
       justify-content: center;
       align-items: center;
-      border-radius: var(--pf-t--global--border--radius--small);
     }
   }
 
@@ -205,3 +204,39 @@
   gap: var(--pf-t--global--spacer--sm);
   align-self: stretch;
 }
+
+.pf-chatbot__history.pf-m-compact {
+  .pf-v6-c-drawer__main {
+    .pf-v6-c-drawer__panel {
+      --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+      --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+      --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
+      --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+      --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--md);
+    }
+
+    .pf-v6-c-drawer__body {
+      --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
+      --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+    }
+  }
+
+  .pf-chatbot__menu-item {
+    font-size: var(--pf-t--global--font--size--body--md);
+  }
+
+  .pf-v6-c-drawer__head {
+    --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+    --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  }
+  .pf-v6-c-drawer__close {
+    .pf-v6-c-button {
+      width: 2rem;
+      height: 2rem;
+      --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+      --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--xs);
+      --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+      --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+    }
+  }
+}

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -5,6 +5,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotConversationHistoryNav, { Conversation } from './ChatbotConversationHistoryNav';
 import { EmptyStateStatus, Spinner } from '@patternfly/react-core';
+import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
 
 const ERROR = {
   bodyText: (
@@ -21,6 +22,18 @@ const ERROR = {
   onClick: () => alert('Clicked Reload')
 };
 
+const NO_RESULTS = {
+  bodyText: 'Adjust your search query and try again. Check your spelling or try a more general term.',
+  titleText: 'No results found',
+  icon: SearchIcon
+};
+
+const EMPTY_STATE = {
+  bodyText: 'Access timely assistance by starting a conversation with an AI model.',
+  titleText: 'Start a new chat',
+  icon: OutlinedCommentsIcon
+};
+
 const ERROR_WITHOUT_BUTTON = {
   bodyText: (
     <>
@@ -362,4 +375,62 @@ describe('ChatbotConversationHistoryNav', () => {
     );
     expect(screen.getByRole('dialog', { name: /Loading/i })).toBeTruthy();
   });
+
+  it('should accept emptyState', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        handleTextInputChange={jest.fn()}
+        conversations={initialConversations}
+        emptyState={EMPTY_STATE}
+      />
+    );
+    expect(
+      screen.getByRole('dialog', {
+        name: /Start a new chat Access timely assistance by starting a conversation with an AI model./i
+      })
+    ).toBeTruthy();
+  });
+
+  it('should accept no results state', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        handleTextInputChange={jest.fn()}
+        conversations={initialConversations}
+        noResultsState={NO_RESULTS}
+      />
+    );
+    expect(
+      screen.getByRole('dialog', {
+        name: /No results found Adjust your search query and try again. Check your spelling or try a more general term./i
+      })
+    ).toBeTruthy();
+  });
+
+  it('should handle isCompact', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        handleTextInputChange={jest.fn()}
+        conversations={initialConversations}
+        noResultsState={NO_RESULTS}
+        isCompact
+        data-testid="drawer"
+      />
+    );
+    expect(screen.getByTestId('drawer')).toHaveClass('pf-m-compact');
+  });
 });

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -112,6 +112,12 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   loadingState?: SkeletonProps;
   /** Content to show in error state. Error state will appear once content is passed in. */
   errorState?: HistoryEmptyStateProps;
+  /** Content to show in empty state. Empty state will appear once content is passed in. */
+  emptyState?: HistoryEmptyStateProps;
+  /** Content to show in no results state. No results state will appear once content is passed in. */
+  noResultsState?: HistoryEmptyStateProps;
+  /** Sets drawer to compact styling. */
+  isCompact?: boolean;
 }
 
 export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -141,6 +147,9 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   isLoading,
   loadingState,
   errorState,
+  emptyState,
+  noResultsState,
+  isCompact,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = React.useRef<HTMLDivElement>(null);
@@ -210,6 +219,14 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
     if (errorState) {
       return <HistoryEmptyState {...errorState} />;
     }
+
+    if (emptyState) {
+      return <HistoryEmptyState {...emptyState} />;
+    }
+
+    if (noResultsState) {
+      return <HistoryEmptyState {...noResultsState} />;
+    }
     return (
       <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId} {...menuProps}>
         <MenuContent>{buildMenu()}</MenuContent>
@@ -242,7 +259,11 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
             {...drawerActionsProps}
           >
             <DrawerCloseButton onClick={onDrawerToggle} {...drawerCloseButtonProps} />
-            {onNewChat && <Button onClick={onNewChat}>{newChatButtonText}</Button>}
+            {onNewChat && (
+              <Button size={isCompact ? 'sm' : undefined} onClick={onNewChat}>
+                {newChatButtonText}
+              </Button>
+            )}
           </DrawerActions>
         </DrawerHead>
         {isLoading ? <LoadingState {...loadingState} /> : renderDrawerContent()}
@@ -273,7 +294,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
 
   return (
     <Drawer
-      className="pf-chatbot__history"
+      className={`pf-chatbot__history ${isCompact ? 'pf-m-compact' : ''}`}
       isExpanded={isDrawerOpen}
       onExpand={onExpand}
       position="start"

package/src/ChatbotFooter/ChatbotFooter.scss

@@ -57,3 +57,8 @@
     padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
   }
 }
+
+.pf-chatbot__footer.pf-m-compact .pf-chatbot__footer-container {
+  padding: 0 var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
+  row-gap: var(--pf-t--global--spacer--sm);
+}

package/src/ChatbotFooter/ChatbotFooter.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import ChatbotFooter from './ChatbotFooter';
+import '@testing-library/jest-dom';
 
 describe('ChatbotFooter', () => {
   it('should render ChatbotFooter with children', () => {
@@ -12,4 +13,13 @@ describe('ChatbotFooter', () => {
     const { container } = render(<ChatbotFooter className="custom-class">Chatbot Content</ChatbotFooter>);
     expect(container.querySelector('.custom-class')).toBeTruthy();
   });
+
+  it('should handle isCompact', () => {
+    render(
+      <ChatbotFooter className="custom-class" isCompact data-testid="footer">
+        Chatbot Content
+      </ChatbotFooter>
+    );
+    expect(screen.getByTestId('footer')).toHaveClass('pf-m-compact');
+  });
 });

package/src/ChatbotFooter/ChatbotFooter.tsx

@@ -17,14 +17,16 @@ export interface ChatbotFooterProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Custom classname for the Footer component */
   className?: string;
+  isCompact?: boolean;
 }
 
 export const ChatbotFooter: React.FunctionComponent<ChatbotFooterProps> = ({
   children,
   className,
+  isCompact,
   ...props
 }: ChatbotFooterProps) => (
-  <div className={`pf-chatbot__footer ${className ?? ''}`} {...props}>
+  <div className={`pf-chatbot__footer ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`} {...props}>
     <Divider />
     <div className="pf-chatbot__footer-container">{children}</div>
   </div>

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

@@ -14,7 +14,7 @@ export const ChatbotHeader: React.FunctionComponent<ChatbotHeaderProps> = ({
   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/ChatbotHeaderCloseButton.test.tsx

@@ -1,6 +1,7 @@
 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 +18,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,9 @@
 import React 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,6 +16,8 @@ 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> = ({
@@ -24,9 +26,11 @@ const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseBu
   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,16 +39,18 @@ 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>

package/src/ChatbotHeader/ChatbotHeaderMain.tsx

@@ -10,6 +10,8 @@ export interface ChatbotHeaderMainProps {
 export const ChatbotHeaderMain: React.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,7 @@
 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 +17,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,9 @@
 import React 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,6 +16,7 @@ export interface ChatbotHeaderMenuProps {
   innerRef?: React.Ref<HTMLButtonElement>;
   /** Content used in tooltip */
   tooltipContent?: string;
+  isCompact?: boolean;
 }
 
 const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = ({
@@ -24,7 +25,9 @@ const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = (
   tooltipProps,
   menuAriaLabel = 'Toggle menu',
   innerRef,
-  tooltipContent = 'Menu'
+  tooltipContent = 'Menu',
+  isCompact,
+  ...props
 }: ChatbotHeaderMenuProps) => (
   <div className={`pf-chatbot__menu ${className}`}>
     <Tooltip
@@ -35,16 +38,18 @@ 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>

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