@patternfly/chatbot 1.0.0

package/src/Message/Message.test.tsx

@@ -0,0 +1,1566 @@
+import { Fragment } from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Message from './Message';
+import userEvent from '@testing-library/user-event';
+import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quickstart';
+import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image';
+import rehypeExternalLinks from '../__mocks__/rehype-external-links';
+import { AlertActionLink, Button, CodeBlockAction } from '@patternfly/react-core';
+import { DeepThinkingProps } from '../DeepThinking';
+
+// Mock the icon components
+jest.mock('@patternfly/react-icons', () => ({
+  OutlinedThumbsUpIcon: () => <div>OutlinedThumbsUpIcon</div>,
+  ThumbsUpIcon: () => <div>ThumbsUpIcon</div>,
+  OutlinedThumbsDownIcon: () => <div>OutlinedThumbsDownIcon</div>,
+  ThumbsDownIcon: () => <div>ThumbsDownIcon</div>,
+  OutlinedCopyIcon: () => <div>OutlinedCopyIcon</div>,
+  DownloadIcon: () => <div>DownloadIcon</div>,
+  ExternalLinkAltIcon: () => <div>ExternalLinkAltIcon</div>,
+  VolumeUpIcon: () => <div>VolumeUpIcon</div>,
+  PencilAltIcon: () => <div>PencilAltIcon</div>,
+  CheckIcon: () => <div>CheckIcon</div>,
+  CloseIcon: () => <div>CloseIcon</div>,
+  ExternalLinkSquareAltIcon: () => <div>ExternalLinkSquareAltIcon</div>,
+  TimesIcon: () => <div>TimesIcon</div>
+}));
+
+const ALL_ACTIONS = [
+  { label: /Good response/i },
+  { label: /Bad response/i },
+  { label: /Copy/i },
+  { label: /Edit/i },
+  { label: /Share/i },
+  { label: /Listen/i }
+];
+
+const UNORDERED_LIST = `
+  Here is an unordered list:
+
+  * Item 1
+  * Item 2
+  * Item 3
+`;
+
+const ORDERED_LIST = `
+  Here is an ordered list:
+
+  1. Item 1
+  2. Item 2
+  3. Item 3
+`;
+
+const CODE_MESSAGE = `
+Here is some YAML code:
+
+~~~yaml
+apiVersion: helm.openshift.io/v1beta1/
+kind: HelmChartRepository
+metadata:
+  name: azure-sample-repo0oooo00ooo
+spec:
+  connectionConfig:
+  url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
+~~~`;
+
+const CODE = `
+apiVersion: helm.openshift.io/v1beta1/
+kind: HelmChartRepository
+metadata:
+  name: azure-sample-repo0oooo00ooo
+spec:
+  connectionConfig:
+  url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
+`;
+
+const INLINE_CODE = `Here is an inline code - \`() => void\``;
+
+const ORDERED_LIST_WITH_CODE = `
+1. Item 1
+2. Item 2
+
+\`\`\`yaml
+- name: Hello World Playbook
+  hosts: localhost
+  tasks:
+    - name: Print Hello World
+      ansible.builtin.debug:
+        msg: "Hello, World!"
+\`\`\`
+
+3. Item 3
+`;
+
+const HEADING = `
+# h1 Heading
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+`;
+
+const BLOCK_QUOTES = `> Blockquotes can also be nested...
+>> ...by using additional greater-than signs (>) right next to each other...
+> > > ...or with spaces between each sign.`;
+const TABLE = `
+
+ | Column 1 | Column 2 |
+ |-|-|
+ | Cell 1 | Cell 2 |
+ | Cell 3 | Cell 4 |
+
+ `;
+
+const ONE_COLUMN_TABLE = `
+
+ | Column 1 |
+ |-|
+ | Cell 1 | 
+ | Cell 2 |
+
+ `;
+
+const ONE_CELL_TABLE = `
+
+ | Column 1 |
+ |-|
+ | Cell 1 | 
+
+ `;
+
+const HEADERLESS_TABLE = `
+
+ | |
+ |-|
+ | Cell 1 | 
+
+ `;
+
+const CHILDLESS_TABLE = `
+
+ | Column 1 |
+ |-|
+ | | 
+
+ `;
+
+const EMPTY_TABLE = `
+
+ | |
+ |-|
+ | | 
+
+ `;
+
+const FOOTNOTE = `This is some text with a footnote[^1] and here's a longer one.[^bignote]
+
+ You can also reference the same footnote multiple times[^1].
+ 
+   [^1]: This is the full footnote text. You can click the arrow to go back up. 
+   
+   [^bignote]: Here's one with multiple paragraphs and **formatting**.
+ 
+       Indent paragraphs to include them in the footnote.
+ 
+       Add as many paragraphs as you like. You can include *italic text*, **bold text**, and even \`code\`.
+ 
+       > You can even include blockquotes in footnotes!`;
+
+const IMAGE = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+
+const INLINE_IMAGE = `inline text ![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+
+const DEEP_THINKING: DeepThinkingProps = {
+  toggleContent: 'Show thinking',
+  subheading: 'Thought for 3 seconds',
+  body: "Here's why I said this."
+};
+
+const ERROR = {
+  title: 'Could not load chat',
+  children: 'Wait a few minutes and check your network settings. If the issue persists: ',
+  actionLinks: (
+    <Fragment>
+      <AlertActionLink component="a" href="#">
+        Start a new chat
+      </AlertActionLink>
+      <AlertActionLink component="a" href="#">
+        Contact support
+      </AlertActionLink>
+    </Fragment>
+  )
+};
+const checkListItemsRendered = () => {
+  const items = ['Item 1', 'Item 2', 'Item 3'];
+  expect(screen.getAllByRole('listitem')).toHaveLength(3);
+  items.forEach((item) => {
+    // list item text gets wrapped in a span by the third-party library so we can't just check the listitem
+    expect(screen.getByText(item)).toBeTruthy();
+  });
+};
+
+describe('Message', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render user messages correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content="Hi" />);
+    expect(screen.getByText('User')).toBeTruthy();
+    expect(screen.getByText('Hi')).toBeTruthy();
+    const date = new Date();
+    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');
+  });
+  it('should render bot messages correctly', () => {
+    render(<Message avatar="./img" role="bot" name="Bot" content="Hi" />);
+    expect(screen.getByText('Bot')).toBeTruthy();
+    expect(screen.getByText('AI')).toBeTruthy();
+    expect(screen.getByText('Hi')).toBeTruthy();
+    const date = new Date();
+    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="user" name="A" content="Hi" />);
+    expect(screen.getByRole('img')).toHaveAttribute('src', './testImg');
+  });
+  it('should not render avatar if no avatar prop is passed', () => {
+    render(<Message role="user" name="A" content="Hi" />);
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+  it('should render bot avatar if no avatar prop is passed', () => {
+    render(<Message role="bot" name="Bot" content="Hi" />);
+    expect(screen.queryAllByRole('img', { hidden: true })[0]).toBeVisible();
+  });
+  it('should not render avatar if isAvatarHidden is passed', () => {
+    render(<Message role="user" name="A" content="Hi" isAvatarHidden />);
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+  it('should not render bot avatar if isAvatarHidden is passed', () => {
+    render(<Message role="bot" name="Bot" content="Hi" isAvatarHidden />);
+    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();
+    expect(screen.getByText('人工知能')).toBeTruthy();
+    expect(screen.queryByText('AI')).toBeFalsy();
+    expect(screen.getByText('Hi')).toBeTruthy();
+  });
+  it('should render timestamps', () => {
+    render(<Message avatar="./img" role="bot" name="Bot" content="Hi" timestamp="2 hours ago" />);
+    expect(screen.getByText('Bot')).toBeTruthy();
+    expect(screen.getByText('AI')).toBeTruthy();
+    expect(screen.getByText('Hi')).toBeTruthy();
+    expect(screen.getByText('2 hours ago')).toBeTruthy();
+    const date = new Date();
+    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('Does not render metadata when isMetadataVisible is false', () => {
+    render(
+      <Message isMetadataVisible={false} avatar="./img" role="bot" name="Bot" content="Hi" timestamp="2 hours ago" />
+    );
+
+    expect(screen.queryByText('Bot')).not.toBeInTheDocument();
+    expect(screen.queryByText('AI')).not.toBeInTheDocument();
+    expect(screen.queryByText('2 hours ago')).not.toBeInTheDocument();
+  });
+
+  it('should render attachments', () => {
+    render(<Message avatar="./img" role="user" content="Hi" attachments={[{ name: 'testAttachment' }]} />);
+    expect(screen.getByText('Hi')).toBeTruthy();
+    expect(screen.getByText('testAttachment')).toBeTruthy();
+  });
+  it('should be able to click attachments', async () => {
+    const spy = jest.fn();
+    render(
+      <Message avatar="./img" role="user" content="Hi" attachments={[{ name: 'testAttachment', onClick: spy }]} />
+    );
+    expect(screen.getByText('Hi')).toBeTruthy();
+    expect(screen.getByText('testAttachment')).toBeTruthy();
+    await userEvent.click(screen.getByRole('button', { name: /testAttachment/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should be able to close attachments', async () => {
+    const spy = jest.fn();
+    render(
+      <Message avatar="./img" role="user" content="Hi" attachments={[{ name: 'testAttachment', onClose: spy }]} />
+    );
+    expect(screen.getByText('Hi')).toBeTruthy();
+    expect(screen.getByText('testAttachment')).toBeTruthy();
+    expect(screen.getByRole('button', { name: /close testAttachment/i })).toBeTruthy();
+    await userEvent.click(screen.getByRole('button', { name: /close testAttachment/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should render loading state', () => {
+    render(<Message avatar="./img" role="bot" name="Bot" content="Hi" isLoading />);
+    expect(screen.getByText('Bot')).toBeTruthy();
+    expect(screen.getByText('AI')).toBeTruthy();
+    expect(screen.queryByText('Hi')).toBeFalsy();
+    const date = new Date();
+    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 () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        sources={{
+          sources: [
+            {
+              title: 'Getting started with Red Hat OpenShift',
+              link: '#',
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...'
+            }
+          ]
+        }}
+      />
+    );
+    expect(screen.getByText('Getting started with Red Hat OpenShift')).toBeTruthy();
+  });
+  it('should not show sources if loading', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        isLoading
+        sources={{
+          sources: [
+            {
+              title: 'Getting started with Red Hat OpenShift',
+              link: '#',
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...'
+            }
+          ]
+        }}
+      />
+    );
+    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 handle isCompact', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        quickResponses={[
+          {
+            id: '1',
+            content: 'Yes',
+            onClick: jest.fn(),
+            className: 'test'
+          }
+        ]}
+        isCompact
+      />
+    );
+    const parent = screen.getByRole('button', { name: /Yes/i }).parentNode;
+    expect(parent).toHaveClass('pf-m-compact');
+  });
+  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('Renders response actions when a single actions object 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 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
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        isLoading
+        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') }
+        }}
+      />
+    );
+    expect(screen.getByText('Loading message')).toBeTruthy();
+    ALL_ACTIONS.forEach(({ label }) => {
+      expect(screen.queryByRole('button', { name: label })).toBeFalsy();
+    });
+  });
+  it('should not show actions if isEditable is true', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        isEditable
+        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.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();
+    checkListItemsRendered();
+  });
+  it('should render ordered lists correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={ORDERED_LIST} />);
+    expect(screen.getByText('Here is an ordered list:')).toBeTruthy();
+    checkListItemsRendered();
+  });
+  it('should render ordered lists correctly if there is interstitial content', () => {
+    render(<Message avatar="./img" role="user" name="User" content={ORDERED_LIST_WITH_CODE} />);
+    checkListItemsRendered();
+    const list = screen.getAllByRole('list')[1];
+    expect(list).toHaveAttribute('start', '3');
+  });
+  it('should render inline code', () => {
+    render(<Message avatar="./img" role="user" name="User" content={INLINE_CODE} />);
+    expect(screen.getByText(/() => void/i)).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Copy code button' })).toBeFalsy();
+  });
+  it('should render code correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
+    expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
+    expect(screen.getByText(/yaml/)).toBeTruthy();
+    expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
+    expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
+    expect(screen.getByText(/metadata:/i)).toBeTruthy();
+    expect(screen.getByText(/name:/i)).toBeTruthy();
+    expect(screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+    expect(screen.getByText(/spec/i)).toBeTruthy();
+    expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
+    expect(screen.getByText(/url:/i)).toBeTruthy();
+    expect(
+      screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)
+    ).toBeTruthy();
+  });
+  it('should render expandable code correctly', () => {
+    render(
+      <Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} codeBlockProps={{ isExpandable: true }} />
+    );
+    expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
+    expect(screen.getByText(/yaml/)).toBeTruthy();
+    expect(screen.getByText(/apiVersion/i)).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Show more/i })).toBeTruthy();
+  });
+  it('should handle click on expandable code correctly', async () => {
+    render(
+      <Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} codeBlockProps={{ isExpandable: true }} />
+    );
+    const button = screen.getByRole('button', { name: /Show more/i });
+    await userEvent.click(button);
+    expect(screen.getByRole('button', { name: /Show less/i })).toBeTruthy();
+    expect(screen.getByText(/yaml/)).toBeTruthy();
+    expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
+    expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
+    expect(screen.getByText(/metadata:/i)).toBeTruthy();
+    expect(screen.getByText(/name:/i)).toBeTruthy();
+    expect(screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+    expect(screen.getByText(/spec/i)).toBeTruthy();
+    expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
+    expect(screen.getByText(/url:/i)).toBeTruthy();
+    expect(
+      screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)
+    ).toBeTruthy();
+  });
+  it('can click copy code button', async () => {
+    // need explicit setup since RTL stubs clipboard if you do this
+    const user = userEvent.setup();
+    render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
+    expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
+    await user.click(screen.getByRole('button', { name: 'Copy code' }));
+    const clipboardText = await navigator.clipboard.readText();
+    expect(clipboardText.trim()).toEqual(CODE.trim());
+  });
+  it('should handle codeBlockProps correctly by spreading it onto the CodeMessage', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={CODE_MESSAGE}
+        codeBlockProps={{ 'aria-label': 'test' }}
+      />
+    );
+    expect(screen.getByRole('button', { name: 'test' })).toBeTruthy();
+  });
+  it('should be able to add custom actions to CodeMessage', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={CODE_MESSAGE}
+        codeBlockProps={{
+          customActions: (
+            <CodeBlockAction>
+              <Button>New custom action</Button>
+            </CodeBlockAction>
+          )
+        }}
+      />
+    );
+    expect(screen.getByRole('button', { name: /New custom action/i })).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');
+  });
+  it('should handle QuickStart tile correctly', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStart,
+          onSelectQuickStart: (id) => alert(id)
+        }}
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Monitoring your sample application' })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: '1 Prerequisite' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Show prerequisites' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Start' })).toBeTruthy();
+  });
+  it('should handle click on QuickStart tile correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStart,
+          onSelectQuickStart: (id) => spy(id)
+        }}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Monitoring your sample application' }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(monitorSampleAppQuickStart.metadata.name);
+  });
+  it('should handle QuickStart tile with image correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStartWithImage,
+          onSelectQuickStart: (id) => spy(id)
+        }}
+      />
+    );
+    expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
+  });
+  it('should handle tool response correctly', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        toolResponse={{
+          toggleContent: 'Tool response: Name',
+          subheading: 'Thought for 3 seconds',
+          body: 'Lorem ipsum dolor sit amet',
+          cardTitle: 'Card title',
+          cardBody: 'Card body'
+        }}
+      />
+    );
+    expect(screen.getByRole('button', { name: /Tool response: Name/i })).toBeTruthy();
+    expect(screen.getByText('Thought for 3 seconds')).toBeTruthy();
+    expect(screen.getByText('Lorem ipsum dolor sit amet')).toBeTruthy();
+    expect(screen.getByText('Card title')).toBeTruthy();
+    expect(screen.getByText('Card body')).toBeTruthy();
+  });
+  it('should handle block quote correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={BLOCK_QUOTES} />);
+    expect(screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
+    expect(screen.getByText('...by using additional greater-than signs (>) right next to each other...')).toBeTruthy();
+    expect(screen.getByText(/...or with spaces between each sign./)).toBeTruthy();
+  });
+  it('should handle heading correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={HEADING} />);
+    expect(screen.getByRole('heading', { name: /h1 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h2 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h3 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h4 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h5 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
+  });
+  it('should render table correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={TABLE} />);
+    expect(screen.getByRole('row', { name: /Column 1 Column 2/i })).toBeTruthy();
+    expect(screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toBeTruthy();
+    expect(screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toBeTruthy();
+    expect(screen.getByRole('columnheader', { name: /Column 1/i })).toBeTruthy();
+    expect(screen.getByRole('columnheader', { name: /Column 2/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 2/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 3/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 4/i })).toBeTruthy();
+  });
+  it('should render table data labels correctly for mobile breakpoint', () => {
+    render(<Message avatar="./img" role="user" name="User" content={TABLE} />);
+    expect(screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
+    expect(screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+    expect(screen.getByRole('cell', { name: /Cell 2/i })).toHaveAttribute('data-label', 'Column 2');
+    expect(screen.getByRole('cell', { name: /Cell 3/i })).toHaveAttribute('data-label', 'Column 1');
+    expect(screen.getByRole('cell', { name: /Cell 4/i })).toHaveAttribute('data-label', 'Column 2');
+  });
+  it('should render table data labels correctly for mobile breakpoint for one column table', () => {
+    render(<Message avatar="./img" role="user" name="User" content={ONE_COLUMN_TABLE} />);
+    expect(screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
+    expect(screen.getByRole('row', { name: /Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1');
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+    expect(screen.getByRole('cell', { name: /Cell 2/i })).toHaveAttribute('data-label', 'Column 1');
+  });
+  it('should render table data labels correctly for mobile breakpoint for one cell table', () => {
+    render(<Message avatar="./img" role="user" name="User" content={ONE_CELL_TABLE} />);
+    expect(screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+  });
+  it('should render table data labels correctly for mobile breakpoint for headerless', () => {
+    render(<Message avatar="./img" role="user" name="User" content={HEADERLESS_TABLE} />);
+    expect(screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', '');
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).not.toHaveAttribute('data-label');
+  });
+  it('should render table data labels correctly for mobile breakpoint for childless', () => {
+    render(<Message avatar="./img" role="user" name="User" content={CHILDLESS_TABLE} />);
+    expect(screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', 'Column 1');
+  });
+  it('should render table data labels correctly for mobile breakpoint for empty', () => {
+    render(<Message avatar="./img" role="user" name="User" content={EMPTY_TABLE} />);
+    expect(screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', '');
+  });
+  it('should render custom table aria label correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={TABLE} tableProps={{ 'aria-label': 'Test' }} />);
+    expect(screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
+  });
+  it('should render footnote correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={FOOTNOTE} />);
+    expect(screen.getByText(/This is some text with a footnote/i)).toBeTruthy();
+    expect(screen.getByText(/and here's a longer one./i)).toBeTruthy();
+    expect(screen.getByText(/You can also reference the same footnote multiple times./i)).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /Footnotes/i })).toBeTruthy();
+    expect(screen.getByText(/This is the full footnote text. You can click the arrow to go back up./i)).toBeTruthy();
+    expect(screen.getByText(/Here's one with multiple paragraphs and/i)).toBeTruthy();
+    expect(screen.getByText(/formatting/i)).toBeTruthy();
+    expect(screen.getByText(/Indent paragraphs to include them in the footnote./i)).toBeTruthy();
+    expect(screen.getByText(/Add as many paragraphs as you like. You can include/i)).toBeTruthy();
+    expect(screen.getByText(/italic text/i)).toBeTruthy();
+    expect(screen.getByText(/bold text/i)).toBeTruthy();
+    expect(screen.getByText(/, and even/i)).toBeTruthy();
+    expect(screen.getByText(/code/i)).toBeTruthy();
+    expect(screen.getByText(/You can even include blockquotes in footnotes!/i)).toBeTruthy();
+    expect(screen.getAllByRole('link', { name: '1' })).toHaveLength(2);
+    expect(screen.getAllByRole('link', { name: '2' })).toBeTruthy();
+    expect(screen.getByRole('link', { name: 'Back to reference 1' })).toBeTruthy();
+    expect(screen.getByRole('link', { name: 'Back to reference 1-2' })).toBeTruthy();
+    expect(screen.getByRole('link', { name: /Back to reference 2/i })).toBeTruthy();
+  });
+  it('should render beforeMainContent with main content', () => {
+    const mainContent = 'Main message content';
+    const beforeMainContentText = 'Before main content';
+    const beforeMainContent = <div>{beforeMainContentText}</div>;
+
+    render(
+      <Message avatar="./img" role="user" name="User" content={mainContent} extraContent={{ beforeMainContent }} />
+    );
+
+    expect(screen.getByText(beforeMainContentText)).toBeTruthy();
+    expect(screen.getByText(mainContent)).toBeTruthy();
+  });
+  it('should render afterMainContent with main content', () => {
+    const mainContent = 'Main message content';
+    const afterMainContentText = 'After main content';
+    const afterMainContent = <div>{afterMainContentText}</div>;
+
+    render(
+      <Message avatar="./img" role="user" name="User" content={mainContent} extraContent={{ afterMainContent }} />
+    );
+
+    expect(screen.getByText(afterMainContentText)).toBeTruthy();
+    expect(screen.getByText(mainContent)).toBeTruthy();
+  });
+
+  it('should render endContent with main content', () => {
+    const mainContent = 'Main message content';
+    const endMainContentText = 'End content';
+    const endContent = <div>{endMainContentText}</div>;
+
+    render(<Message avatar="./img" role="user" name="User" content={mainContent} extraContent={{ endContent }} />);
+
+    expect(screen.getByText(endMainContentText)).toBeTruthy();
+    expect(screen.getByText(mainContent)).toBeTruthy();
+  });
+  it('should render all parts of extraContent with main content', () => {
+    const beforeMainContent = <div>Before main content</div>;
+    const afterMainContent = <div>After main content</div>;
+    const endContent = <div>End content</div>;
+
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Main message content"
+        extraContent={{ beforeMainContent, afterMainContent, endContent }}
+      />
+    );
+
+    expect(screen.getByText('Before main content')).toBeTruthy();
+    expect(screen.getByText('Main message content')).toBeTruthy();
+    expect(screen.getByText('After main content')).toBeTruthy();
+    expect(screen.getByText('End content')).toBeTruthy();
+  });
+
+  it('should not render extraContent when not provided', () => {
+    render(<Message avatar="./img" role="user" name="User" content="Main message content" />);
+
+    // Ensure no extraContent is rendered
+    expect(screen.getByText('Main message content')).toBeTruthy();
+    expect(screen.queryByText('Before main content')).toBeFalsy();
+    expect(screen.queryByText('After main content')).toBeFalsy();
+    expect(screen.queryByText('end message content')).toBeFalsy();
+  });
+
+  it('should handle undefined or null values in extraContent gracefully', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Main message content"
+        extraContent={{ beforeMainContent: null, afterMainContent: undefined, endContent: null }}
+      />
+    );
+
+    // Ensure that no extraContent is rendered if they are null or undefined
+    expect(screen.getByText('Main message content')).toBeTruthy();
+    expect(screen.queryByText('Before main content')).toBeFalsy();
+    expect(screen.queryByText('After main content')).toBeFalsy();
+    expect(screen.queryByText('end message content')).toBeFalsy();
+  });
+  it('should render JSX in extraContent correctly', () => {
+    const beforeMainContent = (
+      <div data-testid="before-main-content">
+        <strong>Bold before content</strong>
+      </div>
+    );
+    const afterMainContent = (
+      <div data-testid="after-main-content">
+        <strong>Bold after content</strong>
+      </div>
+    );
+    const endContent = (
+      <div data-testid="end-main-content">
+        <strong>Bold end content</strong>
+      </div>
+    );
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Main message content"
+        extraContent={{ beforeMainContent, afterMainContent, endContent }}
+      />
+    );
+
+    // Check that the JSX is correctly rendered
+    expect(screen.getByTestId('before-main-content')).toContainHTML('<strong>Bold before content</strong>');
+    expect(screen.getByTestId('after-main-content')).toContainHTML('<strong>Bold after content</strong>');
+    expect(screen.getByTestId('end-main-content')).toContainHTML('<strong>Bold end content</strong>');
+  });
+  it('should handle image correctly for user', () => {
+    render(<Message avatar="./img" role="user" name="User" content={IMAGE} />);
+    expect(screen.queryByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeFalsy();
+  });
+  it('should handle image correctly for bot', () => {
+    render(<Message avatar="./img" role="bot" name="Bot" content={IMAGE} />);
+    expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+  });
+  it('inline image parent should have class pf-chatbot__message-and-actions', () => {
+    render(<Message avatar="./img" role="bot" name="Bot" content={INLINE_IMAGE} />);
+    expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+    expect(
+      screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i }).parentElement
+    ).toHaveClass('pf-chatbot__message-and-actions');
+  });
+  it('should handle external links correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={`[PatternFly](https://www.patternfly.org/)`} />);
+    // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL
+    expect(rehypeExternalLinks).toHaveBeenCalledTimes(1);
+  });
+  it('should handle external links correctly', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={`[PatternFly](https://www.patternfly.org/)`}
+        openLinkInNewTab={false}
+      />
+    );
+    // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL
+    expect(rehypeExternalLinks).not.toHaveBeenCalled();
+  });
+  it('should handle extra link props correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={`[PatternFly](https://www.patternfly.org/)`}
+        linkProps={{ onClick: spy }}
+      />
+    );
+    await userEvent.click(screen.getByRole('link', { name: /PatternFly/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should handle error correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" error={ERROR} />);
+    expect(screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
+    expect(screen.getByRole('link', { name: /Start a new chat/i })).toBeTruthy();
+    expect(screen.getByRole('link', { name: /Contact support/i })).toBeTruthy();
+    expect(screen.getByText('Wait a few minutes and check your network settings. If the issue persists:')).toBeTruthy();
+  });
+  it('should handle error correctly when loading', () => {
+    render(<Message avatar="./img" role="user" name="User" error={ERROR} isLoading />);
+    expect(screen.queryByRole('heading', { name: /Could not load chat/i })).toBeFalsy();
+    expect(screen.getByText('Loading message')).toBeTruthy();
+  });
+  it('should handle error correctly when these is content', () => {
+    render(<Message avatar="./img" role="user" name="User" error={ERROR} content="Test" />);
+    expect(screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
+    expect(screen.queryByText('Test')).toBeFalsy();
+  });
+  it('should handle isEditable when there is message content', () => {
+    render(<Message avatar="./img" role="user" name="User" isEditable content="Test" />);
+    expect(screen.getByRole('textbox')).toBeTruthy();
+    expect(screen.getByRole('textbox')).toHaveValue('Test');
+    expect(screen.getByRole('button', { name: /Update/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
+  });
+  it('should handle isEditable when there is no message content', () => {
+    render(<Message avatar="./img" role="user" name="User" isEditable />);
+    expect(screen.getByRole('textbox')).toBeTruthy();
+    expect(screen.getByRole('textbox')).toHaveValue('');
+    expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Edit prompt message...');
+    expect(screen.getByRole('button', { name: /Update/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
+  });
+  it('should be able to change edit placeholder', () => {
+    render(<Message avatar="./img" role="user" name="User" isEditable editPlaceholder="I am a placeholder" />);
+    expect(screen.getByRole('textbox')).toBeTruthy();
+    expect(screen.getByRole('textbox')).toHaveValue('');
+    expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'I am a placeholder');
+  });
+  it('should be able to change updateWord', () => {
+    render(<Message avatar="./img" role="user" name="User" isEditable updateWord="Submit" />);
+    expect(screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
+  });
+  it('should be able to change cancelWord', () => {
+    render(<Message avatar="./img" role="user" name="User" isEditable cancelWord="Don't submit" />);
+    expect(screen.getByRole('button', { name: /Don't submit/i })).toBeTruthy();
+  });
+  it('should be able to add onEditUpdate', async () => {
+    const spy = jest.fn();
+    render(<Message avatar="./img" role="user" name="User" isEditable onEditUpdate={spy} />);
+    await userEvent.click(screen.getByRole('button', { name: /Update/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should be able to add onEditCancel', async () => {
+    const spy = jest.fn();
+    render(<Message avatar="./img" role="user" name="User" isEditable onEditCancel={spy} />);
+    await userEvent.click(screen.getByRole('button', { name: /Cancel/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should be able to add  editFormProps', () => {
+    const { container } = render(
+      <Message avatar="./img" role="user" name="User" isEditable editFormProps={{ className: 'test' }} />
+    );
+    const form = container.querySelector('form');
+    expect(form).toHaveClass('test');
+  });
+  it('should be able to disable markdown parsing', () => {
+    render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} isMarkdownDisabled />);
+    // this is looking for markdown syntax that is ordinarily stripped
+    expect(screen.getByText(/~~~yaml/i)).toBeTruthy();
+  });
+  it('should be able to pass props to react-markdown, such as disabling tags', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={CODE_MESSAGE}
+        reactMarkdownProps={{ disallowedElements: ['code'] }}
+      />
+    );
+    expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
+    // code block isn't rendering
+    expect(screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
+  });
+  it('should disable images and additional tags for user messages', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={`${IMAGE} ${CODE_MESSAGE}`}
+        reactMarkdownProps={{ disallowedElements: ['code'] }}
+      />
+    );
+    expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
+    // code block isn't rendering
+    expect(screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
+    expect(screen.queryByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeFalsy();
+  });
+  it('can override image tag removal default for user messages', () => {
+    render(<Message avatar="./img" role="user" name="User" content={IMAGE} hasNoImagesInUserMessages={false} />);
+    expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+  });
+  it('should render deep thinking section correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content="" deepThinking={DEEP_THINKING} />);
+    expect(screen.getByRole('button', { name: /Show thinking/i })).toBeTruthy();
+    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();
+  });
+
+  it('Renders without pf-m-end class by default', () => {
+    render(<Message avatar="./img" role="user" name="User" content="" />);
+    expect(screen.getByRole('region')).not.toHaveClass('pf-m-end');
+  });
+
+  it('Renders with pf-m-end class when alignment="end"', () => {
+    render(<Message alignment="end" avatar="./img" role="user" name="User" content="" />);
+    expect(screen.getByRole('region')).toHaveClass('pf-m-end');
+  });
+
+  // We're just testing the positive action here to ensure logic passes through as needed, the other actions are
+  // tested in ResponseActions.test.tsx along with other aspects of this functionality
+  it('should not swap icons when useFilledIconsOnClick is omitted', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        actions={{
+          positive: { onClick: jest.fn() }
+        }}
+      />
+    );
+
+    expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: /Good response/i }));
+
+    expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+    expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
+  });
+
+  it('should swap icons when useFilledIconsOnClick is true', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        actions={{
+          positive: { onClick: jest.fn() }
+        }}
+        useFilledIconsOnClick
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: /Good response/i }));
+
+    expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+    expect(screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
+  });
+
+  it('should apply pf-m-visible-interaction class to response actions when showActionsOnInteraction is true', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        showActionsOnInteraction
+        actions={{
+          positive: { onClick: jest.fn() }
+        }}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions');
+    expect(responseContainer).toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class to response actions when showActionsOnInteraction is false', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        showActionsOnInteraction={false}
+        actions={{
+          positive: { onClick: jest.fn() }
+        }}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions');
+    expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class to response actions by default', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        actions={{
+          positive: { onClick: jest.fn() }
+        }}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions');
+    expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should apply pf-m-visible-interaction class to grouped actions container when showActionsOnInteraction is true', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        showActionsOnInteraction
+        actions={[
+          {
+            positive: { onClick: jest.fn() },
+            negative: { onClick: jest.fn() }
+          },
+          {
+            copy: { onClick: jest.fn() }
+          }
+        ]}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions-groups');
+    expect(responseContainer).toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class to grouped actions container when showActionsOnInteraction is false', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        showActionsOnInteraction={false}
+        actions={[
+          {
+            positive: { onClick: jest.fn() },
+            negative: { onClick: jest.fn() }
+          },
+          {
+            copy: { onClick: jest.fn() }
+          }
+        ]}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions-groups');
+    expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class to grouped actions container by default', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        actions={[
+          {
+            positive: { onClick: jest.fn() },
+            negative: { onClick: jest.fn() }
+          },
+          {
+            copy: { onClick: jest.fn() }
+          }
+        ]}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions-groups');
+    expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+  });
+});