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';
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: "bot", name: "Bot", content: "Hi" }));
        expect(screen.getByRole('img')).toHaveAttribute('src', './testImg');
    });
    it('should not render avatar if no avatar prop is passed', () => {
        render(_jsx(Message, { role: "bot", name: "Bot", content: "Hi" }));
        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('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('should be able to show actions', () => __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 })).toBeTruthy();
        });
    }));
    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();
    });
});
