feat(Message): Add components that behave well on white background (#691)

rebeccaalpert · web-flow · commit 57dc7b0f1377 · 2025-10-20T17:03:35.000-04:00
Added styles so components behave well on primary ChatBot background color (white). The specific components are the attachment label, table, loading indicator, and inline code block.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/WhiteEmbeddedChatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/WhiteEmbeddedChatbot.tsx
@@ -97,6 +97,14 @@ const MessageLoading = () => (
 export default MessageLoading;
 
 ~~~
+
+Here is a table:
+
+ | Version | GA date | User role 
+ |-|-|-|
+ | 2.5 | September 30, 2024 | Administrator |
+ | 2.5 | June 27, 2023 | Editor |
+ | 3.0 | April 1, 2025 | Administrator
 `;
 
 // It's important to set a date and timestamp prop since the Message components re-render.
@@ -111,7 +119,8 @@ const initialMessages: MessageProps[] = [
     name: 'User',
     avatar: userAvatar,
     timestamp: date.toLocaleString(),
-    avatarProps: { isBordered: true }
+    avatarProps: { isBordered: true },
+    isPrimary: true
   },
   {
     id: '2',
@@ -131,7 +140,9 @@ const initialMessages: MessageProps[] = [
       download: { onClick: () => console.log('Download') },
       // eslint-disable-next-line no-console
       listen: { onClick: () => console.log('Listen') }
-    }
+    },
+    isPrimary: true,
+    attachments: [{ name: 'auth-operator.yml', id: '1' }]
   }
 ];
 
@@ -220,7 +231,8 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
       name: 'User',
       avatar: userAvatar,
       timestamp: date.toLocaleString(),
-      avatarProps: { isBordered: true }
+      avatarProps: { isBordered: true },
+      isPrimary: true
     });
     newMessages.push({
       id: generateId(),
@@ -229,7 +241,8 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
       name: 'Bot',
       avatar: patternflyAvatar,
       isLoading: true,
-      timestamp: date.toLocaleString()
+      timestamp: date.toLocaleString(),
+      isPrimary: true
     });
     setMessages(newMessages);
     // make announcement to assistive devices that new messages have been added
@@ -261,7 +274,8 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
           // eslint-disable-next-line no-console
           listen: { onClick: () => console.log('Listen') }
         },
-        timestamp: date.toLocaleString()
+        timestamp: date.toLocaleString(),
+        isPrimary: true
       });
       setMessages(loadedMessages);
       // make announcement to assistive devices that new message has loaded
diff --git a/packages/module/patternfly-docs/generated/patternfly-ai/chatbot/overview/demo/primary-color-background.png b/packages/module/patternfly-docs/generated/patternfly-ai/chatbot/overview/demo/primary-color-background.png
diff --git a/packages/module/src/FileDetailsLabel/FileDetailsLabel.tsx b/packages/module/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 */
diff --git a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.scss b/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.scss
@@ -81,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 {
diff --git a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx b/packages/module/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>
     );
diff --git a/packages/module/src/Message/Message.test.tsx b/packages/module/src/Message/Message.test.tsx
@@ -1093,4 +1093,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();
+  });
 });
diff --git a/packages/module/src/Message/Message.tsx b/packages/module/src/Message/Message.tsx
@@ -189,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> = ({
@@ -236,6 +238,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   remarkGfmProps,
   toolCall,
   hasNoImagesInUserMessages = true,
+  isPrimary,
   ...props
 }: MessageProps) => {
   const [messageText, setMessageText] = useState(content);
@@ -286,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>
             );
@@ -348,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;
@@ -416,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 (
@@ -522,6 +525,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
                     closeButtonAriaLabel={attachment.closeButtonAriaLabel}
                     languageTestId={attachment.languageTestId}
                     spinnerTestId={attachment.spinnerTestId}
+                    variant={isPrimary ? 'outline' : undefined}
                   />
                 </div>
               ))}
diff --git a/packages/module/src/Message/MessageLoading.scss b/packages/module/src/Message/MessageLoading.scss
@@ -50,4 +50,8 @@
       background-color: rgba(41, 41, 41, 0.25);
     }
   }
+
+  &.pf-m-primary {
+    background-color: var(--pf-t--global--background--color--secondary--default);
+  }
 }
diff --git a/packages/module/src/Message/MessageLoading.tsx b/packages/module/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>
diff --git a/packages/module/src/Message/TableMessage/TableMessage.scss b/packages/module/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);
   }
diff --git a/packages/module/src/Message/TableMessage/TableMessage.tsx b/packages/module/src/Message/TableMessage/TableMessage.tsx
@@ -19,7 +19,11 @@ export interface TableNode {
   type: string;
 }
 
-const TableMessage = ({ children, ...props }: Omit<TableProps, 'ref'> & ExtraProps) => {
+export interface TableMessageProps {
+  isPrimary?: boolean;
+}
+
+const TableMessage = ({ children, isPrimary, ...props }: Omit<TableProps, 'ref'> & ExtraProps & TableMessageProps) => {
   const { className, ...rest } = props;
 
   // This allows us to parse the nested data we get back from the 3rd party Markdown parser
@@ -72,7 +76,7 @@ const TableMessage = ({ children, ...props }: Omit<TableProps, 'ref'> & ExtraPro
     <Table
       aria-label={props['aria-label']}
       gridBreakPoint="grid"
-      className={`pf-chatbot__message-table ${className ? className : ''}`}
+      className={`pf-chatbot__message-table ${isPrimary ? 'pf-m-primary' : ''} ${className ? className : ''}`}
       {...rest}
     >
       {modifyChildren(children)}
diff --git a/packages/module/src/Message/TextMessage/TextMessage.scss b/packages/module/src/Message/TextMessage/TextMessage.scss
@@ -47,6 +47,12 @@
     white-space: nowrap;
     width: 1px;
   }
+
+  &.pf-m-primary {
+    code {
+      background-color: var(--pf-t--global--background--color--secondary--default);
+    }
+  }
 }
 
 // ============================================================================
diff --git a/packages/module/src/Message/TextMessage/TextMessage.tsx b/packages/module/src/Message/TextMessage/TextMessage.tsx
@@ -5,8 +5,17 @@
 import { ExtraProps } from 'react-markdown';
 import { Content, ContentProps } from '@patternfly/react-core';
 
-const TextMessage = ({ component, children, ...props }: Omit<ContentProps, 'ref'> & ExtraProps) => (
-  <span className="pf-chatbot__message-text">
+export interface TextMessageProps {
+  isPrimary?: boolean;
+}
+
+const TextMessage = ({
+  component,
+  children,
+  isPrimary,
+  ...props
+}: Omit<ContentProps, 'ref'> & ExtraProps & TextMessageProps) => (
+  <span className={`pf-chatbot__message-text ${isPrimary ? 'pf-m-primary' : ''}`}>
     <Content component={component} {...props}>
       {children}
     </Content>

Original file line number	Diff line number	Diff line change
`@@ -50,4 +50,8 @@`
`50`	`50`	`background-color: rgba(41, 41, 41, 0.25);`
`51`	`51`	`}`
`52`	`52`	`}`
	`53`	`+`
	`54`	`+ &.pf-m-primary {`
	`55`	`+ background-color: var(--pf-t--global--background--color--secondary--default);`
	`56`	`+ }`
`53`	`57`	`}`