@patternfly/chatbot 6.5.0-prerelease.1 → 6.5.0-prerelease.11

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -15,8 +15,10 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
   menuItems: React.ReactNode;
   /** Optional classname applied to conversation settings dropdown */
   menuClassName?: string;
-  /** Tooltip content and aria-label applied to conversation settings dropdown */
+  /** Tooltip content applied to conversation settings dropdown */
   label?: string;
+  /** Aria-label applied to conversation settings dropdown */
+  'aria-label'?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
   /** Id applied to dropdown menu toggle */
@@ -27,7 +29,8 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
   menuItems,
   menuClassName,
   onSelect,
-  label,
+  label = 'Conversation options',
+  'aria-label': ariaLabel,
   id
 }: ChatbotConversationHistoryDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -35,7 +38,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
   const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <Tooltip
       className="pf-chatbot__tooltip"
-      content={label ?? 'Conversation options'}
+      content={label}
       position="bottom"
       // prevents VO announcements of both aria label and tooltip
       aria="none"
@@ -43,7 +46,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
       <MenuToggle
         className="pf-chatbot__history-actions"
         variant="plain"
-        aria-label={label ?? 'Conversation options'}
+        aria-label={ariaLabel ?? label}
         ref={toggleRef}
         isExpanded={isOpen}
         onClick={() => setIsOpen(!isOpen)}

package/src/ChatbotFooter/ChatbotFooter.scss

@@ -11,6 +11,10 @@
   flex-direction: column;
   row-gap: var(--pf-chatbot__footer--RowGap);
   position: relative; // this is so focus ring on parent chatbot doesn't include footer
+
+  &.pf-m-primary {
+    background-color: var(--pf-t--global--background--color--primary--default);
+  }
 }
 .pf-chatbot__footer-container {
   padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg);
@@ -62,3 +66,20 @@
   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);
 }
+
+// ============================================================================
+// High contrast
+// ============================================================================
+:root:where(.pf-v6-theme-high-contrast) {
+  // Chatbot Display Mode - Fullscreen and Embedded
+  @media screen and (min-width: 64rem) {
+    .pf-chatbot--embedded,
+    .pf-chatbot--fullscreen {
+      .pf-chatbot__footer {
+        .pf-v6-c-divider {
+          display: var(--pf-v6-hidden-visible--Display);
+        }
+      }
+    }
+  }
+}

package/src/ChatbotFooter/ChatbotFooter.test.tsx

@@ -15,10 +15,19 @@ describe('ChatbotFooter', () => {
 
   it('should handle isCompact', () => {
     render(
-      <ChatbotFooter className="custom-class" isCompact data-testid="footer">
+      <ChatbotFooter isCompact data-testid="footer">
         Chatbot Content
       </ChatbotFooter>
     );
     expect(screen.getByTestId('footer')).toHaveClass('pf-m-compact');
   });
+
+  it('should handle isPrimary', () => {
+    render(
+      <ChatbotFooter isPrimary data-testid="footer">
+        Chatbot Content
+      </ChatbotFooter>
+    );
+    expect(screen.getByTestId('footer')).toHaveClass('pf-m-primary');
+  });
 });

package/src/ChatbotFooter/ChatbotFooter.tsx

@@ -13,20 +13,27 @@ import type { HTMLProps, FunctionComponent } from 'react';
 import { Divider } from '@patternfly/react-core';
 
 export interface ChatbotFooterProps extends HTMLProps<HTMLDivElement> {
-  /** Children for the Footer that supports MessageBar and FootNote components*/
+  /** Children for the footer - supports MessageBar and FootNote components*/
   children?: React.ReactNode;
-  /** Custom classname for the Footer component */
+  /** Custom classname for the footer component */
   className?: string;
+  /** Sets footer to compact styling. */
   isCompact?: boolean;
+  /** Sets background color to primary */
+  isPrimary?: boolean;
 }
 
 export const ChatbotFooter: FunctionComponent<ChatbotFooterProps> = ({
   children,
   className,
   isCompact,
+  isPrimary,
   ...props
 }: ChatbotFooterProps) => (
-  <div className={`pf-chatbot__footer ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`} {...props}>
+  <div
+    className={`pf-chatbot__footer ${isCompact ? 'pf-m-compact' : ''} ${isPrimary ? 'pf-m-primary' : ''} ${className ?? ''}`}
+    {...props}
+  >
     <Divider />
     <div className="pf-chatbot__footer-container">{children}</div>
   </div>

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -91,6 +91,10 @@
   align-items: center;
   justify-content: center;
 
+  &::before {
+    border-radius: inherit;
+  }
+
   .pf-v6-c-button__icon,
   .pf-v6-c-menu-toggle__icon,
   .pf-v6-c-icon__content {
@@ -162,3 +166,18 @@
 .pf-chatbot__header .pf-chatbot__actions .pf-v6-c-menu-toggle.pf-m-secondary.pf-m-compact {
   width: initial;
 }
+
+// ============================================================================
+// High contrast
+// ============================================================================
+:root:where(.pf-v6-theme-high-contrast) {
+  // Chatbot Display Mode - Fullscreen and Embedded
+  @media screen and (min-width: 64rem) {
+    .pf-chatbot--fullscreen,
+    .pf-chatbot--embedded {
+      .pf-chatbot__header__divider {
+        display: var(--pf-v6-hidden-visible--Display);
+      }
+    }
+  }
+}

package/src/CodeModal/CodeModal.tsx

@@ -1,17 +1,31 @@
 // ============================================================================
 // Code Modal - Chatbot Modal with Code Editor
 // ============================================================================
+
 import type { FunctionComponent, MouseEvent } from 'react';
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import path from 'path-browserify';
+import * as monaco from 'monaco-editor';
+import { loader } from '@monaco-editor/react';
 
 // Import PatternFly components
 import { CodeEditor } from '@patternfly/react-code-editor';
-import { Button, ModalBody, ModalFooter, ModalHeader, Stack, StackItem } from '@patternfly/react-core';
+import {
+  Button,
+  getResizeObserver,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  StackItem
+} from '@patternfly/react-core';
 import FileDetails, { extensionToLanguage } from '../FileDetails';
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal from '../ChatbotModal/ChatbotModal';
 
+// Configure Monaco loader to use the npm package instead of CDN
+loader.config({ monaco });
+
 export interface CodeModalProps {
   /** Class applied to code editor */
   codeEditorControlClassName?: string;
@@ -73,6 +87,34 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
   ...props
 }: CodeModalProps) => {
   const [newCode, setNewCode] = useState(code);
+  const [editorInstance, setEditorInstance] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const [isEditorReady, setIsEditorReady] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isModalOpen || !isEditorReady || !editorInstance || !containerRef.current) {
+      return;
+    }
+
+    const handleResize = () => {
+      if (editorInstance && isEditorReady && isModalOpen) {
+        try {
+          window.requestAnimationFrame(() => {
+            editorInstance.layout();
+          });
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error('ChatBot code modal layout error:', error);
+        }
+      }
+    };
+
+    const observer = getResizeObserver(containerRef.current, handleResize);
+
+    return () => {
+      observer();
+    };
+  }, [editorInstance, isEditorReady, isModalOpen]);
 
   const handlePrimaryAction = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
@@ -89,9 +131,15 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
   };
 
   const onEditorDidMount = (editor, monaco) => {
-    editor.layout();
-    editor.focus();
+    setEditorInstance(editor);
+
     monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+
+    if (containerRef.current) {
+      setIsEditorReady(true);
+      editor.layout();
+      editor.focus();
+    }
   };
 
   const onCodeChange = (value: string) => {
@@ -117,7 +165,7 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
           <StackItem className="pf-chatbot__code-modal-file-details">
             <FileDetails fileName={fileName} />
           </StackItem>
-          <StackItem className="pf-chatbot__code-modal-editor">
+          <div className="pf-v6-l-stack__item pf-chatbot__code-modal-editor" ref={containerRef}>
             <CodeEditor
               isDarkTheme
               isLineNumbersVisible={isLineNumbersVisible}
@@ -132,11 +180,14 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
               isFullHeight
               options={{
                 glyphMargin: false,
-                folding: false
+                folding: false,
+                // prevents Monaco from handling resizing itself
+                // was causing ResizeObserver issues
+                automaticLayout: false
               }}
               {...props}
             />
-          </StackItem>
+          </div>
         </Stack>
       </ModalBody>
       <ModalFooter className={modalFooterClassName}>

package/src/FileDetailsLabel/FileDetailsLabel.tsx

@@ -1,10 +1,10 @@
 import { PropsWithChildren } from 'react';
-import { Button, Label } from '@patternfly/react-core';
+import { Button, Label, LabelProps } from '@patternfly/react-core';
 import FileDetails from '../FileDetails';
 import { Spinner } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
 
-export interface FileDetailsLabelProps {
+export interface FileDetailsLabelProps extends Omit<LabelProps, 'onClose' | 'onClick'> {
   /** Name of file, including extension */
   fileName: string;
   /** Unique id of file */

package/src/Message/CodeBlockMessage/CodeBlockMessage.scss

@@ -30,7 +30,8 @@
       font-family: var(--pf-t--global--font--family--body);
     }
 
-    .pf-v6-c-code-block__actions-item {
+    // we are overriding some default PatternFly positioning here - it's only necessary for the first two items
+    .pf-chatbot__message-code-block-default-action {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -39,7 +40,7 @@
       font-weight: var(--pf-t--global--font--weight--body--bold);
     }
 
-    .pf-chatbot__button--copy.pf-v6-c-button {
+    .pf-v6-c-code-block__actions-item > .pf-v6-c-button.pf-m-plain {
       color: var(--pf-t--color--white); // same in light + dark theme
 
       &:hover,
@@ -80,6 +81,10 @@
   --pf-chatbot-message-text-inline-code-font-size: var(--pf-t--global--font--size--body--default);
   background-color: var(--pf-t--global--background--color--tertiary--default);
   font-size: var(--pf-chatbot-message-text-inline-code-font-size);
+
+  &.pf-m-primary {
+    background-color: var(--pf-t--global--background--color--secondary--default);
+  }
 }
 
 .pf-chatbot__message-code-toggle {

package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -37,6 +37,10 @@ export interface CodeBlockMessageProps {
   expandedText?: string;
   /** Link text applied to expandable toggle when collapsed */
   collapsedText?: string;
+  /** Custom actions added to header of code block, after any default actions such as the "copy" action.  */
+  customActions?: React.ReactNode;
+  /** Sets background colors to be appropriate on primary chatbot background */
+  isPrimary?: boolean;
 }
 
 const DEFAULT_EXPANDED_TEXT = 'Show less';
@@ -51,6 +55,8 @@ const CodeBlockMessage = ({
   expandableSectionToggleProps,
   expandedText = DEFAULT_EXPANDED_TEXT,
   collapsedText = DEFAULT_COLLAPSED_TEXT,
+  customActions,
+  isPrimary,
   ...props
 }: CodeBlockMessageProps) => {
   const [copied, setCopied] = useState(false);
@@ -105,7 +111,7 @@ const CodeBlockMessage = ({
 
   if (!String(children).includes('\n')) {
     return (
-      <code {...props} className="pf-chatbot__message-inline-code">
+      <code {...props} className={`pf-chatbot__message-inline-code ${isPrimary ? 'pf-m-primary' : ''}`}>
         {children}
       </code>
     );
@@ -114,7 +120,7 @@ const CodeBlockMessage = ({
   // Setup code block header
   const actions = (
     <>
-      <CodeBlockAction>
+      <CodeBlockAction className="pf-chatbot__message-code-block-default-action">
         {language && <div className="pf-chatbot__message-code-block-language">{language}</div>}
         <Button
           ref={buttonRef}
@@ -127,6 +133,7 @@ const CodeBlockMessage = ({
         </Button>
         <Tooltip id={tooltipID} content="Copy" position="top" triggerRef={buttonRef} />
       </CodeBlockAction>
+      {customActions}
     </>
   );
 

package/src/Message/Message.scss

@@ -5,7 +5,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--pf-t--global--spacer--lg);
-  padding-bottom: var(--pf-t--global--spacer--xl);
+  padding-bottom: var(--pf-t--global--spacer--lg);
 
   // Avatar
   // --------------------------------------------------------------------------
@@ -156,8 +156,8 @@
 // ============================================================================
 .pf-chatbot.pf-m-compact {
   .pf-chatbot__message {
-    gap: var(--pf-t--global--spacer--md);
-    padding-bottom: var(--pf-t--global--spacer--sm);
+    gap: var(--pf-t--global--spacer--sm);
+    padding-bottom: var(--pf-t--global--spacer--md);
 
     .pf-chatbot__message-contents  {
       gap: var(--pf-t--global--spacer--xs);

package/src/Message/Message.test.tsx

@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quickstart';
 import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image';
 import rehypeExternalLinks from '../__mocks__/rehype-external-links';
-import { AlertActionLink } from '@patternfly/react-core';
+import { AlertActionLink, Button, CodeBlockAction } from '@patternfly/react-core';
 import { DeepThinkingProps } from '../DeepThinking';
 
 const ALL_ACTIONS = [
@@ -228,6 +228,10 @@ describe('Message', () => {
     render(<Message avatar="./testImg" role="bot" name="Bot" content="Hi" />);
     expect(screen.getByRole('img')).toHaveAttribute('src', './testImg');
   });
+  it('should not render avatar if no avatar prop is passed', () => {
+    render(<Message role="bot" name="Bot" content="Hi" />);
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
   it('should render botWord correctly', () => {
     render(<Message avatar="./img" role="bot" name="Bot" content="Hi" botWord="人工知能" />);
     expect(screen.getByText('Bot')).toBeTruthy();
@@ -612,6 +616,24 @@ describe('Message', () => {
     );
     expect(screen.getByRole('button', { name: 'test' })).toBeTruthy();
   });
+  it('should be able to add custom actions to CodeMessage', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={CODE_MESSAGE}
+        codeBlockProps={{
+          customActions: (
+            <CodeBlockAction>
+              <Button>New custom action</Button>
+            </CodeBlockAction>
+          )
+        }}
+      />
+    );
+    expect(screen.getByRole('button', { name: /New custom action/i })).toBeTruthy();
+  });
   it('should handle hasRoundAvatar correctly when it is true', () => {
     render(<Message avatar="./img" role="user" name="User" content="Hi" hasRoundAvatar />);
     expect(screen.getByRole('img')).toBeTruthy();
@@ -1075,4 +1097,41 @@ describe('Message', () => {
     expect(screen.getByText('Thought for 3 seconds')).toBeTruthy();
     expect(screen.getByText("Here's why I said this.")).toBeTruthy();
   });
+  it('should handle isPrimary correctly for inline code when it is true', () => {
+    const { container } = render(<Message avatar="./img" role="user" name="User" content={INLINE_CODE} isPrimary />);
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
+  it('should handle isPrimary correctly for inline code when it is false', () => {
+    const { container } = render(<Message avatar="./img" role="user" name="User" content={INLINE_CODE} />);
+    expect(container.querySelector('.pf-m-primary')).toBeFalsy();
+  });
+  it('should handle isPrimary correctly for table when it is true', () => {
+    const { container } = render(<Message avatar="./img" role="user" name="User" content={TABLE} isPrimary />);
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
+  it('should handle isPrimary correctly for table when it is false', () => {
+    const { container } = render(<Message avatar="./img" role="user" name="User" content={TABLE} />);
+    expect(container.querySelector('.pf-m-primary')).toBeFalsy();
+  });
+  it('should handle isPrimary correctly for loading when it is true', () => {
+    const { container } = render(<Message avatar="./img" role="user" name="User" content="" isPrimary isLoading />);
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
+  it('should handle isPrimary correctly for loading when it is false', () => {
+    const { container } = render(<Message avatar="./img" role="user" name="User" content="" isLoading />);
+
+    expect(container.querySelector('.pf-m-primary')).toBeFalsy();
+  });
+  it('should handle isPrimary correctly for attachments when it is true', () => {
+    const { container } = render(
+      <Message avatar="./img" role="user" name="User" content="" isPrimary attachments={[{ name: 'testAttachment' }]} />
+    );
+    expect(container.querySelector('.pf-m-outline')).toBeTruthy();
+  });
+  it('should handle isPrimary correctly for attachments when it is false', () => {
+    const { container } = render(
+      <Message avatar="./img" role="user" name="User" content="" attachments={[{ name: 'testAttachment' }]} />
+    );
+    expect(container.querySelector('.pf-m-outline')).toBeFalsy();
+  });
 });

package/src/Message/Message.tsx

@@ -11,8 +11,6 @@ import {
   AvatarProps,
   ButtonProps,
   ContentVariants,
-  ExpandableSectionProps,
-  ExpandableSectionToggleProps,
   FormProps,
   Label,
   LabelGroupProps,
@@ -20,7 +18,7 @@ import {
   Truncate
 } from '@patternfly/react-core';
 import MessageLoading from './MessageLoading';
-import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
+import CodeBlockMessage, { CodeBlockMessageProps } from './CodeBlockMessage/CodeBlockMessage';
 import TextMessage from './TextMessage/TextMessage';
 import FileDetailsLabel from '../FileDetailsLabel/FileDetailsLabel';
 import ResponseActions, { ActionProps } from '../ResponseActions/ResponseActions';
@@ -44,6 +42,9 @@ import ImageMessage from './ImageMessage/ImageMessage';
 import rehypeUnwrapImages from 'rehype-unwrap-images';
 import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSanitize from 'rehype-sanitize';
+import rehypeHighlight from 'rehype-highlight';
+// see the full list of styles here: https://highlightjs.org/examples
+import 'highlight.js/styles/vs2015.css';
 import { PluggableList } from 'unified';
 import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
@@ -96,7 +97,7 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   /** Name of the user */
   name?: string;
   /** Avatar src for the user */
-  avatar: string;
+  avatar?: string;
   /** Timestamp for the message */
   timestamp?: string;
   /** Set this to true if message is being loaded */
@@ -114,24 +115,7 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   /** Label for the English "Loading message," displayed to screenreaders when loading a message */
   loadingWord?: string;
   /** Props for code blocks */
-  codeBlockProps?: {
-    /** Aria label applied to code blocks */
-    'aria-label'?: string;
-    /** Class name applied to code blocks */
-    className?: string;
-    /** Whether code blocks are expandable */
-    isExpandable?: boolean;
-    /** Length of text initially shown in expandable code blocks; defaults to 10 characters */
-    maxLength?: number;
-    /** Additional props passed to expandable section if isExpandable is applied */
-    expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
-    /** Additional props passed to expandable toggle if isExpandable is applied */
-    expandableSectionToggleProps?: ExpandableSectionToggleProps;
-    /** Link text applied to expandable toggle when expanded */
-    expandedText?: string;
-    /** Link text applied to expandable toggle when collapsed */
-    collapsedText?: string;
-  };
+  codeBlockProps?: CodeBlockMessageProps;
   /** Props for quick responses */
   quickResponses?: QuickResponse[];
   /** Props for quick responses container */
@@ -205,6 +189,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   toolCall?: ToolCallProps;
   /** Whether user messages default to stripping out images in markdown */
   hasNoImagesInUserMessages?: boolean;
+  /** Sets background colors to be appropriate on primary chatbot background */
+  isPrimary?: boolean;
 }
 
 export const MessageBase: FunctionComponent<MessageProps> = ({
@@ -252,6 +238,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   remarkGfmProps,
   toolCall,
   hasNoImagesInUserMessages = true,
+  isPrimary,
   ...props
 }: MessageProps) => {
   const [messageText, setMessageText] = useState(content);
@@ -261,7 +248,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   }, [content]);
 
   const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-  let rehypePlugins: PluggableList = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs];
+  let rehypePlugins: PluggableList = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs, rehypeHighlight];
   if (openLinkInNewTab) {
     rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
   }
@@ -302,13 +289,13 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
           p: (props) => {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const { node, ...rest } = props;
-            return <TextMessage component={ContentVariants.p} {...rest} />;
+            return <TextMessage component={ContentVariants.p} {...rest} isPrimary={isPrimary} />;
           },
           code: ({ children, ...props }) => {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const { node, ...codeProps } = props;
             return (
-              <CodeBlockMessage {...codeProps} {...codeBlockProps}>
+              <CodeBlockMessage {...codeProps} {...codeBlockProps} isPrimary={isPrimary}>
                 {children}
               </CodeBlockMessage>
             );
@@ -364,7 +351,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
             return <ListItemMessage {...rest} />;
           },
           // table requires node attribute for calculating headers for mobile breakpoint
-          table: (props) => <TableMessage {...props} {...tableProps} />,
+          table: (props) => <TableMessage {...props} {...tableProps} isPrimary={isPrimary} />,
           tbody: (props) => {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const { node, ...rest } = props;
@@ -432,7 +419,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
 
   const renderMessage = () => {
     if (isLoading) {
-      return <MessageLoading loadingWord={loadingWord} />;
+      return <MessageLoading loadingWord={loadingWord} isPrimary={isPrimary} />;
     }
     if (isEditable) {
       return (
@@ -472,12 +459,14 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
       {...props}
     >
       {/* We are using an empty alt tag intentionally in order to reduce noise on screen readers */}
-      <Avatar
-        className={`pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`}
-        src={avatar}
-        alt=""
-        {...avatarProps}
-      />
+      {avatar && (
+        <Avatar
+          className={`pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`}
+          src={avatar}
+          alt=""
+          {...avatarProps}
+        />
+      )}
       <div className="pf-chatbot__message-contents">
         <div className="pf-chatbot__message-meta">
           {name && (
@@ -538,6 +527,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
                     closeButtonAriaLabel={attachment.closeButtonAriaLabel}
                     languageTestId={attachment.languageTestId}
                     spinnerTestId={attachment.spinnerTestId}
+                    variant={isPrimary ? 'outline' : undefined}
                   />
                 </div>
               ))}

package/src/Message/MessageLoading.scss

@@ -6,6 +6,9 @@
   padding: var(--pf-t--global--spacer--sm);
   background-color: var(--pf-t--global--background--color--tertiary--default);
   border-radius: var(--pf-t--global--border--radius--small);
+  // for high contrast support
+  border: var(--pf-t--global--border--width--high-contrast--regular) solid
+    var(--pf-t--global--border--color--high-contrast);
 
   &-dots {
     position: relative;
@@ -50,4 +53,8 @@
       background-color: rgba(41, 41, 41, 0.25);
     }
   }
+
+  &.pf-m-primary {
+    background-color: var(--pf-t--global--background--color--secondary--default);
+  }
 }

package/src/Message/MessageLoading.tsx

@@ -2,8 +2,8 @@
 // Chatbot Main - Message - Processing
 // ============================================================================
 
-const MessageLoading = ({ loadingWord }) => (
-  <div className="pf-chatbot__message-loading">
+const MessageLoading = ({ loadingWord, isPrimary }) => (
+  <div className={`pf-chatbot__message-loading ${isPrimary ? 'pf-m-primary' : ''}`}>
     <span className="pf-chatbot__message-loading-dots">
       <span className="pf-v6-screen-reader">{loadingWord}</span>
     </span>

package/src/Message/TableMessage/TableMessage.scss

@@ -8,6 +8,10 @@
     border-block-start: 0;
   }
 
+  &.pf-m-primary {
+    --pf-v6-c-table--BackgroundColor: var(--pf-t--global--background--color--secondary--default) !important;
+  }
+
   tbody {
     border-radius: var(--pf-t--global--border--radius--small);
   }