@patternfly/chatbot 2.1.0-prerelease.17

package/dist/cjs/Message/Message.js

@@ -0,0 +1,69 @@
+"use strict";
+// ============================================================================
+// Chatbot Main - Message
+// ============================================================================
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Message = void 0;
+const react_1 = __importDefault(require("react"));
+const react_markdown_1 = __importDefault(require("react-markdown"));
+const remark_gfm_1 = __importDefault(require("remark-gfm"));
+const react_core_1 = require("@patternfly/react-core");
+const MessageLoading_1 = __importDefault(require("./MessageLoading"));
+const CodeBlockMessage_1 = __importDefault(require("./CodeBlockMessage/CodeBlockMessage"));
+const TextMessage_1 = __importDefault(require("./TextMessage/TextMessage"));
+const FileDetailsLabel_1 = __importDefault(require("../FileDetailsLabel/FileDetailsLabel"));
+const ResponseActions_1 = __importDefault(require("../ResponseActions/ResponseActions"));
+const SourcesCard_1 = __importDefault(require("../SourcesCard"));
+const ListItemMessage_1 = __importDefault(require("./ListMessage/ListItemMessage"));
+const UnorderedListMessage_1 = __importDefault(require("./ListMessage/UnorderedListMessage"));
+const OrderedListMessage_1 = __importDefault(require("./ListMessage/OrderedListMessage"));
+const Message = (_a) => {
+    var { role, content, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments"]);
+    // Keep timestamps consistent between Timestamp component and aria-label
+    const date = new Date();
+    const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+    return (react_1.default.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}` }, props),
+        react_1.default.createElement(react_core_1.Avatar, { src: avatar, alt: "" }),
+        react_1.default.createElement("div", { className: "pf-chatbot__message-contents" },
+            react_1.default.createElement("div", { className: "pf-chatbot__message-meta" },
+                name && (react_1.default.createElement("span", { className: "pf-chatbot__message-name" },
+                    react_1.default.createElement(react_core_1.Truncate, { content: name }))),
+                role === 'bot' && (react_1.default.createElement(react_core_1.Label, { variant: "outline", isCompact: true }, botWord)),
+                react_1.default.createElement(react_core_1.Timestamp, { date: date }, timestamp)),
+            react_1.default.createElement("div", { className: "pf-chatbot__message-response" },
+                react_1.default.createElement("div", { className: "pf-chatbot__message-and-actions" },
+                    isLoading ? (react_1.default.createElement(MessageLoading_1.default, { loadingWord: loadingWord })) : (react_1.default.createElement(react_markdown_1.default, { components: {
+                            p: TextMessage_1.default,
+                            code: ({ children }) => react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, codeBlockProps), children),
+                            ul: UnorderedListMessage_1.default,
+                            ol: OrderedListMessage_1.default,
+                            li: ListItemMessage_1.default
+                        }, remarkPlugins: [remark_gfm_1.default] }, content)),
+                    !isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources)),
+                    !isLoading && actions && react_1.default.createElement(ResponseActions_1.default, { actions: actions }),
+                    !isLoading && quickResponses && (react_1.default.createElement(react_core_1.LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className}` }, quickResponseContainerProps), quickResponses.map((_a) => {
+                        var { id, onClick, content } = _a, props = __rest(_a, ["id", "onClick", "content"]);
+                        return (react_1.default.createElement(react_core_1.Label, Object.assign({ variant: "outline", color: "blue", key: id, onClick: onClick }, props), content));
+                    })))),
+                attachments && (react_1.default.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
+                    var _a;
+                    return (react_1.default.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },
+                        react_1.default.createElement(FileDetailsLabel_1.default, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId })));
+                })))))));
+};
+exports.Message = Message;
+exports.default = exports.Message;

package/dist/cjs/Message/Message.test.d.ts

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

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

@@ -0,0 +1,239 @@
+"use strict";
+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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const Message_1 = __importDefault(require("./Message"));
+const user_event_1 = __importDefault(require("@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(react_2.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(react_2.screen.getByText(item)).toBeTruthy();
+    });
+};
+describe('Message', () => {
+    it('should render user messages correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi" }));
+        expect(react_2.screen.getByText('User')).toBeTruthy();
+        expect(react_2.screen.getByText('Hi')).toBeTruthy();
+        const date = new Date();
+        expect(react_2.screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
+        expect(react_2.screen.queryByText('Loading message')).toBeFalsy();
+        expect(react_2.screen.getByRole('img')).toHaveAttribute('src', './img');
+    });
+    it('should render bot messages correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi" }));
+        expect(react_2.screen.getByText('Bot')).toBeTruthy();
+        expect(react_2.screen.getByText('AI')).toBeTruthy();
+        expect(react_2.screen.getByText('Hi')).toBeTruthy();
+        const date = new Date();
+        expect(react_2.screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
+    });
+    it('should render avatar correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./testImg", role: "bot", name: "Bot", content: "Hi" }));
+        expect(react_2.screen.getByRole('img')).toHaveAttribute('src', './testImg');
+    });
+    it('should render botWord correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", botWord: "\u4EBA\u5DE5\u77E5\u80FD" }));
+        expect(react_2.screen.getByText('Bot')).toBeTruthy();
+        expect(react_2.screen.getByText('人工知能')).toBeTruthy();
+        expect(react_2.screen.queryByText('AI')).toBeFalsy();
+        expect(react_2.screen.getByText('Hi')).toBeTruthy();
+    });
+    it('should render timestamps', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", timestamp: "2 hours ago" }));
+        expect(react_2.screen.getByText('Bot')).toBeTruthy();
+        expect(react_2.screen.getByText('AI')).toBeTruthy();
+        expect(react_2.screen.getByText('Hi')).toBeTruthy();
+        expect(react_2.screen.getByText('2 hours ago')).toBeTruthy();
+        const date = new Date();
+        expect(react_2.screen.queryByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeFalsy();
+    });
+    it('should render attachments', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", content: "Hi", attachments: [{ name: 'testAttachment' }] }));
+        expect(react_2.screen.getByText('Hi')).toBeTruthy();
+        expect(react_2.screen.getByText('testAttachment')).toBeTruthy();
+    });
+    it('should be able to click attachments', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", content: "Hi", attachments: [{ name: 'testAttachment', onClick: spy }] }));
+        expect(react_2.screen.getByText('Hi')).toBeTruthy();
+        expect(react_2.screen.getByText('testAttachment')).toBeTruthy();
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /testAttachment/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to close attachments', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", content: "Hi", attachments: [{ name: 'testAttachment', onClose: spy }] }));
+        expect(react_2.screen.getByText('Hi')).toBeTruthy();
+        expect(react_2.screen.getByText('testAttachment')).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /close testAttachment/i })).toBeTruthy();
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /close testAttachment/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should render loading state', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isLoading: true }));
+        expect(react_2.screen.getByText('Bot')).toBeTruthy();
+        expect(react_2.screen.getByText('AI')).toBeTruthy();
+        expect(react_2.screen.queryByText('Hi')).toBeFalsy();
+        const date = new Date();
+        expect(react_2.screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
+        expect(react_2.screen.getByText('Loading message')).toBeTruthy();
+    });
+    it('should be able to show sources', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", sources: {
+                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(react_2.screen.getByText('Getting started with Red Hat OpenShift')).toBeTruthy();
+    }));
+    it('should not show sources if loading', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isLoading: true, sources: {
+                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(react_2.screen.getByText('Loading message')).toBeTruthy();
+        expect(react_2.screen.queryByText('Getting started with Red Hat OpenShift')).toBeFalsy();
+    });
+    it('should be able to show actions', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: {
+                // 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(react_2.screen.getByRole('button', { name: label })).toBeTruthy();
+        });
+    }));
+    it('should not show actions if loading', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isLoading: true, actions: {
+                // 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(react_2.screen.getByText('Loading message')).toBeTruthy();
+        ALL_ACTIONS.forEach(({ label }) => {
+            expect(react_2.screen.queryByRole('button', { name: label })).toBeFalsy();
+        });
+    }));
+    it('should render unordered lists correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: UNORDERED_LIST }));
+        expect(react_2.screen.getByText('Here is an unordered list:')).toBeTruthy();
+        checkListItemsRendered();
+    });
+    it('should render ordered lists correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ORDERED_LIST }));
+        expect(react_2.screen.getByText('Here is an ordered list:')).toBeTruthy();
+        checkListItemsRendered();
+    });
+    it('should render inline code', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: INLINE_CODE }));
+        expect(react_2.screen.getByText(/() => void/i)).toBeTruthy();
+        expect(react_2.screen.queryByRole('button', { name: 'Copy code button' })).toBeFalsy();
+    });
+    it('should render code correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
+        expect(react_2.screen.getByText('Here is some YAML code:')).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
+        expect(react_2.screen.getByText(/apiVersion: helm.openshift.io\/v1beta1/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/metadata:/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/name: azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/spec/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/connectionConfig:/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/url: https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
+    });
+    it('can click copy code button', () => __awaiter(void 0, void 0, void 0, function* () {
+        // need explicit setup since RTL stubs clipboard if you do this
+        const user = user_event_1.default.setup();
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
+        expect(react_2.screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
+        yield user.click(react_2.screen.getByRole('button', { name: 'Copy code button' }));
+        const clipboardText = yield navigator.clipboard.readText();
+        expect(clipboardText.trim()).toEqual(CODE.trim());
+    }));
+    it('should handle codeBlockProps correctly by spreading it onto the CodeMessage', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: { 'aria-label': 'test' } }));
+        expect(react_2.screen.getByRole('button', { name: 'test' })).toBeTruthy();
+    });
+});

package/dist/cjs/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/cjs/Message/MessageLoading.js

@@ -0,0 +1,13 @@
+"use strict";
+// ============================================================================
+// Chatbot Main - Message - Processing
+// ============================================================================
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const MessageLoading = ({ loadingWord }) => (react_1.default.createElement("div", { className: "pf-chatbot__message-loading" },
+    react_1.default.createElement("span", { className: "pf-chatbot__message-loading-dots" },
+        react_1.default.createElement("span", { className: "pf-v6-screen-reader" }, loadingWord))));
+exports.default = MessageLoading;

package/dist/cjs/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/cjs/Message/TextMessage/TextMessage.js

@@ -0,0 +1,27 @@
+"use strict";
+// ============================================================================
+// 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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const TextMessage = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (react_1.default.createElement("span", { className: "pf-chatbot__message-text" },
+        react_1.default.createElement(react_core_1.Content, Object.assign({ component: react_core_1.ContentVariants.p }, props), children)));
+};
+exports.default = TextMessage;

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

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

package/dist/cjs/Message/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Message_1 = require("./Message");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Message_1).default; } });
+__exportStar(require("./Message"), exports);

package/dist/cjs/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/cjs/MessageBar/AttachButton.js

@@ -0,0 +1,38 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttachButton = void 0;
+// ============================================================================
+// Chatbot Footer - Message Bar - Attach
+// ============================================================================
+const react_1 = __importDefault(require("react"));
+// Import PatternFly components
+const react_core_1 = require("@patternfly/react-core");
+const react_dropzone_1 = require("react-dropzone");
+const paperclip_icon_1 = require("@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 } = (0, react_dropzone_1.useDropzone)({
+        multiple: true,
+        onDropAccepted: onAttachAccepted
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("input", Object.assign({ "data-testid": inputTestId }, getInputProps())),
+        react_1.default.createElement(react_core_1.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_1.default.createElement(react_core_1.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_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
+                    react_1.default.createElement(paperclip_icon_1.PaperclipIcon, null)) }, props)))));
+};
+exports.AttachButton = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(AttachButtonBase, Object.assign({ innerRef: ref }, props))));

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

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

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

@@ -0,0 +1,66 @@
+"use strict";
+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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const AttachButton_1 = require("./AttachButton");
+describe('Attach button', () => {
+    it('should render button correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, null));
+        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+    });
+    it('should handle isDisabled prop', () => {
+        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { isDisabled: true }));
+        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toBeDisabled();
+    });
+    it('should handle spread props, including aria-label', () => {
+        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { "aria-label": "test" }));
+        expect(react_2.screen.getByRole('button', { name: 'test' }));
+    });
+    it('should handle onClick', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { onClick: spy }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
+        expect(react_2.screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should handle className prop', () => {
+        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { className: "test" }));
+        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toHaveClass('test');
+    });
+    it('should handle custom tooltip correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { onClick: jest.fn, tooltipContent: "Test" }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
+        expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+    }));
+    it('should handle tooltipProps prop', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { tooltipProps: { id: 'test' } }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
+        expect(react_2.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();
+        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { onAttachAccepted: spy, inputTestId: "input" }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
+        const file = new File(['test'], 'test.json');
+        const input = react_2.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(input.files).toHaveLength(1);
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+});

package/dist/cjs/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;