@patternfly/chatbot 2.1.0-prerelease.17 → 2.1.0-prerelease.18

package/src/ChatbotToggle/ChatbotToggle.scss

@@ -6,13 +6,11 @@
   inset-block-end: var(--pf-t--global--spacer--md);
   inset-inline-end: var(--pf-t--global--spacer--md);
   background-color: var(--pf-t--global--background--color--inverse--default);
-  border-radius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-button__icon--Color: var(--pf-t--chatbot-toggle--color);
   padding: var(--pf-t--global--spacer--md);
-  width: 3rem;
-  height: 3rem;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     background-color: var(--pf-t--chatbot-toggle--background--hover);
   }
 
@@ -21,6 +19,14 @@
   }
 
   // Icon
-  svg { width: var(--pf-t--global--spacer--lg); height: var(--pf-t--global--spacer--lg); }
+  svg {
+    width: var(--pf-t--global--spacer--lg);
+    height: var(--pf-t--global--spacer--lg);
+  }
 }
 
+.pf-chatbot__button--round {
+  border-radius: var(--pf-t--global--border--radius--pill);
+  width: 3rem;
+  height: 3rem;
+}

package/src/ChatbotToggle/ChatbotToggle.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import ChatbotToggle from './ChatbotToggle';
+
+describe('ChatbotToggle', () => {
+  it('should render tooltipLabel correctly', async () => {
+    render(<ChatbotToggle tooltipLabel="Tooltip" />);
+    await userEvent.click(screen.getByRole('button', { name: /Tooltip toggle/i }));
+    expect(screen.getByRole('tooltip', { name: /Tooltip/i })).toBeTruthy();
+  });
+  it('should render toggleButtonLabel correctly', async () => {
+    render(<ChatbotToggle tooltipLabel="Chatbot" toggleButtonLabel="Button" />);
+    expect(screen.getByRole('button', { name: /Button/i })).toBeTruthy();
+  });
+  it('should call onToggleChatbot when clicked', async () => {
+    const spy = jest.fn();
+    render(<ChatbotToggle tooltipLabel="Chatbot" onToggleChatbot={spy} />);
+    await userEvent.click(screen.getByRole('button'));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should handle isChatbotVisible correctly when true', () => {
+    render(<ChatbotToggle tooltipLabel="Chatbot" isChatbotVisible openIconTestId="Open" />);
+    expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+    expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button--active');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByTestId('Open')).toBeTruthy();
+  });
+  it('should handle isChatbotVisible correctly when false', () => {
+    render(<ChatbotToggle tooltipLabel="Chatbot" isChatbotVisible={false} openIconTestId="Open" />);
+    expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+    expect(screen.getByRole('button')).not.toHaveClass('pf-chatbot__button--active');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByTestId('Open')).toBeFalsy();
+  });
+  it('should handle isRound correctly', () => {
+    render(<ChatbotToggle tooltipLabel="Chatbot" isRound />);
+    expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+    expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button--round');
+  });
+  it('should handle className correctly', () => {
+    render(<ChatbotToggle tooltipLabel="Chatbot" className="test" />);
+    expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+    expect(screen.getByRole('button')).toHaveClass('test');
+  });
+});

package/src/ChatbotToggle/ChatbotToggle.tsx

@@ -7,7 +7,7 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
 
 export interface ChatbotToggleProps extends ButtonProps {
   /** Contents of the tooltip applied to the toggle button */
-  toolTipLabel?: React.ReactNode;
+  tooltipLabel: React.ReactNode;
   /** Props spread to the PF Tooltip component */
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** Flag indicating visibility of the chatbot appended to the toggle */
@@ -20,6 +20,12 @@ export interface ChatbotToggleProps extends ButtonProps {
   closedToggleIcon?: () => JSX.Element;
   /** Ref applied to toggle */
   innerRef?: React.Ref<HTMLButtonElement>;
+  /** Whether toggle is a circle */
+  isRound?: boolean;
+  /** Class name applied to toggle */
+  className?: string;
+  /** Test id applied to default open icon */
+  openIconTestId?: string;
 }
 
 const ChatIcon = () => (
@@ -42,25 +48,28 @@ const ChatIcon = () => (
 );
 
 const ChatbotToggleBase: React.FunctionComponent<ChatbotToggleProps> = ({
-  toolTipLabel,
+  tooltipLabel,
   isChatbotVisible,
   onToggleChatbot,
   tooltipProps,
   toggleButtonLabel,
   closedToggleIcon: ClosedToggleIcon,
   innerRef,
+  isRound = true,
+  className,
+  openIconTestId,
   ...props
 }: ChatbotToggleProps) => {
   // Configure icon
   const closedIcon = ClosedToggleIcon ? <ClosedToggleIcon /> : <ChatIcon />;
-  const icon = isChatbotVisible ? <AngleDownIcon /> : closedIcon;
+  const icon = isChatbotVisible ? <AngleDownIcon data-testid={openIconTestId} /> : closedIcon;
 
   return (
-    <Tooltip content={toolTipLabel} {...tooltipProps}>
+    <Tooltip content={tooltipLabel} {...tooltipProps}>
       <Button
-        className={`pf-chatbot__button ${isChatbotVisible ? 'pf-chatbot__button--active' : ''}`}
+        className={`pf-chatbot__button ${isChatbotVisible ? 'pf-chatbot__button--active' : ''} ${isRound ? 'pf-chatbot__button--round' : ''} ${className ? className : ''}`}
         variant="plain"
-        aria-label={toggleButtonLabel || `${toolTipLabel} toggle`}
+        aria-label={toggleButtonLabel || `${tooltipLabel} toggle`}
         onClick={onToggleChatbot}
         aria-expanded={isChatbotVisible}
         icon={<Icon isInline>{icon}</Icon>}

package/src/Message/Message.scss

@@ -15,23 +15,29 @@
   gap: var(--pf-t--global--spacer--lg);
   padding-bottom: var(--pf-t--global--spacer--2xl);
 
-  // Name
-  // --------------------------------------------------------------------------
-  .pf-v6-c-truncate {
-    --pf-v6-c-truncate--MinWidth: 0ch;
-    --pf-v6-c-truncate__start--MinWidth: 0ch;
-  }
   // Avatar
   // --------------------------------------------------------------------------
-  .pf-v6-c-avatar {
-    --pf-v6-c-avatar--Width: 3rem;
-    --pf-v6-c-avatar--Height: 3rem;
+  &-avatar.pf-v6-c-avatar {
+    --pf-v6-c-avatar--BorderRadius: 0;
     position: sticky;
     top: var(--pf-t--global--spacer--md);
     object-fit: cover;
     pointer-events: none; // prevent dragging - interferes with FileDropZone
   }
 
+  &-avatar.pf-chatbot__message-avatar--round.pf-v6-c-avatar {
+    --pf-v6-c-avatar--Width: 3rem;
+    --pf-v6-c-avatar--Height: 3rem;
+    --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
+  }
+
+  // Name
+  // --------------------------------------------------------------------------
+  .pf-v6-c-truncate {
+    --pf-v6-c-truncate--MinWidth: 0ch;
+    --pf-v6-c-truncate__start--MinWidth: 0ch;
+  }
+
   // Contents
   // --------------------------------------------------------------------------
   &-contents {

package/src/Message/Message.test.tsx

@@ -68,7 +68,14 @@ describe('Message', () => {
     expect(screen.getByText('User')).toBeTruthy();
     expect(screen.getByText('Hi')).toBeTruthy();
     const date = new Date();
-    expect(screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
+    const formattedDate = date.toLocaleDateString();
+    expect(
+      screen.getByText((content, element) => {
+        const hasText = content.includes(formattedDate);
+        const isVisible = element?.tagName.toLowerCase() !== 'script' && element?.tagName.toLowerCase() !== 'style';
+        return hasText && isVisible;
+      })
+    ).toBeInTheDocument();
     expect(screen.queryByText('Loading message')).toBeFalsy();
     expect(screen.getByRole('img')).toHaveAttribute('src', './img');
   });
@@ -78,7 +85,14 @@ describe('Message', () => {
     expect(screen.getByText('AI')).toBeTruthy();
     expect(screen.getByText('Hi')).toBeTruthy();
     const date = new Date();
-    expect(screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
+    const formattedDate = date.toLocaleDateString();
+    expect(
+      screen.getByText((content, element) => {
+        const hasText = content.includes(formattedDate);
+        const isVisible = element?.tagName.toLowerCase() !== 'script' && element?.tagName.toLowerCase() !== 'style';
+        return hasText && isVisible;
+      })
+    ).toBeInTheDocument();
   });
   it('should render avatar correctly', () => {
     render(<Message avatar="./testImg" role="bot" name="Bot" content="Hi" />);
@@ -98,7 +112,14 @@ describe('Message', () => {
     expect(screen.getByText('Hi')).toBeTruthy();
     expect(screen.getByText('2 hours ago')).toBeTruthy();
     const date = new Date();
-    expect(screen.queryByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeFalsy();
+    const formattedDate = date.toLocaleDateString();
+    expect(
+      screen.queryByText((content, element) => {
+        const hasText = content.includes(formattedDate);
+        const isVisible = element?.tagName.toLowerCase() !== 'script' && element?.tagName.toLowerCase() !== 'style';
+        return hasText && isVisible;
+      })
+    ).not.toBeInTheDocument();
   });
   it('should render attachments', () => {
     render(<Message avatar="./img" role="user" content="Hi" attachments={[{ name: 'testAttachment' }]} />);
@@ -132,7 +153,14 @@ describe('Message', () => {
     expect(screen.getByText('AI')).toBeTruthy();
     expect(screen.queryByText('Hi')).toBeFalsy();
     const date = new Date();
-    expect(screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
+    const formattedDate = date.toLocaleDateString();
+    expect(
+      screen.getByText((content, element) => {
+        const hasText = content.includes(formattedDate);
+        const isVisible = element?.tagName.toLowerCase() !== 'script' && element?.tagName.toLowerCase() !== 'style';
+        return hasText && isVisible;
+      })
+    ).toBeInTheDocument();
     expect(screen.getByText('Loading message')).toBeTruthy();
   });
   it('should be able to show sources', async () => {
@@ -177,6 +205,83 @@ describe('Message', () => {
     expect(screen.getByText('Loading message')).toBeTruthy();
     expect(screen.queryByText('Getting started with Red Hat OpenShift')).toBeFalsy();
   });
+  it('should be able to show quick response', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        quickResponses={[
+          {
+            id: '1',
+            content: 'Yes',
+            onClick: spy,
+            className: 'test'
+          }
+        ]}
+      />
+    );
+    const quickResponse = screen.getByRole('button', { name: /Yes/i });
+    expect(quickResponse).toBeTruthy();
+    await userEvent.click(quickResponse);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should be able to show more than 1 quick response', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        quickResponses={[
+          {
+            id: '1',
+            content: 'Yes',
+            onClick: spy
+          },
+          {
+            id: '2',
+            content: 'No',
+            onClick: spy
+          }
+        ]}
+      />
+    );
+    expect(screen.getByRole('button', { name: /Yes/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /No/i })).toBeTruthy();
+  });
+  it('should be able to spread quickResponseContainerProps', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        quickResponses={[
+          {
+            id: '1',
+            content: 'Yes',
+            onClick: spy
+          },
+          {
+            id: '2',
+            content: 'No',
+            onClick: spy
+          }
+        ]}
+        // this is a LabelGroup prop that changes the default number shown
+        // to be different than what we use in ChatBot
+        quickResponseContainerProps={{ numLabels: 1 }}
+      />
+    );
+    expect(screen.getByRole('button', { name: /Yes/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /No/i })).toBeFalsy();
+    expect(screen.getByRole('button', { name: /1 more/i }));
+  });
   it('should be able to show actions', async () => {
     render(
       <Message
@@ -278,4 +383,36 @@ describe('Message', () => {
     );
     expect(screen.getByRole('button', { name: 'test' })).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();
+    expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
+    expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar--round');
+  });
+  it('should handle hasRoundAvatar correctly when it is false', () => {
+    render(<Message avatar="./img" role="user" name="User" content="Hi" hasRoundAvatar={false} />);
+    expect(screen.getByRole('img')).toBeTruthy();
+    expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
+    expect(screen.getByRole('img')).not.toHaveClass('pf-chatbot__message-avatar--round');
+  });
+  it('should handle avatarProps correctly by spreading it onto the Message Avatar', () => {
+    render(<Message avatar="./img" role="user" name="User" content="Hi" avatarProps={{ className: 'test' }} />);
+    expect(screen.getByRole('img')).toBeTruthy();
+    expect(screen.getByRole('img')).toHaveClass('test');
+  });
+  it('should handle avatarProps and hasRoundAvatar correctly', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        avatarProps={{ className: 'test' }}
+        hasRoundAvatar={false}
+      />
+    );
+    expect(screen.getByRole('img')).toBeTruthy();
+    expect(screen.getByRole('img')).toHaveClass('test');
+    expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
+  });
 });

package/src/Message/Message.tsx

@@ -6,7 +6,16 @@ import React from 'react';
 
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Avatar, Label, LabelGroup, LabelGroupProps, LabelProps, Timestamp, Truncate } from '@patternfly/react-core';
+import {
+  Avatar,
+  AvatarProps,
+  Label,
+  LabelGroup,
+  LabelGroupProps,
+  LabelProps,
+  Timestamp,
+  Truncate
+} from '@patternfly/react-core';
 import MessageLoading from './MessageLoading';
 import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
 import TextMessage from './TextMessage/TextMessage';
@@ -76,6 +85,10 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   quickResponses?: QuickResponse[];
   /** Props for quick responses container */
   quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+  /** Whether avatar is round */
+  hasRoundAvatar?: boolean;
+  /** Any additional props applied to the avatar, for additional customization  */
+  avatarProps?: Omit<AvatarProps, 'alt'>;
 }
 
 export const Message: React.FunctionComponent<MessageProps> = ({
@@ -93,12 +106,19 @@ export const Message: React.FunctionComponent<MessageProps> = ({
   quickResponses,
   quickResponseContainerProps = { numLabels: 5 },
   attachments,
+  hasRoundAvatar = true,
+  avatarProps,
   ...props
 }: MessageProps) => {
+  let avatarClassName;
+  if (avatarProps && 'className' in avatarProps) {
+    const { className, ...rest } = avatarProps;
+    avatarClassName = className;
+    avatarProps = { ...rest };
+  }
   // Keep timestamps consistent between Timestamp component and aria-label
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
-
   return (
     <section
       aria-label={`Message from ${role} - ${dateString}`}
@@ -106,7 +126,12 @@ export const Message: React.FunctionComponent<MessageProps> = ({
       {...props}
     >
       {/* We are using an empty alt tag intentionally in order to reduce noise on screen readers */}
-      <Avatar src={avatar} alt="" />
+      <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 && (

package/src/MessageBox/MessageBox.scss

@@ -9,8 +9,8 @@
   padding: var(--pf-t--global--spacer--lg);
 }
 
-.pf-chatbot__messagebox--bottom {
-  justify-content: flex-end;
+.pf-chatbot__messagebox--bottom > :first-child {
+  margin-top: auto !important;
 }
 
 // hide from view but not assistive technologies

package/src/ResponseActions/ResponseActions.test.tsx

@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ResponseActions from './ResponseActions';
 import userEvent from '@testing-library/user-event';
+import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons';
 
 const ALL_ACTIONS = [
   { type: 'positive', label: 'Good response' },
@@ -12,6 +13,29 @@ const ALL_ACTIONS = [
   { type: 'listen', label: 'Listen' }
 ];
 
+const CUSTOM_ACTIONS = [
+  {
+    regenerate: {
+      ariaLabel: 'Regenerate',
+      onClick: jest.fn(),
+      tooltipContent: 'Regenerate',
+      icon: <RedoIcon />
+    },
+    download: {
+      ariaLabel: 'Download',
+      onClick: jest.fn(),
+      tooltipContent: 'Download',
+      icon: <DownloadIcon />
+    },
+    info: {
+      ariaLabel: 'Info',
+      onClick: jest.fn(),
+      tooltipContent: 'Info',
+      icon: <InfoCircleIcon />
+    }
+  }
+];
+
 describe('ResponseActions', () => {
   it('should render buttons correctly', () => {
     ALL_ACTIONS.forEach(({ type, label }) => {
@@ -56,4 +80,24 @@ describe('ResponseActions', () => {
       expect(screen.getByRole('button', { name: label })).toHaveClass('test');
     });
   });
+
+  it('should be able to add custom actions', () => {
+    CUSTOM_ACTIONS.forEach((action) => {
+      const key = Object.keys(action)[0];
+      render(
+        <ResponseActions
+          actions={{
+            [key]: {
+              tooltipContent: action[key].tooltipContent,
+              onClick: action[key].onClick,
+              // doing this just because it's easier to test without a regex for the button name
+              ariaLabel: action[key].ariaLabel.toLowerCase(),
+              icon: action[key].icon
+            }
+          }}
+        />
+      );
+      expect(screen.getByRole('button', { name: key })).toBeTruthy();
+    });
+  });
 });