@patternfly/chatbot 6.5.0-prerelease.3 → 6.5.0-prerelease.30

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();
@@ -1093,4 +1293,41 @@ describe('Message', () => {
     expect(screen.getByText('Thought for 3 seconds')).toBeTruthy();
     expect(screen.getByText("Here's why I said this.")).toBeTruthy();
   });
+  it('should handle isPrimary correctly for inline code when it is true', () => {
+    const { container } = render(<Message avatar="./img" role="user" name="User" content={INLINE_CODE} isPrimary />);
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
+  it('should handle isPrimary correctly for inline code when it is false', () => {
+    const { container } = render(<Message avatar="./img" role="user" name="User" content={INLINE_CODE} />);
+    expect(container.querySelector('.pf-m-primary')).toBeFalsy();
+  });
+  it('should handle isPrimary correctly for table when it is true', () => {
+    const { container } = render(<Message avatar="./img" role="user" name="User" content={TABLE} isPrimary />);
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
+  it('should handle isPrimary correctly for table when it is false', () => {
+    const { container } = render(<Message avatar="./img" role="user" name="User" content={TABLE} />);
+    expect(container.querySelector('.pf-m-primary')).toBeFalsy();
+  });
+  it('should handle isPrimary correctly for loading when it is true', () => {
+    const { container } = render(<Message avatar="./img" role="user" name="User" content="" isPrimary isLoading />);
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
+  it('should handle isPrimary correctly for loading when it is false', () => {
+    const { container } = render(<Message avatar="./img" role="user" name="User" content="" isLoading />);
+
+    expect(container.querySelector('.pf-m-primary')).toBeFalsy();
+  });
+  it('should handle isPrimary correctly for attachments when it is true', () => {
+    const { container } = render(
+      <Message avatar="./img" role="user" name="User" content="" isPrimary attachments={[{ name: 'testAttachment' }]} />
+    );
+    expect(container.querySelector('.pf-m-outline')).toBeTruthy();
+  });
+  it('should handle isPrimary correctly for attachments when it is false', () => {
+    const { container } = render(
+      <Message avatar="./img" role="user" name="User" content="" attachments={[{ name: 'testAttachment' }]} />
+    );
+    expect(container.querySelector('.pf-m-outline')).toBeFalsy();
+  });
 });