@patternfly/chatbot 6.3.0-prerelease.9 → 6.4.0-prerelease.2

package/dist/cjs/Message/Message.test.js

@@ -12,7 +12,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_2 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 const Message_1 = __importDefault(require("./Message"));
@@ -25,6 +26,7 @@ const ALL_ACTIONS = [
     { label: /Good response/i },
     { label: /Bad response/i },
     { label: /Copy/i },
+    { label: /Edit/i },
     { label: /Share/i },
     { label: /Listen/i }
 ];
@@ -140,12 +142,11 @@ const EMPTY_TABLE = `
 
  `;
 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 ERROR = {
     title: 'Could not load chat',
     children: 'Wait a few minutes and check your network settings. If the issue persists: ',
-    actionLinks: (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_core_1.AlertActionLink, { component: "a", href: "#" }, "Start a new chat"),
-        react_1.default.createElement(react_core_1.AlertActionLink, { component: "a", href: "#" }, "Contact support")))
+    actionLinks: ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.AlertActionLink, { component: "a", href: "#", children: "Start a new chat" }), (0, jsx_runtime_1.jsx)(react_core_1.AlertActionLink, { component: "a", href: "#", children: "Contact support" })] }))
 };
 const checkListItemsRendered = () => {
     const items = ['Item 1', 'Item 2', 'Item 3'];
@@ -160,7 +161,7 @@ describe('Message', () => {
         jest.clearAllMocks();
     });
     it('should render user messages correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi" }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi" }));
         expect(react_2.screen.getByText('User')).toBeTruthy();
         expect(react_2.screen.getByText('Hi')).toBeTruthy();
         const date = new Date();
@@ -174,7 +175,7 @@ describe('Message', () => {
         expect(react_2.screen.getByRole('img')).toHaveAttribute('src', './img');
     });
     it('should render bot messages correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi" }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi" }));
         expect(react_2.screen.getByText('Bot')).toBeTruthy();
         expect(react_2.screen.getByText('AI')).toBeTruthy();
         expect(react_2.screen.getByText('Hi')).toBeTruthy();
@@ -187,18 +188,18 @@ describe('Message', () => {
         })).toBeInTheDocument();
     });
     it('should render avatar correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./testImg", role: "bot", name: "Bot", content: "Hi" }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./testImg", role: "bot", name: "Bot", content: "Hi" }));
         expect(react_2.screen.getByRole('img')).toHaveAttribute('src', './testImg');
     });
     it('should render botWord correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", botWord: "\u4EBA\u5DE5\u77E5\u80FD" }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", botWord: "\u4EBA\u5DE5\u77E5\u80FD" }));
         expect(react_2.screen.getByText('Bot')).toBeTruthy();
         expect(react_2.screen.getByText('人工知能')).toBeTruthy();
         expect(react_2.screen.queryByText('AI')).toBeFalsy();
         expect(react_2.screen.getByText('Hi')).toBeTruthy();
     });
     it('should render timestamps', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", timestamp: "2 hours ago" }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", timestamp: "2 hours ago" }));
         expect(react_2.screen.getByText('Bot')).toBeTruthy();
         expect(react_2.screen.getByText('AI')).toBeTruthy();
         expect(react_2.screen.getByText('Hi')).toBeTruthy();
@@ -212,13 +213,13 @@ describe('Message', () => {
         })).not.toBeInTheDocument();
     });
     it('should render attachments', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", content: "Hi", attachments: [{ name: 'testAttachment' }] }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", content: "Hi", attachments: [{ name: 'testAttachment' }] }));
         expect(react_2.screen.getByText('Hi')).toBeTruthy();
         expect(react_2.screen.getByText('testAttachment')).toBeTruthy();
     });
     it('should be able to click attachments', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", content: "Hi", attachments: [{ name: 'testAttachment', onClick: spy }] }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", content: "Hi", attachments: [{ name: 'testAttachment', onClick: spy }] }));
         expect(react_2.screen.getByText('Hi')).toBeTruthy();
         expect(react_2.screen.getByText('testAttachment')).toBeTruthy();
         yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /testAttachment/i }));
@@ -226,7 +227,7 @@ describe('Message', () => {
     }));
     it('should be able to close attachments', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", content: "Hi", attachments: [{ name: 'testAttachment', onClose: spy }] }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", content: "Hi", attachments: [{ name: 'testAttachment', onClose: spy }] }));
         expect(react_2.screen.getByText('Hi')).toBeTruthy();
         expect(react_2.screen.getByText('testAttachment')).toBeTruthy();
         expect(react_2.screen.getByRole('button', { name: /close testAttachment/i })).toBeTruthy();
@@ -234,7 +235,7 @@ describe('Message', () => {
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should render loading state', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isLoading: true }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isLoading: true }));
         expect(react_2.screen.getByText('Bot')).toBeTruthy();
         expect(react_2.screen.getByText('AI')).toBeTruthy();
         expect(react_2.screen.queryByText('Hi')).toBeFalsy();
@@ -248,7 +249,7 @@ describe('Message', () => {
         expect(react_2.screen.getByText('Loading message')).toBeTruthy();
     });
     it('should be able to show sources', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", sources: {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", sources: {
                 sources: [
                     {
                         title: 'Getting started with Red Hat OpenShift',
@@ -260,7 +261,7 @@ describe('Message', () => {
         expect(react_2.screen.getByText('Getting started with Red Hat OpenShift')).toBeTruthy();
     }));
     it('should not show sources if loading', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isLoading: true, sources: {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isLoading: true, sources: {
                 sources: [
                     {
                         title: 'Getting started with Red Hat OpenShift',
@@ -274,7 +275,7 @@ describe('Message', () => {
     });
     it('should be able to show quick response', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
                 {
                     id: '1',
                     content: 'Yes',
@@ -288,7 +289,7 @@ describe('Message', () => {
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should be able to handle isCompact', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
                 {
                     id: '1',
                     content: 'Yes',
@@ -301,7 +302,7 @@ describe('Message', () => {
     }));
     it('should be able to show more than 1 quick response', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
                 {
                     id: '1',
                     content: 'Yes',
@@ -318,7 +319,7 @@ describe('Message', () => {
     }));
     it('should be able to spread quickResponseContainerProps', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
                 {
                     id: '1',
                     content: 'Yes',
@@ -338,7 +339,7 @@ describe('Message', () => {
         expect(react_2.screen.getByRole('button', { name: /1 more/i }));
     }));
     it('should be able to show actions', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { 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
@@ -346,8 +347,12 @@ describe('Message', () => {
                 // 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 }) => {
@@ -355,7 +360,7 @@ describe('Message', () => {
         });
     }));
     it('should not show actions if loading', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isLoading: true, actions: {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { 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
@@ -363,8 +368,12 @@ describe('Message', () => {
                 // 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(react_2.screen.getByText('Loading message')).toBeTruthy();
@@ -372,31 +381,52 @@ describe('Message', () => {
             expect(react_2.screen.queryByRole('button', { name: label })).toBeFalsy();
         });
     }));
+    it('should not show actions if isEditable is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { 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(react_2.screen.queryByRole('button', { name: label })).toBeFalsy();
+        });
+    }));
     it('should render unordered lists correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: UNORDERED_LIST }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: UNORDERED_LIST }));
         expect(react_2.screen.getByText('Here is an unordered list:')).toBeTruthy();
         checkListItemsRendered();
     });
     it('should render ordered lists correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ORDERED_LIST }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ORDERED_LIST }));
         expect(react_2.screen.getByText('Here is an ordered list:')).toBeTruthy();
         checkListItemsRendered();
     });
     it('should render ordered lists correctly if there is interstitial content', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ORDERED_LIST_WITH_CODE }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ORDERED_LIST_WITH_CODE }));
         checkListItemsRendered();
         const list = react_2.screen.getAllByRole('list')[1];
         expect(list).toHaveAttribute('start', '3');
     });
     it('should render inline code', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: INLINE_CODE }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: INLINE_CODE }));
         expect(react_2.screen.getByText(/() => void/i)).toBeTruthy();
         expect(react_2.screen.queryByRole('button', { name: 'Copy code button' })).toBeFalsy();
     });
     it('should render code correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
         expect(react_2.screen.getByText('Here is some YAML code:')).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
         expect(react_2.screen.getByText(/yaml/)).toBeTruthy();
         expect(react_2.screen.getByText(/apiVersion:/i)).toBeTruthy();
         expect(react_2.screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
@@ -408,44 +438,68 @@ describe('Message', () => {
         expect(react_2.screen.getByText(/url:/i)).toBeTruthy();
         expect(react_2.screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
     });
+    it('should render expandable code correctly', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: { isExpandable: true } }));
+        expect(react_2.screen.getByText('Here is some YAML code:')).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
+        expect(react_2.screen.getByText(/yaml/)).toBeTruthy();
+        expect(react_2.screen.getByText(/apiVersion/i)).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Show more/i })).toBeTruthy();
+    });
+    it('should handle click on expandable code correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: { isExpandable: true } }));
+        const button = react_2.screen.getByRole('button', { name: /Show more/i });
+        yield user_event_1.default.click(button);
+        expect(react_2.screen.getByRole('button', { name: /Show less/i })).toBeTruthy();
+        expect(react_2.screen.getByText(/yaml/)).toBeTruthy();
+        expect(react_2.screen.getByText(/apiVersion:/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/metadata:/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/name:/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/spec/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/connectionConfig:/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/url:/i)).toBeTruthy();
+        expect(react_2.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 = user_event_1.default.setup();
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
-        expect(react_2.screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
-        yield user.click(react_2.screen.getByRole('button', { name: 'Copy code button' }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
+        expect(react_2.screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
+        yield user.click(react_2.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', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: { 'aria-label': 'test' } }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: { 'aria-label': 'test' } }));
         expect(react_2.screen.getByRole('button', { name: 'test' })).toBeTruthy();
     });
     it('should handle hasRoundAvatar correctly when it is true', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", hasRoundAvatar: true }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", hasRoundAvatar: true }));
         expect(react_2.screen.getByRole('img')).toBeTruthy();
         expect(react_2.screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
         expect(react_2.screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar--round');
     });
     it('should handle hasRoundAvatar correctly when it is false', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", hasRoundAvatar: false }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", hasRoundAvatar: false }));
         expect(react_2.screen.getByRole('img')).toBeTruthy();
         expect(react_2.screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
         expect(react_2.screen.getByRole('img')).not.toHaveClass('pf-chatbot__message-avatar--round');
     });
     it('should handle avatarProps correctly by spreading it onto the Message Avatar', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", avatarProps: { className: 'test' } }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", avatarProps: { className: 'test' } }));
         expect(react_2.screen.getByRole('img')).toBeTruthy();
         expect(react_2.screen.getByRole('img')).toHaveClass('test');
     });
     it('should handle avatarProps and hasRoundAvatar correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", avatarProps: { className: 'test' }, hasRoundAvatar: false }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", avatarProps: { className: 'test' }, hasRoundAvatar: false }));
         expect(react_2.screen.getByRole('img')).toBeTruthy();
         expect(react_2.screen.getByRole('img')).toHaveClass('test');
         expect(react_2.screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
     });
     it('should handle QuickStart tile correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
                 quickStart: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart,
                 onSelectQuickStart: (id) => alert(id)
             } }));
@@ -456,7 +510,7 @@ describe('Message', () => {
     });
     it('should handle click on QuickStart tile correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
                 quickStart: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart,
                 onSelectQuickStart: (id) => spy(id)
             } }));
@@ -466,20 +520,20 @@ describe('Message', () => {
     }));
     it('should handle QuickStart tile with image correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
                 quickStart: monitor_sampleapp_quickstart_with_image_1.monitorSampleAppQuickStartWithImage,
                 onSelectQuickStart: (id) => spy(id)
             } }));
         expect(react_2.screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
     }));
     it('should handle block quote correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: BLOCK_QUOTES }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: BLOCK_QUOTES }));
         expect(react_2.screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
         expect(react_2.screen.getByText('...by using additional greater-than signs (>) right next to each other...')).toBeTruthy();
         expect(react_2.screen.getByText(/...or with spaces between each sign./)).toBeTruthy();
     });
     it('should handle heading correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: HEADING }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: HEADING }));
         expect(react_2.screen.getByRole('heading', { name: /h1 Heading/i })).toBeTruthy();
         expect(react_2.screen.getByRole('heading', { name: /h2 Heading/i })).toBeTruthy();
         expect(react_2.screen.getByRole('heading', { name: /h3 Heading/i })).toBeTruthy();
@@ -488,7 +542,7 @@ describe('Message', () => {
         expect(react_2.screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
     });
     it('should render table correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE }));
         expect(react_2.screen.getByRole('row', { name: /Column 1 Column 2/i })).toBeTruthy();
         expect(react_2.screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toBeTruthy();
         expect(react_2.screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toBeTruthy();
@@ -500,7 +554,7 @@ describe('Message', () => {
         expect(react_2.screen.getByRole('cell', { name: /Cell 4/i })).toBeTruthy();
     });
     it('should render table data labels correctly for mobile breakpoint', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE }));
         expect(react_2.screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
         expect(react_2.screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
         expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
@@ -509,70 +563,70 @@ describe('Message', () => {
         expect(react_2.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', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ONE_COLUMN_TABLE }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ONE_COLUMN_TABLE }));
         expect(react_2.screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
         expect(react_2.screen.getByRole('row', { name: /Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1');
         expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
         expect(react_2.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', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ONE_CELL_TABLE }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ONE_CELL_TABLE }));
         expect(react_2.screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
         expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
     });
     it('should render table data labels correctly for mobile breakpoint for headerless', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: HEADERLESS_TABLE }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: HEADERLESS_TABLE }));
         expect(react_2.screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', '');
         expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).not.toHaveAttribute('data-label');
     });
     it('should render table data labels correctly for mobile breakpoint for childless', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CHILDLESS_TABLE }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CHILDLESS_TABLE }));
         expect(react_2.screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', 'Column 1');
     });
     it('should render table data labels correctly for mobile breakpoint for empty', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: EMPTY_TABLE }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: EMPTY_TABLE }));
         expect(react_2.screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', '');
     });
     it('should render custom table aria label correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE, tableProps: { 'aria-label': 'Test' } }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE, tableProps: { 'aria-label': 'Test' } }));
         expect(react_2.screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
     });
     it('should render beforeMainContent with main content', () => {
         const mainContent = 'Main message content';
         const beforeMainContentText = 'Before main content';
-        const beforeMainContent = react_1.default.createElement("div", null, beforeMainContentText);
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { beforeMainContent } }));
+        const beforeMainContent = (0, jsx_runtime_1.jsx)("div", { children: beforeMainContentText });
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { beforeMainContent } }));
         expect(react_2.screen.getByText(beforeMainContentText)).toBeTruthy();
         expect(react_2.screen.getByText(mainContent)).toBeTruthy();
     });
     it('should render afterMainContent with main content', () => {
         const mainContent = 'Main message content';
         const afterMainContentText = 'After main content';
-        const afterMainContent = react_1.default.createElement("div", null, afterMainContentText);
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { afterMainContent } }));
+        const afterMainContent = (0, jsx_runtime_1.jsx)("div", { children: afterMainContentText });
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { afterMainContent } }));
         expect(react_2.screen.getByText(afterMainContentText)).toBeTruthy();
         expect(react_2.screen.getByText(mainContent)).toBeTruthy();
     });
     it('should render endContent with main content', () => {
         const mainContent = 'Main message content';
         const endMainContentText = 'End content';
-        const endContent = react_1.default.createElement("div", null, endMainContentText);
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { endContent } }));
+        const endContent = (0, jsx_runtime_1.jsx)("div", { children: endMainContentText });
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { endContent } }));
         expect(react_2.screen.getByText(endMainContentText)).toBeTruthy();
         expect(react_2.screen.getByText(mainContent)).toBeTruthy();
     });
     it('should render all parts of extraContent with main content', () => {
-        const beforeMainContent = react_1.default.createElement("div", null, "Before main content");
-        const afterMainContent = react_1.default.createElement("div", null, "After main content");
-        const endContent = react_1.default.createElement("div", null, "End content");
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent, afterMainContent, endContent } }));
+        const beforeMainContent = (0, jsx_runtime_1.jsx)("div", { children: "Before main content" });
+        const afterMainContent = (0, jsx_runtime_1.jsx)("div", { children: "After main content" });
+        const endContent = (0, jsx_runtime_1.jsx)("div", { children: "End content" });
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent, afterMainContent, endContent } }));
         expect(react_2.screen.getByText('Before main content')).toBeTruthy();
         expect(react_2.screen.getByText('Main message content')).toBeTruthy();
         expect(react_2.screen.getByText('After main content')).toBeTruthy();
         expect(react_2.screen.getByText('End content')).toBeTruthy();
     });
     it('should not render extraContent when not provided', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Main message content" }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Main message content" }));
         // Ensure no extraContent is rendered
         expect(react_2.screen.getByText('Main message content')).toBeTruthy();
         expect(react_2.screen.queryByText('Before main content')).toBeFalsy();
@@ -580,7 +634,7 @@ describe('Message', () => {
         expect(react_2.screen.queryByText('end message content')).toBeFalsy();
     });
     it('should handle undefined or null values in extraContent gracefully', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent: null, afterMainContent: undefined, endContent: null } }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { 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(react_2.screen.getByText('Main message content')).toBeTruthy();
         expect(react_2.screen.queryByText('Before main content')).toBeFalsy();
@@ -588,64 +642,66 @@ describe('Message', () => {
         expect(react_2.screen.queryByText('end message content')).toBeFalsy();
     });
     it('should render JSX in extraContent correctly', () => {
-        const beforeMainContent = (react_1.default.createElement("div", { "data-testid": "before-main-content" },
-            react_1.default.createElement("strong", null, "Bold before content")));
-        const afterMainContent = (react_1.default.createElement("div", { "data-testid": "after-main-content" },
-            react_1.default.createElement("strong", null, "Bold after content")));
-        const endContent = (react_1.default.createElement("div", { "data-testid": "end-main-content" },
-            react_1.default.createElement("strong", null, "Bold end content")));
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent, afterMainContent, endContent } }));
+        const beforeMainContent = ((0, jsx_runtime_1.jsx)("div", { "data-testid": "before-main-content", children: (0, jsx_runtime_1.jsx)("strong", { children: "Bold before content" }) }));
+        const afterMainContent = ((0, jsx_runtime_1.jsx)("div", { "data-testid": "after-main-content", children: (0, jsx_runtime_1.jsx)("strong", { children: "Bold after content" }) }));
+        const endContent = ((0, jsx_runtime_1.jsx)("div", { "data-testid": "end-main-content", children: (0, jsx_runtime_1.jsx)("strong", { children: "Bold end content" }) }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent, afterMainContent, endContent } }));
         // Check that the JSX is correctly rendered
         expect(react_2.screen.getByTestId('before-main-content')).toContainHTML('<strong>Bold before content</strong>');
         expect(react_2.screen.getByTestId('after-main-content')).toContainHTML('<strong>Bold after content</strong>');
         expect(react_2.screen.getByTestId('end-main-content')).toContainHTML('<strong>Bold end content</strong>');
     });
     it('should handle image correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: IMAGE }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: IMAGE }));
+        expect(react_2.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', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: INLINE_IMAGE }));
         expect(react_2.screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+        expect(react_2.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', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: `[PatternFly](https://www.patternfly.org/)` }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { 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(rehype_external_links_1.default).toHaveBeenCalledTimes(1);
     });
     it('should handle external links correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: `[PatternFly](https://www.patternfly.org/)`, openLinkInNewTab: false }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { 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(rehype_external_links_1.default).not.toHaveBeenCalled();
     });
     it('should handle extra link props correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: `[PatternFly](https://www.patternfly.org/)`, linkProps: { onClick: spy } }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: `[PatternFly](https://www.patternfly.org/)`, linkProps: { onClick: spy } }));
         yield user_event_1.default.click(react_2.screen.getByRole('link', { name: /PatternFly/i }));
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should handle error correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", error: ERROR }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", error: ERROR }));
         expect(react_2.screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
         expect(react_2.screen.getByRole('link', { name: /Start a new chat/i })).toBeTruthy();
         expect(react_2.screen.getByRole('link', { name: /Contact support/i })).toBeTruthy();
         expect(react_2.screen.getByText('Wait a few minutes and check your network settings. If the issue persists:')).toBeTruthy();
     });
     it('should handle error correctly when loading', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", error: ERROR, isLoading: true }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", error: ERROR, isLoading: true }));
         expect(react_2.screen.queryByRole('heading', { name: /Could not load chat/i })).toBeFalsy();
         expect(react_2.screen.getByText('Loading message')).toBeTruthy();
     });
     it('should handle error correctly when these is content', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", error: ERROR, content: "Test" }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", error: ERROR, content: "Test" }));
         expect(react_2.screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
         expect(react_2.screen.queryByText('Test')).toBeFalsy();
     });
     it('should handle isEditable when there is message content', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, content: "Test" }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, content: "Test" }));
         expect(react_2.screen.getByRole('textbox')).toBeTruthy();
         expect(react_2.screen.getByRole('textbox')).toHaveValue('Test');
         expect(react_2.screen.getByRole('button', { name: /Update/i })).toBeTruthy();
         expect(react_2.screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
     });
     it('should handle isEditable when there is no message content', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true }));
         expect(react_2.screen.getByRole('textbox')).toBeTruthy();
         expect(react_2.screen.getByRole('textbox')).toHaveValue('');
         expect(react_2.screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Edit prompt message...');
@@ -653,33 +709,33 @@ describe('Message', () => {
         expect(react_2.screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
     });
     it('should be able to change edit placeholder', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, editPlaceholder: "I am a placeholder" }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, editPlaceholder: "I am a placeholder" }));
         expect(react_2.screen.getByRole('textbox')).toBeTruthy();
         expect(react_2.screen.getByRole('textbox')).toHaveValue('');
         expect(react_2.screen.getByRole('textbox')).toHaveAttribute('placeholder', 'I am a placeholder');
     });
     it('should be able to change updateWord', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, updateWord: "Submit" }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, updateWord: "Submit" }));
         expect(react_2.screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
     });
     it('should be able to change cancelWord', () => {
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, cancelWord: "Don't submit" }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, cancelWord: "Don't submit" }));
         expect(react_2.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();
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditUpdate: spy }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditUpdate: spy }));
         yield user_event_1.default.click(react_2.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();
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditCancel: spy }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditCancel: spy }));
         yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Cancel/i }));
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should be able to add  editFormProps', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, editFormProps: { className: 'test' } }));
+        const { container } = (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, editFormProps: { className: 'test' } }));
         const form = container.querySelector('form');
         expect(form).toHaveClass('test');
     });