@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.21

package/dist/esm/SourcesCard/SourcesCard.js

@@ -9,17 +9,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Chatbot Main - Messages - Sources Card
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 // Import PatternFly components
 import { Button, ButtonVariant, Card, CardBody, CardFooter, CardTitle, ExpandableSection, ExpandableSectionVariant, Icon, pluralize, Truncate } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 const SourcesCard = (_a) => {
-    var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less' } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords"]);
-    const [page, setPage] = React.useState(1);
-    const [isExpanded, setIsExpanded] = React.useState(false);
+    var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less', isCompact } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact"]);
+    const [page, setPage] = useState(1);
+    const [isExpanded, setIsExpanded] = useState(false);
     const onToggle = (_event, isExpanded) => {
         setIsExpanded(isExpanded);
     };
@@ -29,41 +27,20 @@ const SourcesCard = (_a) => {
     };
     const renderTitle = (title) => {
         if (title) {
-            return React.createElement(Truncate, { content: title });
+            return _jsx(Truncate, { content: title });
         }
         return `Source ${page}`;
     };
-    return (React.createElement("div", { className: "pf-chatbot__source" },
-        React.createElement("span", null, pluralize(sources.length, sourceWord, sourceWordPlural)),
-        React.createElement(Card, Object.assign({ className: "pf-chatbot__sources-card" }, props),
-            React.createElement(CardTitle, { className: "pf-chatbot__sources-card-title" },
-                React.createElement(Button, { component: "a", variant: ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? React.createElement(ExternalLinkSquareAltIcon, null) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined }, renderTitle(sources[page - 1].title))),
-            sources[page - 1].body && (React.createElement(CardBody, { className: `pf-chatbot__sources-card-body` }, sources[page - 1].hasShowMore ? (
-            // prevents extra VO announcements of button text - parent Message has aria-live
-            React.createElement("div", { "aria-live": "off" },
-                React.createElement(ExpandableSection, { variant: ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2 }, sources[page - 1].body))) : (React.createElement("div", { className: "pf-chatbot__sources-card-body-text" }, sources[page - 1].body)))),
-            sources.length > 1 && (React.createElement(CardFooter, { className: "pf-chatbot__sources-card-footer-container" },
-                React.createElement("div", { className: "pf-chatbot__sources-card-footer" },
-                    React.createElement("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel },
-                        React.createElement(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
-                                const newPage = page >= 1 ? page - 1 : 1;
-                                onPreviousClick && onPreviousClick(event, newPage);
-                                handleNewPage(event, newPage);
-                            }, "aria-label": toPreviousPageAriaLabel },
-                            React.createElement(Icon, { iconSize: "lg" },
-                                React.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 280 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
-                                    React.createElement("path", { d: "M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" })))),
-                        React.createElement("span", { "aria-hidden": "true" },
-                            page,
-                            "/",
-                            sources.length),
-                        React.createElement(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === sources.length, "aria-label": toNextPageAriaLabel, "data-action": "next", onClick: (event) => {
-                                const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
-                                onNextClick && onNextClick(event, newPage);
-                                handleNewPage(event, newPage);
-                            } },
-                            React.createElement(Icon, { isInline: true, iconSize: "lg" },
-                                React.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
-                                    React.createElement("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" })))))))))));
+    return (_jsxs("div", { className: "pf-chatbot__source", children: [_jsx("span", { children: pluralize(sources.length, sourceWord, sourceWordPlural) }), _jsxs(Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [_jsx(CardTitle, { className: "pf-chatbot__sources-card-title", children: _jsx(Button, { component: "a", variant: ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? _jsx(ExternalLinkSquareAltIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, children: renderTitle(sources[page - 1].title) }) }), sources[page - 1].body && (_jsx(CardBody, { className: `pf-chatbot__sources-card-body`, children: sources[page - 1].hasShowMore ? (
+                        // prevents extra VO announcements of button text - parent Message has aria-live
+                        _jsx("div", { "aria-live": "off", children: _jsx(ExpandableSection, { variant: ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : (_jsx("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) })), sources.length > 1 && (_jsx(CardFooter, { className: "pf-chatbot__sources-card-footer-container", children: _jsx("div", { className: "pf-chatbot__sources-card-footer", children: _jsxs("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [_jsx(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
+                                            const newPage = page >= 1 ? page - 1 : 1;
+                                            onPreviousClick && onPreviousClick(event, newPage);
+                                            handleNewPage(event, newPage);
+                                        }, "aria-label": toPreviousPageAriaLabel, children: _jsx(Icon, { iconSize: "lg", children: _jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 280 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _jsx("path", { d: "M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" }) }) }) }), _jsxs("span", { "aria-hidden": "true", children: [page, "/", sources.length] }), _jsx(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === sources.length, "aria-label": toNextPageAriaLabel, "data-action": "next", onClick: (event) => {
+                                            const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
+                                            onNextClick && onNextClick(event, newPage);
+                                            handleNewPage(event, newPage);
+                                        }, children: _jsx(Icon, { isInline: true, iconSize: "lg", children: _jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _jsx("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }) }) }) })] }) }) }))] }))] }));
 };
 export default SourcesCard;

package/dist/esm/SourcesCard/SourcesCard.test.js

@@ -7,14 +7,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import SourcesCard from './SourcesCard';
 describe('SourcesCard', () => {
     it('should render card correctly if one source with only a link is passed in', () => {
-        render(React.createElement(SourcesCard, { sources: [{ link: '' }] }));
+        render(_jsx(SourcesCard, { sources: [{ link: '' }] }));
         expect(screen.getByText('1 source')).toBeTruthy();
         expect(screen.getByText('Source 1')).toBeTruthy();
         // no buttons or navigation when there is only 1 source
@@ -22,23 +22,23 @@ describe('SourcesCard', () => {
         expect(screen.queryByText('1/1')).toBeFalsy();
     });
     it('should render card correctly if one source with a title is passed in', () => {
-        render(React.createElement(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '' }] }));
+        render(_jsx(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '' }] }));
         expect(screen.getByText('1 source')).toBeTruthy();
         expect(screen.getByText('How to make an apple pie')).toBeTruthy();
     });
     it('should render card correctly if one source with a body is passed in', () => {
-        render(React.createElement(SourcesCard, { sources: [{ link: '', body: 'To make an apple pie, you must first...' }] }));
+        render(_jsx(SourcesCard, { sources: [{ link: '', body: 'To make an apple pie, you must first...' }] }));
         expect(screen.getByText('1 source')).toBeTruthy();
         expect(screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
     });
     it('should render card correctly if one source with a title and body is passed in', () => {
-        render(React.createElement(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }] }));
+        render(_jsx(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }] }));
         expect(screen.getByText('1 source')).toBeTruthy();
         expect(screen.getByText('How to make an apple pie')).toBeTruthy();
         expect(screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
     });
     it('should render multiple cards correctly', () => {
-        render(React.createElement(SourcesCard, { sources: [
+        render(_jsx(SourcesCard, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ] }));
@@ -49,7 +49,7 @@ describe('SourcesCard', () => {
         screen.getByRole('button', { name: /Go to next page/i });
     });
     it('should navigate between cards correctly', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(SourcesCard, { sources: [
+        render(_jsx(SourcesCard, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ] }));
@@ -64,7 +64,7 @@ describe('SourcesCard', () => {
         expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
     }));
     it('should apply className appropriately', () => {
-        render(React.createElement(SourcesCard, { sources: [
+        render(_jsx(SourcesCard, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], className: "test" }));
@@ -72,7 +72,7 @@ describe('SourcesCard', () => {
         expect(element).toHaveClass('test');
     });
     it('should disable pagination appropriately', () => {
-        render(React.createElement(SourcesCard, { sources: [
+        render(_jsx(SourcesCard, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], isDisabled: true }));
@@ -80,39 +80,39 @@ describe('SourcesCard', () => {
         expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
     });
     it('should render navigation aria label appropriately', () => {
-        render(React.createElement(SourcesCard, { sources: [
+        render(_jsx(SourcesCard, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ] }));
         expect(screen.getByRole('navigation', { name: /Pagination/i })).toBeTruthy();
     });
     it('should change paginationAriaLabel appropriately', () => {
-        render(React.createElement(SourcesCard, { sources: [
+        render(_jsx(SourcesCard, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], paginationAriaLabel: "Navegaci\u00F3n" }));
         expect(screen.getByRole('navigation', { name: /Navegación/i })).toBeTruthy();
     });
     it('should change sourceWord appropriately', () => {
-        render(React.createElement(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '' }], sourceWord: 'fuente' }));
+        render(_jsx(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '' }], sourceWord: 'fuente' }));
         expect(screen.getByText('1 fuente')).toBeTruthy();
     });
     it('should sourceWordPlural appropriately', () => {
-        render(React.createElement(SourcesCard, { sources: [
+        render(_jsx(SourcesCard, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], sourceWordPlural: 'fuentes' }));
         expect(screen.getByText('2 fuentes')).toBeTruthy();
     });
     it('should change toNextPageAriaLabel appropriately', () => {
-        render(React.createElement(SourcesCard, { sources: [
+        render(_jsx(SourcesCard, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], toNextPageAriaLabel: "Pase a la siguiente p\u00E1gina" }));
         expect(screen.getByRole('button', { name: /Pase a la siguiente página/i })).toBeTruthy();
     });
     it('should change toPreviousPageAriaLabel appropriately', () => {
-        render(React.createElement(SourcesCard, { sources: [
+        render(_jsx(SourcesCard, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], toPreviousPageAriaLabel: "Presione para regresar a la p\u00E1gina anterior" }));
@@ -120,7 +120,7 @@ describe('SourcesCard', () => {
     });
     it('should call onNextClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(SourcesCard, { sources: [
+        render(_jsx(SourcesCard, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], onNextClick: spy }));
@@ -129,7 +129,7 @@ describe('SourcesCard', () => {
     }));
     it('should call onPreviousClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(SourcesCard, { sources: [
+        render(_jsx(SourcesCard, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], onPreviousClick: spy }));
@@ -139,7 +139,7 @@ describe('SourcesCard', () => {
     }));
     it('should call onSetPage appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(SourcesCard, { sources: [
+        render(_jsx(SourcesCard, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
             ], onSetPage: spy }));
@@ -149,7 +149,7 @@ describe('SourcesCard', () => {
         expect(spy).toHaveBeenCalledTimes(2);
     }));
     it('should handle showMore appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(SourcesCard, { sources: [
+        render(_jsx(SourcesCard, { sources: [
                 {
                     title: 'Getting started with Red Hat OpenShift',
                     link: '#',

package/dist/esm/TermsOfUse/TermsOfUse.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { ModalProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface TermsOfUseProps extends ModalProps {
@@ -28,7 +28,9 @@ export interface TermsOfUseProps extends ModalProps {
     innerRef?: React.Ref<HTMLDivElement>;
     /** OuiaID applied to modal */
     ouiaId?: string;
+    /** Sets modal to compact styling. */
+    isCompact?: boolean;
 }
-export declare const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps>;
-declare const TermsOfUse: React.ForwardRefExoticComponent<Omit<TermsOfUseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TermsOfUseBase: FunctionComponent<TermsOfUseProps>;
+declare const TermsOfUse: import("react").ForwardRefExoticComponent<Omit<TermsOfUseProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default TermsOfUse;

package/dist/esm/TermsOfUse/TermsOfUse.js

@@ -9,15 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Terms of Use Modal - Chatbot Modal Extension
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { Button, Content, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal from '../ChatbotModal/ChatbotModal';
 export const TermsOfUseBase = (_a) => {
-    var { handleModalToggle, isModalOpen, onPrimaryAction, onSecondaryAction, primaryActionBtn = 'Accept', secondaryActionBtn = 'Decline', title = 'Terms of use', image, altText, displayMode = ChatbotDisplayMode.default, className, children, innerRef, ouiaId = 'TermsOfUse' } = _a, props = __rest(_a, ["handleModalToggle", "isModalOpen", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "image", "altText", "displayMode", "className", "children", "innerRef", "ouiaId"]);
+    var { handleModalToggle, isModalOpen, onPrimaryAction, onSecondaryAction, primaryActionBtn = 'Accept', secondaryActionBtn = 'Decline', title = 'Terms of use', image, altText, displayMode = ChatbotDisplayMode.default, className, children, innerRef, ouiaId = 'TermsOfUse', isCompact } = _a, props = __rest(_a, ["handleModalToggle", "isModalOpen", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "image", "altText", "displayMode", "className", "children", "innerRef", "ouiaId", "isCompact"]);
     const handlePrimaryAction = (_event) => {
         handleModalToggle(_event);
         onPrimaryAction && onPrimaryAction(_event);
@@ -25,18 +23,8 @@ export const TermsOfUseBase = (_a) => {
     const handleSecondaryAction = (_event) => {
         onSecondaryAction(_event);
     };
-    const modal = (React.createElement(ChatbotModal, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "terms-of-use-title", "aria-describedby": "terms-of-use-modal", className: `pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${className ? className : ''}`, displayMode: displayMode }, props),
-        React.createElement("section", { className: `pf-chatbot__terms-of-use--section`, "aria-label": title, tabIndex: -1, ref: innerRef },
-            React.createElement(ModalHeader, null,
-                React.createElement("div", { className: "pf-chatbot__terms-of-use--header" },
-                    image && altText && React.createElement("img", { src: image, className: "pf-chatbot__terms-of-use--image", alt: altText }),
-                    React.createElement("h1", { className: "pf-chatbot__terms-of-use--title" }, title))),
-            React.createElement(ModalBody, null,
-                React.createElement(Content, null, children)),
-            React.createElement(ModalFooter, { className: "pf-chatbot__terms-of-use--footer" },
-                React.createElement(Button, { isBlock: true, key: "terms-of-use-modal-primary", variant: "primary", onClick: handlePrimaryAction, form: "terms-of-use-form", size: "lg" }, primaryActionBtn),
-                React.createElement(Button, { isBlock: true, key: "terms-of-use-modal-secondary", variant: "secondary", onClick: handleSecondaryAction, size: "lg" }, secondaryActionBtn)))));
+    const modal = (_jsx(ChatbotModal, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "terms-of-use-title", "aria-describedby": "terms-of-use-modal", className: `pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`, displayMode: displayMode }, props, { children: _jsxs("section", { className: `pf-chatbot__terms-of-use--section`, "aria-label": title, tabIndex: -1, ref: innerRef, children: [_jsx(ModalHeader, { className: "pf-chatbot__terms-of-use--modal-header", children: _jsxs("div", { className: "pf-chatbot__terms-of-use--header", children: [!isCompact && image && altText && (_jsx("img", { src: image, className: "pf-chatbot__terms-of-use--image", alt: altText })), _jsx("h1", { className: "pf-chatbot__terms-of-use--title", children: title })] }) }), _jsx(ModalBody, { className: "pf-chatbot__terms-of-use--modal-body", children: _jsx(Content, { children: children }) }), _jsxs(ModalFooter, { className: "pf-chatbot__terms-of-use--footer", children: [_jsx(Button, { isBlock: true, variant: "primary", onClick: handlePrimaryAction, form: "terms-of-use-form", size: "lg", children: primaryActionBtn }, "terms-of-use-modal-primary"), _jsx(Button, { isBlock: true, variant: "secondary", onClick: handleSecondaryAction, size: "lg", children: secondaryActionBtn }, "terms-of-use-modal-secondary")] })] }) })));
     return modal;
 };
-const TermsOfUse = React.forwardRef((props, ref) => (React.createElement(TermsOfUseBase, Object.assign({ innerRef: ref }, props))));
+const TermsOfUse = forwardRef((props, ref) => (_jsx(TermsOfUseBase, Object.assign({ innerRef: ref }, props))));
 export default TermsOfUse;

package/dist/esm/TermsOfUse/TermsOfUse.test.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
@@ -16,15 +16,13 @@ import { Content } from '@patternfly/react-core';
 const handleModalToggle = jest.fn();
 const onPrimaryAction = jest.fn();
 const onSecondaryAction = jest.fn();
-const body = (React.createElement(Content, null,
-    React.createElement("h1", null, "Heading 1"),
-    React.createElement("p", null, "Legal text")));
+const body = (_jsxs(Content, { children: [_jsx("h1", { children: "Heading 1" }), _jsx("p", { children: "Legal text" })] }));
 describe('TermsOfUse', () => {
     afterEach(() => {
         jest.clearAllMocks();
     });
     it('should render modal correctly', () => {
-        render(React.createElement(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, ouiaId: "Terms" }, body));
+        render(_jsx(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, ouiaId: "Terms", children: body }));
         expect(screen.getByRole('heading', { name: /Terms of use/i })).toBeTruthy();
         expect(screen.getByRole('button', { name: /Accept/i })).toBeTruthy();
         expect(screen.getByRole('button', { name: /Decline/i })).toBeTruthy();
@@ -34,39 +32,39 @@ describe('TermsOfUse', () => {
         expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
     });
     it('should handle image and altText props', () => {
-        render(React.createElement(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, image: "./image.png", altText: "Test image" }, body));
+        render(_jsx(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, image: "./image.png", altText: "Test image", children: body }));
         expect(screen.getByRole('img')).toBeTruthy();
         expect(screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
     });
     it('should handle className prop', () => {
-        render(React.createElement(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, className: "test" }, body));
+        render(_jsx(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, className: "test", children: body }));
         expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
         expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
         expect(screen.getByRole('dialog')).toHaveClass('test');
     });
     it('should handle title prop', () => {
-        render(React.createElement(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, title: "Updated title" }, body));
+        render(_jsx(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, title: "Updated title", children: body }));
         expect(screen.getByRole('heading', { name: /Updated title/i })).toBeTruthy();
         expect(screen.queryByRole('heading', { name: /Terms of use/i })).toBeFalsy();
     });
     it('should handle primary button prop', () => {
-        render(React.createElement(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, primaryActionBtn: "First" }, body));
+        render(_jsx(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, primaryActionBtn: "First", children: body }));
         expect(screen.getByRole('button', { name: /First/i })).toBeTruthy();
         expect(screen.queryByRole('button', { name: /Accept/i })).toBeFalsy();
     });
     it('should handle secondary button prop', () => {
-        render(React.createElement(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, secondaryActionBtn: "Second" }, body));
+        render(_jsx(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, secondaryActionBtn: "Second", children: body }));
         expect(screen.getByRole('button', { name: /Second/i })).toBeTruthy();
         expect(screen.queryByRole('button', { name: /Deny/i })).toBeFalsy();
     });
     it('should handle primary button click', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(TermsOfUse, { isModalOpen: true, onPrimaryAction: onPrimaryAction, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle }, body));
+        render(_jsx(TermsOfUse, { isModalOpen: true, onPrimaryAction: onPrimaryAction, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, children: body }));
         yield userEvent.click(screen.getByRole('button', { name: /Accept/i }));
         expect(onPrimaryAction).toHaveBeenCalledTimes(1);
         expect(handleModalToggle).toHaveBeenCalledTimes(1);
     }));
     it('should handle secondary button click', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle }, body));
+        render(_jsx(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, children: body }));
         yield userEvent.click(screen.getByRole('button', { name: /Decline/i }));
         expect(onSecondaryAction).toHaveBeenCalledTimes(1);
         expect(handleModalToggle).not.toHaveBeenCalled();

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.3.0-prerelease.2",
+  "version": "6.3.0-prerelease.21",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -45,11 +45,12 @@
     "rehype-unwrap-images": "^1.0.0",
     "rehype-external-links": "^3.0.0",
     "rehype-sanitize": "^6.0.0",
-    "path-browserify": "^1.0.1"
+    "path-browserify": "^1.0.1",
+    "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
     "@patternfly/documentation-framework": "6.8.2",
@@ -57,8 +58,6 @@
     "@patternfly/patternfly-a11y": "^5.0.0",
     "@types/dom-speech-recognition": "^0.0.4",
     "@types/react": "^18.2.61",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "rimraf": "^2.7.1",
     "typescript": "^5.3.3",
     "@octokit/rest": "^18.0.0",

package/patternfly-docs/content/extensions/chatbot/design-guidelines.md

@@ -261,6 +261,16 @@ Each time a user begins a new conversation, display a [welcome message, with pro
 
 As much as possible, the suggested prompts should consider the user’s location in the service or application, or the situation their project is undergoing. 
 
+### Executing user requests
+
+Instead of automatically initiating what sounds like a request from a user, the ChatBot should ask users to confirm or deny their intent. This differentiates moments where users are simply asking about feasibility, rather than actually making a request.
+
+This can be done using the [quick response](/patternfly-ai/chatbot/messages#messages-with-quick-responses) buttons:
+
+<div class="ws-docs-content-img">
+![Confirmation options from a bot in response to a user's request.](./img/quick-response-confirmation.svg)
+</div>
+
 ### Using the conversation history menu
 
 The ChatBot history menu contains a log of a users' previous chats. Clicking the menu icon opens a side drawer in the ChatBot window.

package/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing Messages.md

@@ -0,0 +1,51 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: PatternFly-AI
+subsection: ChatBot
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Customizing messages
+source: Customizing messages
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+sortValue: 60
+---
+
+## Modifying static content
+
+The ChatBot extension `<Message>` component transforms Markdown to PatternFly React components via [react-markdown](https://github.com/remarkjs/react-markdown), which supports both [rehype](https://unifiedjs.com/explore/package/rehype/) and [remark](https://unifiedjs.com/explore/package/remark/) plugins for further output customization.
+
+remark parses Markdown as input and serializes Markdown as output, while rehype does the same for HTML. This allows you to target and make transformations at specific checkpoints in the transformation process: either while the text tree is still in Markdown, or while the text tree is in HTML format. For more detailed information on the architecture of this library, see the [react-markdown documentation](https://github.com/remarkjs/react-markdown?tab=readme-ov-file#architecture).
+
+You may need these plugins if, for example, you wanted to change the `href` on a link based on the link text. The `<Message>` prop `rehypePlugins` will accept any custom rehype plugins. We use already use these plugins in ChatBot to [render images a certain way](https://www.npmjs.com/package/rehype-unwrap-images) and [handle external links](https://www.npmjs.com/package/rehype-external-links).
+
+There are many open source libraries available for other common customization needs. If you can't find one for your use case, [Unified](https://unifiedjs.com/) has a helpful [guide on creating custom plugins](https://unifiedjs.com/learn/guide/create-a-rehype-plugin/).
+For a more direct example, if we wanted to change the `href` on links that included the text string `react`, we could write a very basic plugin like this:
+
+```
+import { visit } from 'unist-util-visit';
+
+export const rehypeLinkHrefUpdater = (options) => (tree) => {
+  visit(tree, 'element', (node) => {
+    if (node.tagName === 'a' && node.properties) {
+      if (node.properties.href.includes('react')) {
+        node.properties.href = '#';
+      }
+    }
+  });
+};
+
+```
+
+You could then pass `[rehypeLinkHrefUpdater]` to the `additionalRehypePlugins` prop on `<Message>` to have this applied to all relevant links read by that `<Message>` component.
+
+## Modifying dynamic content
+
+Props can also be used to modify dynamic content in messages.
+
+Continuing with our link modification example, let's say you also wanted to add custom `onClick` events. In this case, you would not use `remark` or `rehype`, since they're for static tree manipulation.
+
+Instead, you can utilize ChatBot features to customize dynamic content. We offer many `<Message>` props that allow you to implement custom behavior.
+For example, you can use `linkProps` to pass `onClick` events and other PatternFly `<Button>` props down to links. A very basic example would be `linkProps={{onClick: (event) => console.log(event}}`, which would apply to every link in the `<Message>`. Or, you could use the `event.target`, adding your own custom `onClick` logic based on the `innerText`, `innerHTML`, or other attributes of the `event.target`.

package/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachMenu.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, isValidElement, cloneElement, Children, FunctionComponent, ReactNode } from 'react';
 import AttachMenu from '@patternfly/chatbot/dist/dynamic/AttachMenu';
 import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
 import { Button, Divider, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
@@ -63,27 +63,27 @@ const uploadMenuItems = [
   </DropdownList>
 ];
 
-export const AttachmentMenuExample: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [userFacingMenuItems, setUserFacingMenuItems] = React.useState<React.ReactNode>([]);
+export const AttachmentMenuExample: FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [userFacingMenuItems, setUserFacingMenuItems] = useState<ReactNode>([]);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
     setUserFacingMenuItems(initialMenuItems.concat(uploadMenuItems));
   };
 
-  const findMatchingElements = (elements: React.ReactNode[], targetValue: string) => {
-    let matchingElements = [] as React.ReactNode[];
+  const findMatchingElements = (elements: ReactNode[], targetValue: string) => {
+    let matchingElements = [] as ReactNode[];
 
     elements.forEach((element) => {
-      if (React.isValidElement(element)) {
+      if (isValidElement(element)) {
         // Check if the element's value matches the targetValue
         if (element.props.value && element.props.value.toLowerCase().includes(targetValue.toLowerCase())) {
-          matchingElements.push(React.cloneElement(element, { key: element.props.value }));
+          matchingElements.push(cloneElement(element, { key: element.props.value }));
         }
 
         // Recursively check the element's children
-        const children = React.Children.toArray(element.props.children);
+        const children = Children.toArray(element.props.children);
         matchingElements = matchingElements.concat(findMatchingElements(children, targetValue));
       }
     });

package/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachmentEdit.tsx

@@ -1,16 +1,24 @@
-import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { FunctionComponent, MouseEvent as ReactMouseEvent, useState } from 'react';
+import { Button, Checkbox } from '@patternfly/react-core';
 import { AttachmentEdit } from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
 
-export const AttachmentEditModalExample: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+export const AttachmentEditModalExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isCompact, setIsCompact] = useState(false);
 
-  const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleModalToggle = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
   return (
     <>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="modal-compact-edit"
+        name="modal-compact-edit"
+      ></Checkbox>
       <Button onClick={handleModalToggle}>Launch modal</Button>
       <AttachmentEdit
         code="I am a code snippet"
@@ -20,6 +28,7 @@ export const AttachmentEditModalExample: React.FunctionComponent = () => {
         onCancel={() => null}
         // eslint-disable-next-line no-console
         onSave={(_event, code) => console.log(`The new code is "${code}"`)}
+        isCompact={isCompact}
       />
     </>
   );