@patternfly/chatbot 2.2.0-prerelease.11 → 2.2.0-prerelease.13

package/src/Message/Message.scss

@@ -65,7 +65,7 @@
     .pf-v6-c-label {
       --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--chatbot-message--meta--label--color);
       --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--xs);
-      font-weight: 500;
+      font-weight: var(--pf-t--global--font--weight--body--bold);
 
       .pf-v6-c-label__content {
         --pf-v6-c-label--Color: var(--pf-t--chatbot-message--meta--label--color);

package/src/Message/Message.tsx

@@ -19,6 +19,8 @@ import OrderedListMessage from './ListMessage/OrderedListMessage';
 import QuickStartTile from './QuickStarts/QuickStartTile';
 import { QuickStart, QuickstartAction } from './QuickStarts/types';
 import QuickResponse from './QuickResponse/QuickResponse';
+import UserFeedback, { UserFeedbackProps } from './UserFeedback/UserFeedback';
+import UserFeedbackComplete, { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -74,6 +76,10 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   quickResponses?: QuickResponse[];
   /** Props for quick responses container */
   quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+  /** Props for user feedback card */
+  userFeedbackForm?: Omit<UserFeedbackProps, 'ref'>;
+  /** Props for user feedback response */
+  userFeedbackComplete?: Omit<UserFeedbackCompleteProps, 'ref'>;
   /** Whether avatar is round */
   hasRoundAvatar?: boolean;
   /** Any additional props applied to the avatar, for additional customization  */
@@ -91,9 +97,13 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     onClick?: () => void;
     action?: QuickstartAction;
   };
+  /** Turns the container into a live region so that changes to content within the Message, such as appending a feedback card, are reliably announced to assistive technology. */
+  isLiveRegion?: boolean;
+  /** Ref applied to message  */
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 
-export const Message: React.FunctionComponent<MessageProps> = ({
+export const MessageBase: React.FunctionComponent<MessageProps> = ({
   role,
   content,
   name,
@@ -111,6 +121,10 @@ export const Message: React.FunctionComponent<MessageProps> = ({
   hasRoundAvatar = true,
   avatarProps,
   quickStarts,
+  userFeedbackForm,
+  userFeedbackComplete,
+  isLiveRegion = true,
+  innerRef,
   ...props
 }: MessageProps) => {
   let avatarClassName;
@@ -122,11 +136,13 @@ export const Message: React.FunctionComponent<MessageProps> = ({
   // 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}`}
       className={`pf-chatbot__message pf-chatbot__message--${role}`}
+      aria-live={isLiveRegion ? 'polite' : undefined}
+      aria-atomic={isLiveRegion ? false : undefined}
+      ref={innerRef}
       {...props}
     >
       {/* We are using an empty alt tag intentionally in order to reduce noise on screen readers */}
@@ -181,6 +197,8 @@ export const Message: React.FunctionComponent<MessageProps> = ({
               />
             )}
             {!isLoading && actions && <ResponseActions actions={actions} />}
+            {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} />}
+            {userFeedbackComplete && <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} />}
             {!isLoading && quickResponses && (
               <QuickResponse
                 quickResponses={quickResponses}
@@ -212,4 +230,8 @@ export const Message: React.FunctionComponent<MessageProps> = ({
   );
 };
 
+const Message = React.forwardRef((props: MessageProps, ref: React.Ref<HTMLDivElement>) => (
+  <MessageBase innerRef={ref} {...props} />
+));
+
 export default Message;

package/src/Message/QuickResponse/QuickResponse.tsx

@@ -5,7 +5,7 @@ import { CheckIcon } from '@patternfly/react-icons';
 export interface QuickResponse extends Omit<LabelProps, 'children'> {
   content: string;
   id: string;
-  onClick: () => void;
+  onClick?: () => void;
 }
 
 export interface QuickResponseProps {
@@ -13,17 +13,21 @@ export interface QuickResponseProps {
   quickResponses: QuickResponse[];
   /** Props for quick responses container */
   quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+  /** Callback when a response is clicked; used in feedback cards */
+  onSelect?: (id: string) => void;
 }
 
 export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
   quickResponses,
-  quickResponseContainerProps = { numLabels: 5 }
+  quickResponseContainerProps = { numLabels: 5 },
+  onSelect
 }: QuickResponseProps) => {
   const [selectedQuickResponse, setSelectedQuickResponse] = React.useState<string>();
 
   const handleQuickResponseClick = (id: string, onClick?: () => void) => {
     setSelectedQuickResponse(id);
     onClick && onClick();
+    onSelect && onSelect(id);
   };
   return (
     <LabelGroup

package/src/Message/UserFeedback/CloseButton.tsx

@@ -0,0 +1,21 @@
+// ============================================================================
+// Chatbot Main - Messages - Close Button
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import { Button, ButtonProps } from '@patternfly/react-core';
+import { CloseIcon } from '@patternfly/react-icons';
+
+export interface CloseButtonProps extends ButtonProps {
+  /** Callback function for when close button is clicked */
+  onClose?: () => void;
+  /** Aria-label for button */
+  ariaLabel?: string;
+}
+
+const CloseButton: React.FunctionComponent<CloseButtonProps> = ({ onClose, ariaLabel }: CloseButtonProps) => (
+  <Button variant="plain" onClick={onClose} icon={<CloseIcon />} aria-label={ariaLabel} />
+);
+
+export default CloseButton;

package/src/Message/UserFeedback/UserFeedback.scss

@@ -0,0 +1,53 @@
+// shared
+.pf-chatbot__feedback-card {
+  box-shadow: var(--pf-t--global--box-shadow--sm);
+  --pf-v6-c-card--BorderWidth: 0;
+  max-width: 27.5rem; // fixme address mobile vs desktop
+}
+
+// complete card
+.pf-chatbot__feedback-complete-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--lg);
+  align-items: center;
+}
+.pf-chatbot__feedback-complete-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-card--first-child--PaddingBlockStart: 0;
+  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: 0;
+}
+.pf-chatbot__feedback-complete-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pf-chatbot__feedback-complete-body {
+  text-align: center;
+}
+.pf-chatbot__feedback-complete-title {
+  font-family: var(--pf-t--global--font--family--heading);
+  font-size: var(--pf-t--global--font--size--lg);
+  font-weight: var(--pf-t--global--font--weight--body--bold);
+  line-height: var(--pf-t--global--font--line-height--heading);
+}
+
+// feedback card
+.pf-chatbot__feedback-card-title {
+  font-family: var(--pf-t--global--font--family--heading);
+  font-size: var(--pf-t--global--font--size--md);
+  font-weight: var(--pf-t--global--font--weight--body--bold);
+  line-height: var(--pf-t--global--font--line-height--heading);
+}
+
+.pf-chatbot__feedback-card-form {
+  --pf-v6-c-form__group--m-action--MarginBlockStart: 0;
+}
+
+.pf-chatbot__feedback-card-optional {
+  font-weight: initial;
+}

package/src/Message/UserFeedback/UserFeedback.test.tsx

@@ -0,0 +1,257 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import UserFeedback from './UserFeedback';
+
+const MOCK_RESPONSES = [
+  { id: '1', content: 'Helpful information', onClick: () => alert('Clicked helpful information') },
+  { id: '2', content: 'Easy to understand', onClick: () => alert('Clicked easy to understand') },
+  { id: '3', content: 'Resolved my issue', onClick: () => alert('Clicked resolved my issue') }
+];
+
+describe('UserFeedback', () => {
+  it('should render correctly', () => {
+    render(<UserFeedback onClose={jest.fn} onSubmit={jest.fn} quickResponses={MOCK_RESPONSES} timestamp="12/12/12" />);
+    expect(screen.getByRole('heading', { name: /Why did you choose this rating?/i })).toBeTruthy();
+    expect(screen.getByRole('list', { name: 'Quick feedback for message received at 12/12/12' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Helpful information/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Easy to understand/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Resolved my issue/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Close feedback for message received at 12/12/12' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
+    expect(screen.queryByRole('textbox', { name: /Provide optional additional feedback/i })).toBeFalsy();
+  });
+  it('should render different title correctly', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        title="Thanks! Why?"
+      />
+    );
+    expect(screen.getByText('Thanks! Why?')).toBeTruthy();
+  });
+  it('should render different submit button text correctly', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        submitWord="Give feedback"
+      />
+    );
+    expect(screen.getByRole('button', { name: /Give feedback/i })).toBeTruthy();
+  });
+  it('should render text area correctly', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+      />
+    );
+    expect(screen.getByRole('textbox', { name: /Provide optional additional feedback/i })).toBeTruthy();
+  });
+  it('should call onTextAreaChange correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+        onTextAreaChange={spy}
+      />
+    );
+    const textbox = screen.getByRole('textbox', { name: /Provide optional additional feedback/i });
+    await userEvent.type(textbox, 'test');
+    expect(spy).toHaveBeenCalledTimes(4);
+  });
+  it('should render different placeholder correctly', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+        textAreaPlaceholder="Provide any other information"
+      />
+    );
+    expect(screen.getByRole('textbox', { name: /Provide optional additional feedback/i })).toHaveAttribute(
+      'placeholder',
+      'Provide any other information'
+    );
+  });
+  it('should render different text area label correctly', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+        textAreaAriaLabel="Provide more details"
+      />
+    );
+    expect(screen.getByRole('textbox', { name: /Provide more details/i })).toBeTruthy();
+  });
+  it('should handle onClose correctly when close button is clicked', async () => {
+    const spy = jest.fn();
+    render(<UserFeedback onSubmit={jest.fn} quickResponses={MOCK_RESPONSES} onClose={spy} timestamp="12/12/12" />);
+    const closeButton = screen.getByRole('button', { name: 'Close feedback for message received at 12/12/12' });
+    expect(closeButton).toBeTruthy();
+    await userEvent.click(closeButton);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should be able to change close button aria label', () => {
+    const spy = jest.fn();
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        onClose={spy}
+        closeButtonAriaLabel="Ima button"
+      />
+    );
+    expect(screen.getByRole('button', { name: /Ima button/i })).toBeTruthy();
+  });
+  it('should handle onClose correctly when cancel button is clicked', async () => {
+    const spy = jest.fn();
+    render(<UserFeedback onSubmit={jest.fn} quickResponses={MOCK_RESPONSES} onClose={spy} timestamp="12/12/12" />);
+    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+    expect(cancelButton).toBeTruthy();
+    await userEvent.click(cancelButton);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should change cancel word correctly', () => {
+    render(
+      <UserFeedback
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        onClose={jest.fn}
+        cancelWord="Exit"
+        timestamp="12/12/12"
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Exit' })).toBeTruthy();
+  });
+  it('should handle className', async () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        className="test"
+        data-testid="card"
+      />
+    );
+    expect(screen.getByTestId('card')).toHaveClass('test');
+  });
+  it('should apply id', async () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        id="test"
+        data-testid="card"
+      />
+    );
+    expect(screen.getByTestId('card').parentElement).toHaveAttribute('id', 'test');
+  });
+  it('should handle submit correctly when nothing is selected', async () => {
+    const spy = jest.fn();
+    render(<UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} />);
+    await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(undefined, '');
+  });
+  it('should handle submit correctly when item is selected', async () => {
+    const spy = jest.fn();
+    render(<UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} />);
+    await userEvent.click(screen.getByRole('button', { name: /Easy to understand/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith('2', '');
+  });
+  it('should handle submit correctly when there is just text input', async () => {
+    const spy = jest.fn();
+    render(
+      <UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} hasTextArea />
+    );
+    await userEvent.type(
+      screen.getByRole('textbox', { name: /Provide optional additional feedback/i }),
+      'What a great experience!'
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(undefined, 'What a great experience!');
+  });
+  it('should handle submit correctly when item is selected and there is text input', async () => {
+    const spy = jest.fn();
+    render(
+      <UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} hasTextArea />
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Easy to understand/i }));
+    await userEvent.type(
+      screen.getByRole('textbox', { name: /Provide optional additional feedback/i }),
+      'What a great experience!'
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith('2', 'What a great experience!');
+  });
+  it('should default title heading level to h1', () => {
+    render(<UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={jest.fn} quickResponses={MOCK_RESPONSES} />);
+    expect(screen.getByRole('heading', { level: 1, name: /Why did you choose this rating?/i })).toBeTruthy();
+  });
+  it('should be able to change title heading level', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        headingLevel="h6"
+      />
+    );
+    expect(screen.getByRole('heading', { level: 6, name: /Why did you choose this rating?/i })).toBeTruthy();
+  });
+  it('should focus on load by default', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        data-testid="card"
+      />
+    );
+    expect(screen.getByTestId('card').parentElement).toHaveFocus();
+  });
+  it('should not focus on load if focusOnLoad = false', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        data-testid="card"
+        focusOnLoad={false}
+      />
+    );
+    expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
+  });
+});

package/src/Message/UserFeedback/UserFeedback.tsx

@@ -0,0 +1,132 @@
+// ============================================================================
+// Chatbot Main - Messages - Feedback Card
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import {
+  ActionGroup,
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  CardProps,
+  Form,
+  LabelGroupProps,
+  OUIAProps,
+  TextArea
+} from '@patternfly/react-core';
+import QuickResponse from '../QuickResponse/QuickResponse';
+import CloseButton from './CloseButton';
+
+export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProps {
+  /** Additional classes for the pagination navigation container. */
+  className?: string;
+  /** Quick responses a user can select */
+  quickResponses?: QuickResponse[];
+  /** Props for quick responses container */
+  quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+  /** Whether form includes text area */
+  hasTextArea?: boolean;
+  /** Placeholder of text area */
+  textAreaPlaceholder?: string;
+  /** Aria label for text area */
+  textAreaAriaLabel?: string;
+  /** Callback function for when text area changes */
+  onTextAreaChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
+  /** Callback function for when form is submitted */
+  onSubmit: (selectedResponse?: string, additionalFeedback?: string) => void;
+  /** Callback function for when close button is clicked */
+  onClose: () => void;
+  /** Aria label for close button */
+  closeButtonAriaLabel?: string;
+  /** Label for the English word "Submit." */
+  submitWord?: string;
+  /** Label for the English word "Cancel." */
+  cancelWord?: string;
+  /** Uniquely identifies the card. */
+  id?: string;
+  /** The heading level to use, default is h1 */
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Whether to focus card on load */
+  focusOnLoad?: boolean;
+  /** Timestamp passed in by Message for more context in aria announcements */
+  timestamp?: string;
+}
+
+const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
+  className,
+  timestamp,
+  title = 'Why did you choose this rating?',
+  hasTextArea,
+  textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`,
+  textAreaPlaceholder = 'Provide optional additional feedback',
+  onTextAreaChange,
+  submitWord = 'Submit',
+  quickResponses,
+  quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` },
+  onSubmit,
+  onClose,
+  closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`,
+  id,
+  headingLevel: HeadingLevel = 'h1',
+  focusOnLoad = true,
+  cancelWord = 'Cancel',
+  ...props
+}: UserFeedbackProps) => {
+  const [selectedResponse, setSelectedResponse] = React.useState<string>();
+  const [value, setValue] = React.useState('');
+  const divRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (focusOnLoad) {
+      divRef.current?.focus();
+    }
+  }, []);
+
+  return (
+    /* card does not have ref forwarding; hence wrapper div */
+    <div ref={divRef} id={id} tabIndex={0} aria-label={title}>
+      <Card className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
+        <CardHeader
+          actions={{
+            actions: <CloseButton onClose={onClose} ariaLabel={closeButtonAriaLabel} />
+          }}
+        >
+          <HeadingLevel className="pf-chatbot__feedback-card-title">{title}</HeadingLevel>
+        </CardHeader>
+        <CardBody>
+          <Form className="pf-chatbot__feedback-card-form">
+            {quickResponses && (
+              <QuickResponse
+                quickResponses={quickResponses}
+                quickResponseContainerProps={quickResponseContainerProps}
+                onSelect={(id) => setSelectedResponse(id)}
+              />
+            )}
+            {hasTextArea && (
+              <TextArea
+                value={value}
+                onChange={(_event, value) => {
+                  setValue(value);
+                  onTextAreaChange && onTextAreaChange(_event, value);
+                }}
+                placeholder={textAreaPlaceholder}
+                aria-label={textAreaAriaLabel}
+                resizeOrientation="vertical"
+              />
+            )}
+            <ActionGroup>
+              <Button onClick={() => onSubmit(selectedResponse, value)}>{submitWord}</Button>
+              <Button variant="link" onClick={onClose}>
+                {cancelWord}
+              </Button>
+            </ActionGroup>
+          </Form>
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
+
+export default UserFeedback;