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

package/src/MessageBar/AttachButton.tsx

@@ -51,6 +51,8 @@ export interface AttachButtonProps extends ButtonProps {
   validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
   /** Additional props passed to react-dropzone */
   dropzoneProps?: DropzoneOptions;
+  /** Icon displayed in attach button */
+  icon?: React.ReactNode;
 }
 
 const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
@@ -72,6 +74,7 @@ const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
   onAttachRejected,
   validator,
   dropzoneProps,
+  icon = <PaperclipIcon />,
   ...props
 }: AttachButtonProps) => {
   const { open, getInputProps } = useDropzone({
@@ -113,7 +116,7 @@ const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
           onClick={onClick ?? open}
           icon={
             <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
-              <PaperclipIcon />
+              {icon}
             </Icon>
           }
           size={isCompact ? 'sm' : undefined}

package/src/MessageBar/MessageBar.scss

@@ -26,12 +26,18 @@
 
   overflow: hidden;
 
-  &:hover {
-    box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
-  }
+  &:not(.pf-v6-m-thinking) {
+    &.pf-m-primary {
+      box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
+    }
 
-  &:focus-within {
-    box-shadow: inset 0 0 0 2px var(--pf-t--global--color--brand--default);
+    &:hover {
+      box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
+    }
+
+    &:focus-within {
+      box-shadow: inset 0 0 0 2px var(--pf-t--global--color--brand--default);
+    }
   }
 
   &-actions {

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,71 @@ 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 remove input from attach menu', async () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        attachMenuProps={{
+          isAttachMenuOpen: true,
+          setIsAttachMenuOpen: jest.fn(),
+          onAttachMenuToggleClick: jest.fn(),
+          attachMenuItems: ATTACH_MENU_ITEMS
+        }}
+      />
+    );
+    expect(screen.queryByRole('textbox', { name: /Filter menu items/i })).not.toBeInTheDocument();
+  });
   it('can hide attach button', () => {
     render(<MessageBar onSendMessage={jest.fn} hasAttachButton={false} />);
     expect(screen.queryByRole('button', { name: 'Attach' })).toBeFalsy();
@@ -268,6 +339,20 @@ describe('Message bar', () => {
     );
     await userEvent.click(screen.getByRole('button', { name: 'Test' }));
   });
+  it('can change attach button icon', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        hasAttachButton
+        buttonProps={{
+          attach: {
+            icon: <img alt="" src="" />
+          }
+        }}
+      />
+    );
+    expect(screen.getByRole('img')).toBeVisible();
+  });
 
   // Stop button
   // --------------------------------------------------------------------------
@@ -387,4 +472,20 @@ 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();
+  });
+
+  it('Renders with class pf-v6-m-ai-indicator when hasAiIndicator is true', () => {
+    render(<MessageBar onSendMessage={jest.fn} hasAiIndicator />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-ai-indicator');
+  });
+
+  it('Renders with class pf-v6-m-thinking when isThinking is true', () => {
+    render(<MessageBar onSendMessage={jest.fn} isThinking />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-thinking');
+  });
 });

package/src/MessageBar/MessageBar.tsx

@@ -1,12 +1,21 @@
 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 { css } from '@patternfly/react-styles';
 
 // Import Chatbot components
 import SendButton from './SendButton';
 import MicrophoneButton from './MicrophoneButton';
-import { AttachButton } from './AttachButton';
+import { AttachButton, AttachButtonProps } from './AttachButton';
 import AttachMenu from '../AttachMenu';
 import StopButton from './StopButton';
 import { ChatbotDisplayMode } from '../Chatbot';
@@ -21,7 +30,7 @@ export interface MessageBarWithAttachMenuProps {
   /** A callback for when the attachment menu toggle is clicked */
   onAttachMenuToggleClick: () => void;
   /** A callback for when the input value in the menu changes. */
-  onAttachMenuInputChange: (value: string) => void;
+  onAttachMenuInputChange?: (value: string) => void;
   /** Function callback called when user selects item in menu. */
   onAttachMenuSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void;
   /** Placeholder for search input */
@@ -30,6 +39,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'> {
@@ -81,12 +96,7 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   isSendButtonDisabled?: boolean;
   /** Prop to allow passage of additional props to buttons */
   buttonProps?: {
-    attach?: {
-      tooltipContent?: string;
-      props?: ButtonProps;
-      inputTestId?: string;
-      tooltipProps?: Omit<TooltipProps, 'content'>;
-    };
+    attach?: AttachButtonProps & { props?: ButtonProps };
     stop?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit<TooltipProps, 'content'> };
     send?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit<TooltipProps, 'content'> };
     microphone?: {
@@ -104,6 +114,12 @@ 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;
+  /** @beta Flag indicating whether the message bar has an AI indicator border. */
+  hasAiIndicator?: boolean;
+  /** @beta Flag indicating whether the chatbot is thinking in response to a query, adding an animation to the message bar. */
+  isThinking?: boolean;
 }
 
 export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
@@ -134,6 +150,9 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   validator,
   dropzoneProps,
   innerRef,
+  isPrimary,
+  hasAiIndicator,
+  isThinking,
   ...props
 }: MessageBarProps) => {
   // Text Input
@@ -359,7 +378,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
             onAttachRejected={onAttachRejected}
             validator={validator}
             dropzoneProps={dropzoneProps}
-            {...buttonProps?.attach?.props}
+            {...buttonProps?.attach}
           />
         )}
         {!attachMenuProps && hasAttachButton && (
@@ -379,6 +398,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
             onAttachRejected={onAttachRejected}
             validator={validator}
             dropzoneProps={dropzoneProps}
+            {...buttonProps?.attach}
             {...buttonProps?.attach?.props}
           />
         )}
@@ -449,11 +469,24 @@ 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={css(
+        'pf-chatbot__message-bar',
+        isPrimary && 'pf-m-primary',
+        hasAiIndicator && 'pf-v6-m-ai-indicator',
+        isThinking && 'pf-v6-m-thinking',
+        className
+      )}
+    >
+      {messageBarContents}
+    </div>
+  );
 };
 
 const MessageBar = forwardRef((props: MessageBarProps, ref: Ref<HTMLTextAreaElement>) => (

package/src/__mocks__/monaco-editor.ts

@@ -0,0 +1,19 @@
+const mockEditor = {
+  layout: jest.fn(),
+  focus: jest.fn(),
+  dispose: jest.fn(),
+  getModel: jest.fn(),
+  updateOptions: jest.fn()
+};
+
+const mockModel = {
+  updateOptions: jest.fn(),
+  dispose: jest.fn()
+};
+
+module.exports = {
+  editor: {
+    create: jest.fn(() => mockEditor),
+    getModels: jest.fn(() => [mockModel])
+  }
+};

package/src/__mocks__/rehype-highlight.ts

@@ -0,0 +1,3 @@
+const rehypeHighlight = () => (tree) => tree;
+
+export default rehypeHighlight;