@patternfly/chatbot 2.1.0-prerelease.17

package/dist/esm/Message/Message.test.js

@@ -0,0 +1,234 @@
+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 Message from './Message';
+import userEvent from '@testing-library/user-event';
+const ALL_ACTIONS = [
+    { label: /Good response/i },
+    { label: /Bad response/i },
+    { label: /Copy/i },
+    { label: /Share/i },
+    { label: /Listen/i }
+];
+const UNORDERED_LIST = `
+  Here is an unordered list:
+
+  * Item 1
+  * Item 2
+  * Item 3
+`;
+const ORDERED_LIST = `
+  Here is an ordered list:
+
+  1. Item 1
+  2. Item 2
+  3. Item 3
+`;
+const CODE_MESSAGE = `
+Here is some YAML code:
+
+~~~yaml
+apiVersion: helm.openshift.io/v1beta1/
+kind: HelmChartRepository
+metadata:
+  name: azure-sample-repo0oooo00ooo
+spec:
+  connectionConfig:
+  url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
+~~~`;
+const CODE = `
+apiVersion: helm.openshift.io/v1beta1/
+kind: HelmChartRepository
+metadata:
+  name: azure-sample-repo0oooo00ooo
+spec:
+  connectionConfig:
+  url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
+`;
+const INLINE_CODE = `Here is an inline code - \`() => void\``;
+const checkListItemsRendered = () => {
+    const items = ['Item 1', 'Item 2', 'Item 3'];
+    expect(screen.getAllByRole('listitem')).toHaveLength(3);
+    items.forEach((item) => {
+        // list item text gets wrapped in a span by the third-party library so we can't just check the listitem
+        expect(screen.getByText(item)).toBeTruthy();
+    });
+};
+describe('Message', () => {
+    it('should render user messages correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Hi" }));
+        expect(screen.getByText('User')).toBeTruthy();
+        expect(screen.getByText('Hi')).toBeTruthy();
+        const date = new Date();
+        expect(screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
+        expect(screen.queryByText('Loading message')).toBeFalsy();
+        expect(screen.getByRole('img')).toHaveAttribute('src', './img');
+    });
+    it('should render bot messages correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi" }));
+        expect(screen.getByText('Bot')).toBeTruthy();
+        expect(screen.getByText('AI')).toBeTruthy();
+        expect(screen.getByText('Hi')).toBeTruthy();
+        const date = new Date();
+        expect(screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
+    });
+    it('should render avatar correctly', () => {
+        render(React.createElement(Message, { avatar: "./testImg", role: "bot", name: "Bot", content: "Hi" }));
+        expect(screen.getByRole('img')).toHaveAttribute('src', './testImg');
+    });
+    it('should render botWord correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", botWord: "\u4EBA\u5DE5\u77E5\u80FD" }));
+        expect(screen.getByText('Bot')).toBeTruthy();
+        expect(screen.getByText('人工知能')).toBeTruthy();
+        expect(screen.queryByText('AI')).toBeFalsy();
+        expect(screen.getByText('Hi')).toBeTruthy();
+    });
+    it('should render timestamps', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", timestamp: "2 hours ago" }));
+        expect(screen.getByText('Bot')).toBeTruthy();
+        expect(screen.getByText('AI')).toBeTruthy();
+        expect(screen.getByText('Hi')).toBeTruthy();
+        expect(screen.getByText('2 hours ago')).toBeTruthy();
+        const date = new Date();
+        expect(screen.queryByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeFalsy();
+    });
+    it('should render attachments', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", content: "Hi", attachments: [{ name: 'testAttachment' }] }));
+        expect(screen.getByText('Hi')).toBeTruthy();
+        expect(screen.getByText('testAttachment')).toBeTruthy();
+    });
+    it('should be able to click attachments', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(Message, { avatar: "./img", role: "user", content: "Hi", attachments: [{ name: 'testAttachment', onClick: spy }] }));
+        expect(screen.getByText('Hi')).toBeTruthy();
+        expect(screen.getByText('testAttachment')).toBeTruthy();
+        yield userEvent.click(screen.getByRole('button', { name: /testAttachment/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to close attachments', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(Message, { avatar: "./img", role: "user", content: "Hi", attachments: [{ name: 'testAttachment', onClose: spy }] }));
+        expect(screen.getByText('Hi')).toBeTruthy();
+        expect(screen.getByText('testAttachment')).toBeTruthy();
+        expect(screen.getByRole('button', { name: /close testAttachment/i })).toBeTruthy();
+        yield userEvent.click(screen.getByRole('button', { name: /close testAttachment/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should render loading state', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isLoading: true }));
+        expect(screen.getByText('Bot')).toBeTruthy();
+        expect(screen.getByText('AI')).toBeTruthy();
+        expect(screen.queryByText('Hi')).toBeFalsy();
+        const date = new Date();
+        expect(screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
+        expect(screen.getByText('Loading message')).toBeTruthy();
+    });
+    it('should be able to show sources', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", sources: {
+                sources: [
+                    {
+                        title: 'Getting started with Red Hat OpenShift',
+                        link: '#',
+                        body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...'
+                    }
+                ]
+            } }));
+        expect(screen.getByText('Getting started with Red Hat OpenShift')).toBeTruthy();
+    }));
+    it('should not show sources if loading', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isLoading: true, sources: {
+                sources: [
+                    {
+                        title: 'Getting started with Red Hat OpenShift',
+                        link: '#',
+                        body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...'
+                    }
+                ]
+            } }));
+        expect(screen.getByText('Loading message')).toBeTruthy();
+        expect(screen.queryByText('Getting started with Red Hat OpenShift')).toBeFalsy();
+    });
+    it('should be able to show actions', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: {
+                // eslint-disable-next-line no-console
+                positive: { onClick: () => console.log('Good response') },
+                // eslint-disable-next-line no-console
+                negative: { onClick: () => console.log('Bad response') },
+                // eslint-disable-next-line no-console
+                copy: { onClick: () => console.log('Copy') },
+                // eslint-disable-next-line no-console
+                share: { onClick: () => console.log('Share') },
+                // eslint-disable-next-line no-console
+                listen: { onClick: () => console.log('Listen') }
+            } }));
+        ALL_ACTIONS.forEach(({ label }) => {
+            expect(screen.getByRole('button', { name: label })).toBeTruthy();
+        });
+    }));
+    it('should not show actions if loading', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isLoading: true, actions: {
+                // eslint-disable-next-line no-console
+                positive: { onClick: () => console.log('Good response') },
+                // eslint-disable-next-line no-console
+                negative: { onClick: () => console.log('Bad response') },
+                // eslint-disable-next-line no-console
+                copy: { onClick: () => console.log('Copy') },
+                // eslint-disable-next-line no-console
+                share: { onClick: () => console.log('Share') },
+                // eslint-disable-next-line no-console
+                listen: { onClick: () => console.log('Listen') }
+            } }));
+        expect(screen.getByText('Loading message')).toBeTruthy();
+        ALL_ACTIONS.forEach(({ label }) => {
+            expect(screen.queryByRole('button', { name: label })).toBeFalsy();
+        });
+    }));
+    it('should render unordered lists correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: UNORDERED_LIST }));
+        expect(screen.getByText('Here is an unordered list:')).toBeTruthy();
+        checkListItemsRendered();
+    });
+    it('should render ordered lists correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: ORDERED_LIST }));
+        expect(screen.getByText('Here is an ordered list:')).toBeTruthy();
+        checkListItemsRendered();
+    });
+    it('should render inline code', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: INLINE_CODE }));
+        expect(screen.getByText(/() => void/i)).toBeTruthy();
+        expect(screen.queryByRole('button', { name: 'Copy code button' })).toBeFalsy();
+    });
+    it('should render code correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
+        expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
+        expect(screen.getByText(/apiVersion: helm.openshift.io\/v1beta1/i)).toBeTruthy();
+        expect(screen.getByText(/metadata:/i)).toBeTruthy();
+        expect(screen.getByText(/name: azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+        expect(screen.getByText(/spec/i)).toBeTruthy();
+        expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
+        expect(screen.getByText(/url: https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
+    });
+    it('can click copy code button', () => __awaiter(void 0, void 0, void 0, function* () {
+        // need explicit setup since RTL stubs clipboard if you do this
+        const user = userEvent.setup();
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
+        expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
+        yield user.click(screen.getByRole('button', { name: 'Copy code button' }));
+        const clipboardText = yield navigator.clipboard.readText();
+        expect(clipboardText.trim()).toEqual(CODE.trim());
+    }));
+    it('should handle codeBlockProps correctly by spreading it onto the CodeMessage', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: { 'aria-label': 'test' } }));
+        expect(screen.getByRole('button', { name: 'test' })).toBeTruthy();
+    });
+});

package/dist/esm/Message/MessageLoading.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const MessageLoading: ({ loadingWord }: {
+    loadingWord: any;
+}) => React.JSX.Element;
+export default MessageLoading;

package/dist/esm/Message/MessageLoading.js

@@ -0,0 +1,8 @@
+// ============================================================================
+// Chatbot Main - Message - Processing
+// ============================================================================
+import React from 'react';
+const MessageLoading = ({ loadingWord }) => (React.createElement("div", { className: "pf-chatbot__message-loading" },
+    React.createElement("span", { className: "pf-chatbot__message-loading-dots" },
+        React.createElement("span", { className: "pf-v6-screen-reader" }, loadingWord))));
+export default MessageLoading;

package/dist/esm/Message/TextMessage/TextMessage.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+declare const TextMessage: ({ children, ...props }: JSX.IntrinsicElements["p"] & ExtraProps) => React.JSX.Element;
+export default TextMessage;

package/dist/esm/Message/TextMessage/TextMessage.js

@@ -0,0 +1,22 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Text
+// ============================================================================
+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 { Content, ContentVariants } from '@patternfly/react-core';
+const TextMessage = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (React.createElement("span", { className: "pf-chatbot__message-text" },
+        React.createElement(Content, Object.assign({ component: ContentVariants.p }, props), children)));
+};
+export default TextMessage;

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

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

package/dist/esm/Message/index.js

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

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonProps, DropEvent, TooltipProps } from '@patternfly/react-core';
+export interface AttachButtonProps extends ButtonProps {
+    /** Callback for when button is clicked */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Callback function for AttachButton when an attachment is made */
+    onAttachAccepted?: (data: File[], event: DropEvent) => void;
+    /** Class name for AttachButton */
+    className?: string;
+    /** Props to control if the AttachButton should be disabled */
+    isDisabled?: boolean;
+    /** Props to control the PF Tooltip component */
+    tooltipProps?: Omit<TooltipProps, 'content'>;
+    /** Ref applied to AttachButton and used in tooltip */
+    innerRef?: React.Ref<any>;
+    /** English text "Attach" used in the tooltip */
+    tooltipContent?: string;
+    /** Test id applied to input */
+    inputTestId?: string;
+}
+export declare const AttachButton: React.ForwardRefExoticComponent<AttachButtonProps & React.RefAttributes<any>>;

package/dist/esm/MessageBar/AttachButton.js

@@ -0,0 +1,32 @@
+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;
+};
+// ============================================================================
+// Chatbot Footer - Message Bar - Attach
+// ============================================================================
+import React from 'react';
+// Import PatternFly components
+import { Button, Icon, Tooltip } from '@patternfly/react-core';
+import { useDropzone } from 'react-dropzone';
+import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';
+const AttachButtonBase = (_a) => {
+    var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId"]);
+    const { open, getInputProps } = useDropzone({
+        multiple: true,
+        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(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)))));
+};
+export const AttachButton = React.forwardRef((props, ref) => (React.createElement(AttachButtonBase, Object.assign({ innerRef: ref }, props))));

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

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

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

@@ -0,0 +1,61 @@
+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 { AttachButton } from './AttachButton';
+describe('Attach button', () => {
+    it('should render button correctly', () => {
+        render(React.createElement(AttachButton, null));
+        expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+    });
+    it('should handle isDisabled prop', () => {
+        render(React.createElement(AttachButton, { isDisabled: true }));
+        expect(screen.getByRole('button', { name: 'Attach button' })).toBeDisabled();
+    });
+    it('should handle spread props, including aria-label', () => {
+        render(React.createElement(AttachButton, { "aria-label": "test" }));
+        expect(screen.getByRole('button', { name: 'test' }));
+    });
+    it('should handle onClick', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(AttachButton, { onClick: spy }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+        expect(screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should handle className prop', () => {
+        render(React.createElement(AttachButton, { className: "test" }));
+        expect(screen.getByRole('button', { name: 'Attach button' })).toHaveClass('test');
+    });
+    it('should handle custom tooltip correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(AttachButton, { onClick: jest.fn, tooltipContent: "Test" }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+        expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+    }));
+    it('should handle tooltipProps prop', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(AttachButton, { tooltipProps: { id: 'test' } }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+        expect(screen.getByRole('tooltip', { name: 'Attach' })).toHaveAttribute('id', 'test');
+    }));
+    // Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
+    // See also https://developer.mozilla.org/en-US/docs/Web/API/File/File for what that file variable is doing
+    it('should handle onAttachAccepted prop', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(AttachButton, { onAttachAccepted: spy, inputTestId: "input" }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+        const file = new File(['test'], 'test.json');
+        const input = screen.getByTestId('input');
+        yield userEvent.upload(input, file);
+        expect(input.files).toHaveLength(1);
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+});

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { ButtonProps, DropEvent } from '@patternfly/react-core';
+export interface MessageBarWithAttachMenuProps {
+    /** Flag to enable whether attach menu is open */
+    isAttachMenuOpen: boolean;
+    /** Callback to close attach menu */
+    setIsAttachMenuOpen: (isOpen: boolean) => void;
+    /** Items in menu */
+    attachMenuItems: React.ReactNode;
+    /** A callback for when the attachment menu toggle is clicked */
+    onAttachMenuToggleClick: () => void;
+    /** A callback for when the input value in the menu changes. */
+    onAttachMenuInputChange: (value: string) => void;
+    /** Function callback called when user selects item in menu. */
+    onAttachMenuSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void;
+    /** Placeholder for search input */
+    attachMenuInputPlaceholder?: string;
+    /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
+    onAttachMenuOnOpenChangeKeys?: string[];
+    /** Callback to change the open state of the menu. Triggered by clicking outside of the menu. */
+    onAttachMenuOpenChange?: (isOpen: boolean) => void;
+}
+export interface MessageBarProps {
+    /** Callback to get the value of input message by user */
+    onSendMessage: (message: string) => 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 */
+    alwayShowSendButton?: boolean;
+    /** Flag to disable/enable the Attach button  */
+    hasAttachButton?: boolean;
+    /** Flag to enable the Microphone button  */
+    hasMicrophoneButton?: boolean;
+    /** Flag to enable the Stop button, used for streaming content */
+    hasStopButton?: boolean;
+    /** Callback function for when stop button is clicked */
+    handleStopButton?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Callback function for when attach button is used to upload a file */
+    handleAttach?: (data: File[], event: DropEvent) => void;
+    /** Props to enable a menu that opens when the Attach button is clicked, instead of the attachment window */
+    attachMenuProps?: MessageBarWithAttachMenuProps;
+    /** Flag to provide manual control over whether send button is disabled */
+    isSendButtonDisabled?: boolean;
+    /** Prop to allow passage of additional props to buttons */
+    buttonProps?: {
+        attach?: {
+            tooltipContent?: string;
+            props?: ButtonProps;
+            inputTestId?: string;
+        };
+        stop?: {
+            tooltipContent?: string;
+            props?: ButtonProps;
+        };
+        send?: {
+            tooltipContent?: string;
+            props?: ButtonProps;
+        };
+        microphone?: {
+            tooltipContent?: {
+                active?: string;
+                inactive?: string;
+            };
+            props?: ButtonProps;
+        };
+    };
+    /** A callback for when the text area value changes. */
+    onChange?: (event: React.ChangeEvent<HTMLDivElement>, value: string) => void;
+}
+export declare const MessageBar: React.FunctionComponent<MessageBarProps>;
+export default MessageBar;

package/dist/esm/MessageBar/MessageBar.js

@@ -0,0 +1,105 @@
+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 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"]);
+    // Text Input
+    // --------------------------------------------------------------------------
+    const [message, setMessage] = React.useState('');
+    const [isListeningMessage, setIsListeningMessage] = React.useState(false);
+    const [showPlaceholder, setShowPlaceholder] = React.useState(true);
+    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, '');
+        }
+        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);
+            }
+            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();
+            }
+            return '';
+        });
+    }, [onSendMessage]);
+    const handleKeyDown = React.useCallback((event) => {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            if (!isSendButtonDisabled && !hasStopButton) {
+                handleSend();
+            }
+        }
+    }, [handleSend]);
+    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 renderButtons = () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (hasStopButton && handleStopButton) {
+            return (React.createElement(StopButton, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent }, (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.props)));
+        }
+        return (React.createElement(React.Fragment, null,
+            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: setMessage, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent }, (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.props))),
+            (alwayShowSendButton || message) && (React.createElement(SendButton, Object.assign({ value: message, onClick: handleSend, isDisabled: isSendButtonDisabled, tooltipContent: (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _k === void 0 ? void 0 : _k.tooltipContent }, (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.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("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) => {
+                var _a;
+                (_a = attachButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(isAttachMenuOpen);
+                (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange(isAttachMenuOpen));
+            }, onOpenChangeKeys: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOnOpenChangeKeys, onSelect: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuSelect }, (attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange }), { popperProps: { direction: 'up', distance: '8' }, searchInputPlaceholder: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuInputPlaceholder })));
+    }
+    return React.createElement("div", { className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}` }, messageBarContents);
+};
+export default MessageBar;

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

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