npm - @patternfly/chatbot - Versions diffs - 2.1.0-prerelease.17 → 2.1.0-prerelease.19 - Mend

@patternfly/chatbot 2.1.0-prerelease.17 → 2.1.0-prerelease.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/dist/cjs/ChatbotToggle/ChatbotToggle.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import React from 'react';
 import { ButtonProps, TooltipProps } from '@patternfly/react-core';
 export interface ChatbotToggleProps extends ButtonProps {
     /** Contents of the tooltip applied to the toggle button */
-    toolTipLabel?: React.ReactNode;
+    tooltipLabel: React.ReactNode;
     /** Props spread to the PF Tooltip component */
     tooltipProps?: Omit<TooltipProps, 'content'>;
     /** Flag indicating visibility of the chatbot appended to the toggle */
@@ -15,6 +15,12 @@ export interface ChatbotToggleProps extends ButtonProps {
     closedToggleIcon?: () => JSX.Element;
     /** Ref applied to toggle */
     innerRef?: React.Ref<HTMLButtonElement>;
+    /** Whether toggle is a circle */
+    isRound?: boolean;
+    /** Class name applied to toggle */
+    className?: string;
+    /** Test id applied to default open icon */
+    openIconTestId?: string;
 }
 declare const ChatbotToggle: React.ForwardRefExoticComponent<ChatbotToggleProps & React.RefAttributes<any>>;
 export default ChatbotToggle;

package/dist/cjs/ChatbotToggle/ChatbotToggle.js CHANGED Viewed

@@ -24,12 +24,12 @@ const ChatIcon = () => (react_1.default.createElement("svg", { xmlns: "http://ww
     react_1.default.createElement("path", { fill: "var(--pf-t--global--icon--color--inverse)", stroke: "var(--pf-t--global--icon--color--inverse)", strokeLinejoin: "round", strokeWidth: ".75", d: "M3.577 14.382c0 .198.12.38.31.46l.19.04a.492.492 0 0 0 .349-.143l3.028-3.028h8.513a.489.489 0 0 0 .492-.492V2.491A.489.489 0 0 0 15.967 2H1.691a.489.489 0 0 0-.492.491v8.728c0 .135.056.262.143.349a.498.498 0 0 0 .349.143h1.878v2.663h.008v.008ZM2.19 10.72V2.983h13.278v7.729H7.24a.512.512 0 0 0-.35.143l-2.322 2.322v-1.974a.498.498 0 0 0-.142-.348.492.492 0 0 0-.35-.143H2.19v.008Z" }),
     react_1.default.createElement("path", { fill: "var(--pf-t--global--text--color--inverse)", stroke: "var(--pf-t--global--text--color--inverse)", strokeLinejoin: "round", strokeWidth: ".75", d: "M22.301 9.135h-3.963a.489.489 0 0 0-.492.491c0 .27.222.492.492.492h3.472v7.737h-1.88a.404.404 0 0 0-.348.134.492.492 0 0 0-.143.35v1.973l-2.322-2.323a.492.492 0 0 0-.349-.142H8.532v-4.265a.489.489 0 0 0-.492-.492.494.494 0 0 0-.491.492v4.756c0 .277.222.492.491.492h8.514l3.028 3.028a.492.492 0 0 0 .349.142l.19-.04a.502.502 0 0 0 .31-.459V18.83h1.878c.111-.008.262-.048.349-.135a.491.491 0 0 0 .142-.349v-8.72a.489.489 0 0 0-.491-.491h-.008Z" })));
 const ChatbotToggleBase = (_a) => {
-    var { toolTipLabel, isChatbotVisible, onToggleChatbot, tooltipProps, toggleButtonLabel, closedToggleIcon: ClosedToggleIcon, innerRef } = _a, props = __rest(_a, ["toolTipLabel", "isChatbotVisible", "onToggleChatbot", "tooltipProps", "toggleButtonLabel", "closedToggleIcon", "innerRef"]);
+    var { tooltipLabel, isChatbotVisible, onToggleChatbot, tooltipProps, toggleButtonLabel, closedToggleIcon: ClosedToggleIcon, innerRef, isRound = true, className, openIconTestId } = _a, props = __rest(_a, ["tooltipLabel", "isChatbotVisible", "onToggleChatbot", "tooltipProps", "toggleButtonLabel", "closedToggleIcon", "innerRef", "isRound", "className", "openIconTestId"]);
     // Configure icon
     const closedIcon = ClosedToggleIcon ? react_1.default.createElement(ClosedToggleIcon, null) : react_1.default.createElement(ChatIcon, null);
-    const icon = isChatbotVisible ? react_1.default.createElement(angle_down_icon_1.default, null) : closedIcon;
-    return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: toolTipLabel }, tooltipProps),
-        react_1.default.createElement(react_core_1.Button, Object.assign({ className: `pf-chatbot__button ${isChatbotVisible ? 'pf-chatbot__button--active' : ''}`, variant: "plain", "aria-label": toggleButtonLabel || `${toolTipLabel} toggle`, onClick: onToggleChatbot, "aria-expanded": isChatbotVisible, icon: react_1.default.createElement(react_core_1.Icon, { isInline: true }, icon), ref: innerRef }, props))));
+    const icon = isChatbotVisible ? react_1.default.createElement(angle_down_icon_1.default, { "data-testid": openIconTestId }) : closedIcon;
+    return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipLabel }, tooltipProps),
+        react_1.default.createElement(react_core_1.Button, Object.assign({ className: `pf-chatbot__button ${isChatbotVisible ? 'pf-chatbot__button--active' : ''} ${isRound ? 'pf-chatbot__button--round' : ''} ${className ? className : ''}`, variant: "plain", "aria-label": toggleButtonLabel || `${tooltipLabel} toggle`, onClick: onToggleChatbot, "aria-expanded": isChatbotVisible, icon: react_1.default.createElement(react_core_1.Icon, { isInline: true }, icon), ref: innerRef }, props))));
 };
 const ChatbotToggle = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(ChatbotToggleBase, Object.assign({ innerRef: ref }, props))));
 exports.default = ChatbotToggle;

package/dist/cjs/ChatbotToggle/ChatbotToggle.test.d.ts ADDED Viewed

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

package/dist/cjs/ChatbotToggle/ChatbotToggle.test.js ADDED Viewed

@@ -0,0 +1,60 @@
+"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 ChatbotToggle_1 = __importDefault(require("./ChatbotToggle"));
+describe('ChatbotToggle', () => {
+    it('should render tooltipLabel correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(ChatbotToggle_1.default, { tooltipLabel: "Tooltip" }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Tooltip toggle/i }));
+        expect(react_2.screen.getByRole('tooltip', { name: /Tooltip/i })).toBeTruthy();
+    }));
+    it('should render toggleButtonLabel correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(ChatbotToggle_1.default, { tooltipLabel: "Chatbot", toggleButtonLabel: "Button" }));
+        expect(react_2.screen.getByRole('button', { name: /Button/i })).toBeTruthy();
+    }));
+    it('should call onToggleChatbot when clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(ChatbotToggle_1.default, { tooltipLabel: "Chatbot", onToggleChatbot: spy }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button'));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should handle isChatbotVisible correctly when true', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotToggle_1.default, { tooltipLabel: "Chatbot", isChatbotVisible: true, openIconTestId: "Open" }));
+        expect(react_2.screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+        expect(react_2.screen.getByRole('button')).toHaveClass('pf-chatbot__button--active');
+        expect(react_2.screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+        expect(react_2.screen.getByTestId('Open')).toBeTruthy();
+    });
+    it('should handle isChatbotVisible correctly when false', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotToggle_1.default, { tooltipLabel: "Chatbot", isChatbotVisible: false, openIconTestId: "Open" }));
+        expect(react_2.screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+        expect(react_2.screen.getByRole('button')).not.toHaveClass('pf-chatbot__button--active');
+        expect(react_2.screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+        expect(react_2.screen.queryByTestId('Open')).toBeFalsy();
+    });
+    it('should handle isRound correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotToggle_1.default, { tooltipLabel: "Chatbot", isRound: true }));
+        expect(react_2.screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+        expect(react_2.screen.getByRole('button')).toHaveClass('pf-chatbot__button--round');
+    });
+    it('should handle className correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotToggle_1.default, { tooltipLabel: "Chatbot", className: "test" }));
+        expect(react_2.screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+        expect(react_2.screen.getByRole('button')).toHaveClass('test');
+    });
+});

package/dist/cjs/Message/Message.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LabelGroupProps, LabelProps } from '@patternfly/react-core';
+import { AvatarProps, LabelGroupProps, LabelProps } from '@patternfly/react-core';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
 export interface QuickResponse extends Omit<LabelProps, 'children'> {
@@ -60,6 +60,10 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     quickResponses?: QuickResponse[];
     /** Props for quick responses container */
     quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+    /** Whether avatar is round */
+    hasRoundAvatar?: boolean;
+    /** Any additional props applied to the avatar, for additional customization  */
+    avatarProps?: Omit<AvatarProps, 'alt'>;
 }
 export declare const Message: React.FunctionComponent<MessageProps>;
 export default Message;

package/dist/cjs/Message/Message.js CHANGED Viewed

@@ -32,12 +32,18 @@ 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"]);
+    var { role, content, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps"]);
+    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()}`;
     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(react_core_1.Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
         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" },

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

@@ -74,7 +74,12 @@ describe('Message', () => {
         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();
+        const formattedDate = date.toLocaleDateString();
+        expect(react_2.screen.getByText((content, element) => {
+            const hasText = content.includes(formattedDate);
+            const isVisible = (element === null || element === void 0 ? void 0 : element.tagName.toLowerCase()) !== 'script' && (element === null || element === void 0 ? void 0 : element.tagName.toLowerCase()) !== 'style';
+            return hasText && isVisible;
+        })).toBeInTheDocument();
         expect(react_2.screen.queryByText('Loading message')).toBeFalsy();
         expect(react_2.screen.getByRole('img')).toHaveAttribute('src', './img');
     });
@@ -84,7 +89,12 @@ describe('Message', () => {
         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();
+        const formattedDate = date.toLocaleDateString();
+        expect(react_2.screen.getByText((content, element) => {
+            const hasText = content.includes(formattedDate);
+            const isVisible = (element === null || element === void 0 ? void 0 : element.tagName.toLowerCase()) !== 'script' && (element === null || element === void 0 ? void 0 : element.tagName.toLowerCase()) !== 'style';
+            return hasText && isVisible;
+        })).toBeInTheDocument();
     });
     it('should render avatar correctly', () => {
         (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./testImg", role: "bot", name: "Bot", content: "Hi" }));
@@ -104,7 +114,12 @@ describe('Message', () => {
         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();
+        const formattedDate = date.toLocaleDateString();
+        expect(react_2.screen.queryByText((content, element) => {
+            const hasText = content.includes(formattedDate);
+            const isVisible = (element === null || element === void 0 ? void 0 : element.tagName.toLowerCase()) !== 'script' && (element === null || element === void 0 ? void 0 : element.tagName.toLowerCase()) !== 'style';
+            return hasText && isVisible;
+        })).not.toBeInTheDocument();
     });
     it('should render attachments', () => {
         (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", content: "Hi", attachments: [{ name: 'testAttachment' }] }));
@@ -134,7 +149,12 @@ describe('Message', () => {
         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();
+        const formattedDate = date.toLocaleDateString();
+        expect(react_2.screen.getByText((content, element) => {
+            const hasText = content.includes(formattedDate);
+            const isVisible = (element === null || element === void 0 ? void 0 : element.tagName.toLowerCase()) !== 'script' && (element === null || element === void 0 ? void 0 : element.tagName.toLowerCase()) !== 'style';
+            return hasText && isVisible;
+        })).toBeInTheDocument();
         expect(react_2.screen.getByText('Loading message')).toBeTruthy();
     });
     it('should be able to show sources', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -162,6 +182,59 @@ describe('Message', () => {
         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 quick response', () => __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: "bot", name: "Bot", content: "Hi", quickResponses: [
+                {
+                    id: '1',
+                    content: 'Yes',
+                    onClick: spy,
+                    className: 'test'
+                }
+            ] }));
+        const quickResponse = react_2.screen.getByRole('button', { name: /Yes/i });
+        expect(quickResponse).toBeTruthy();
+        yield user_event_1.default.click(quickResponse);
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to show more than 1 quick response', () => __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: "bot", name: "Bot", content: "Hi", quickResponses: [
+                {
+                    id: '1',
+                    content: 'Yes',
+                    onClick: spy
+                },
+                {
+                    id: '2',
+                    content: 'No',
+                    onClick: spy
+                }
+            ] }));
+        expect(react_2.screen.getByRole('button', { name: /Yes/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /No/i })).toBeTruthy();
+    }));
+    it('should be able to spread quickResponseContainerProps', () => __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: "bot", name: "Bot", content: "Hi", quickResponses: [
+                {
+                    id: '1',
+                    content: 'Yes',
+                    onClick: spy
+                },
+                {
+                    id: '2',
+                    content: 'No',
+                    onClick: spy
+                }
+            ],
+            // this is a LabelGroup prop that changes the default number shown
+            // to be different than what we use in ChatBot
+            quickResponseContainerProps: { numLabels: 1 } }));
+        expect(react_2.screen.getByRole('button', { name: /Yes/i })).toBeTruthy();
+        expect(react_2.screen.queryByRole('button', { name: /No/i })).toBeFalsy();
+        expect(react_2.screen.getByRole('button', { name: /1 more/i }));
+    }));
     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
@@ -236,4 +309,27 @@ describe('Message', () => {
         (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();
     });
+    it('should handle hasRoundAvatar correctly when it is true', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", hasRoundAvatar: true }));
+        expect(react_2.screen.getByRole('img')).toBeTruthy();
+        expect(react_2.screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
+        expect(react_2.screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar--round');
+    });
+    it('should handle hasRoundAvatar correctly when it is false', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", hasRoundAvatar: false }));
+        expect(react_2.screen.getByRole('img')).toBeTruthy();
+        expect(react_2.screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
+        expect(react_2.screen.getByRole('img')).not.toHaveClass('pf-chatbot__message-avatar--round');
+    });
+    it('should handle avatarProps correctly by spreading it onto the Message Avatar', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", avatarProps: { className: 'test' } }));
+        expect(react_2.screen.getByRole('img')).toBeTruthy();
+        expect(react_2.screen.getByRole('img')).toHaveClass('test');
+    });
+    it('should handle avatarProps and hasRoundAvatar correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", avatarProps: { className: 'test' }, hasRoundAvatar: false }));
+        expect(react_2.screen.getByRole('img')).toBeTruthy();
+        expect(react_2.screen.getByRole('img')).toHaveClass('test');
+        expect(react_2.screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
+    });
 });

package/dist/cjs/ResponseActions/ResponseActions.test.js CHANGED Viewed

@@ -17,6 +17,7 @@ const react_2 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 const ResponseActions_1 = __importDefault(require("./ResponseActions"));
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const react_icons_1 = require("@patternfly/react-icons");
 const ALL_ACTIONS = [
     { type: 'positive', label: 'Good response' },
     { type: 'negative', label: 'Bad response' },
@@ -24,6 +25,28 @@ const ALL_ACTIONS = [
     { type: 'share', label: 'Share' },
     { type: 'listen', label: 'Listen' }
 ];
+const CUSTOM_ACTIONS = [
+    {
+        regenerate: {
+            ariaLabel: 'Regenerate',
+            onClick: jest.fn(),
+            tooltipContent: 'Regenerate',
+            icon: react_1.default.createElement(react_icons_1.RedoIcon, null)
+        },
+        download: {
+            ariaLabel: 'Download',
+            onClick: jest.fn(),
+            tooltipContent: 'Download',
+            icon: react_1.default.createElement(react_icons_1.DownloadIcon, null)
+        },
+        info: {
+            ariaLabel: 'Info',
+            onClick: jest.fn(),
+            tooltipContent: 'Info',
+            icon: react_1.default.createElement(react_icons_1.InfoCircleIcon, null)
+        }
+    }
+];
 describe('ResponseActions', () => {
     it('should render buttons correctly', () => {
         ALL_ACTIONS.forEach(({ type, label }) => {
@@ -64,4 +87,19 @@ describe('ResponseActions', () => {
             expect(react_2.screen.getByRole('button', { name: label })).toHaveClass('test');
         });
     });
+    it('should be able to add custom actions', () => {
+        CUSTOM_ACTIONS.forEach((action) => {
+            const key = Object.keys(action)[0];
+            (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: {
+                    [key]: {
+                        tooltipContent: action[key].tooltipContent,
+                        onClick: action[key].onClick,
+                        // doing this just because it's easier to test without a regex for the button name
+                        ariaLabel: action[key].ariaLabel.toLowerCase(),
+                        icon: action[key].icon
+                    }
+                } }));
+            expect(react_2.screen.getByRole('button', { name: key })).toBeTruthy();
+        });
+    });
 });

package/dist/css/main.css CHANGED Viewed

@@ -532,11 +532,8 @@ html.pf-chatbot-allow--docked {
   inset-block-end: var(--pf-t--global--spacer--md);
   inset-inline-end: var(--pf-t--global--spacer--md);
   background-color: var(--pf-t--global--background--color--inverse--default);
-  border-radius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-button__icon--Color: var(--pf-t--chatbot-toggle--color);
   padding: var(--pf-t--global--spacer--md);
-  width: 3rem;
-  height: 3rem;
 }
 .pf-v6-c-button.pf-chatbot__button:hover, .pf-v6-c-button.pf-chatbot__button:focus {
   background-color: var(--pf-t--chatbot-toggle--background--hover);
@@ -549,6 +546,12 @@ html.pf-chatbot-allow--docked {
   height: var(--pf-t--global--spacer--lg);
 }
+.pf-chatbot__button--round {
+  border-radius: var(--pf-t--global--border--radius--pill);
+  width: 3rem;
+  height: 3rem;
+}
 .pf-chatbot--layout--welcome {
   padding-block-end: var(--pf-t--global--spacer--lg);
   flex-direction: column;
@@ -781,18 +784,22 @@ html.pf-chatbot-allow--docked {
   gap: var(--pf-t--global--spacer--lg);
   padding-bottom: var(--pf-t--global--spacer--2xl);
 }
-.pf-chatbot__message .pf-v6-c-truncate {
-  --pf-v6-c-truncate--MinWidth: 0ch;
-  --pf-v6-c-truncate__start--MinWidth: 0ch;
-}
-.pf-chatbot__message .pf-v6-c-avatar {
-  --pf-v6-c-avatar--Width: 3rem;
-  --pf-v6-c-avatar--Height: 3rem;
+.pf-chatbot__message-avatar.pf-v6-c-avatar {
+  --pf-v6-c-avatar--BorderRadius: 0;
   position: sticky;
   top: var(--pf-t--global--spacer--md);
   object-fit: cover;
   pointer-events: none;
 }
+.pf-chatbot__message-avatar.pf-chatbot__message-avatar--round.pf-v6-c-avatar {
+  --pf-v6-c-avatar--Width: 3rem;
+  --pf-v6-c-avatar--Height: 3rem;
+  --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
+}
+.pf-chatbot__message .pf-v6-c-truncate {
+  --pf-v6-c-truncate--MinWidth: 0ch;
+  --pf-v6-c-truncate__start--MinWidth: 0ch;
+}
 .pf-chatbot__message-contents {
   display: flex;
   flex-direction: column;
@@ -1363,8 +1370,8 @@ html.pf-chatbot-allow--docked {
   padding: var(--pf-t--global--spacer--lg);
 }
-.pf-chatbot__messagebox--bottom {
-  justify-content: flex-end;
+.pf-chatbot__messagebox--bottom > :first-child {
+  margin-top: auto !important;
 }
 .pf-chatbot__messagebox-announcement {

package/dist/css/main.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/ResponseActions/ResponseActions.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;ACvFF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;IACA;;;ACfJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAKA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAQF;EACE;;;AAQF;EACE;;AACA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AASF;AAAA;AAAA;EACE;;;AC9JN;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;;;AAUF;EACE;;AAGJ;EACE;;;AChDJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AASJ;EACE;;AAEF;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AC1IF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;AAAA;EAEE;;AAEF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;ACvFA;EAA0B;;AAMxB;EAAM;;AACN;EAAuB;;AACvB;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACnBN;EACE;EACA;EACA;EACA;EACA;EACA~~;EACA;EACA;EACA~~;;AAEA;~~EACE~~;;AAGF;EACE;;AAIF;~~EAAM~~;~~EAAwC~~;;;~~ACpBhD~~;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC1CN;EACE;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AASA;EACE;EACA;;;ACxEN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AC/BF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIA;EACE;EACA~~;;AAIF~~;~~EACE~~;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;;AAQR;EACE;EACA;EACA;;;~~AC7GF~~;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;;AD5CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;;AC3CN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;AHnBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AI9CN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;;ACbN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AC1CJ;EACE;EACA;EACA;EACA;;AAEA;EAEE;;AAEA;EACE;;;AAKN;EACE;IACE;IACA;;EAEF;IACE;IACA;;;ACvBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;;;ACTJ;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACvEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACzCJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAGI;AAAA;IACE;IACA;;;AD5BN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;AE3CJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;;ACrBR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACrER;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;ACJF;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}
1	+ {"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/ResponseActions/ResponseActions.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;ACvFF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;IACA;;;ACfJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAKA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAQF;EACE;;;AAQF;EACE;;AACA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AASF;AAAA;AAAA;EACE;;;AC9JN;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;;;AAUF;EACE;;AAGJ;EACE;;;AChDJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AASJ;EACE;;AAEF;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AC1IF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;AAAA;EAEE;;AAEF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;ACvFA;EAA0B;;AAMxB;EAAM;;AACN;EAAuB;;AACvB;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACnBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC1CN;EACE;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AASA;EACE;EACA;;;ACxEN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AC/BF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;;AAQR;EACE;EACA;EACA;;;ACnHF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;;AD5CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;;AC3CN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;AHnBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AI9CN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;;ACbN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AC1CJ;EACE;EACA;EACA;EACA;;AAEA;EAEE;;AAEA;EACE;;;AAKN;EACE;IACE;IACA;;EAEF;IACE;IACA;;;ACvBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;;;ACTJ;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACvEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACzCJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAGI;AAAA;IACE;IACA;;;AD5BN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;AE3CJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;;ACrBR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACrER;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;ACJF;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}

package/dist/esm/ChatbotToggle/ChatbotToggle.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import React from 'react';
 import { ButtonProps, TooltipProps } from '@patternfly/react-core';
 export interface ChatbotToggleProps extends ButtonProps {
     /** Contents of the tooltip applied to the toggle button */
-    toolTipLabel?: React.ReactNode;
+    tooltipLabel: React.ReactNode;
     /** Props spread to the PF Tooltip component */
     tooltipProps?: Omit<TooltipProps, 'content'>;
     /** Flag indicating visibility of the chatbot appended to the toggle */
@@ -15,6 +15,12 @@ export interface ChatbotToggleProps extends ButtonProps {
     closedToggleIcon?: () => JSX.Element;
     /** Ref applied to toggle */
     innerRef?: React.Ref<HTMLButtonElement>;
+    /** Whether toggle is a circle */
+    isRound?: boolean;
+    /** Class name applied to toggle */
+    className?: string;
+    /** Test id applied to default open icon */
+    openIconTestId?: string;
 }
 declare const ChatbotToggle: React.ForwardRefExoticComponent<ChatbotToggleProps & React.RefAttributes<any>>;
 export default ChatbotToggle;

package/dist/esm/ChatbotToggle/ChatbotToggle.js CHANGED Viewed

@@ -19,12 +19,12 @@ const ChatIcon = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2
     React.createElement("path", { fill: "var(--pf-t--global--icon--color--inverse)", stroke: "var(--pf-t--global--icon--color--inverse)", strokeLinejoin: "round", strokeWidth: ".75", d: "M3.577 14.382c0 .198.12.38.31.46l.19.04a.492.492 0 0 0 .349-.143l3.028-3.028h8.513a.489.489 0 0 0 .492-.492V2.491A.489.489 0 0 0 15.967 2H1.691a.489.489 0 0 0-.492.491v8.728c0 .135.056.262.143.349a.498.498 0 0 0 .349.143h1.878v2.663h.008v.008ZM2.19 10.72V2.983h13.278v7.729H7.24a.512.512 0 0 0-.35.143l-2.322 2.322v-1.974a.498.498 0 0 0-.142-.348.492.492 0 0 0-.35-.143H2.19v.008Z" }),
     React.createElement("path", { fill: "var(--pf-t--global--text--color--inverse)", stroke: "var(--pf-t--global--text--color--inverse)", strokeLinejoin: "round", strokeWidth: ".75", d: "M22.301 9.135h-3.963a.489.489 0 0 0-.492.491c0 .27.222.492.492.492h3.472v7.737h-1.88a.404.404 0 0 0-.348.134.492.492 0 0 0-.143.35v1.973l-2.322-2.323a.492.492 0 0 0-.349-.142H8.532v-4.265a.489.489 0 0 0-.492-.492.494.494 0 0 0-.491.492v4.756c0 .277.222.492.491.492h8.514l3.028 3.028a.492.492 0 0 0 .349.142l.19-.04a.502.502 0 0 0 .31-.459V18.83h1.878c.111-.008.262-.048.349-.135a.491.491 0 0 0 .142-.349v-8.72a.489.489 0 0 0-.491-.491h-.008Z" })));
 const ChatbotToggleBase = (_a) => {
-    var { toolTipLabel, isChatbotVisible, onToggleChatbot, tooltipProps, toggleButtonLabel, closedToggleIcon: ClosedToggleIcon, innerRef } = _a, props = __rest(_a, ["toolTipLabel", "isChatbotVisible", "onToggleChatbot", "tooltipProps", "toggleButtonLabel", "closedToggleIcon", "innerRef"]);
+    var { tooltipLabel, isChatbotVisible, onToggleChatbot, tooltipProps, toggleButtonLabel, closedToggleIcon: ClosedToggleIcon, innerRef, isRound = true, className, openIconTestId } = _a, props = __rest(_a, ["tooltipLabel", "isChatbotVisible", "onToggleChatbot", "tooltipProps", "toggleButtonLabel", "closedToggleIcon", "innerRef", "isRound", "className", "openIconTestId"]);
     // Configure icon
     const closedIcon = ClosedToggleIcon ? React.createElement(ClosedToggleIcon, null) : React.createElement(ChatIcon, null);
-    const icon = isChatbotVisible ? React.createElement(AngleDownIcon, null) : closedIcon;
-    return (React.createElement(Tooltip, Object.assign({ content: toolTipLabel }, tooltipProps),
-        React.createElement(Button, Object.assign({ className: `pf-chatbot__button ${isChatbotVisible ? 'pf-chatbot__button--active' : ''}`, variant: "plain", "aria-label": toggleButtonLabel || `${toolTipLabel} toggle`, onClick: onToggleChatbot, "aria-expanded": isChatbotVisible, icon: React.createElement(Icon, { isInline: true }, icon), ref: innerRef }, props))));
+    const icon = isChatbotVisible ? React.createElement(AngleDownIcon, { "data-testid": openIconTestId }) : closedIcon;
+    return (React.createElement(Tooltip, Object.assign({ content: tooltipLabel }, tooltipProps),
+        React.createElement(Button, Object.assign({ className: `pf-chatbot__button ${isChatbotVisible ? 'pf-chatbot__button--active' : ''} ${isRound ? 'pf-chatbot__button--round' : ''} ${className ? className : ''}`, variant: "plain", "aria-label": toggleButtonLabel || `${tooltipLabel} toggle`, onClick: onToggleChatbot, "aria-expanded": isChatbotVisible, icon: React.createElement(Icon, { isInline: true }, icon), ref: innerRef }, props))));
 };
 const ChatbotToggle = React.forwardRef((props, ref) => (React.createElement(ChatbotToggleBase, Object.assign({ innerRef: ref }, props))));
 export default ChatbotToggle;

package/dist/esm/ChatbotToggle/ChatbotToggle.test.d.ts ADDED Viewed

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

package/dist/esm/ChatbotToggle/ChatbotToggle.test.js ADDED Viewed

@@ -0,0 +1,55 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import ChatbotToggle from './ChatbotToggle';
+describe('ChatbotToggle', () => {
+    it('should render tooltipLabel correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(ChatbotToggle, { tooltipLabel: "Tooltip" }));
+        yield userEvent.click(screen.getByRole('button', { name: /Tooltip toggle/i }));
+        expect(screen.getByRole('tooltip', { name: /Tooltip/i })).toBeTruthy();
+    }));
+    it('should render toggleButtonLabel correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(ChatbotToggle, { tooltipLabel: "Chatbot", toggleButtonLabel: "Button" }));
+        expect(screen.getByRole('button', { name: /Button/i })).toBeTruthy();
+    }));
+    it('should call onToggleChatbot when clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(ChatbotToggle, { tooltipLabel: "Chatbot", onToggleChatbot: spy }));
+        yield userEvent.click(screen.getByRole('button'));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should handle isChatbotVisible correctly when true', () => {
+        render(React.createElement(ChatbotToggle, { tooltipLabel: "Chatbot", isChatbotVisible: true, openIconTestId: "Open" }));
+        expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+        expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button--active');
+        expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+        expect(screen.getByTestId('Open')).toBeTruthy();
+    });
+    it('should handle isChatbotVisible correctly when false', () => {
+        render(React.createElement(ChatbotToggle, { tooltipLabel: "Chatbot", isChatbotVisible: false, openIconTestId: "Open" }));
+        expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+        expect(screen.getByRole('button')).not.toHaveClass('pf-chatbot__button--active');
+        expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+        expect(screen.queryByTestId('Open')).toBeFalsy();
+    });
+    it('should handle isRound correctly', () => {
+        render(React.createElement(ChatbotToggle, { tooltipLabel: "Chatbot", isRound: true }));
+        expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+        expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button--round');
+    });
+    it('should handle className correctly', () => {
+        render(React.createElement(ChatbotToggle, { tooltipLabel: "Chatbot", className: "test" }));
+        expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+        expect(screen.getByRole('button')).toHaveClass('test');
+    });
+});

package/dist/esm/Message/Message.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LabelGroupProps, LabelProps } from '@patternfly/react-core';
+import { AvatarProps, LabelGroupProps, LabelProps } from '@patternfly/react-core';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
 export interface QuickResponse extends Omit<LabelProps, 'children'> {
@@ -60,6 +60,10 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     quickResponses?: QuickResponse[];
     /** Props for quick responses container */
     quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+    /** Whether avatar is round */
+    hasRoundAvatar?: boolean;
+    /** Any additional props applied to the avatar, for additional customization  */
+    avatarProps?: Omit<AvatarProps, 'alt'>;
 }
 export declare const Message: React.FunctionComponent<MessageProps>;
 export default Message;

package/dist/esm/Message/Message.js CHANGED Viewed

@@ -26,12 +26,18 @@ import ListItemMessage from './ListMessage/ListItemMessage';
 import UnorderedListMessage from './ListMessage/UnorderedListMessage';
 import OrderedListMessage from './ListMessage/OrderedListMessage';
 export 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"]);
+    var { role, content, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps"]);
+    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()}`;
     return (React.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}` }, props),
-        React.createElement(Avatar, { src: avatar, alt: "" }),
+        React.createElement(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
         React.createElement("div", { className: "pf-chatbot__message-contents" },
             React.createElement("div", { className: "pf-chatbot__message-meta" },
                 name && (React.createElement("span", { className: "pf-chatbot__message-name" },