@patternfly/chatbot 1.0.0

package/dist/cjs/Message/Message.js

@@ -0,0 +1,94 @@
+"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.MessageBase = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// ============================================================================
+// Chatbot Main - Message
+// ============================================================================
+const react_1 = require("react");
+const react_core_1 = require("@patternfly/react-core");
+const MessageLoading_1 = __importDefault(require("./MessageLoading"));
+const FileDetailsLabel_1 = __importDefault(require("../FileDetailsLabel/FileDetailsLabel"));
+const ResponseActions_1 = __importDefault(require("../ResponseActions/ResponseActions"));
+const SourcesCard_1 = __importDefault(require("../SourcesCard"));
+const QuickStartTile_1 = __importDefault(require("./QuickStarts/QuickStartTile"));
+const QuickResponse_1 = __importDefault(require("./QuickResponse/QuickResponse"));
+const UserFeedback_1 = __importDefault(require("./UserFeedback/UserFeedback"));
+const UserFeedbackComplete_1 = __importDefault(require("./UserFeedback/UserFeedbackComplete"));
+// see the full list of styles here: https://highlightjs.org/examples
+require("highlight.js/styles/vs2015.css");
+const ErrorMessage_1 = __importDefault(require("./ErrorMessage/ErrorMessage"));
+const MessageInput_1 = __importDefault(require("./MessageInput"));
+const ToolResponse_1 = __importDefault(require("../ToolResponse"));
+const DeepThinking_1 = __importDefault(require("../DeepThinking"));
+const ToolCall_1 = __importDefault(require("../ToolCall"));
+const MarkdownContent_1 = __importDefault(require("../MarkdownContent"));
+const react_styles_1 = require("@patternfly/react-styles");
+const rh_ui_ai_chatbot_icon_1 = __importDefault(require("@patternfly/react-icons/dist/esm/icons/rh-ui-ai-chatbot-icon"));
+const MessageBase = (_a) => {
+    var { children, role, alignment = 'start', isMetadataVisible = true, content, extraContent, name, avatar, isAvatarHidden = false, timestamp, isLoading, actions, persistActionSelection, showActionsOnInteraction = false, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], additionalRemarkPlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse, deepThinking, remarkGfmProps, toolCall, hasNoImagesInUserMessages = true, isPrimary, useFilledIconsOnClick } = _a, props = __rest(_a, ["children", "role", "alignment", "isMetadataVisible", "content", "extraContent", "name", "avatar", "isAvatarHidden", "timestamp", "isLoading", "actions", "persistActionSelection", "showActionsOnInteraction", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "additionalRemarkPlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse", "deepThinking", "remarkGfmProps", "toolCall", "hasNoImagesInUserMessages", "isPrimary", "useFilledIconsOnClick"]);
+    const [messageText, setMessageText] = (0, react_1.useState)(content);
+    (0, react_1.useEffect)(() => {
+        setMessageText(content);
+    }, [content]);
+    const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
+    let avatarClassName;
+    if (avatarProps && 'className' in avatarProps) {
+        const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
+        avatarClassName = className;
+        avatarProps = Object.assign({}, rest);
+    }
+    // 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()}`;
+    const handleMarkdown = () => ((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: messageText, isMarkdownDisabled: isMarkdownDisabled, codeBlockProps: codeBlockProps, tableProps: tableProps, openLinkInNewTab: openLinkInNewTab, additionalRehypePlugins: additionalRehypePlugins, additionalRemarkPlugins: additionalRemarkPlugins, linkProps: linkProps, reactMarkdownProps: reactMarkdownProps, remarkGfmProps: remarkGfmProps, hasNoImages: role === 'user' && hasNoImagesInUserMessages, isPrimary: isPrimary }));
+    const renderMessage = () => {
+        if (isLoading) {
+            return (0, jsx_runtime_1.jsx)(MessageLoading_1.default, { loadingWord: loadingWord, isPrimary: isPrimary });
+        }
+        if (isEditable) {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [beforeMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: beforeMainContent }), (0, jsx_runtime_1.jsx)(MessageInput_1.default, Object.assign({ content: messageText, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, value) => {
+                            onEditUpdate && onEditUpdate(event);
+                            setMessageText(value);
+                        }, onEditCancel: onEditCancel, inputRef: inputRef }, editFormProps))] }));
+        }
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [beforeMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: beforeMainContent }), error ? (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, Object.assign({}, error)) : handleMarkdown()] }));
+    };
+    const avatarClasses = (0, react_styles_1.css)(`pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`);
+    /* We are using an empty alt tag intentionally in order to reduce noise on screen readers */
+    const botAvatar = ((0, jsx_runtime_1.jsx)(react_core_1.Avatar, Object.assign({ className: avatarClasses, alt: "", isBordered: true }, avatarProps, { src: undefined, initials: undefined, children: (0, jsx_runtime_1.jsx)(rh_ui_ai_chatbot_icon_1.default, {}) })));
+    let _avatar;
+    if (!isAvatarHidden) {
+        if (role === 'bot') {
+            _avatar = botAvatar;
+        }
+        else if (avatar) {
+            _avatar =
+                typeof avatar === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.Avatar, Object.assign({ className: avatarClasses, src: avatar, alt: "" }, avatarProps))) : ((0, jsx_runtime_1.jsx)(react_core_1.Avatar, Object.assign({ className: avatarClasses, alt: "" }, avatarProps, { children: avatar })));
+        }
+        else if (avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.initials) {
+            _avatar = (0, jsx_runtime_1.jsx)(react_core_1.Avatar, Object.assign({ className: avatarClasses, alt: "" }, avatarProps));
+        }
+    }
+    return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: (0, react_styles_1.css)(`pf-chatbot__message pf-chatbot__message--${role}`, alignment === 'end' && 'pf-m-end'), "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [_avatar && _avatar, (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-contents", children: [isMetadataVisible && ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-meta", children: [name && ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__message-name", children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: name }) })), role === 'bot' && ((0, jsx_runtime_1.jsx)(react_core_1.Label, { variant: "outline", isCompact: true, children: botWord })), (0, jsx_runtime_1.jsx)(react_core_1.Timestamp, { date: date, children: timestamp })] })), (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-response", children: children ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: afterMainContent }), toolResponse && (0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, toolResponse)), deepThinking && (0, jsx_runtime_1.jsx)(DeepThinking_1.default, Object.assign({}, deepThinking)), toolCall && (0, jsx_runtime_1.jsx)(ToolCall_1.default, Object.assign({}, toolCall)), !isLoading && sources && (0, jsx_runtime_1.jsx)(SourcesCard_1.default, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && ((0, jsx_runtime_1.jsx)(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.isArray(actions) ? ((0, jsx_runtime_1.jsx)("div", { className: (0, react_styles_1.css)('pf-chatbot__response-actions-groups', showActionsOnInteraction && 'pf-m-visible-interaction'), children: actions.map((actionGroup, index) => ((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: actionGroup.actions || actionGroup, persistActionSelection: persistActionSelection || actionGroup.persistActionSelection, useFilledIconsOnClick: useFilledIconsOnClick }, index))) })) : ((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: actions, persistActionSelection: persistActionSelection, useFilledIconsOnClick: useFilledIconsOnClick, showActionsOnInteraction: showActionsOnInteraction })) })), userFeedbackForm && ((0, jsx_runtime_1.jsx)(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact }))), userFeedbackComplete && ((0, jsx_runtime_1.jsx)(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && ((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
+                                        var _a;
+                                        return ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-attachment", children: (0, jsx_runtime_1.jsx)(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, variant: isPrimary ? 'outline' : undefined }) }, (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name));
+                                    }) })), !isLoading && endContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: endContent })] })) })] })] })));
+};
+exports.MessageBase = MessageBase;
+const Message = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.MessageBase, Object.assign({ innerRef: ref }, props))));
+exports.default = Message;

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

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