@patternfly/chatbot 2.2.0-prerelease.3 → 2.2.0-prerelease.31

package/dist/esm/MessageBar/AttachButton.js

@@ -24,8 +24,10 @@ const AttachButtonBase = (_a) => {
         onDropAccepted: onAttachAccepted
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement("input", Object.assign({ "data-testid": inputTestId }, getInputProps())),
-        React.createElement(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--attach", content: tooltipContent, 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),
+        React.createElement("input", Object.assign({ "data-testid": inputTestId }, getInputProps(), { hidden: true })),
+        React.createElement(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--attach", content: tooltipContent, 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", ref: innerRef, className: `pf-chatbot__button--attach ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach button', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: React.createElement(Icon, { iconSize: "xl", isInline: true },
                     React.createElement(PaperclipIcon, null)) }, props)))));
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { ButtonProps, DropEvent } from '@patternfly/react-core';
+import { ButtonProps, DropEvent, TextAreaProps, TooltipProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
 export interface MessageBarWithAttachMenuProps {
     /** Flag to enable whether attach menu is open */
     isAttachMenuOpen: boolean;
@@ -20,9 +21,9 @@ export interface MessageBarWithAttachMenuProps {
     /** Callback to change the open state of the menu. Triggered by clicking outside of the menu. */
     onAttachMenuOpenChange?: (isOpen: boolean) => void;
 }
-export interface MessageBarProps {
+export interface MessageBarProps extends TextAreaProps {
     /** Callback to get the value of input message by user */
-    onSendMessage: (message: string) => void;
+    onSendMessage: (message: string | number) => void;
     /** Class Name for the MessageBar component */
     className?: string;
     /** Flag to always to show the send button. By default send button is shown when there is a message in the input field */
@@ -47,14 +48,17 @@ export interface MessageBarProps {
             tooltipContent?: string;
             props?: ButtonProps;
             inputTestId?: string;
+            tooltipProps?: Omit<TooltipProps, 'content'>;
         };
         stop?: {
             tooltipContent?: string;
             props?: ButtonProps;
+            tooltipProps?: Omit<TooltipProps, 'content'>;
         };
         send?: {
             tooltipContent?: string;
             props?: ButtonProps;
+            tooltipProps?: Omit<TooltipProps, 'content'>;
         };
         microphone?: {
             tooltipContent?: {
@@ -63,10 +67,13 @@ export interface MessageBarProps {
             };
             language?: string;
             props?: ButtonProps;
+            tooltipProps?: Omit<TooltipProps, 'content'>;
         };
     };
     /** A callback for when the text area value changes. */
-    onChange?: (event: React.ChangeEvent<HTMLDivElement>, value: string) => void;
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string | number) => void;
+    /** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
+    displayMode?: ChatbotDisplayMode;
 }
 export declare const MessageBar: React.FunctionComponent<MessageBarProps>;
 export default MessageBar;

package/dist/esm/MessageBar/MessageBar.js

@@ -10,52 +10,141 @@ 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);
         }
     };
+    const textIsLongerThan2Lines = (field) => {
+        const lineHeight = parseFloat(window.getComputedStyle(field).lineHeight);
+        const lines = field.scrollHeight / lineHeight;
+        return lines > 2;
+    };
+    const setAutoWidth = (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);
+                }
+            }
+        };
+        window.addEventListener('resize', resetHeight);
+        return () => {
+            window.removeEventListener('resize', resetHeight);
+        };
+    }, []);
+    React.useEffect(() => {
+        const field = textareaRef.current;
+        if (field) {
+            if (field.value === '') {
+                setInitialLineHeight(textareaRef.current);
+            }
+            else {
+                setAutoHeight(textareaRef.current);
+                setAutoWidth(field);
+            }
+        }
+    }, [displayMode, message]);
+    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);
+    }, []);
     // Handle sending message
     const handleSend = React.useCallback(() => {
         setMessage((m) => {
             onSendMessage(m);
-            setMessage('');
-            if (textareaRef.current) {
-                textareaRef.current.innerText = '';
-                setShowPlaceholder(true);
-                textareaRef.current.blur();
-            }
+            setHasSentMessage(true);
             return '';
         });
     }, [onSendMessage]);
@@ -66,18 +155,18 @@ export const MessageBar = (_a) => {
                 handleSend();
             }
         }
-    }, [handleSend]);
+        if (event.key === 'Enter' && event.shiftKey) {
+            if (textareaRef.current) {
+                handleNewLine(textareaRef.current);
+            }
+        }
+    }, [handleSend, isSendButtonDisabled, handleStopButton]);
     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 = () => {
@@ -91,15 +180,9 @@ export const MessageBar = (_a) => {
             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)))));
     };
-    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

@@ -3,6 +3,8 @@ import { TooltipProps } from '@patternfly/react-core';
 export interface ResponseActionButtonProps {
     /** Aria-label for the button. Defaults to the value of the tooltipContent if none provided */
     ariaLabel?: string;
+    /** Aria-label for the button, shown when the button is clicked. Defaults to the value of ariaLabel or tooltipContent if not provided. */
+    clickedAriaLabel?: string;
     /** Icon for the button */
     icon: React.ReactNode;
     /** On-click handler for the button */
@@ -13,8 +15,15 @@ export interface ResponseActionButtonProps {
     isDisabled?: boolean;
     /** Content shown in the tooltip */
     tooltipContent?: string;
+    /** Content shown in the tooltip when the button is clicked. Defaults to the value of tooltipContent if not provided. */
+    clickedTooltipContent?: string;
     /** Props to control the PF Tooltip component */
     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,5 +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, className, icon, isDisabled, onClick, tooltipContent, tooltipProps }) => (React.createElement(Tooltip, Object.assign({ id: `pf-chatbot__tooltip-response-action-${tooltipContent}`, content: tooltipContent, 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 ${className !== null && className !== void 0 ? className : ''}`, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : tooltipContent, icon: React.createElement(Icon, { isInline: true, size: "lg" }, icon), isDisabled: isDisabled, onClick: onClick, size: "sm" })));
+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, 
+        // 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/ResponseActionButton.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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

@@ -0,0 +1,49 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { DownloadIcon } from '@patternfly/react-icons';
+import ResponseActionButton from './ResponseActionButton';
+describe('ResponseActionButton', () => {
+    it('renders aria-label correctly if not clicked', () => {
+        render(React.createElement(ResponseActionButton, { icon: React.createElement(DownloadIcon, null), ariaLabel: "Download", clickedAriaLabel: "Downloaded" }));
+        expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+    });
+    it('renders aria-label correctly if clicked', () => {
+        render(React.createElement(ResponseActionButton, { icon: React.createElement(DownloadIcon, null), ariaLabel: "Download", clickedAriaLabel: "Downloaded", isClicked: true }));
+        expect(screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
+    });
+    it('renders tooltip correctly if not clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(ResponseActionButton, { icon: React.createElement(DownloadIcon, null), tooltipContent: "Download", clickedTooltipContent: "Downloaded" }));
+        expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+        // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
+        yield userEvent.click(screen.getByRole('button', { name: 'Download' }));
+        expect(screen.getByRole('tooltip', { name: 'Download' })).toBeTruthy();
+    }));
+    it('renders tooltip correctly if clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(ResponseActionButton, { icon: React.createElement(DownloadIcon, null), tooltipContent: "Download", clickedTooltipContent: "Downloaded", isClicked: true }));
+        expect(screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
+        // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
+        yield userEvent.click(screen.getByRole('button', { name: 'Downloaded' }));
+        expect(screen.getByRole('tooltip', { name: 'Downloaded' })).toBeTruthy();
+    }));
+    it('if clicked variant for tooltip is not supplied, it uses the default', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(ResponseActionButton, { icon: React.createElement(DownloadIcon, null), tooltipContent: "Download", isClicked: true }));
+        // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
+        yield userEvent.click(screen.getByRole('button', { name: 'Download' }));
+        expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+    }));
+    it('if clicked variant for aria label is not supplied, it uses the default', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(ResponseActionButton, { icon: React.createElement(DownloadIcon, null), ariaLabel: "Download", isClicked: true }));
+        expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+    }));
+});

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

@@ -1,8 +1,10 @@
 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. */
+    clickedAriaLabel?: string;
     /** On-click handler for the button */
     onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
     /** Class name for the button */
@@ -11,10 +13,18 @@ export interface ActionProps {
     isDisabled?: boolean;
     /** Content shown in the tooltip */
     tooltipContent?: string;
+    /** Content shown in the tooltip when the button is clicked. */
+    clickedTooltipContent?: string;
     /** Props to control the PF Tooltip component */
     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

@@ -13,17 +13,34 @@ import React from 'react';
 import { ExternalLinkAltIcon, VolumeUpIcon, OutlinedThumbsUpIcon, OutlinedThumbsDownIcon, OutlinedCopyIcon } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
 export const ResponseActions = ({ actions }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    const [activeButton, setActiveButton] = React.useState();
     const { positive, negative, copy, share, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "share", "listen"]);
-    return (React.createElement("div", { className: "pf-chatbot__response-actions" },
-        positive && (React.createElement(ResponseActionButton, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', onClick: positive.onClick, className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_b = positive.tooltipContent) !== null && _b !== void 0 ? _b : 'Good response', tooltipProps: positive.tooltipProps, icon: React.createElement(OutlinedThumbsUpIcon, null) })),
-        negative && (React.createElement(ResponseActionButton, { ariaLabel: (_c = negative.ariaLabel) !== null && _c !== void 0 ? _c : 'Bad response', onClick: negative.onClick, className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_d = negative.tooltipContent) !== null && _d !== void 0 ? _d : 'Bad response', tooltipProps: negative.tooltipProps, icon: React.createElement(OutlinedThumbsDownIcon, null) })),
-        copy && (React.createElement(ResponseActionButton, { ariaLabel: (_e = copy.ariaLabel) !== null && _e !== void 0 ? _e : 'Copy', onClick: copy.onClick, className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_f = copy.tooltipContent) !== null && _f !== void 0 ? _f : 'Copy', tooltipProps: copy.tooltipProps, icon: React.createElement(OutlinedCopyIcon, null) })),
-        share && (React.createElement(ResponseActionButton, { ariaLabel: (_g = share.ariaLabel) !== null && _g !== void 0 ? _g : 'Share', onClick: share.onClick, className: share.className, isDisabled: share.isDisabled, tooltipContent: (_h = share.tooltipContent) !== null && _h !== void 0 ? _h : 'Share', tooltipProps: share.tooltipProps, icon: React.createElement(ExternalLinkAltIcon, null) })),
-        listen && (React.createElement(ResponseActionButton, { ariaLabel: (_j = listen.ariaLabel) !== null && _j !== void 0 ? _j : 'Listen', onClick: listen.onClick, className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_k = listen.tooltipContent) !== null && _k !== void 0 ? _k : 'Listen', tooltipProps: listen.tooltipProps, icon: React.createElement(VolumeUpIcon, null) })),
+    const responseActions = React.useRef(null);
+    React.useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (responseActions.current && !responseActions.current.contains(e.target)) {
+                setActiveButton(undefined);
+            }
+        };
+        window.addEventListener('click', handleClickOutside);
+        return () => {
+            window.removeEventListener('click', handleClickOutside);
+        };
+    }, []);
+    const handleClick = (e, id, onClick) => {
+        setActiveButton(id);
+        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', 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;
-            return (React.createElement(ResponseActionButton, { key: action, ariaLabel: (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.ariaLabel, onClick: (_b = additionalActions[action]) === null || _b === void 0 ? void 0 : _b.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, icon: (_g = additionalActions[action]) === null || _g === void 0 ? void 0 : _g.icon }));
+            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;