@patternfly/chatbot 1.0.0

package/dist/esm/Message/Message.test.js

@@ -0,0 +1,1123 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+// Mock the icon components
+jest.mock('@patternfly/react-icons', () => ({
+    OutlinedThumbsUpIcon: () => _jsx("div", { children: "OutlinedThumbsUpIcon" }),
+    ThumbsUpIcon: () => _jsx("div", { children: "ThumbsUpIcon" }),
+    OutlinedThumbsDownIcon: () => _jsx("div", { children: "OutlinedThumbsDownIcon" }),
+    ThumbsDownIcon: () => _jsx("div", { children: "ThumbsDownIcon" }),
+    OutlinedCopyIcon: () => _jsx("div", { children: "OutlinedCopyIcon" }),
+    DownloadIcon: () => _jsx("div", { children: "DownloadIcon" }),
+    ExternalLinkAltIcon: () => _jsx("div", { children: "ExternalLinkAltIcon" }),
+    VolumeUpIcon: () => _jsx("div", { children: "VolumeUpIcon" }),
+    PencilAltIcon: () => _jsx("div", { children: "PencilAltIcon" }),
+    CheckIcon: () => _jsx("div", { children: "CheckIcon" }),
+    CloseIcon: () => _jsx("div", { children: "CloseIcon" }),
+    ExternalLinkSquareAltIcon: () => _jsx("div", { children: "ExternalLinkSquareAltIcon" }),
+    TimesIcon: () => _jsx("div", { children: "TimesIcon" })
+}));
+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 = {
+    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: (_jsxs(Fragment, { children: [_jsx(AlertActionLink, { component: "a", href: "#", children: "Start a new chat" }), _jsx(AlertActionLink, { component: "a", href: "#", children: "Contact support" })] }))
+};
+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(_jsx(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 === null || element === void 0 ? void 0 : element.tagName.toLowerCase()) !== 'script' && (element === null || element === void 0 ? void 0 : 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(_jsx(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 === null || element === void 0 ? void 0 : element.tagName.toLowerCase()) !== 'script' && (element === null || element === void 0 ? void 0 : element.tagName.toLowerCase()) !== 'style';
+            return hasText && isVisible;
+        })).toBeInTheDocument();
+    });
+    it('should render avatar correctly', () => {
+        render(_jsx(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(_jsx(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(_jsx(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(_jsx(Message, { role: "user", name: "A", content: "Hi", isAvatarHidden: true }));
+        expect(screen.queryByRole('img')).not.toBeInTheDocument();
+    });
+    it('should not render bot avatar if isAvatarHidden is passed', () => {
+        render(_jsx(Message, { role: "bot", name: "Bot", content: "Hi", isAvatarHidden: true }));
+        expect(screen.queryByRole('img')).not.toBeInTheDocument();
+    });
+    it('should render botWord correctly', () => {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", botWord: "\u4EBA\u5DE5\u77E5\u80FD" }));
+        expect(screen.getByText('Bot')).toBeTruthy();
+        expect(screen.getByText('人工知能')).toBeTruthy();
+        expect(screen.queryByText('AI')).toBeFalsy();
+        expect(screen.getByText('Hi')).toBeTruthy();
+    });
+    it('should render timestamps', () => {
+        render(_jsx(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 === null || element === void 0 ? void 0 : element.tagName.toLowerCase()) !== 'script' && (element === null || element === void 0 ? void 0 : element.tagName.toLowerCase()) !== 'style';
+            return hasText && isVisible;
+        })).not.toBeInTheDocument();
+    });
+    it('Does not render metadata when isMetadataVisible is false', () => {
+        render(_jsx(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(_jsx(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(Message, { avatar: "./img", role: "user", content: "Hi", attachments: [{ name: 'testAttachment', onClick: spy }] }));
+        expect(screen.getByText('Hi')).toBeTruthy();
+        expect(screen.getByText('testAttachment')).toBeTruthy();
+        yield userEvent.click(screen.getByRole('button', { name: /testAttachment/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to close attachments', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(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();
+        yield userEvent.click(screen.getByRole('button', { name: /close testAttachment/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should render loading state', () => {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isLoading: true }));
+        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 === null || element === void 0 ? void 0 : element.tagName.toLowerCase()) !== 'script' && (element === null || element === void 0 ? void 0 : element.tagName.toLowerCase()) !== 'style';
+            return hasText && isVisible;
+        })).toBeInTheDocument();
+        expect(screen.getByText('Loading message')).toBeTruthy();
+    });
+    it('should be able to show sources', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(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(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isLoading: true, 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', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(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();
+        yield userEvent.click(quickResponse);
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to handle isCompact', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
+                {
+                    id: '1',
+                    content: 'Yes',
+                    onClick: jest.fn(),
+                    className: 'test'
+                }
+            ], isCompact: true }));
+        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', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Test message", persistActionSelection: true, 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 });
+        yield userEvent.click(goodBtn);
+        expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(screen.getByText('Test message'));
+        expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield 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', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Test message", persistActionSelection: true, 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 });
+        yield userEvent.click(goodBtn);
+        expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(screen.getByText('Test message'));
+        expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(copyBtn);
+        expect(screen.getByRole('button', { name: /Copied/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield 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', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(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 });
+        yield userEvent.click(goodBtn);
+        expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(copyBtn);
+        expect(screen.getByRole('button', { name: /Copied/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield 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', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isLoading: true, 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', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isEditable: true, 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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: { isExpandable: true } }));
+        const button = screen.getByRole('button', { name: /Show more/i });
+        yield 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', () => __awaiter(void 0, void 0, void 0, function* () {
+        // need explicit setup since RTL stubs clipboard if you do this
+        const user = userEvent.setup();
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
+        expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
+        yield user.click(screen.getByRole('button', { name: 'Copy code' }));
+        const clipboardText = yield navigator.clipboard.readText();
+        expect(clipboardText.trim()).toEqual(CODE.trim());
+    }));
+    it('should handle codeBlockProps correctly by spreading it onto the CodeMessage', () => {
+        render(_jsx(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(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: {
+                customActions: (_jsx(CodeBlockAction, { children: _jsx(Button, { children: "New custom action" }) }))
+            } }));
+        expect(screen.getByRole('button', { name: /New custom action/i })).toBeTruthy();
+    });
+    it('should handle hasRoundAvatar correctly when it is true', () => {
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", hasRoundAvatar: true }));
+        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(_jsx(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(_jsx(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(_jsx(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(_jsx(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
+                quickStart: monitorSampleAppQuickStart,
+                onSelectQuickStart: (id) => spy(id)
+            } }));
+        yield 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', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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 = _jsx("div", { children: beforeMainContentText });
+        render(_jsx(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 = _jsx("div", { children: afterMainContentText });
+        render(_jsx(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 = _jsx("div", { children: endMainContentText });
+        render(_jsx(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 = _jsx("div", { children: "Before main content" });
+        const afterMainContent = _jsx("div", { children: "After main content" });
+        const endContent = _jsx("div", { children: "End content" });
+        render(_jsx(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(_jsx(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(_jsx(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 = (_jsx("div", { "data-testid": "before-main-content", children: _jsx("strong", { children: "Bold before content" }) }));
+        const afterMainContent = (_jsx("div", { "data-testid": "after-main-content", children: _jsx("strong", { children: "Bold after content" }) }));
+        const endContent = (_jsx("div", { "data-testid": "end-main-content", children: _jsx("strong", { children: "Bold end content" }) }));
+        render(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: `[PatternFly](https://www.patternfly.org/)`, linkProps: { onClick: spy } }));
+        yield userEvent.click(screen.getByRole('link', { name: /PatternFly/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should handle error correctly', () => {
+        render(_jsx(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(_jsx(Message, { avatar: "./img", role: "user", name: "User", error: ERROR, isLoading: true }));
+        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(_jsx(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(_jsx(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, 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(_jsx(Message, { avatar: "./img", role: "user", name: "User", isEditable: true }));
+        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(_jsx(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, 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(_jsx(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, updateWord: "Submit" }));
+        expect(screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
+    });
+    it('should be able to change cancelWord', () => {
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, cancelWord: "Don't submit" }));
+        expect(screen.getByRole('button', { name: /Don't submit/i })).toBeTruthy();
+    });
+    it('should be able to add onEditUpdate', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditUpdate: spy }));
+        yield userEvent.click(screen.getByRole('button', { name: /Update/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to add onEditCancel', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditCancel: spy }));
+        yield userEvent.click(screen.getByRole('button', { name: /Cancel/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to add  editFormProps', () => {
+        const { container } = render(_jsx(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, editFormProps: { className: 'test' } }));
+        const form = container.querySelector('form');
+        expect(form).toHaveClass('test');
+    });
+    it('should be able to disable markdown parsing', () => {
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, isMarkdownDisabled: true }));
+        // 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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: INLINE_CODE, isPrimary: true }));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
+    it('should handle isPrimary correctly for inline code when it is false', () => {
+        const { container } = render(_jsx(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(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: TABLE, isPrimary: true }));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
+    it('should handle isPrimary correctly for table when it is false', () => {
+        const { container } = render(_jsx(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(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: "", isPrimary: true, isLoading: true }));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
+    it('should handle isPrimary correctly for loading when it is false', () => {
+        const { container } = render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: "", isLoading: true }));
+        expect(container.querySelector('.pf-m-primary')).toBeFalsy();
+    });
+    it('should handle isPrimary correctly for attachments when it is true', () => {
+        const { container } = render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: "", isPrimary: true, attachments: [{ name: 'testAttachment' }] }));
+        expect(container.querySelector('.pf-m-outline')).toBeTruthy();
+    });
+    it('should handle isPrimary correctly for attachments when it is false', () => {
+        const { container } = render(_jsx(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(_jsx(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(_jsx(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: {
+                positive: { onClick: jest.fn() }
+            } }));
+        expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+        yield 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', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: {
+                positive: { onClick: jest.fn() }
+            }, useFilledIconsOnClick: true }));
+        yield 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(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", showActionsOnInteraction: true, 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(_jsx(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(_jsx(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(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", showActionsOnInteraction: true, 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(_jsx(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(_jsx(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');
+    });
+});