@patternfly/chatbot 6.5.0-prerelease.9 → 6.5.0

package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -19,6 +19,7 @@ import {
 
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import { css } from '@patternfly/react-styles';
 
 export interface CodeBlockMessageProps {
   /** Content rendered in code block */
@@ -41,6 +42,8 @@ export interface CodeBlockMessageProps {
   customActions?: React.ReactNode;
   /** Sets background colors to be appropriate on primary chatbot background */
   isPrimary?: boolean;
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
 }
 
 const DEFAULT_EXPANDED_TEXT = 'Show less';
@@ -57,6 +60,7 @@ const CodeBlockMessage = ({
   collapsedText = DEFAULT_COLLAPSED_TEXT,
   customActions,
   isPrimary,
+  shouldRetainStyles,
   ...props
 }: CodeBlockMessageProps) => {
   const [copied, setCopied] = useState(false);
@@ -88,13 +92,22 @@ const CodeBlockMessage = ({
     );
   }
 
-  const onToggle = (isExpanded) => {
+  const onToggle = (isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 
   // Handle clicking copy button
-  const handleCopy = useCallback((event, text) => {
-    navigator.clipboard.writeText(text.toString());
+  const handleCopy = useCallback((_event: React.MouseEvent, text: React.ReactNode) => {
+    let textToCopy = '';
+    if (typeof text === 'string') {
+      textToCopy = text;
+    } else {
+      if (codeBlockRef.current) {
+        const codeElement = codeBlockRef.current.querySelector('code');
+        textToCopy = codeElement?.textContent || '';
+      }
+    }
+    navigator.clipboard.writeText(textToCopy);
     setCopied(true);
   }, []);
 
@@ -138,7 +151,7 @@ const CodeBlockMessage = ({
   );
 
   return (
-    <div className="pf-chatbot__message-code-block" ref={codeBlockRef}>
+    <div className={css('pf-chatbot__message-code-block', shouldRetainStyles && 'pf-m-markdown')} ref={codeBlockRef}>
       <CodeBlock actions={actions}>
         <CodeBlockCode>
           <>

package/src/Message/ErrorMessage/ErrorMessage.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ErrorMessage from './ErrorMessage';
+
+test('Renders with title', () => {
+  render(<ErrorMessage title="Error occurred" />);
+
+  expect(screen.getByText('Error occurred')).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<ErrorMessage title="Error occurred">This is the error message body</ErrorMessage>);
+
+  expect(screen.getByText('This is the error message body')).toBeVisible();
+});
+
+test('Renders with action links', () => {
+  const actionLinks = (
+    <a href="#retry" data-testid="retry-link">
+      Retry action link
+    </a>
+  );
+  render(<ErrorMessage title="Error occurred" actionLinks={actionLinks} />);
+
+  expect(screen.getByText('Retry action link')).toBeVisible();
+});
+
+test('Renders with custom className', () => {
+  render(<ErrorMessage title="Error occurred" className="custom-error-class" />);
+
+  expect(screen.getByText('Error occurred').parentElement).toHaveClass('custom-error-class');
+});
+
+test('Renders with spread props', () => {
+  render(<ErrorMessage title="Error occurred" id="test-error-id" />);
+
+  expect(screen.getByText('Error occurred').parentElement).toHaveAttribute('id', 'test-error-id');
+});

package/src/Message/ErrorMessage/ErrorMessage.tsx

@@ -4,8 +4,23 @@
 
 import { Alert, AlertProps } from '@patternfly/react-core';
 
-const ErrorMessage = ({ title, actionLinks, children, ...props }: AlertProps) => (
-  <Alert isInline variant="danger" title={title} actionLinks={actionLinks} {...props}>
+/**
+ * ErrorMessage displays an inline danger alert for error states in messages.
+ * Use this component when passing children to Message to display error information.
+ */
+export interface ErrorMessageProps extends Partial<AlertProps> {
+  /** Content to display in the error alert body */
+  children?: React.ReactNode;
+  /** Additional classes for the error alert */
+  className?: string;
+  /** Title of the error alert */
+  title?: React.ReactNode;
+  /** Action links to display in the alert footer */
+  actionLinks?: React.ReactNode;
+}
+
+export const ErrorMessage = ({ title, actionLinks, children, className, ...props }: ErrorMessageProps) => (
+  <Alert isInline variant="danger" title={title} actionLinks={actionLinks} className={className} {...props}>
     {children}
   </Alert>
 );

package/src/Message/LinkMessage/LinkMessage.scss

@@ -0,0 +1,5 @@
+.pf-v6-c-button.pf-m-link.pf-m-inline {
+  &.pf-m-markdown {
+    font-size: inherit;
+  }
+}

package/src/Message/LinkMessage/LinkMessage.tsx

@@ -5,8 +5,21 @@
 import { Button, ButtonProps } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 import { ExtraProps } from 'react-markdown';
+import { css } from '@patternfly/react-styles';
 
-const LinkMessage = ({ children, target, href, id, ...props }: ButtonProps & ExtraProps) => {
+export interface LinkMessageProps {
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
+}
+
+const LinkMessage = ({
+  children,
+  target,
+  href,
+  id,
+  shouldRetainStyles,
+  ...props
+}: LinkMessageProps & ButtonProps & ExtraProps) => {
   if (target === '_blank') {
     return (
       <Button
@@ -20,6 +33,7 @@ const LinkMessage = ({ children, target, href, id, ...props }: ButtonProps & Ext
         // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
         id={id}
         {...props}
+        className={css(shouldRetainStyles && 'pf-m-markdown', props?.className)}
       >
         {children}
       </Button>
@@ -28,7 +42,15 @@ const LinkMessage = ({ children, target, href, id, ...props }: ButtonProps & Ext
 
   return (
     // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
-    <Button isInline component="a" href={href} variant="link" id={id} {...props}>
+    <Button
+      isInline
+      component="a"
+      href={href}
+      variant="link"
+      id={id}
+      {...props}
+      className={css(shouldRetainStyles && 'pf-m-markdown', props?.className)}
+    >
       {children}
     </Button>
   );

package/src/Message/ListMessage/ListMessage.scss

@@ -13,6 +13,14 @@
   li {
     font-size: var(--pf-t--global--font--size--md);
   }
+
+  &.pf-m-markdown {
+    .pf-v6-c-list,
+    ul,
+    li {
+      font-size: inherit;
+    }
+  }
 }
 
 .pf-chatbot__message--user {

package/src/Message/ListMessage/OrderedListMessage.tsx

@@ -4,9 +4,23 @@
 
 import { ExtraProps } from 'react-markdown';
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 
-const OrderedListMessage = ({ children, start }: JSX.IntrinsicElements['ol'] & ExtraProps) => (
-  <div className="pf-chatbot__message-ordered-list">
+export interface OrderedListMessageProps {
+  /** The ordered list content */
+  children?: React.ReactNode;
+  /** The number to start the ordered list at. */
+  start?: number;
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
+}
+
+const OrderedListMessage = ({
+  children,
+  start,
+  shouldRetainStyles
+}: OrderedListMessageProps & JSX.IntrinsicElements['ol'] & ExtraProps) => (
+  <div className={css('pf-chatbot__message-ordered-list', shouldRetainStyles && 'pf-m-markdown')}>
     <List component={ListComponent.ol} type={OrderType.number} start={start}>
       {children}
     </List>

package/src/Message/ListMessage/UnorderedListMessage.tsx

@@ -4,9 +4,19 @@
 
 import { ExtraProps } from 'react-markdown';
 import { List } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+export interface UnrderedListMessageProps {
+  /** The ordered list content */
+  children?: React.ReactNode;
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
+}
 
-const UnorderedListMessage = ({ children }: JSX.IntrinsicElements['ul'] & ExtraProps) => (
-  <div className="pf-chatbot__message-unordered-list">
+const UnorderedListMessage = ({
+  children,
+  shouldRetainStyles
+}: UnrderedListMessageProps & JSX.IntrinsicElements['ul'] & ExtraProps) => (
+  <div className={css('pf-chatbot__message-unordered-list', shouldRetainStyles && 'pf-m-markdown')}>
     <List>{children}</List>
   </div>
 );

package/src/Message/Message.scss

@@ -5,7 +5,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--pf-t--global--spacer--lg);
-  padding-bottom: var(--pf-t--global--spacer--xl);
+  padding-bottom: var(--pf-t--global--spacer--lg);
 
   // Avatar
   // --------------------------------------------------------------------------
@@ -18,8 +18,10 @@
   }
 
   &-avatar.pf-chatbot__message-avatar--round.pf-v6-c-avatar {
-    --pf-v6-c-avatar--Width: 3rem;
-    --pf-v6-c-avatar--Height: 3rem;
+    &:not(.pf-m-xl, .pf-m-lg, .pf-m-md, .pf-m-sm) {
+      --pf-v6-c-avatar--Width: 3rem;
+      --pf-v6-c-avatar--Height: 3rem;
+    }
     --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
   }
 
@@ -156,8 +158,8 @@
 // ============================================================================
 .pf-chatbot.pf-m-compact {
   .pf-chatbot__message {
-    gap: var(--pf-t--global--spacer--md);
-    padding-bottom: var(--pf-t--global--spacer--sm);
+    gap: var(--pf-t--global--spacer--sm);
+    padding-bottom: var(--pf-t--global--spacer--md);
 
     .pf-chatbot__message-contents  {
       gap: var(--pf-t--global--spacer--xs);
@@ -169,8 +171,10 @@
   }
 
   .pf-chatbot__message-avatar.pf-chatbot__message-avatar--round.pf-v6-c-avatar {
-    --pf-v6-c-avatar--Width: 2rem;
-    --pf-v6-c-avatar--Height: 2rem;
+    &:not(.pf-m-xl, .pf-m-lg, .pf-m-md, .pf-m-sm) {
+      --pf-v6-c-avatar--Width: 1.5rem;
+      --pf-v6-c-avatar--Height: 1.5rem;
+    }
   }
 
   .pf-chatbot__message-contents {

package/src/Message/Message.test.tsx

@@ -228,6 +228,10 @@ describe('Message', () => {
     render(<Message avatar="./testImg" role="bot" name="Bot" content="Hi" />);
     expect(screen.getByRole('img')).toHaveAttribute('src', './testImg');
   });
+  it('should not render avatar if no avatar prop is passed', () => {
+    render(<Message role="bot" name="Bot" content="Hi" />);
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
   it('should render botWord correctly', () => {
     render(<Message avatar="./img" role="bot" name="Bot" content="Hi" botWord="人工知能" />);
     expect(screen.getByText('Bot')).toBeTruthy();
@@ -433,7 +437,7 @@ describe('Message', () => {
     expect(screen.queryByRole('button', { name: /No/i })).toBeFalsy();
     expect(screen.getByRole('button', { name: /1 more/i }));
   });
-  it('should be able to show actions', async () => {
+  it('Renders response actions when a single actions object is passed', async () => {
     render(
       <Message
         avatar="./img"
@@ -459,9 +463,204 @@ describe('Message', () => {
       />
     );
     ALL_ACTIONS.forEach(({ label }) => {
-      expect(screen.getByRole('button', { name: label })).toBeTruthy();
+      expect(screen.getByRole('button', { name: label })).toBeVisible();
+    });
+  });
+  it('Renders response actions when an array of actions objects is passed', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        actions={[
+          {
+            // eslint-disable-next-line no-console
+            positive: { onClick: () => console.log('Good response') },
+            // eslint-disable-next-line no-console
+            negative: { onClick: () => console.log('Bad response') }
+          },
+          {
+            // eslint-disable-next-line no-console
+            copy: { onClick: () => console.log('Copy') },
+            // eslint-disable-next-line no-console
+            edit: { onClick: () => console.log('Edit') },
+            // eslint-disable-next-line no-console
+            share: { onClick: () => console.log('Share') },
+            // eslint-disable-next-line no-console
+            download: { onClick: () => console.log('Download') }
+          },
+          {
+            // eslint-disable-next-line no-console
+            listen: { onClick: () => console.log('Listen') }
+          }
+        ]}
+      />
+    );
+    ALL_ACTIONS.forEach(({ label }) => {
+      expect(screen.getByRole('button', { name: label })).toBeVisible();
+    });
+  });
+  it('Renders response actions when an array of objects containing actions objects is passed', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        actions={[
+          {
+            actions: {
+              // eslint-disable-next-line no-console
+              positive: { onClick: () => console.log('Good response') },
+              // eslint-disable-next-line no-console
+              negative: { onClick: () => console.log('Bad response') }
+            }
+          },
+          {
+            actions: {
+              // eslint-disable-next-line no-console
+              copy: { onClick: () => console.log('Copy') },
+              // eslint-disable-next-line no-console
+              edit: { onClick: () => console.log('Edit') },
+              // eslint-disable-next-line no-console
+              share: { onClick: () => console.log('Share') },
+              // eslint-disable-next-line no-console
+              download: { onClick: () => console.log('Download') }
+            }
+          },
+          {
+            actions: {
+              // eslint-disable-next-line no-console
+              listen: { onClick: () => console.log('Listen') }
+            }
+          }
+        ]}
+      />
+    );
+    ALL_ACTIONS.forEach(({ label }) => {
+      expect(screen.getByRole('button', { name: label })).toBeVisible();
     });
   });
+
+  it('should handle persistActionSelection correctly when a single actions object is passed', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Test message"
+        persistActionSelection
+        actions={{
+          positive: { onClick: jest.fn() },
+          negative: { onClick: jest.fn() }
+        }}
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: /Good response/i });
+    const badBtn = screen.getByRole('button', { name: /Bad response/i });
+
+    await userEvent.click(goodBtn);
+    expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+
+    await userEvent.click(screen.getByText('Test message'));
+    expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+
+    await userEvent.click(badBtn);
+    expect(screen.getByRole('button', { name: /Bad response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+    expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should handle persistActionSelection correctly when an array of actions objects is passed', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Test message"
+        persistActionSelection
+        actions={[
+          {
+            positive: { onClick: jest.fn() },
+            negative: { onClick: jest.fn() }
+          },
+          {
+            copy: { onClick: jest.fn() }
+          }
+        ]}
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: /Good response/i });
+    const copyBtn = screen.getByRole('button', { name: /Copy/i });
+
+    await userEvent.click(goodBtn);
+    expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+
+    await userEvent.click(screen.getByText('Test message'));
+    expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+
+    await userEvent.click(copyBtn);
+    expect(screen.getByRole('button', { name: /Copied/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(screen.getByText('Test message'));
+    expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+    expect(screen.getByRole('button', { name: /Copied/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should handle persistActionSelection correctly when an array of objects containing actions objects is passed', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Test message"
+        actions={[
+          {
+            actions: {
+              positive: { onClick: jest.fn() },
+              negative: { onClick: jest.fn() }
+            },
+            persistActionSelection: true
+          },
+          {
+            actions: {
+              copy: { onClick: jest.fn() }
+            },
+            persistActionSelection: false
+          }
+        ]}
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: /Good response/i });
+    const copyBtn = screen.getByRole('button', { name: /Copy/i });
+
+    await userEvent.click(goodBtn);
+    expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+
+    await userEvent.click(copyBtn);
+    expect(screen.getByRole('button', { name: /Copied/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(screen.getByText('Test message'));
+    expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+    expect(copyBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
   it('should not show actions if loading', async () => {
     render(
       <Message
@@ -523,6 +722,7 @@ describe('Message', () => {
       expect(screen.queryByRole('button', { name: label })).toBeFalsy();
     });
   });
+
   it('should render unordered lists correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content={UNORDERED_LIST} />);
     expect(screen.getByText('Here is an unordered list:')).toBeTruthy();