@patternfly/chatbot 2.2.0-prerelease.2 → 2.2.0-prerelease.21

package/src/Message/TableMessage/TableMessage.tsx

@@ -0,0 +1,83 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Table, TableProps } from '@patternfly/react-table';
+
+interface Properties {
+  line: number;
+  column: number;
+  offset: number;
+}
+export interface TableNode {
+  children?: TableNode[];
+  value?: string;
+  position: { start: Properties; end: Properties };
+  tagName: string;
+  type: string;
+}
+
+const TableMessage = ({ children, ...props }: TableProps & ExtraProps) => {
+  const { className, ...rest } = props;
+
+  // This allows us to parse the nested data we get back from the 3rd party Markdown parser
+  // Open to feedback here if there is a better way to do this
+  // This looks for ths and spits them all out so we can filter them later, looking for text values
+  const findHeaders = (array?: TableNode[]) => {
+    const headers: TableNode[] = [];
+    if (!array) {
+      return headers;
+    }
+    const traverse = (items: TableNode[]) => {
+      for (const item of items) {
+        if (item.tagName === 'th') {
+          headers.push(item);
+        }
+        if (item.children) {
+          traverse(item.children);
+        }
+      }
+    };
+
+    traverse(array);
+    return headers;
+  };
+
+  const headers = findHeaders(rest.node?.children as TableNode[] | undefined);
+  const headerTextValues = headers.map((header) => header?.children?.filter((c) => c?.type === 'text')[0]?.value);
+
+  // We are sending these header text values down to child tds by passing them through children, since mobile view for tables expects a dataLabel prop
+  // The data structure does not otherwise know this information at that level
+  // This is somewhat opinionated and may break if 3rd party library changes
+  // See Tr and Tbody for other usage
+  const modifyChildren = (children) =>
+    React.Children.map(children, (child) => {
+      if (child && headerTextValues?.length > 0) {
+        return React.cloneElement(child, { extraHeaders: headerTextValues });
+      }
+      return child;
+    });
+
+  if (!props['aria-label']) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'For accessibility reasons an aria-label should be specified for the Table via the <Message /> tableProps prop'
+    );
+  }
+
+  return (
+    // gridBreakPoint is so we show mobile-styled-PF table
+    <Table
+      aria-label={props['aria-label']}
+      gridBreakPoint="grid"
+      className={`pf-chatbot__message-table ${className ? className : ''}`}
+      {...rest}
+    >
+      {modifyChildren(children)}
+    </Table>
+  );
+};
+
+export default TableMessage;

package/src/Message/TableMessage/TbodyMessage.tsx

@@ -0,0 +1,20 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Tbody, TbodyProps } from '@patternfly/react-table';
+
+const TbodyProps = ({ children, ...props }: TbodyProps & ExtraProps & { extraHeaders?: string[] }) => {
+  // passthrough so we can place dataLabel on tds
+  const modifyChildren = (children) => {
+    if (children && props.extraHeaders) {
+      return React.Children.map(children, (child) => React.cloneElement(child, { extraHeaders: props.extraHeaders }));
+    }
+    return children;
+  };
+
+  return <Tbody {...props}>{modifyChildren(children)}</Tbody>;
+};
+export default TbodyProps;

package/src/Message/TableMessage/TdMessage.tsx

@@ -0,0 +1,11 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Td, TdProps } from '@patternfly/react-table';
+
+const TdMessage = ({ children, ...props }: TdProps & ExtraProps) => <Td {...props}>{children}</Td>;
+
+export default TdMessage;

package/src/Message/TableMessage/ThMessage.tsx

@@ -0,0 +1,11 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Th, ThProps } from '@patternfly/react-table';
+
+const ThMessage = ({ children, ...props }: ThProps & ExtraProps) => <Th {...props}>{children}</Th>;
+
+export default ThMessage;

package/src/Message/TableMessage/TheadMessage.tsx

@@ -0,0 +1,11 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Thead, TheadProps } from '@patternfly/react-table';
+
+const TheadMessage = ({ children, ...props }: TheadProps & ExtraProps) => <Thead {...props}>{children}</Thead>;
+
+export default TheadMessage;

package/src/Message/TableMessage/TrMessage.tsx

@@ -0,0 +1,27 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Tr, TrProps } from '@patternfly/react-table';
+
+const TrMessage = ({ children, ...props }: TrProps & ExtraProps & { extraHeaders?: string[] }) => {
+  let tdIndex = 0;
+
+  // passthrough so we can place dataLabel on tds
+  // places column name on correct child
+  const modifyChildren = (children) =>
+    React.Children.map(children, (child) => {
+      if (child.type.name === 'td' && props.extraHeaders) {
+        const clonedChild = React.cloneElement(child, { dataLabel: props.extraHeaders[tdIndex] });
+        tdIndex = tdIndex + 1;
+        return clonedChild;
+      }
+      return child;
+    });
+
+  return <Tr {...props}>{modifyChildren(children)}</Tr>;
+};
+
+export default TrMessage;

package/src/Message/TextMessage/TextMessage.scss

@@ -10,11 +10,16 @@
   }
 }
 
+// make it full width when there's a table, so the table can grow as needed
+.pf-chatbot__message-and-actions:has(.pf-chatbot__message-table) {
+  width: 100%;
+}
+
 // Need to inline shorter text
 .pf-chatbot__message-text {
   width: fit-content;
-  padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
-  border-radius: var(--pf-t--chatbot-message--type--border--radius);
+  padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
+  border-radius: var(--pf-t--global--border--radius--small);
 
   .pf-v6-c-content,
   .pf-v6-c-content--small,
@@ -25,27 +30,24 @@
   }
 
   code {
-    background-color: var(--pf-t--chatbot-message--type--background--color--default);
+    background-color: var(--pf-t--global--background--color--tertiary--default);
     font-size: var(--pf-t--global--font--size--body--default);
   }
 }
 
 .pf-chatbot__message--user {
   .pf-chatbot__message-text {
-    background-color: var(--pf-t--chatbot-message--type--background--color--primary);
-    color: var(--pf-t--chatbot-message--type--text--color--primary);
-    padding: var(--pf-t--chatbot-message--type--padding);
+    background-color: var(--pf-t--global--color--brand--default);
+    color: var(--pf-t--global--text--color--on-brand--default);
+    --pf-v6-c-content--Color: var(--pf-t--global--text--color--on-brand--default);
+    padding: var(--pf-t--global--spacer--sm);
 
     .pf-v6-c-content,
     .pf-v6-c-content--small,
     .pf-v6-c-content--blockquote,
     p,
     a {
-      color: var(--pf-t--chatbot-message--type--text--color--primary);
-    }
-
-    code {
-      background-color: initial;
+      color: var(--pf-t--global--text--color--on-brand--default);
     }
   }
 }

package/src/Message/TextMessage/TextMessage.tsx

@@ -4,11 +4,11 @@
 
 import React from 'react';
 import { ExtraProps } from 'react-markdown';
-import { Content, ContentVariants } from '@patternfly/react-core';
+import { Content, ContentProps } from '@patternfly/react-core';
 
-const TextMessage = ({ children, ...props }: JSX.IntrinsicElements['p'] & ExtraProps) => (
+const TextMessage = ({ component, children, ...props }: ContentProps & ExtraProps) => (
   <span className="pf-chatbot__message-text">
-    <Content component={ContentVariants.p} {...props}>
+    <Content component={component} {...props}>
       {children}
     </Content>
   </span>

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