@patternfly/chatbot 6.5.0-prerelease.9 → 6.5.0

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

@@ -16,5 +16,5 @@ export interface MessageInputProps extends FormProps {
     /** Message text */
     content?: string;
 }
-declare const MessageInput: FunctionComponent<MessageInputProps>;
+export declare const MessageInput: FunctionComponent<MessageInputProps>;
 export default MessageInput;

package/dist/esm/Message/MessageInput.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ActionGroup, Button, Form, TextArea } from '@patternfly/react-core';
-const MessageInput = (_a) => {
+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) => {

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

@@ -1,5 +1,14 @@
-declare const MessageLoading: ({ loadingWord, isPrimary }: {
-    loadingWord: any;
-    isPrimary: any;
-}) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1,6 +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";
-// ============================================================================
-// Chatbot Main - Message - Processing
-// ============================================================================
-const MessageLoading = ({ loadingWord, isPrimary }) => (_jsx("div", { className: `pf-chatbot__message-loading ${isPrimary ? 'pf-m-primary' : ''}`, children: _jsx("span", { className: "pf-chatbot__message-loading-dots", children: _jsx("span", { className: "pf-v6-screen-reader", children: loadingWord }) }) }));
+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/QuickResponse/QuickResponse.js

@@ -13,6 +13,7 @@ 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) => {
@@ -20,9 +21,9 @@ export const QuickResponse = ({ quickResponses, quickResponseContainerProps = {
         onClick && onClick();
         onSelect && onSelect(id);
     };
-    return (_jsx(LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${(quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className) ? quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className : ''}` }, quickResponseContainerProps, { children: quickResponses.map((_a) => {
+    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: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`, isCompact: isCompact }, props, { children: content }), id));
+            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/QuickStartTile.d.ts

@@ -25,5 +25,5 @@ export interface QuickStartTileProps {
     /** Sets the tile to compact styling */
     isCompact?: boolean;
 }
-declare const QuickStartTile: FC<QuickStartTileProps>;
+export declare const QuickStartTile: FC<QuickStartTileProps>;
 export default QuickStartTile;

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

@@ -12,7 +12,7 @@ export const camelize = (str) => str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function
     } // or if (/\s+/.test(match)) for white spaces
     return index === 0 ? match.toLowerCase() : match.toUpperCase();
 });
-const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, minuteWord = 'minute', minuteWordPlural = 'minutes', prerequisiteWord, prerequisiteWordPlural, quickStartButtonAriaLabel, action, isCompact }) => {
+export const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, minuteWord = 'minute', minuteWordPlural = 'minutes', prerequisiteWord, prerequisiteWordPlural, quickStartButtonAriaLabel, action, isCompact }) => {
     const { metadata: { name: id }, spec: { icon, displayName, description, durationMinutes, prerequisites, link, type } } = quickStart;
     let quickStartIcon;
     if (typeof icon === 'object') {

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

@@ -0,0 +1,2 @@
+export * from './QuickStartTile';
+export * from './types';

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

@@ -0,0 +1,2 @@
+export * from './QuickStartTile';
+export * from './types';

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

@@ -16,7 +16,12 @@ export interface TableNode {
     type: string;
 }
 export interface TableMessageProps {
+    /** Content of the table */
+    children?: React.ReactNode;
+    /** Flag indicating whether primary styles should be applied. */
     isPrimary?: boolean;
+    /** Flag indicating that the content should retain message styles when using Markdown. */
+    shouldRetainStyles?: boolean;
 }
-declare const TableMessage: ({ children, isPrimary, ...props }: Omit<TableProps, "ref"> & ExtraProps & TableMessageProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableMessage: ({ children, isPrimary, shouldRetainStyles, ...props }: Omit<TableProps, "ref"> & ExtraProps & TableMessageProps) => import("react/jsx-runtime").JSX.Element;
 export default TableMessage;

package/dist/esm/Message/TableMessage/TableMessage.js

@@ -15,9 +15,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // ============================================================================
 import { Children, cloneElement } from 'react';
 import { Table } from '@patternfly/react-table';
+import { css } from '@patternfly/react-styles';
 const TableMessage = (_a) => {
     var _b;
-    var { children, isPrimary } = _a, props = __rest(_a, ["children", "isPrimary"]);
+    var { children, isPrimary, shouldRetainStyles } = _a, props = __rest(_a, ["children", "isPrimary", "shouldRetainStyles"]);
     const { className } = props, rest = __rest(props, ["className"]);
     // This allows us to parse the nested data we get back from the 3rd party Markdown parser
     // Open to feedback here if there is a better way to do this
@@ -58,6 +59,6 @@ const TableMessage = (_a) => {
     }
     return (
     // gridBreakPoint is so we show mobile-styled-PF table
-    _jsx(Table, Object.assign({ "aria-label": props['aria-label'], gridBreakPoint: "grid", className: `pf-chatbot__message-table ${isPrimary ? 'pf-m-primary' : ''} ${className ? className : ''}` }, rest, { children: modifyChildren(children) })));
+    _jsx(Table, Object.assign({ "aria-label": props['aria-label'], gridBreakPoint: "grid", className: css('pf-chatbot__message-table', isPrimary && 'pf-m-primary', shouldRetainStyles && 'pf-m-markdown', className) }, rest, { children: modifyChildren(children) })));
 };
 export default TableMessage;

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

@@ -1,7 +1,14 @@
 import { ExtraProps } from 'react-markdown';
 import { ContentProps } from '@patternfly/react-core';
 export interface TextMessageProps {
+    /** The text message content */
+    children?: React.ReactNode;
+    /** Flag indicating whether primary styling is applied. */
     isPrimary?: boolean;
+    /** The wrapper component to use for the PatternFly Content component. Defaults to a div. */
+    component?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'a' | 'small' | 'blockquote' | 'pre' | 'hr' | 'ul' | 'ol' | 'dl' | 'li' | 'dt' | 'dd';
+    /** Flag indicating that the content should retain message styles when using Markdown. */
+    shouldRetainStyles?: boolean;
 }
-declare const TextMessage: ({ component, children, isPrimary, ...props }: Omit<ContentProps, "ref"> & ExtraProps & TextMessageProps) => import("react/jsx-runtime").JSX.Element;
+declare const TextMessage: ({ component, children, isPrimary, shouldRetainStyles, ...props }: Omit<ContentProps, "ref"> & ExtraProps & TextMessageProps) => import("react/jsx-runtime").JSX.Element;
 export default TextMessage;

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

@@ -11,8 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Content } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 const TextMessage = (_a) => {
-    var { component, children, isPrimary } = _a, props = __rest(_a, ["component", "children", "isPrimary"]);
-    return (_jsx("span", { className: `pf-chatbot__message-text ${isPrimary ? 'pf-m-primary' : ''}`, children: _jsx(Content, Object.assign({ component: component }, props, { children: children })) }));
+    var { component, children, isPrimary, shouldRetainStyles } = _a, props = __rest(_a, ["component", "children", "isPrimary", "shouldRetainStyles"]);
+    return (_jsx("span", { className: css('pf-chatbot__message-text', isPrimary && 'pf-m-primary', shouldRetainStyles && 'pf-m-markdown'), children: _jsx(Content, Object.assign({ component: component }, props, { className: css(props === null || props === void 0 ? void 0 : props.className), children: children })) }));
 };
 export default TextMessage;

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

@@ -48,6 +48,8 @@ export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProp
     textAreaProps?: TextAreaProps;
     /** Additional props passed to action group */
     actionGroupProps?: ActionGroupProps;
+    /** Optional privacy statement text displayed under text area */
+    privacyStatement?: string;
 }
-declare const UserFeedback: FunctionComponent<UserFeedbackProps>;
+export declare const UserFeedback: FunctionComponent<UserFeedbackProps>;
 export default UserFeedback;

package/dist/esm/Message/UserFeedback/UserFeedback.js

@@ -9,14 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
 // Import PatternFly components
 import { ActionGroup, Button, Card, CardBody, CardHeader, Form, TextArea } from '@patternfly/react-core';
 import QuickResponse from '../QuickResponse/QuickResponse';
 import CloseButton from './CloseButton';
-const UserFeedback = (_a) => {
-    var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true, isCompact, children, cardHeaderProps, cardBodyProps, headingLevelProps, formProps, textAreaProps, actionGroupProps, submitButtonProps } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "isCompact", "children", "cardHeaderProps", "cardBodyProps", "headingLevelProps", "formProps", "textAreaProps", "actionGroupProps", "submitButtonProps"]);
+export const UserFeedback = (_a) => {
+    var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true, isCompact, children, cardHeaderProps, cardBodyProps, headingLevelProps, formProps, textAreaProps, actionGroupProps, submitButtonProps, privacyStatement } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "isCompact", "children", "cardHeaderProps", "cardBodyProps", "headingLevelProps", "formProps", "textAreaProps", "actionGroupProps", "submitButtonProps", "privacyStatement"]);
     const [selectedResponse, setSelectedResponse] = useState();
     const [value, setValue] = useState('');
     const divRef = useRef(null);
@@ -30,9 +30,9 @@ const UserFeedback = (_a) => {
     /* card does not have ref forwarding; hence wrapper div */
     _jsx("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title, children: _jsxs(Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props, { children: [_jsx(CardHeader, Object.assign({ actions: {
                         actions: _jsx(CloseButton, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
-                    } }, cardHeaderProps, { children: _jsx(HeadingLevel, Object.assign({ className: "pf-chatbot__feedback-card-title" }, headingLevelProps, { children: title })) })), _jsx(CardBody, Object.assign({}, cardBodyProps, { children: _jsxs(Form, Object.assign({ className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` }, formProps, { children: [quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })), hasTextArea && (_jsx(TextArea, Object.assign({ value: value, onChange: (_event, value) => {
-                                    setValue(value);
-                                    onTextAreaChange && onTextAreaChange(_event, value);
-                                }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" }, textAreaProps))), children, _jsx(ActionGroup, Object.assign({}, actionGroupProps, { children: _jsx(Button, Object.assign({ onClick: () => onSubmit(selectedResponse, value) }, submitButtonProps, { children: submitWord })) }))] })) }))] })) }));
+                    } }, cardHeaderProps, { children: _jsx(HeadingLevel, Object.assign({ className: "pf-chatbot__feedback-card-title" }, headingLevelProps, { children: title })) })), _jsx(CardBody, Object.assign({}, cardBodyProps, { children: _jsxs(Form, Object.assign({ className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` }, formProps, { children: [quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })), hasTextArea && (_jsx(_Fragment, { children: _jsx(TextArea, Object.assign({ value: value, onChange: (_event, value) => {
+                                        setValue(value);
+                                        onTextAreaChange && onTextAreaChange(_event, value);
+                                    }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" }, textAreaProps)) })), privacyStatement && _jsx("div", { className: "pf-chatbot__feedback-card-privacy", children: privacyStatement }), children, _jsx(ActionGroup, Object.assign({}, actionGroupProps, { children: _jsx(Button, Object.assign({ onClick: () => onSubmit(selectedResponse, value), size: isCompact ? 'sm' : undefined }, submitButtonProps, { children: submitWord })) }))] })) }))] })) }));
 };
 export default UserFeedback;

package/dist/esm/Message/UserFeedback/UserFeedbackComplete.d.ts

@@ -38,5 +38,5 @@ export interface UserFeedbackCompleteProps extends Omit<CardProps, 'ref'>, OUIAP
     /** Timestamp passed in by Message for more context in aria announcements */
     timestamp?: string;
 }
-declare const UserFeedbackComplete: FunctionComponent<UserFeedbackCompleteProps>;
+export declare const UserFeedbackComplete: FunctionComponent<UserFeedbackCompleteProps>;
 export default UserFeedbackComplete;

package/dist/esm/Message/UserFeedback/UserFeedbackComplete.js

@@ -11,10 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
-// Import PatternFly components
 import { Card, CardBody, CardHeader, CardTitle, useOUIAProps } from '@patternfly/react-core';
 import CloseButton from './CloseButton';
-const UserFeedbackComplete = (_a) => {
+export const UserFeedbackComplete = (_a) => {
     var { className, title = 'Feedback submitted', body = "We've received your response. Thank you for sharing your feedback!", timestamp, timeout = false, timeoutAnimation = 3000, onTimeout, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, onMouseEnter, onMouseLeave, ouiaId, ouiaSafe, isLiveRegion, id, focusOnLoad = true, isCompact } = _a, props = __rest(_a, ["className", "title", "body", "timestamp", "timeout", "timeoutAnimation", "onTimeout", "onClose", "closeButtonAriaLabel", "onMouseEnter", "onMouseLeave", "ouiaId", "ouiaSafe", "isLiveRegion", "id", "focusOnLoad", "isCompact"]);
     const [timedOut, setTimedOut] = useState(false);
     const [timedOutAnimation, setTimedOutAnimation] = useState(true);

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

@@ -0,0 +1,2 @@
+export * from './UserFeedback';
+export * from './UserFeedbackComplete';

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

@@ -0,0 +1,2 @@
+export * from './UserFeedback';
+export * from './UserFeedbackComplete';

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

@@ -1,3 +1,11 @@
 export { default } from './Message';
 export { rehypeCodeBlockToggle } from './Plugins/rehypeCodeBlockToggle';
+export * from './ErrorMessage/ErrorMessage';
+export * from './MessageAndActions';
+export * from './MessageAttachments';
 export * from './Message';
+export * from './MessageLoading';
+export * from './MessageInput';
+export * from './QuickResponse';
+export * from './QuickStarts';
+export * from './UserFeedback';

package/dist/esm/Message/index.js

@@ -1,3 +1,11 @@
 export { default } from './Message';
 export { rehypeCodeBlockToggle } from './Plugins/rehypeCodeBlockToggle';
+export * from './ErrorMessage/ErrorMessage';
+export * from './MessageAndActions';
+export * from './MessageAttachments';
 export * from './Message';
+export * from './MessageLoading';
+export * from './MessageInput';
+export * from './QuickResponse';
+export * from './QuickStarts';
+export * from './UserFeedback';

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

@@ -111,6 +111,10 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
     innerRef?: React.Ref<HTMLTextAreaElement>;
     /** Sets background color to primary */
     isPrimary?: boolean;
+    /** @beta Flag indicating whether the message bar has an AI indicator border. */
+    hasAiIndicator?: boolean;
+    /** @beta Flag indicating whether the chatbot is thinking in response to a query, adding an animation to the message bar. */
+    isThinking?: boolean;
 }
 export declare const MessageBarBase: FunctionComponent<MessageBarProps>;
 declare const MessageBar: import("react").ForwardRefExoticComponent<MessageBarProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/esm/MessageBar/MessageBar.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 // Import Chatbot components
 import SendButton from './SendButton';
 import MicrophoneButton from './MicrophoneButton';
@@ -20,13 +21,14 @@ import AttachMenu from '../AttachMenu';
 import StopButton from './StopButton';
 export const MessageBarBase = (_a) => {
     var _b;
-    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps, innerRef, isPrimary } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps", "innerRef", "isPrimary"]);
+    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps, innerRef, isPrimary, hasAiIndicator, isThinking } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps", "innerRef", "isPrimary", "hasAiIndicator", "isThinking"]);
     // Text Input
     // --------------------------------------------------------------------------
     const [message, setMessage] = useState(value !== null && value !== void 0 ? value : '');
     const [isListeningMessage, setIsListeningMessage] = useState(false);
     const [hasSentMessage, setHasSentMessage] = useState(false);
     const [isComposing, setIsComposing] = useState(false);
+    const [isMultiline, setIsMultiline] = useState(false);
     const inputRef = useRef(null);
     const textareaRef = (_b = innerRef) !== null && _b !== void 0 ? _b : inputRef;
     const attachButtonRef = useRef(null);
@@ -67,6 +69,15 @@ export const MessageBarBase = (_a) => {
         const lines = field.scrollHeight / lineHeight;
         return lines > 2;
     };
+    const checkIfMultiline = useCallback((field) => {
+        const parent = field.parentElement;
+        const grandparent = parent === null || parent === void 0 ? void 0 : parent.parentElement;
+        if (grandparent) {
+            const containerHeight = grandparent.offsetHeight;
+            const threshold = isCompact ? 56 : 70;
+            setIsMultiline(containerHeight > threshold);
+        }
+    }, [isCompact]);
     const setAutoWidth = useCallback((field) => {
         const parent = field.parentElement;
         if (parent) {
@@ -119,13 +130,15 @@ export const MessageBarBase = (_a) => {
         if (field) {
             if (field.value === '') {
                 setInitialLineHeight(field);
+                setIsMultiline(false);
             }
             else {
                 setAutoHeight(field);
                 setAutoWidth(field);
+                checkIfMultiline(field);
             }
         }
-    }, [displayMode, message, setAutoWidth]);
+    }, [displayMode, message, setAutoWidth, checkIfMultiline]);
     useEffect(() => {
         const field = textareaRef.current;
         if (field) {
@@ -138,13 +151,15 @@ export const MessageBarBase = (_a) => {
         if (textareaRef.current) {
             if (event.target.value === '') {
                 setInitialLineHeight(textareaRef.current);
+                setIsMultiline(false);
             }
             else {
                 setAutoHeight(textareaRef.current);
+                checkIfMultiline(textareaRef.current);
             }
         }
         setMessage(event.target.value);
-    }, [onChange]);
+    }, [onChange, checkIfMultiline]);
     // Handle sending message
     const handleSend = useCallback((newMessage) => {
         onSendMessage(newMessage);
@@ -195,14 +210,14 @@ export const MessageBarBase = (_a) => {
     };
     const messageBarContents = (_jsxs(_Fragment, { children: [_jsx("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`, children: _jsx(TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }, props)) }), _jsx("div", { className: "pf-chatbot__message-bar-actions", children: renderButtons() })] }));
     if (attachMenuProps) {
-        return (_jsx(AttachMenu, Object.assign({ toggle: (toggleRef) => (_jsx("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents })), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {
+        return (_jsx(AttachMenu, Object.assign({ toggle: (toggleRef) => (_jsx("div", { ref: toggleRef, className: css('pf-chatbot__message-bar', isMultiline && 'pf-m-multiline', className), children: 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 }, attachMenuProps)));
     }
-    return (_jsx("div", { className: `pf-chatbot__message-bar ${isPrimary ? 'pf-m-primary' : ''} ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents }));
+    return (_jsx("div", { className: css('pf-chatbot__message-bar', isPrimary && 'pf-m-primary', hasAiIndicator && 'pf-v6-m-ai-indicator', isThinking && 'pf-v6-m-thinking', isMultiline && 'pf-m-multiline', className), children: messageBarContents }));
 };
 const MessageBar = forwardRef((props, ref) => (_jsx(MessageBarBase, Object.assign({ innerRef: ref }, props))));
 export { MessageBar };