@patternfly/chatbot 6.5.0-prerelease.2 → 6.5.0-prerelease.20

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

@@ -1,5 +1,5 @@
 import type { Ref, FunctionComponent } from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
@@ -30,21 +30,43 @@ const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
   tooltipContent = 'Chat history menu',
   isCompact,
   ...props
-}: ChatbotHeaderMenuProps) => (
-  <div className={`pf-chatbot__menu ${className}`}>
-    <Tooltip
-      content={tooltipContent}
-      position="bottom"
-      // prevents VO announcements of both aria label and tooltip
-      aria="none"
-      {...tooltipProps}
-    >
+}: ChatbotHeaderMenuProps) => {
+  const [isDrawerAnimating, setIsDrawerAnimating] = useState(false);
+  // I'd like to use a prop here later if this works
+  const drawerState = props['aria-expanded'];
+  const isDrawerOpen = drawerState === true;
+  const prevDrawerStateRef = useRef<boolean | undefined>(isDrawerOpen);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    if (drawerState !== undefined) {
+      const wasDrawerOpen = prevDrawerStateRef.current === true;
+      const isDrawerClosing = wasDrawerOpen && !isDrawerOpen;
+
+      setIsDrawerAnimating(true);
+      const timeout = setTimeout(() => {
+        setIsDrawerAnimating(false);
+
+        if (isDrawerClosing) {
+          requestAnimationFrame(() => {
+            buttonRef.current?.focus();
+          });
+        }
+      }, 350);
+
+      prevDrawerStateRef.current = isDrawerOpen;
+      return () => clearTimeout(timeout);
+    }
+  }, [drawerState, isDrawerOpen]);
+
+  const button = useMemo(
+    () => (
       <Button
         className={`pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`}
         variant="plain"
         onClick={onMenuToggle}
         aria-label={menuAriaLabel}
-        ref={innerRef}
+        ref={innerRef ?? buttonRef}
         icon={
           <Icon size={isCompact ? 'lg' : 'xl'} isInline>
             <BarsIcon />
@@ -53,9 +75,29 @@ const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
         size={isCompact ? 'sm' : undefined}
         {...props}
       />
-    </Tooltip>
-  </div>
-);
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isCompact, menuAriaLabel, onMenuToggle, innerRef, buttonRef]
+  );
+
+  return (
+    <div className={`pf-chatbot__menu ${className}`}>
+      {isDrawerAnimating ? (
+        button
+      ) : (
+        <Tooltip
+          content={tooltipContent}
+          position="bottom"
+          // prevents VO announcements of both aria label and tooltip
+          aria="none"
+          {...tooltipProps}
+        >
+          {button}
+        </Tooltip>
+      )}
+    </div>
+  );
+};
 
 export const ChatbotHeaderMenu = forwardRef((props: ChatbotHeaderMenuProps, ref: Ref<HTMLButtonElement>) => (
   <ChatbotHeaderMenuBase innerRef={ref} {...props} />

package/src/ChatbotModal/ChatbotModal.scss

@@ -18,7 +18,10 @@
   .pf-v6-c-modal-box__footer {
     padding-block-start: var(--pf-t--global--spacer--xl);
     padding-block-end: var(--pf-t--global--spacer--xl);
+    border-top: var(--pf-t--global--border--width--high-contrast--regular) solid
+      var(--pf-t--global--border--color--high-contrast);
   }
+
   .pf-v6-c-modal-box__header {
     padding-block-end: var(--pf-t--global--spacer--sm);
   }

package/src/CodeModal/CodeModal.tsx

@@ -5,16 +5,17 @@
 import type { FunctionComponent, MouseEvent } from 'react';
 import { useState, useEffect, useRef } from 'react';
 import path from 'path-browserify';
-import type monaco from 'monaco-editor';
 
 // Import PatternFly components
 import { CodeEditor } from '@patternfly/react-code-editor';
 import {
+  Bullseye,
   Button,
   getResizeObserver,
   ModalBody,
   ModalFooter,
   ModalHeader,
+  Spinner,
   Stack,
   StackItem
 } from '@patternfly/react-core';
@@ -22,6 +23,17 @@ import FileDetails, { extensionToLanguage } from '../FileDetails';
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal from '../ChatbotModal/ChatbotModal';
 
+// Try to lazy load - some consumers need to be below a certain bundle size, but can't use the CDN and don't have webpack
+let monacoInstance: typeof import('monaco-editor') | null = null;
+const loadMonaco = async () => {
+  if (!monacoInstance) {
+    const [monaco, { loader }] = await Promise.all([import('monaco-editor'), import('@monaco-editor/react')]);
+    monacoInstance = monaco;
+    loader.config({ monaco });
+  }
+  return monacoInstance;
+};
+
 export interface CodeModalProps {
   /** Class applied to code editor */
   codeEditorControlClassName?: string;
@@ -59,6 +71,8 @@ export interface CodeModalProps {
   modalBodyClassName?: string;
   /** Class applied to modal footer */
   modalFooterClassName?: string;
+  /** Aria label applied to spinner when loading Monaco */
+  spinnerAriaLabel?: string;
 }
 
 export const CodeModal: FunctionComponent<CodeModalProps> = ({
@@ -80,13 +94,32 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
   modalHeaderClassName,
   modalBodyClassName,
   modalFooterClassName,
+  spinnerAriaLabel = 'Loading',
   ...props
 }: CodeModalProps) => {
   const [newCode, setNewCode] = useState(code);
-  const [editorInstance, setEditorInstance] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const [editorInstance, setEditorInstance] = useState<any>(null);
   const [isEditorReady, setIsEditorReady] = useState(false);
+  const [isMonacoLoading, setIsMonacoLoading] = useState(false);
+  const [isMonacoLoaded, setIsMonacoLoaded] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (isModalOpen && !isMonacoLoaded && !isMonacoLoading) {
+      setIsMonacoLoading(true);
+      loadMonaco()
+        .then(() => {
+          setIsMonacoLoaded(true);
+          setIsMonacoLoading(false);
+        })
+        .catch((error) => {
+          // eslint-disable-next-line no-console
+          console.error('Failed to load Monaco editor:', error);
+          setIsMonacoLoading(false);
+        });
+    }
+  }, [isModalOpen, isMonacoLoaded, isMonacoLoading]);
+
   useEffect(() => {
     if (!isModalOpen || !isEditorReady || !editorInstance || !containerRef.current) {
       return;
@@ -144,6 +177,42 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
     }
   };
 
+  const renderMonacoEditor = () => {
+    if (isMonacoLoading) {
+      return (
+        <Bullseye>
+          <Spinner aria-label={spinnerAriaLabel} />
+        </Bullseye>
+      );
+    }
+    if (isMonacoLoaded) {
+      return (
+        <CodeEditor
+          isDarkTheme
+          isLineNumbersVisible={isLineNumbersVisible}
+          isLanguageLabelVisible
+          isCopyEnabled={isCopyEnabled}
+          isReadOnly={isReadOnly}
+          code={newCode}
+          language={extensionToLanguage[path.extname(fileName).slice(1)]}
+          onEditorDidMount={onEditorDidMount}
+          onCodeChange={onCodeChange}
+          className={codeEditorClassName}
+          isFullHeight
+          options={{
+            glyphMargin: false,
+            folding: false,
+            // prevents Monaco from handling resizing itself
+            // was causing ResizeObserver issues
+            automaticLayout: false
+          }}
+          {...props}
+        />
+      );
+    }
+    return null;
+  };
+
   const modal = (
     <ChatbotModal
       isOpen={isModalOpen}
@@ -162,27 +231,7 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
             <FileDetails fileName={fileName} />
           </StackItem>
           <div className="pf-v6-l-stack__item pf-chatbot__code-modal-editor" ref={containerRef}>
-            <CodeEditor
-              isDarkTheme
-              isLineNumbersVisible={isLineNumbersVisible}
-              isLanguageLabelVisible
-              isCopyEnabled={isCopyEnabled}
-              isReadOnly={isReadOnly}
-              code={newCode}
-              language={extensionToLanguage[path.extname(fileName).slice(1)]}
-              onEditorDidMount={onEditorDidMount}
-              onCodeChange={onCodeChange}
-              className={codeEditorClassName}
-              isFullHeight
-              options={{
-                glyphMargin: false,
-                folding: false,
-                // prevents Monaco from handling resizing itself
-                // was causing ResizeObserver issues
-                automaticLayout: false
-              }}
-              {...props}
-            />
+            {renderMonacoEditor()}
           </div>
         </Stack>
       </ModalBody>

package/src/DeepThinking/DeepThinking.scss

@@ -1,5 +1,5 @@
 .pf-chatbot__deep-thinking {
-  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
   overflow: unset;
 }
 

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

@@ -79,8 +79,20 @@
 
 .pf-chatbot__message-inline-code {
   --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);
+  border: var(--pf-t--global--border--width--high-contrast--regular) solid
+    var(--pf-t--global--border--color--high-contrast);
+  border-radius: var(--pf-t--global--border--radius--small);
+  padding-block-start: var(--pf-t--global--spacer--xs);
+  padding-block-end: var(--pf-t--global--spacer--xs);
+  padding-inline-start: var(--pf-t--global--spacer--xs);
+  padding-inline-end: var(--pf-t--global--spacer--xs);
+
+  &.pf-m-primary {
+    background-color: var(--pf-t--global--background--color--secondary--default);
+  }
 }
 
 .pf-chatbot__message-code-toggle {

package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -39,6 +39,8 @@ export interface CodeBlockMessageProps {
   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';
@@ -54,6 +56,7 @@ const CodeBlockMessage = ({
   expandedText = DEFAULT_EXPANDED_TEXT,
   collapsedText = DEFAULT_COLLAPSED_TEXT,
   customActions,
+  isPrimary,
   ...props
 }: CodeBlockMessageProps) => {
   const [copied, setCopied] = useState(false);
@@ -108,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>
     );

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
   // --------------------------------------------------------------------------
@@ -18,8 +18,10 @@
   }
 
   &-avatar.pf-chatbot__message-avatar--round.pf-v6-c-avatar {
-    --pf-v6-c-avatar--Width: 3rem;
-    --pf-v6-c-avatar--Height: 3rem;
+    &:not(.pf-m-xl, .pf-m-lg, .pf-m-md, .pf-m-sm) {
+      --pf-v6-c-avatar--Width: 3rem;
+      --pf-v6-c-avatar--Height: 3rem;
+    }
     --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
   }
 
@@ -156,8 +158,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);
@@ -169,8 +171,10 @@
   }
 
   .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;
+    &:not(.pf-m-xl, .pf-m-lg, .pf-m-md, .pf-m-sm) {
+      --pf-v6-c-avatar--Width: 1.5rem;
+      --pf-v6-c-avatar--Height: 1.5rem;
+    }
   }
 
   .pf-chatbot__message-contents {

package/src/Message/Message.test.tsx

@@ -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();
@@ -1093,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

@@ -42,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';
@@ -94,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 */
@@ -105,6 +108,9 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   actions?: {
     [key: string]: ActionProps;
   };
+  /** When true, the selected action will persist even when clicking outside the component.
+   * When false (default), clicking outside or clicking another action will deselect the current selection. */
+  persistActionSelection?: boolean;
   /** Sources for message */
   sources?: SourcesCardProps;
   /** Label for the English word "AI," used to tag messages with role "bot" */
@@ -186,6 +192,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> = ({
@@ -197,6 +205,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   timestamp,
   isLoading,
   actions,
+  persistActionSelection,
   sources,
   botWord = 'AI',
   loadingWord = 'Loading message',
@@ -233,6 +242,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   remarkGfmProps,
   toolCall,
   hasNoImagesInUserMessages = true,
+  isPrimary,
   ...props
 }: MessageProps) => {
   const [messageText, setMessageText] = useState(content);
@@ -242,7 +252,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]]);
   }
@@ -283,13 +293,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>
             );
@@ -345,7 +355,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;
@@ -413,7 +423,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
 
   const renderMessage = () => {
     if (isLoading) {
-      return <MessageLoading loadingWord={loadingWord} />;
+      return <MessageLoading loadingWord={loadingWord} isPrimary={isPrimary} />;
     }
     if (isEditable) {
       return (
@@ -453,12 +463,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 && (
@@ -493,7 +505,9 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
                 isCompact={isCompact}
               />
             )}
-            {!isLoading && !isEditable && actions && <ResponseActions actions={actions} />}
+            {!isLoading && !isEditable && actions && (
+              <ResponseActions actions={actions} persistActionSelection={persistActionSelection} />
+            )}
             {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} isCompact={isCompact} />}
             {userFeedbackComplete && (
               <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} isCompact={isCompact} />
@@ -519,6 +533,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);
+  }
 }