@patternfly/chatbot 1.0.0

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

@@ -0,0 +1,14 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+/**
+ * The container that wraps the primary message content and inline actions, such as ToolCall, ToolResponse, DeepThinking, ResponseActions, etc.
+ * Attachments should not be rendered inside this container.
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface MessageAndActionsProps extends HTMLProps<HTMLDivElement> {
+    /** Content to render inside the message and actions container. */
+    children: ReactNode;
+    /** Additional classes applied to the message and actions container. */
+    className?: string;
+}
+export declare const MessageAndActions: FunctionComponent<MessageAndActionsProps>;
+export default MessageAndActions;

package/dist/esm/Message/MessageAndActions/MessageAndActions.js

@@ -0,0 +1,18 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { css } from '@patternfly/react-styles';
+export const MessageAndActions = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (_jsx("div", Object.assign({ className: css('pf-chatbot__message-and-actions', className) }, props, { children: children })));
+};
+export default MessageAndActions;

package/dist/esm/Message/MessageAndActions/MessageAndActions.test.d.ts

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import MessageAndActions from './MessageAndActions';
+test('Renders with children', () => {
+    render(_jsx(MessageAndActions, { children: "Test content" }));
+    expect(screen.getByText('Test content')).toBeInTheDocument();
+});
+test('Renders with pf-chatbot__message-and-actions class by default', () => {
+    render(_jsx(MessageAndActions, { children: "Test content" }));
+    expect(screen.getByText('Test content')).toHaveClass('pf-chatbot__message-and-actions', { exact: true });
+});
+test('Renders with custom className', () => {
+    render(_jsx(MessageAndActions, { className: "custom-class", children: "Test content" }));
+    expect(screen.getByText('Test content')).toHaveClass('custom-class');
+});
+test('Spreads additional props', () => {
+    render(_jsx(MessageAndActions, { id: "test-id", children: "Test content" }));
+    expect(screen.getByText('Test content')).toHaveAttribute('id', 'test-id');
+});

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

@@ -0,0 +1 @@
+export * from './MessageAndActions';

package/dist/esm/Message/MessageAndActions/index.js

@@ -0,0 +1 @@
+export * from './MessageAndActions';

package/dist/esm/Message/MessageAttachments/MessageAttachmentItem.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+/**
+ * The container for a single message attachment item, typically the FileDetailsLabel component. You must wrap any attachment components in this container.
+ * Use this component within MessageAttachmentsContainer when passing children to Message to customize its structure.
+ */
+export interface MessageAttachmentItemProps extends HTMLProps<HTMLDivElement> {
+    /** Content to render inside a single attachment container */
+    children: ReactNode;
+    /** Additional classes applied to the attachment container. */
+    className?: string;
+}
+export declare const MessageAttachmentItem: FunctionComponent<MessageAttachmentItemProps>;
+export default MessageAttachmentItem;

package/dist/esm/Message/MessageAttachments/MessageAttachmentItem.js

@@ -0,0 +1,18 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { css } from '@patternfly/react-styles';
+export const MessageAttachmentItem = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (_jsx("div", Object.assign({ className: css('pf-chatbot__message-attachment', className) }, props, { children: children })));
+};
+export default MessageAttachmentItem;

package/dist/esm/Message/MessageAttachments/MessageAttachmentItem.test.d.ts

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import MessageAttachmentItem from './MessageAttachmentItem';
+test('Renders with children', () => {
+    render(_jsx(MessageAttachmentItem, { children: "Test content" }));
+    expect(screen.getByText('Test content')).toBeInTheDocument();
+});
+test('Renders with pf-chatbot__message-attachment class by default', () => {
+    render(_jsx(MessageAttachmentItem, { children: "Test content" }));
+    expect(screen.getByText('Test content')).toHaveClass('pf-chatbot__message-attachment', { exact: true });
+});
+test('Renders with custom className', () => {
+    render(_jsx(MessageAttachmentItem, { className: "custom-class", children: "Test content" }));
+    expect(screen.getByText('Test content')).toHaveClass('custom-class');
+});
+test('Spreads additional props', () => {
+    render(_jsx(MessageAttachmentItem, { id: "test-id", children: "Test content" }));
+    expect(screen.getByText('Test content')).toHaveAttribute('id', 'test-id');
+});

package/dist/esm/Message/MessageAttachments/MessageAttachmentsContainer.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+/**
+ * The container to wrap MessageAttachment components. You must wrap any MessageAttachment components in this container.
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface MessageAttachmentsContainerProps extends HTMLProps<HTMLDivElement> {
+    /** Content to render inside the attachments container */
+    children: ReactNode;
+    /** Additional classes applied to the attachments container. */
+    className?: string;
+}
+export declare const MessageAttachmentsContainer: FunctionComponent<MessageAttachmentsContainerProps>;
+export default MessageAttachmentsContainer;

package/dist/esm/Message/MessageAttachments/MessageAttachmentsContainer.js

@@ -0,0 +1,18 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { css } from '@patternfly/react-styles';
+export const MessageAttachmentsContainer = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (_jsx("div", Object.assign({ className: css('pf-chatbot__message-attachments-container', className) }, props, { children: children })));
+};
+export default MessageAttachmentsContainer;

package/dist/esm/Message/MessageAttachments/MessageAttachmentsContainer.test.d.ts

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import MessageAttachmentsContainer from './MessageAttachmentsContainer';
+test('Renders with children', () => {
+    render(_jsx(MessageAttachmentsContainer, { children: "Test content" }));
+    expect(screen.getByText('Test content')).toBeInTheDocument();
+});
+test('Renders with pf-chatbot__message-attachments-container class by default', () => {
+    render(_jsx(MessageAttachmentsContainer, { children: "Test content" }));
+    expect(screen.getByText('Test content')).toHaveClass('pf-chatbot__message-attachments-container', { exact: true });
+});
+test('Renders with custom className', () => {
+    render(_jsx(MessageAttachmentsContainer, { className: "custom-class", children: "Test content" }));
+    expect(screen.getByText('Test content')).toHaveClass('custom-class');
+});
+test('Spreads additional props', () => {
+    render(_jsx(MessageAttachmentsContainer, { id: "test-id", children: "Test content" }));
+    expect(screen.getByText('Test content')).toHaveAttribute('id', 'test-id');
+});

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

@@ -0,0 +1,2 @@
+export * from './MessageAttachmentItem';
+export * from './MessageAttachmentsContainer';

package/dist/esm/Message/MessageAttachments/index.js

@@ -0,0 +1,2 @@
+export * from './MessageAttachmentItem';
+export * from './MessageAttachmentsContainer';

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

@@ -0,0 +1,20 @@
+import type { FunctionComponent, Ref } from 'react';
+import { FormProps } from '@patternfly/react-core';
+export interface MessageInputProps extends FormProps {
+    /** Placeholder for edit input */
+    editPlaceholder?: string;
+    /** Label for the English word "Update" used in edit mode. */
+    updateWord?: string;
+    /** Label for the English word "Cancel" used in edit mode. */
+    cancelWord?: string;
+    /** Callback function for when edit mode update button is clicked */
+    onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
+    /** Callback functionf or when edit cancel update button is clicked */
+    onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Ref applied to editable message input */
+    inputRef?: Ref<HTMLTextAreaElement>;
+    /** Message text */
+    content?: string;
+}
+export declare const MessageInput: FunctionComponent<MessageInputProps>;
+export default MessageInput;

package/dist/esm/Message/MessageInput.js

@@ -0,0 +1,23 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ActionGroup, Button, Form, TextArea } from '@patternfly/react-core';
+export const MessageInput = (_a) => {
+    var { editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, content } = _a, props = __rest(_a, ["editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "content"]);
+    const [messageText, setMessageText] = useState(content !== null && content !== void 0 ? content : '');
+    const onChange = (_event, value) => {
+        setMessageText(value);
+    };
+    return (_jsxs(Form, Object.assign({}, props, { children: [_jsx(TextArea, { placeholder: editPlaceholder, value: messageText, onChange: onChange, "aria-label": editPlaceholder, autoResize: true, ref: inputRef }), _jsxs(ActionGroup, { className: "pf-chatbot__message-edit-buttons", children: [_jsx(Button, { variant: "primary", onClick: (event) => onEditUpdate && onEditUpdate(event, messageText), children: updateWord }), _jsx(Button, { variant: "secondary", onClick: onEditCancel, children: cancelWord })] })] })));
+};
+export default MessageInput;

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

@@ -0,0 +1,14 @@
+import { FunctionComponent } from 'react';
+import type { HTMLProps } from 'react';
+/**
+ * MessageLoading displays a loading animation for messages.
+ * Use this component when passing children to Message to show a loading state.
+ */
+export interface MessageLoadingProps extends HTMLProps<HTMLDivElement> {
+    /** Text announced to screen readers during loading. */
+    loadingWord?: string;
+    /** Flag indicating whether primary styling is applied */
+    isPrimary?: boolean;
+}
+export declare const MessageLoading: FunctionComponent<MessageLoadingProps>;
+export default MessageLoading;

package/dist/esm/Message/MessageLoading.js

@@ -0,0 +1,18 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { css } from '@patternfly/react-styles';
+export const MessageLoading = (_a) => {
+    var { loadingWord, isPrimary } = _a, props = __rest(_a, ["loadingWord", "isPrimary"]);
+    return (_jsx("div", Object.assign({ className: css('pf-chatbot__message-loading', isPrimary && 'pf-m-primary') }, props, { children: _jsx("span", { className: "pf-chatbot__message-loading-dots", children: _jsx("span", { className: "pf-v6-screen-reader", children: loadingWord }) }) })));
+};
+export default MessageLoading;

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import MessageLoading from './MessageLoading';
+test('Renders with pf-chatbot__message-loading class by default', () => {
+    render(_jsx(MessageLoading, { "data-testid": "test-id" }));
+    expect(screen.getByTestId('test-id')).toHaveClass('pf-chatbot__message-loading', { exact: true });
+});
+test('Renders with pf-m-primary class when isPrimary is true', () => {
+    render(_jsx(MessageLoading, { "data-testid": "test-id", isPrimary: true }));
+    expect(screen.getByTestId('test-id')).toHaveClass('pf-chatbot__message-loading pf-m-primary');
+});
+test('Renders loading word when loadingWord is passed', () => {
+    render(_jsx(MessageLoading, { loadingWord: "Loading message" }));
+    expect(screen.getByText('Loading message')).toBeInTheDocument();
+});
+test('Spreads additional props', () => {
+    render(_jsx(MessageLoading, { "data-testid": "test-id", id: "custom-id" }));
+    expect(screen.getByTestId('test-id')).toHaveAttribute('id', 'custom-id');
+});

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

@@ -0,0 +1 @@
+export { rehypeCodeBlockToggle } from './rehypeCodeBlockToggle';

package/dist/esm/Message/Plugins/index.js

@@ -0,0 +1 @@
+export { rehypeCodeBlockToggle } from './rehypeCodeBlockToggle';

package/dist/esm/Message/Plugins/rehypeCodeBlockToggle.d.ts

@@ -0,0 +1,2 @@
+import { Node } from 'unist';
+export declare const rehypeCodeBlockToggle: () => (tree: Node) => void;

package/dist/esm/Message/Plugins/rehypeCodeBlockToggle.js

@@ -0,0 +1,20 @@
+import { visit } from 'unist-util-visit';
+// Rehype plugin to add language information to code block props
+// Per Eric, Ideally any toggle buttons that can be navigated to would have unique accessible names
+// For the purposes of our examples this should suffice, but in a real-world use case they may need to be more unique
+export const rehypeCodeBlockToggle = () => (tree) => {
+    visit(tree, 'element', (node) => {
+        var _a;
+        if (node.tagName === 'code' && ((_a = node.properties) === null || _a === void 0 ? void 0 : _a.className)) {
+            const className = node.properties.className;
+            const languageMatch = className.find((cls) => cls.startsWith('language-'));
+            if (languageMatch) {
+                const language = languageMatch.replace('language-', '').toUpperCase();
+                // Add the language and toggle text as data attributes
+                node.properties['data-language'] = language;
+                node.properties['data-expanded-text'] = `Show less ${language} code`;
+                node.properties['data-collapsed-text'] = `Show more ${language} code`;
+            }
+        }
+    });
+};

package/dist/esm/Message/Plugins/rehypeMoveImagesOutOfParagraphs.d.ts

@@ -0,0 +1,2 @@
+import { Node } from 'unist';
+export declare const rehypeMoveImagesOutOfParagraphs: () => (tree: Node) => void;

package/dist/esm/Message/Plugins/rehypeMoveImagesOutOfParagraphs.js

@@ -0,0 +1,43 @@
+import { visit } from 'unist-util-visit';
+// Rehype plugin to remove images from within p tags and put them as separate block-level elements.
+// This allows us to avoid having a blue background on images - this is something Kayla requested.
+export const rehypeMoveImagesOutOfParagraphs = () => (tree) => {
+    const nodesToRemove = [];
+    visit(tree, 'element', (node, index, parent) => {
+        if (node.tagName === 'p' && node.children) {
+            const imagesInParagraph = [];
+            node.children.forEach((child, childIndex) => {
+                if (child.type === 'element' && child.tagName === 'img') {
+                    imagesInParagraph.push({ node: child, index: childIndex });
+                }
+            });
+            if (imagesInParagraph.length > 0 && parent && index !== null) {
+                imagesInParagraph.forEach(({ node: imgNode, index: imgIndex }) => {
+                    nodesToRemove.push({ parent: node, index: imgIndex, node: imgNode });
+                });
+                // To avoid issues with index shifting during removal, we process in reverse
+                for (let i = nodesToRemove.length - 1; i >= 0; i--) {
+                    const { parent: pTag, index: imgIndexToRemove } = nodesToRemove[i];
+                    if (pTag.children) {
+                        pTag.children.splice(imgIndexToRemove, 1);
+                    }
+                }
+                // Insert the removed images after the paragraph
+                const paragraphIndexInParent = parent.children.indexOf(node);
+                if (paragraphIndexInParent !== -1) {
+                    imagesInParagraph.forEach(({ node: imgNode }) => {
+                        parent.children.splice(paragraphIndexInParent + 1, 0, imgNode);
+                    });
+                }
+                // Remove paragraph if it's now empty after image removal
+                if (node.children.length === 0) {
+                    const paragraphIndexInParent = parent.children.indexOf(node);
+                    if (paragraphIndexInParent !== -1) {
+                        parent.children.splice(paragraphIndexInParent, 1);
+                    }
+                }
+                nodesToRemove.length = 0;
+            }
+        }
+    });
+};

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

@@ -0,0 +1,19 @@
+import type { FunctionComponent } from 'react';
+import { LabelGroupProps, LabelProps } from '@patternfly/react-core';
+export interface QuickResponse extends Omit<LabelProps, 'children'> {
+    content: string;
+    id: string;
+    onClick?: () => void;
+}
+export interface QuickResponseProps {
+    /** Props for quick responses */
+    quickResponses: QuickResponse[];
+    /** Props for quick responses container */
+    quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+    /** Callback when a response is clicked; used in feedback cards */
+    onSelect?: (id: string) => void;
+    /** Sets the quick responses to compact styling */
+    isCompact?: boolean;
+}
+export declare const QuickResponse: FunctionComponent<QuickResponseProps>;
+export default QuickResponse;

package/dist/esm/Message/QuickResponse/QuickResponse.js

@@ -0,0 +1,29 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import { CheckIcon } from '@patternfly/react-icons';
+import { css } from '@patternfly/react-styles';
+export const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect, isCompact }) => {
+    const [selectedQuickResponse, setSelectedQuickResponse] = useState();
+    const handleQuickResponseClick = (id, onClick) => {
+        setSelectedQuickResponse(id);
+        onClick && onClick();
+        onSelect && onSelect(id);
+    };
+    return (_jsx(LabelGroup, Object.assign({ className: css('pf-chatbot__message-quick-response', quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className) }, quickResponseContainerProps, { children: quickResponses.map((_a) => {
+            var { id, onClick, content, className } = _a, props = __rest(_a, ["id", "onClick", "content", "className"]);
+            return (_jsx(Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? _jsx(CheckIcon, {}) : undefined, color: "blue", onClick: () => handleQuickResponseClick(id, onClick), className: css(id === selectedQuickResponse && 'pf-chatbot__message-quick-response--selected', className), isCompact: isCompact }, props, { children: content }), id));
+        }) })));
+};
+export default QuickResponse;

package/dist/esm/Message/QuickResponse/QuickResponse.test.d.ts

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

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

@@ -0,0 +1,104 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import QuickResponse from './QuickResponse';
+test('Renders with quick responses', () => {
+    const quickResponses = [
+        { id: '1', content: 'Response 1' },
+        { id: '2', content: 'Response 2' },
+        { id: '3', content: 'Response 3' }
+    ];
+    render(_jsx(QuickResponse, { quickResponses: quickResponses }));
+    expect(screen.getByText('Response 1')).toBeVisible();
+    expect(screen.getByText('Response 2')).toBeVisible();
+    expect(screen.getByText('Response 3')).toBeVisible();
+});
+test('Renders with compact styling', () => {
+    const quickResponses = [{ id: '1', content: 'Compact response' }];
+    render(_jsx(QuickResponse, { quickResponses: quickResponses, isCompact: true }));
+    expect(screen.getByText('Compact response').closest('.pf-v6-c-label')).toHaveClass('pf-m-compact');
+});
+test('Renders with custom className on response', () => {
+    const quickResponses = [{ id: '1', content: 'Custom class response', className: 'custom-response-class' }];
+    render(_jsx(QuickResponse, { quickResponses: quickResponses }));
+    expect(screen.getByText('Custom class response').closest('.pf-v6-c-label')).toHaveClass('custom-response-class');
+});
+test('Renders with custom container className', () => {
+    const quickResponses = [
+        { id: '1', content: 'Response 1' },
+        { id: '2', content: 'Response 2' }
+    ];
+    render(_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: { className: 'custom-container-class' } }));
+    expect(screen.getByText('Response 1').closest('.pf-v6-c-label-group')).toHaveClass('custom-container-class');
+});
+test('Spreads additional custom container props', () => {
+    const quickResponses = [
+        { id: '1', content: 'Response 1' },
+        { id: '2', content: 'Response 2' }
+    ];
+    render(_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: { id: 'custom-container-id' } }));
+    expect(screen.getByText('Response 1').closest('.pf-v6-c-label-group__list')).toHaveAttribute('id', 'custom-container-id');
+});
+test('Renders with pf-chatbot__message-quick-response--selected class after click', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = userEvent.setup();
+    const quickResponses = [
+        { id: '1', content: 'Response 1' },
+        { id: '2', content: 'Response 2' }
+    ];
+    render(_jsx(QuickResponse, { quickResponses: quickResponses }));
+    yield user.click(screen.getByText('Response 1'));
+    expect(screen.getByText('Response 1').closest('.pf-v6-c-label')).toHaveClass('pf-chatbot__message-quick-response--selected');
+}));
+test('Does not calls onClick handler when not passed', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = userEvent.setup();
+    const handleClick = jest.fn();
+    const quickResponses = [{ id: '1', content: 'Clickable response' }];
+    render(_jsx(QuickResponse, { quickResponses: quickResponses }));
+    yield user.click(screen.getByText('Clickable response'));
+    expect(handleClick).not.toHaveBeenCalled();
+}));
+test('Calls onClick handler when passed', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = userEvent.setup();
+    const handleClick = jest.fn();
+    const quickResponses = [{ id: '1', content: 'Clickable response', onClick: handleClick }];
+    render(_jsx(QuickResponse, { quickResponses: quickResponses }));
+    yield user.click(screen.getByText('Clickable response'));
+    expect(handleClick).toHaveBeenCalled();
+}));
+test('Does not call onSelect when not passed', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = userEvent.setup();
+    const handleSelect = jest.fn();
+    const quickResponses = [
+        { id: '1', content: 'Response 1' },
+        { id: '2', content: 'Response 2' }
+    ];
+    render(_jsx(QuickResponse, { quickResponses: quickResponses }));
+    yield user.click(screen.getByText('Response 2'));
+    expect(handleSelect).not.toHaveBeenCalled();
+}));
+test('Calls onSelect when passed', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = userEvent.setup();
+    const handleSelect = jest.fn();
+    const quickResponses = [
+        { id: '1', content: 'Response 1' },
+        { id: '2', content: 'Response 2' }
+    ];
+    render(_jsx(QuickResponse, { quickResponses: quickResponses, onSelect: handleSelect }));
+    yield user.click(screen.getByText('Response 2'));
+    expect(handleSelect).toHaveBeenCalledWith('2');
+}));
+test('Spreads additional response props', () => {
+    const quickResponses = [{ id: '1', content: 'Response with props', isCompact: true, 'aria-label': 'Test label' }];
+    render(_jsx(QuickResponse, { quickResponses: quickResponses }));
+    expect(screen.getByText('Response with props').closest('.pf-v6-c-label')).toHaveAttribute('aria-label', 'Test label');
+});

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

@@ -0,0 +1 @@
+export * from './QuickResponse';

package/dist/esm/Message/QuickResponse/index.js

@@ -0,0 +1 @@
+export * from './QuickResponse';

package/dist/esm/Message/QuickStarts/FallbackImg.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+interface FallbackImgProps {
+    /** Image source */
+    src: string;
+    /** Alt text for image */
+    alt?: string;
+    /** ClassName applied to image */
+    className?: string;
+    /** Fallback */
+    fallback?: React.ReactNode;
+}
+declare const FallbackImg: FC<FallbackImgProps>;
+export default FallbackImg;

package/dist/esm/Message/QuickStarts/FallbackImg.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+const FallbackImg = ({ src, alt, className, fallback }) => {
+    const [isSrcValid, setIsSrcValid] = useState(true);
+    if (src && isSrcValid) {
+        return _jsx("img", { className: className, src: src, alt: alt, onError: () => setIsSrcValid(false) });
+    }
+    return _jsx(_Fragment, { children: fallback });
+};
+export default FallbackImg;

package/dist/esm/Message/QuickStarts/QuickStartTile.d.ts

@@ -0,0 +1,29 @@
+import type { FC } from 'react';
+import { QuickStart, QuickstartAction } from './types';
+export declare const camelize: (str: string) => string;
+export interface QuickStartTileProps {
+    /** ClassName applied to the card */
+    className?: string;
+    /** The quickstart object triggered by this tile */
+    quickStart: QuickStart;
+    /** Event handler attached to the tile */
+    onClick?: () => void;
+    /** Action config for button rendered next to title */
+    action?: QuickstartAction;
+    /** Callback that returns active quick start value when clicked */
+    onSelectQuickStart: (id?: string) => void;
+    /** Label for the English word "minute". */
+    minuteWord?: string;
+    /** Label for the English word "minutes". */
+    minuteWordPlural?: string;
+    /** Label for the English word "Prerequisite" */
+    prerequisiteWord?: string;
+    /** Label for the English word "Prerequisites" */
+    prerequisiteWordPlural?: string;
+    /** Aria-label for the quick start description button */
+    quickStartButtonAriaLabel?: string;
+    /** Sets the tile to compact styling */
+    isCompact?: boolean;
+}
+export declare const QuickStartTile: FC<QuickStartTileProps>;
+export default QuickStartTile;