@patternfly/chatbot 6.5.0-prerelease.3 → 6.5.0-prerelease.5

package/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>
               ))}

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

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

package/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)}

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

package/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>

package/src/MessageBar/MessageBar.scss

@@ -26,6 +26,10 @@
 
   overflow: hidden;
 
+  &.pf-m-primary {
+    box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
+  }
+
   &:hover {
     box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
   }

package/src/MessageBar/MessageBar.test.tsx

@@ -1,5 +1,11 @@
 import '@testing-library/jest-dom';
-import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
+import {
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  MenuSearchInputProps,
+  MenuSearchProps
+} from '@patternfly/react-core';
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -218,6 +224,57 @@ describe('Message bar', () => {
     await userEvent.click(attachButton);
     expect(attachToggleClickSpy).toHaveBeenCalledTimes(1);
   });
+  it('can pass searchInputProps to search input in AttachMenu', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        value="test"
+        attachMenuProps={{
+          isAttachMenuOpen: true,
+          setIsAttachMenuOpen: jest.fn(),
+          onAttachMenuToggleClick: jest.fn(),
+          onAttachMenuInputChange: jest.fn(),
+          attachMenuItems: ATTACH_MENU_ITEMS,
+          searchInputProps: { isDisabled: true }
+        }}
+      />
+    );
+    expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeDisabled();
+  });
+  it('can pass menuSearchProps to search input in AttachMenu', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        value="test"
+        attachMenuProps={{
+          isAttachMenuOpen: true,
+          setIsAttachMenuOpen: jest.fn(),
+          onAttachMenuToggleClick: jest.fn(),
+          onAttachMenuInputChange: jest.fn(),
+          attachMenuItems: ATTACH_MENU_ITEMS,
+          menuSearchProps: { 'data-testid': 'menu-search' } as MenuSearchProps
+        }}
+      />
+    );
+    expect(screen.getByTestId('menu-search')).toBeTruthy();
+  });
+  it('can pass menuSearchInputProps to search input in AttachMenu', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        value="test"
+        attachMenuProps={{
+          isAttachMenuOpen: true,
+          setIsAttachMenuOpen: jest.fn(),
+          onAttachMenuToggleClick: jest.fn(),
+          onAttachMenuInputChange: jest.fn(),
+          attachMenuItems: ATTACH_MENU_ITEMS,
+          menuSearchInputProps: { 'data-testid': 'menu-search-input' } as MenuSearchInputProps
+        }}
+      />
+    );
+    expect(screen.getByTestId('menu-search-input')).toBeTruthy();
+  });
   it('can hide attach button', () => {
     render(<MessageBar onSendMessage={jest.fn} hasAttachButton={false} />);
     expect(screen.queryByRole('button', { name: 'Attach' })).toBeFalsy();
@@ -387,4 +444,8 @@ describe('Message bar', () => {
     ref.current?.focus();
     expect(document.activeElement).toBe(screen.getByRole('textbox'));
   });
+  it('should handle isPrimary', () => {
+    const { container } = render(<MessageBar isPrimary onSendMessage={jest.fn} />);
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
 });

package/src/MessageBar/MessageBar.tsx

@@ -1,7 +1,15 @@
 import type { ChangeEvent, FunctionComponent, KeyboardEvent as ReactKeyboardEvent, Ref } from 'react';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
-import { ButtonProps, TextArea, TextAreaProps, TooltipProps } from '@patternfly/react-core';
+import {
+  ButtonProps,
+  MenuSearchInputProps,
+  MenuSearchProps,
+  SearchInputProps,
+  TextArea,
+  TextAreaProps,
+  TooltipProps
+} from '@patternfly/react-core';
 
 // Import Chatbot components
 import SendButton from './SendButton';
@@ -30,6 +38,12 @@ export interface MessageBarWithAttachMenuProps {
   onAttachMenuOnOpenChangeKeys?: string[];
   /** Callback to change the open state of the menu. Triggered by clicking outside of the menu. */
   onAttachMenuOpenChange?: (isOpen: boolean) => void;
+  /** Additional props passed to MenuSearch component in attach menu */
+  menuSearchProps?: Omit<MenuSearchProps, 'ref'>;
+  /** Additional props passed to MenuSearchInput component in attach menu */
+  menuSearchInputProps?: Omit<MenuSearchInputProps, 'ref'>;
+  /** Additional props passed to SearchInput component in attach menu */
+  searchInputProps?: SearchInputProps;
 }
 
 export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
@@ -104,6 +118,8 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   isCompact?: boolean;
   /** Ref applied to message bar textarea, for use with focus or other custom behaviors  */
   innerRef?: React.Ref<HTMLTextAreaElement>;
+  /** Sets background color to primary */
+  isPrimary?: boolean;
 }
 
 export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
@@ -134,6 +150,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   validator,
   dropzoneProps,
   innerRef,
+  isPrimary,
   ...props
 }: MessageBarProps) => {
   // Text Input
@@ -449,11 +466,16 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
         {...(attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange })}
         popperProps={{ direction: 'up', distance: 8 }}
         searchInputPlaceholder={attachMenuProps?.attachMenuInputPlaceholder}
+        {...attachMenuProps}
       />
     );
   }
 
-  return <div className={`pf-chatbot__message-bar ${className ?? ''}`}>{messageBarContents}</div>;
+  return (
+    <div className={`pf-chatbot__message-bar ${isPrimary ? 'pf-m-primary' : ''} ${className ?? ''}`}>
+      {messageBarContents}
+    </div>
+  );
 };
 
 const MessageBar = forwardRef((props: MessageBarProps, ref: Ref<HTMLTextAreaElement>) => (