@patternfly/chatbot 6.8.0-prerelease.8 → 6.8.0-prerelease.9

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

@@ -1,1123 +0,0 @@
-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', () => (Object.assign(Object.assign({}, jest.requireActual('@patternfly/react-icons')), { RhUiLikeIcon: () => _jsx("div", { children: "RhUiLikeIcon" }), RhUiLikeFillIcon: () => _jsx("div", { children: "RhUiLikeFillIcon" }), RhUiDislikeIcon: () => _jsx("div", { children: "RhUiDislikeIcon" }), RhUiDislikeFillIcon: () => _jsx("div", { children: "RhUiDislikeFillIcon" }), RhUiCopyIcon: () => _jsx("div", { children: "RhUiCopyIcon" }), RhUiCopyFillIcon: () => _jsx("div", { children: "RhUiCopyFillIcon" }), RhUiEditIcon: () => _jsx("div", { children: "RhUiEditIcon" }), RhUiEditFillIcon: () => _jsx("div", { children: "RhUiEditFillIcon" }), RhUiVolumeUpIcon: () => _jsx("div", { children: "RhUiVolumeUpIcon" }), RhUiVolumeUpFillIcon: () => _jsx("div", { children: "RhUiVolumeUpFillIcon" }), RhUiExportIcon: () => _jsx("div", { children: "RhUiExportIcon" }), RhUiExportFillIcon: () => _jsx("div", { children: "RhUiExportFillIcon" }), RhMicronsInformationFillIcon: () => _jsx("div", { children: "RhMicronsInformationFillIcon" }), RhUiBackwardsIcon: () => _jsx("div", { children: "RhUiBackwardsIcon" }), RhMicronsExternalLinkIcon: () => _jsx("div", { children: "RhMicronsExternalLinkIcon" }), RhMicronsCheckmarkIcon: () => _jsx("div", { children: "RhMicronsCheckmarkIcon" }), RhMicronsCloseIcon: () => _jsx("div", { children: "RhMicronsCloseIcon" }), RhUiBookmarkIcon: () => _jsx("div", { children: "RhUiBookmarkIcon" }), RhUiClockIcon: () => _jsx("div", { children: "RhUiClockIcon" }), RhUiRocketFillIcon: () => _jsx("div", { children: "RhUiRocketFillIcon" }) })));
-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 TABLE_WITH_INLINE_CODE = `
-| Status | Finding |
-|---|---|
-| \`1/1 Running\`, 0 restarts | Healthy — no crashes |
-| \`1/1 Ready\` | Desired replicas met |
-`;
-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 wrap table cell content so inline code does not break grid layout', () => {
-        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: TABLE_WITH_INLINE_CODE, tableProps: { 'aria-label': 'Inline code table' } }));
-        const statusCell = screen.getByRole('cell', { name: /1\/1 Running/i });
-        expect(statusCell.querySelector(':scope > .pf-chatbot__message-table-cell-content')).toBeTruthy();
-        expect(statusCell.querySelector(':scope > code')).toBeFalsy();
-        expect(statusCell.querySelector('.pf-chatbot__message-inline-code')).toBeTruthy();
-        expect(screen.getByRole('columnheader', { name: /Status/i }).querySelector('.pf-chatbot__message-table-cell-content')).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('RhUiLikeIcon')).toBeInTheDocument();
-        yield user.click(screen.getByRole('button', { name: /Good response/i }));
-        expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
-        expect(screen.queryByText('RhUiLikeFillIcon')).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('RhUiLikeFillIcon')).toBeInTheDocument();
-        expect(screen.queryByText('RhUiLikeIcon')).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');
-    });
-});