@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

package/dist/esm/MessageBar/MessageBar.js

@@ -10,74 +10,161 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
+import { TextArea } from '@patternfly/react-core';
 // Import Chatbot components
 import SendButton from './SendButton';
 import MicrophoneButton from './MicrophoneButton';
 import { AttachButton } from './AttachButton';
 import AttachMenu from '../AttachMenu';
 import StopButton from './StopButton';
-import DOMPurify from 'dompurify';
 export const MessageBar = (_a) => {
-    var { onSendMessage, className, alwayShowSendButton, hasAttachButton = true, hasMicrophoneButton, handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "hasAttachButton", "hasMicrophoneButton", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange"]);
+    var { onSendMessage, className, alwayShowSendButton, hasAttachButton = true, hasMicrophoneButton, handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "hasAttachButton", "hasMicrophoneButton", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value"]);
     // Text Input
     // --------------------------------------------------------------------------
-    const [message, setMessage] = React.useState('');
+    const [message, setMessage] = React.useState(value !== null && value !== void 0 ? value : '');
     const [isListeningMessage, setIsListeningMessage] = React.useState(false);
-    const [showPlaceholder, setShowPlaceholder] = React.useState(true);
+    const [hasSentMessage, setHasSentMessage] = React.useState(false);
     const textareaRef = React.useRef(null);
     const attachButtonRef = React.useRef(null);
-    const handleInput = (event) => {
-        // newMessage === '' doesn't work unless we trim, which causes other problems
-        // textContent seems to work, but doesn't allow for markdown, so we need both
-        const messageText = DOMPurify.sanitize(event.target.textContent);
-        if (messageText === '') {
-            setShowPlaceholder(true);
-            setMessage('');
-            onChange && onChange(event, '');
+    const setInitialLineHeight = (field) => {
+        field.style.setProperty('line-height', '1rem');
+        const parent = field.parentElement;
+        if (parent) {
+            parent.style.setProperty('margin-top', `1rem`);
+            parent.style.setProperty('margin-bottom', `0rem`);
+            parent.style.setProperty('height', 'inherit');
+            const grandparent = parent.parentElement;
+            if (grandparent) {
+                grandparent.style.setProperty('flex-basis', 'auto');
+            }
         }
-        else {
-            setShowPlaceholder(false);
-            // this is so that tests work; RTL doesn't seem to like event.target.innerText, but browsers don't pick up markdown without it
-            let newMessage = messageText;
-            if (event.target.innerText) {
-                newMessage = DOMPurify.sanitize(event.target.innerText);
+    };
+    const setAutoHeight = (field) => {
+        const parent = field.parentElement;
+        if (parent) {
+            parent.style.setProperty('height', 'inherit');
+            const computed = window.getComputedStyle(field);
+            // Calculate the height
+            const height = parseInt(computed.getPropertyValue('border-top-width')) +
+                parseInt(computed.getPropertyValue('padding-top')) +
+                field.scrollHeight +
+                parseInt(computed.getPropertyValue('padding-bottom')) +
+                parseInt(computed.getPropertyValue('border-bottom-width'));
+            parent.style.setProperty('height', `${height}px`);
+            if (height > 32 || window.innerWidth <= 507) {
+                parent.style.setProperty('margin-bottom', `1rem`);
+                parent.style.setProperty('margin-top', `1rem`);
             }
-            setMessage(newMessage);
-            onChange && onChange(event, newMessage);
         }
     };
-    // Handle sending message
-    const handleSend = React.useCallback(() => {
-        setMessage((m) => {
-            onSendMessage(m);
-            setMessage('');
-            if (textareaRef.current) {
-                textareaRef.current.innerText = '';
-                setShowPlaceholder(true);
-                textareaRef.current.blur();
+    const textIsLongerThan2Lines = (field) => {
+        const lineHeight = parseFloat(window.getComputedStyle(field).lineHeight);
+        const lines = field.scrollHeight / lineHeight;
+        return lines > 2;
+    };
+    const setAutoWidth = React.useCallback((field) => {
+        const parent = field.parentElement;
+        if (parent) {
+            const grandparent = parent.parentElement;
+            if (textIsLongerThan2Lines(field) && grandparent) {
+                grandparent.style.setProperty('flex-basis', `100%`);
+            }
+        }
+    }, []);
+    const handleNewLine = (field) => {
+        const parent = field.parentElement;
+        if (parent) {
+            parent.style.setProperty('margin-bottom', `1rem`);
+            parent.style.setProperty('margin-top', `1rem`);
+        }
+    };
+    React.useEffect(() => {
+        const field = textareaRef.current;
+        if (field) {
+            if (field.value === '') {
+                if (window.innerWidth > 507) {
+                    setInitialLineHeight(field);
+                }
+            }
+            else {
+                setAutoHeight(field);
+                setAutoWidth(field);
+            }
+        }
+        const resetHeight = () => {
+            if (field) {
+                if (field.value === '') {
+                    if (window.innerWidth > 507) {
+                        setInitialLineHeight(field);
+                    }
+                }
+                else {
+                    setAutoHeight(field);
+                    setAutoWidth(field);
+                }
             }
-            return '';
-        });
+        };
+        window.addEventListener('resize', resetHeight);
+        return () => {
+            window.removeEventListener('resize', resetHeight);
+        };
+    }, [setAutoWidth]);
+    React.useEffect(() => {
+        const field = textareaRef.current;
+        if (field) {
+            if (field.value === '') {
+                setInitialLineHeight(textareaRef.current);
+            }
+            else {
+                setAutoHeight(textareaRef.current);
+                setAutoWidth(field);
+            }
+        }
+    }, [displayMode, message, setAutoWidth]);
+    React.useEffect(() => {
+        const field = textareaRef.current;
+        if (field) {
+            setInitialLineHeight(field);
+            setHasSentMessage(false);
+        }
+    }, [hasSentMessage]);
+    const handleChange = React.useCallback((event) => {
+        onChange && onChange(event, event.target.value);
+        if (textareaRef.current) {
+            if (event.target.value === '') {
+                setInitialLineHeight(textareaRef.current);
+            }
+            else {
+                setAutoHeight(textareaRef.current);
+            }
+        }
+        setMessage(event.target.value);
+    }, [onChange]);
+    // Handle sending message
+    const handleSend = React.useCallback((newMessage) => {
+        onSendMessage(newMessage);
+        setHasSentMessage(true);
+        setMessage('');
     }, [onSendMessage]);
     const handleKeyDown = React.useCallback((event) => {
         if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
             if (!isSendButtonDisabled && !hasStopButton) {
-                handleSend();
+                handleSend(message);
+            }
+        }
+        if (event.key === 'Enter' && event.shiftKey) {
+            if (textareaRef.current) {
+                handleNewLine(textareaRef.current);
             }
         }
-    }, [handleSend]);
+    }, [isSendButtonDisabled, hasStopButton, handleSend, message]);
     const handleAttachMenuToggle = () => {
         (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(!(attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.isAttachMenuOpen)));
         attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuToggleClick();
     };
     const handleSpeechRecognition = (message) => {
         setMessage(message);
-        const textarea = textareaRef.current;
-        if (textarea) {
-            textarea.focus();
-            textarea.textContent = DOMPurify.sanitize(message);
-        }
         onChange && onChange({}, message);
     };
     const renderButtons = () => {
@@ -89,17 +176,11 @@ export const MessageBar = (_a) => {
             attachMenuProps && (React.createElement(AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipContent }, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props))),
             !attachMenuProps && hasAttachButton && (React.createElement(AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, inputTestId: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.inputTestId }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.props))),
             hasMicrophoneButton && (React.createElement(MicrophoneButton, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent, language: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.language }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.props))),
-            (alwayShowSendButton || message) && (React.createElement(SendButton, Object.assign({ value: message, onClick: handleSend, isDisabled: isSendButtonDisabled, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.tooltipContent }, (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _m === void 0 ? void 0 : _m.props)))));
+            (alwayShowSendButton || message) && (React.createElement(SendButton, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.tooltipContent }, (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _m === void 0 ? void 0 : _m.props)))));
     };
-    const placeholder = isListeningMessage ? 'Listening' : 'Send a message...';
     const messageBarContents = (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "pf-chatbot__message-bar-input" },
-            (showPlaceholder || message === '') && (React.createElement("div", { className: "pf-chatbot__message-bar-placeholder" }, placeholder)),
-            React.createElement("div", Object.assign({ contentEditable: true, suppressContentEditableWarning: true, role: "textbox", "aria-multiline": "false", className: "pf-chatbot__message-textarea", onInput: handleInput, onFocus: () => setShowPlaceholder(false), onBlur: () => {
-                    if (message === '') {
-                        setShowPlaceholder(!showPlaceholder);
-                    }
-                }, "aria-label": placeholder, ref: textareaRef, onKeyDown: handleKeyDown }, props))),
+            React.createElement(TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? 'Listening' : 'Send a message...', placeholder: isListeningMessage ? 'Listening' : 'Send a message...', ref: textareaRef, onKeyDown: handleKeyDown }, props))),
         React.createElement("div", { className: "pf-chatbot__message-bar-actions" }, renderButtons())));
     if (attachMenuProps) {
         return (React.createElement(AttachMenu, Object.assign({ toggle: (toggleRef) => (React.createElement("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}` }, messageBarContents)), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {

package/dist/esm/MessageBar/MessageBar.test.js

@@ -7,14 +7,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import '@testing-library/jest-dom';
 import React from 'react';
+import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
+import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
-import { MessageBar } from './MessageBar';
-import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
 import SourceDetailsMenuItem from '../SourceDetailsMenuItem';
-import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
+import { MessageBar } from './MessageBar';
 const ATTACH_MENU_ITEMS = [
     React.createElement(DropdownList, { key: "list-1" },
         React.createElement(DropdownItem, { className: "pf-chatbot-source-details-dropdown-item", value: "auth-operator Pod", id: "0" },
@@ -229,4 +229,12 @@ describe('Message bar', () => {
         render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { props: { 'aria-label': 'Test' } } } }));
         yield userEvent.click(screen.getByRole('button', { name: 'Test' }));
     }));
+    it('can be controlled', () => {
+        render(React.createElement(MessageBar, { onSendMessage: jest.fn, value: "test" }));
+        expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+        expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+        expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
+        expect(screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
+    });
 });

package/dist/esm/MessageBar/MicrophoneButton.d.ts

@@ -10,7 +10,7 @@ export interface MicrophoneButtonProps extends ButtonProps {
     /** Callback to update the message value once speech recognition is complete */
     onSpeechRecognition: React.Dispatch<React.SetStateAction<string>>;
     /** Props to control the PF Tooltip component */
-    tooltipProps?: TooltipProps;
+    tooltipProps?: Omit<TooltipProps, 'content'>;
     /** English text "Use microphone" and "Stop listening" used in the tooltip */
     tooltipContent?: {
         active?: string;

package/dist/esm/MessageBar/SendButton.js

@@ -18,7 +18,9 @@ import { Button, Tooltip, Icon } from '@patternfly/react-core';
 import { PaperPlaneIcon } from '@patternfly/react-icons/dist/esm/icons/paper-plane-icon';
 export const SendButton = (_a) => {
     var { className, onClick, tooltipProps, tooltipContent = 'Send' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
-    return (React.createElement(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--send", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0 }, tooltipProps),
+    return (React.createElement(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--send", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         React.createElement(Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--send ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Send button', onClick: onClick, icon: React.createElement(Icon, { iconSize: "xl", isInline: true },
                 React.createElement(PaperPlaneIcon, null)) }, props))));
 };

package/dist/esm/MessageBar/StopButton.js

@@ -17,7 +17,9 @@ import React from 'react';
 import { Button, Tooltip, Icon } from '@patternfly/react-core';
 export const StopButton = (_a) => {
     var { className, onClick, tooltipProps, tooltipContent = 'Stop' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
-    return (React.createElement(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--stop", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0 }, tooltipProps),
+    return (React.createElement(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--stop", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         React.createElement(Button, Object.assign({ className: `pf-chatbot__button--stop ${className !== null && className !== void 0 ? className : ''}`, variant: "link", "aria-label": props['aria-label'] || 'Stop button', onClick: onClick, icon: React.createElement(Icon, { iconSize: "xl", isInline: true },
                 React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                     React.createElement("path", { d: "M0.5 3C0.5 1.62109 1.62109 0.5 3 0.5H13C14.3789 0.5 15.5 1.62109 15.5 3V13C15.5 14.3789 14.3789 15.5 13 15.5H3C1.62109 15.5 0.5 14.3789 0.5 13V3Z", fill: "currentColor" }))) }, props))));

package/dist/esm/MessageBox/MessageBox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/MessageBox/MessageBox.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MessageBox } from './MessageBox';
+describe('MessageBox', () => {
+    it('should render Message box', () => {
+        render(React.createElement(MessageBox, null,
+            React.createElement(React.Fragment, null, "Chatbot Messages")));
+        expect(screen.getByText('Chatbot Messages')).toBeTruthy();
+    });
+    it('should assign ref to Message box', () => {
+        const ref = React.createRef();
+        render(React.createElement(MessageBox, { ref: ref },
+            React.createElement("div", null, "Test message content")));
+        expect(ref.current).not.toBeNull();
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    });
+});

package/dist/esm/PreviewAttachment/PreviewAttachment.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/PreviewAttachment/PreviewAttachment.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { PreviewAttachment } from './PreviewAttachment';
+describe('PreviewAttachment', () => {
+    it('should render PreviewAttachment', () => {
+        render(React.createElement(PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: jest.fn(), handleModalToggle: jest.fn() }));
+        expect(screen.getByText('Preview attachment')).toBeTruthy();
+        expect(screen.getByText('greetings')).toBeTruthy();
+        expect(screen.getAllByText('TEXT')).toBeTruthy();
+    });
+    it('should call onEdit handler when edit button is pressed', () => {
+        const onEdit = jest.fn();
+        render(React.createElement(PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: onEdit, handleModalToggle: jest.fn() }));
+        fireEvent.click(screen.getByText('Edit'));
+        expect(onEdit).toHaveBeenCalled();
+    });
+    it('should call onDismiss handler when dismiss button is pressed', () => {
+        const onDismiss = jest.fn();
+        render(React.createElement(PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: jest.fn(), handleModalToggle: onDismiss }));
+        fireEvent.click(screen.getByText('Dismiss'));
+        expect(onDismiss).toHaveBeenCalled();
+    });
+});

package/dist/esm/ResponseActions/ResponseActionButton.d.ts

@@ -21,6 +21,9 @@ export interface ResponseActionButtonProps {
     tooltipProps?: TooltipProps;
     /** Whether button is in clicked state */
     isClicked?: boolean;
+    /** Ref applied to button  */
+    innerRef?: React.Ref<HTMLButtonElement>;
 }
-export declare const ResponseActionButton: React.FunctionComponent<ResponseActionButtonProps>;
+export declare const ResponseActionButtonBase: React.FunctionComponent<ResponseActionButtonProps>;
+declare const ResponseActionButton: React.ForwardRefExoticComponent<ResponseActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default ResponseActionButton;

package/dist/esm/ResponseActions/ResponseActionButton.js

@@ -1,13 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React from 'react';
 import { Button, Icon, Tooltip } from '@patternfly/react-core';
-export const ResponseActionButton = ({ ariaLabel, clickedAriaLabel = ariaLabel, className, icon, isDisabled, onClick, tooltipContent, clickedTooltipContent = tooltipContent, tooltipProps, isClicked = false }) => {
+export const ResponseActionButtonBase = (_a) => {
+    var { ariaLabel, clickedAriaLabel = ariaLabel, className, icon, isDisabled, onClick, tooltipContent, clickedTooltipContent = tooltipContent, tooltipProps, isClicked = false, innerRef } = _a, props = __rest(_a, ["ariaLabel", "clickedAriaLabel", "className", "icon", "isDisabled", "onClick", "tooltipContent", "clickedTooltipContent", "tooltipProps", "isClicked", "innerRef"]);
     const generateAriaLabel = () => {
         if (ariaLabel) {
             return isClicked ? clickedAriaLabel : ariaLabel;
         }
         return isClicked ? clickedTooltipContent : tooltipContent;
     };
-    return (React.createElement(Tooltip, Object.assign({ id: `pf-chatbot__tooltip-response-action-${tooltipContent}`, content: isClicked ? clickedTooltipContent : tooltipContent, "aria-live": "polite", position: "bottom", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0 }, tooltipProps),
-        React.createElement(Button, { variant: "plain", className: `pf-chatbot__button--response-action ${isClicked ? 'pf-chatbot__button--response-action-clicked' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": generateAriaLabel(), icon: React.createElement(Icon, { isInline: true, size: "lg" }, icon), isDisabled: isDisabled, onClick: onClick, size: "sm" })));
+    return (React.createElement(Tooltip, Object.assign({ id: `pf-chatbot__tooltip-response-action-${tooltipContent}`, content: isClicked ? clickedTooltipContent : tooltipContent, "aria-live": "polite", position: "bottom", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
+        React.createElement(Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--response-action ${isClicked ? 'pf-chatbot__button--response-action-clicked' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": generateAriaLabel(), icon: React.createElement(Icon, { isInline: true, size: "lg" }, icon), isDisabled: isDisabled, onClick: onClick, size: "sm", ref: innerRef }, props))));
 };
+const ResponseActionButton = React.forwardRef((props, ref) => (React.createElement(ResponseActionButtonBase, Object.assign({ innerRef: ref }, props))));
 export default ResponseActionButton;

package/dist/esm/ResponseActions/ResponseActions.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TooltipProps } from '@patternfly/react-core';
-export interface ActionProps {
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+export interface ActionProps extends Omit<ButtonProps, 'ref'> {
     /** Aria-label for the button */
     ariaLabel?: string;
     /** Aria-label for the button, shown when the button is clicked. */
@@ -19,6 +19,12 @@ export interface ActionProps {
     tooltipProps?: TooltipProps;
     /** Icon for custom response action */
     icon?: React.ReactNode;
+    /** Ref for response action button */
+    ref?: React.Ref<HTMLButtonElement>;
+    /** Whether content launched by button, such as the feedback form, is expanded */
+    'aria-expanded'?: boolean;
+    /** Id for content controlled by the button, such as the feedback form */
+    'aria-controls'?: string;
 }
 export interface ResponseActionProps {
     /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */

package/dist/esm/ResponseActions/ResponseActions.js

@@ -33,14 +33,14 @@ export const ResponseActions = ({ actions }) => {
         onClick && onClick(e);
     };
     return (React.createElement("div", { ref: responseActions, className: "pf-chatbot__response-actions" },
-        positive && (React.createElement(ResponseActionButton, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', clickedAriaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : 'Response recorded', onClick: (e) => handleClick(e, 'positive', positive.onClick), className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_c = positive.tooltipContent) !== null && _c !== void 0 ? _c : 'Good response', clickedTooltipContent: (_d = positive.clickedTooltipContent) !== null && _d !== void 0 ? _d : 'Response recorded', tooltipProps: positive.tooltipProps, icon: React.createElement(OutlinedThumbsUpIcon, null), isClicked: activeButton === 'positive' })),
-        negative && (React.createElement(ResponseActionButton, { ariaLabel: (_e = negative.ariaLabel) !== null && _e !== void 0 ? _e : 'Bad response', clickedAriaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : 'Response recorded', onClick: (e) => handleClick(e, 'negative', negative.onClick), className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_g = negative.tooltipContent) !== null && _g !== void 0 ? _g : 'Bad response', clickedTooltipContent: (_h = negative.clickedTooltipContent) !== null && _h !== void 0 ? _h : 'Response recorded', tooltipProps: negative.tooltipProps, icon: React.createElement(OutlinedThumbsDownIcon, null), isClicked: activeButton === 'negative' })),
-        copy && (React.createElement(ResponseActionButton, { ariaLabel: (_j = copy.ariaLabel) !== null && _j !== void 0 ? _j : 'Copy', clickedAriaLabel: (_k = copy.ariaLabel) !== null && _k !== void 0 ? _k : 'Copied', onClick: (e) => handleClick(e, 'copy', copy.onClick), className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_l = copy.tooltipContent) !== null && _l !== void 0 ? _l : 'Copy', clickedTooltipContent: (_m = copy.clickedTooltipContent) !== null && _m !== void 0 ? _m : 'Copied', tooltipProps: copy.tooltipProps, icon: React.createElement(OutlinedCopyIcon, null), isClicked: activeButton === 'copy' })),
-        share && (React.createElement(ResponseActionButton, { ariaLabel: (_o = share.ariaLabel) !== null && _o !== void 0 ? _o : 'Share', clickedAriaLabel: (_p = share.ariaLabel) !== null && _p !== void 0 ? _p : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_q = share.tooltipContent) !== null && _q !== void 0 ? _q : 'Share', clickedTooltipContent: (_r = share.clickedTooltipContent) !== null && _r !== void 0 ? _r : 'Shared', tooltipProps: share.tooltipProps, icon: React.createElement(ExternalLinkAltIcon, null), isClicked: activeButton === 'share' })),
-        listen && (React.createElement(ResponseActionButton, { ariaLabel: (_s = listen.ariaLabel) !== null && _s !== void 0 ? _s : 'Listen', clickedAriaLabel: (_t = listen.ariaLabel) !== null && _t !== void 0 ? _t : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_u = listen.tooltipContent) !== null && _u !== void 0 ? _u : 'Listen', clickedTooltipContent: (_v = listen.clickedTooltipContent) !== null && _v !== void 0 ? _v : 'Listening', tooltipProps: listen.tooltipProps, icon: React.createElement(VolumeUpIcon, null), isClicked: activeButton === 'listen' })),
+        positive && (React.createElement(ResponseActionButton, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', clickedAriaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : 'Response recorded', onClick: (e) => handleClick(e, 'positive', positive.onClick), className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_c = positive.tooltipContent) !== null && _c !== void 0 ? _c : 'Good response', clickedTooltipContent: (_d = positive.clickedTooltipContent) !== null && _d !== void 0 ? _d : 'Response recorded', tooltipProps: positive.tooltipProps, icon: React.createElement(OutlinedThumbsUpIcon, null), isClicked: activeButton === 'positive', ref: positive.ref, "aria-expanded": positive['aria-expanded'], "aria-controls": positive['aria-controls'] })),
+        negative && (React.createElement(ResponseActionButton, { ariaLabel: (_e = negative.ariaLabel) !== null && _e !== void 0 ? _e : 'Bad response', clickedAriaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : 'Response recorded', onClick: (e) => handleClick(e, 'negative', negative.onClick), className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_g = negative.tooltipContent) !== null && _g !== void 0 ? _g : 'Bad response', clickedTooltipContent: (_h = negative.clickedTooltipContent) !== null && _h !== void 0 ? _h : 'Response recorded', tooltipProps: negative.tooltipProps, icon: React.createElement(OutlinedThumbsDownIcon, null), isClicked: activeButton === 'negative', ref: negative.ref, "aria-expanded": negative['aria-expanded'], "aria-controls": negative['aria-controls'] })),
+        copy && (React.createElement(ResponseActionButton, { ariaLabel: (_j = copy.ariaLabel) !== null && _j !== void 0 ? _j : 'Copy', clickedAriaLabel: (_k = copy.ariaLabel) !== null && _k !== void 0 ? _k : 'Copied', onClick: (e) => handleClick(e, 'copy', copy.onClick), className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_l = copy.tooltipContent) !== null && _l !== void 0 ? _l : 'Copy', clickedTooltipContent: (_m = copy.clickedTooltipContent) !== null && _m !== void 0 ? _m : 'Copied', tooltipProps: copy.tooltipProps, icon: React.createElement(OutlinedCopyIcon, null), isClicked: activeButton === 'copy', ref: copy.ref, "aria-expanded": copy['aria-expanded'], "aria-controls": copy['aria-controls'] })),
+        share && (React.createElement(ResponseActionButton, { ariaLabel: (_o = share.ariaLabel) !== null && _o !== void 0 ? _o : 'Share', clickedAriaLabel: (_p = share.ariaLabel) !== null && _p !== void 0 ? _p : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_q = share.tooltipContent) !== null && _q !== void 0 ? _q : 'Share', clickedTooltipContent: (_r = share.clickedTooltipContent) !== null && _r !== void 0 ? _r : 'Shared', tooltipProps: share.tooltipProps, icon: React.createElement(ExternalLinkAltIcon, null), isClicked: activeButton === 'share', ref: share.ref, "aria-expanded": share['aria-expanded'], "aria-controls": share['aria-controls'] })),
+        listen && (React.createElement(ResponseActionButton, { ariaLabel: (_s = listen.ariaLabel) !== null && _s !== void 0 ? _s : 'Listen', clickedAriaLabel: (_t = listen.ariaLabel) !== null && _t !== void 0 ? _t : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_u = listen.tooltipContent) !== null && _u !== void 0 ? _u : 'Listen', clickedTooltipContent: (_v = listen.clickedTooltipContent) !== null && _v !== void 0 ? _v : 'Listening', tooltipProps: listen.tooltipProps, icon: React.createElement(VolumeUpIcon, null), isClicked: activeButton === 'listen', ref: listen.ref, "aria-expanded": listen['aria-expanded'], "aria-controls": listen['aria-controls'] })),
         Object.keys(additionalActions).map((action) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            return (React.createElement(ResponseActionButton, { key: action, ariaLabel: (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.ariaLabel, clickedAriaLabel: (_b = additionalActions[action]) === null || _b === void 0 ? void 0 : _b.clickedAriaLabel, onClick: (e) => { var _a; return handleClick(e, action, (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.onClick); }, className: (_c = additionalActions[action]) === null || _c === void 0 ? void 0 : _c.className, isDisabled: (_d = additionalActions[action]) === null || _d === void 0 ? void 0 : _d.isDisabled, tooltipContent: (_e = additionalActions[action]) === null || _e === void 0 ? void 0 : _e.tooltipContent, tooltipProps: (_f = additionalActions[action]) === null || _f === void 0 ? void 0 : _f.tooltipProps, clickedTooltipContent: (_g = additionalActions[action]) === null || _g === void 0 ? void 0 : _g.clickedTooltipContent, icon: (_h = additionalActions[action]) === null || _h === void 0 ? void 0 : _h.icon, isClicked: activeButton === action }));
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            return (React.createElement(ResponseActionButton, { key: action, ariaLabel: (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.ariaLabel, clickedAriaLabel: (_b = additionalActions[action]) === null || _b === void 0 ? void 0 : _b.clickedAriaLabel, onClick: (e) => { var _a; return handleClick(e, action, (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.onClick); }, className: (_c = additionalActions[action]) === null || _c === void 0 ? void 0 : _c.className, isDisabled: (_d = additionalActions[action]) === null || _d === void 0 ? void 0 : _d.isDisabled, tooltipContent: (_e = additionalActions[action]) === null || _e === void 0 ? void 0 : _e.tooltipContent, tooltipProps: (_f = additionalActions[action]) === null || _f === void 0 ? void 0 : _f.tooltipProps, clickedTooltipContent: (_g = additionalActions[action]) === null || _g === void 0 ? void 0 : _g.clickedTooltipContent, icon: (_h = additionalActions[action]) === null || _h === void 0 ? void 0 : _h.icon, isClicked: activeButton === action, ref: (_j = additionalActions[action]) === null || _j === void 0 ? void 0 : _j.ref, "aria-expanded": (_k = additionalActions[action]) === null || _k === void 0 ? void 0 : _k['aria-expanded'], "aria-controls": (_l = additionalActions[action]) === null || _l === void 0 ? void 0 : _l['aria-controls'] }));
         })));
 };
 export default ResponseActions;

package/dist/esm/ResponseActions/ResponseActions.test.js

@@ -83,7 +83,7 @@ describe('ResponseActions', () => {
     }));
     it('should handle click outside of group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         // using message just so we have something outside the group that's rendered
-        render(React.createElement(Message, { name: "Bot", role: "bot", avatar: "", content: "Example with all prebuilt actions", actions: {
+        render(React.createElement(Message, { name: "Bot", role: "bot", avatar: "", content: "I updated your account with those settings. You're ready to set up your first dashboard!", actions: {
                 positive: {},
                 negative: {}
             } }));
@@ -97,7 +97,7 @@ describe('ResponseActions', () => {
         yield userEvent.click(badBtn);
         expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
         expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
-        yield userEvent.click(screen.getByText('Example with all prebuilt actions'));
+        yield userEvent.click(screen.getByText("I updated your account with those settings. You're ready to set up your first dashboard!"));
         expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
         expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     }));

package/dist/esm/Settings/SettingsForm.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/Settings/SettingsForm.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { render, screen } from '@testing-library/react';
+import { SettingsForm } from './SettingsForm';
+describe('SettingsForm', () => {
+    it('should render settingsForm with custom classname', () => {
+        const { container } = render(React.createElement(SettingsForm, { className: "custom-settings" }));
+        expect(container.querySelector('.custom-settings')).toBeTruthy();
+    });
+    it('should render settingsForm with fields', () => {
+        const fields = [
+            {
+                id: 'archived-chat',
+                label: 'Archive chat',
+                field: (React.createElement(Button, { id: "archived-chat", variant: "secondary" }, "Archive chat"))
+            }
+        ];
+        render(React.createElement(SettingsForm, { fields: fields }));
+        expect(screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
+    });
+});

package/dist/esm/__mocks__/rehype-external-links.d.ts

@@ -0,0 +1,2 @@
+declare const rehypeExternalLinks: jest.Mock<any, [children: any], any>;
+export default rehypeExternalLinks;

package/dist/esm/__mocks__/rehype-external-links.js

@@ -0,0 +1,2 @@
+const rehypeExternalLinks = jest.fn((children) => children);
+export default rehypeExternalLinks;

package/dist/esm/__mocks__/rehype-sanitize.d.ts

@@ -0,0 +1,2 @@
+declare const rehypeSanitize: jest.Mock<null, [], any>;
+export default rehypeSanitize;

package/dist/esm/__mocks__/rehype-sanitize.js

@@ -0,0 +1,2 @@
+const rehypeSanitize = jest.fn(() => null);
+export default rehypeSanitize;

package/dist/esm/__mocks__/rehype-unwrap-images.d.ts

@@ -0,0 +1,2 @@
+declare const rehypeUnwrapImages: jest.Mock<null, [], any>;
+export default rehypeUnwrapImages;

package/dist/esm/__mocks__/rehype-unwrap-images.js

@@ -0,0 +1,2 @@
+const rehypeUnwrapImages = jest.fn(() => null);
+export default rehypeUnwrapImages;

package/dist/esm/index.d.ts

@@ -24,6 +24,8 @@ export { default as ChatbotWelcomePrompt } from './ChatbotWelcomePrompt';
 export * from './ChatbotWelcomePrompt';
 export { default as CodeModal } from './CodeModal';
 export * from './CodeModal';
+export { default as Compare } from './Compare';
+export * from './Compare';
 export { default as FileDetails } from './FileDetails';
 export * from './FileDetails';
 export { default as FileDetailsLabel } from './FileDetailsLabel';
@@ -50,3 +52,5 @@ export { default as SourcesCard } from './SourcesCard';
 export * from './SourcesCard';
 export { default as TermsOfUse } from './TermsOfUse';
 export * from './TermsOfUse';
+export { default as tracking } from './tracking';
+export * from './tracking';

package/dist/esm/index.js

@@ -25,6 +25,8 @@ export { default as ChatbotWelcomePrompt } from './ChatbotWelcomePrompt';
 export * from './ChatbotWelcomePrompt';
 export { default as CodeModal } from './CodeModal';
 export * from './CodeModal';
+export { default as Compare } from './Compare';
+export * from './Compare';
 export { default as FileDetails } from './FileDetails';
 export * from './FileDetails';
 export { default as FileDetailsLabel } from './FileDetailsLabel';
@@ -51,3 +53,5 @@ export { default as SourcesCard } from './SourcesCard';
 export * from './SourcesCard';
 export { default as TermsOfUse } from './TermsOfUse';
 export * from './TermsOfUse';
+export { default as tracking } from './tracking';
+export * from './tracking';

package/dist/esm/tracking/console_tracking_provider.d.ts

@@ -0,0 +1,10 @@
+import { TrackingSpi } from './tracking_spi';
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+export declare class ConsoleTrackingProvider implements TrackingSpi, TrackingApi {
+    trackPageView(url: string | undefined): void;
+    registerProvider(): void;
+    initialize(): void;
+    identify(userID: string): void;
+    trackSingleItem(item: string, properties?: TrackingEventProperties): void;
+    getKey(): string;
+}

package/dist/esm/tracking/console_tracking_provider.js

@@ -0,0 +1,23 @@
+export class ConsoleTrackingProvider {
+    trackPageView(url) {
+        // eslint-disable-next-line no-console
+        console.log('ConsoleProvider pageView', url);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerProvider() { }
+    initialize() {
+        // eslint-disable-next-line no-console
+        console.log('ConsoleProvider initialize');
+    }
+    identify(userID) {
+        // eslint-disable-next-line no-console
+        console.log('ConsoleProvider identify', userID);
+    }
+    trackSingleItem(item, properties) {
+        // eslint-disable-next-line no-console
+        console.log('ConsoleProvider: ' + item, properties);
+    }
+    getKey() {
+        return 'console';
+    }
+}

package/dist/esm/tracking/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './tracking_registry';
+export * from './tracking_registry';

package/dist/esm/tracking/index.js

@@ -0,0 +1,2 @@
+export { default } from './tracking_registry';
+export * from './tracking_registry';

package/dist/esm/tracking/posthog_tracking_provider.d.ts

@@ -0,0 +1,9 @@
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+import { InitProps, TrackingSpi } from './tracking_spi';
+export declare class PosthogTrackingProvider implements TrackingSpi, TrackingApi {
+    getKey(): string;
+    initialize(props: InitProps): void;
+    identify(userID: string): void;
+    trackPageView(url: string | undefined): void;
+    trackSingleItem(item: string, properties?: TrackingEventProperties): void;
+}