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

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

@@ -69,7 +69,12 @@ describe('Message', () => {
         expect(screen.getByText('User')).toBeTruthy();
         expect(screen.getByText('Hi')).toBeTruthy();
         const date = new Date();
-        expect(screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
+        const formattedDate = date.toLocaleDateString();
+        expect(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(screen.queryByText('Loading message')).toBeFalsy();
         expect(screen.getByRole('img')).toHaveAttribute('src', './img');
     });
@@ -79,7 +84,12 @@ describe('Message', () => {
         expect(screen.getByText('AI')).toBeTruthy();
         expect(screen.getByText('Hi')).toBeTruthy();
         const date = new Date();
-        expect(screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
+        const formattedDate = date.toLocaleDateString();
+        expect(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', () => {
         render(React.createElement(Message, { avatar: "./testImg", role: "bot", name: "Bot", content: "Hi" }));
@@ -99,7 +109,12 @@ describe('Message', () => {
         expect(screen.getByText('Hi')).toBeTruthy();
         expect(screen.getByText('2 hours ago')).toBeTruthy();
         const date = new Date();
-        expect(screen.queryByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeFalsy();
+        const formattedDate = date.toLocaleDateString();
+        expect(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', () => {
         render(React.createElement(Message, { avatar: "./img", role: "user", content: "Hi", attachments: [{ name: 'testAttachment' }] }));
@@ -129,7 +144,12 @@ describe('Message', () => {
         expect(screen.getByText('AI')).toBeTruthy();
         expect(screen.queryByText('Hi')).toBeFalsy();
         const date = new Date();
-        expect(screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
+        const formattedDate = date.toLocaleDateString();
+        expect(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(screen.getByText('Loading message')).toBeTruthy();
     });
     it('should be able to show sources', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -157,6 +177,59 @@ describe('Message', () => {
         expect(screen.getByText('Loading message')).toBeTruthy();
         expect(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();
+        render(React.createElement(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
+                {
+                    id: '1',
+                    content: 'Yes',
+                    onClick: spy,
+                    className: 'test'
+                }
+            ] }));
+        const quickResponse = screen.getByRole('button', { name: /Yes/i });
+        expect(quickResponse).toBeTruthy();
+        yield userEvent.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();
+        render(React.createElement(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
+                {
+                    id: '1',
+                    content: 'Yes',
+                    onClick: spy
+                },
+                {
+                    id: '2',
+                    content: 'No',
+                    onClick: spy
+                }
+            ] }));
+        expect(screen.getByRole('button', { name: /Yes/i })).toBeTruthy();
+        expect(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();
+        render(React.createElement(Message, { 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(screen.getByRole('button', { name: /Yes/i })).toBeTruthy();
+        expect(screen.queryByRole('button', { name: /No/i })).toBeFalsy();
+        expect(screen.getByRole('button', { name: /1 more/i }));
+    }));
     it('should be able to show actions', () => __awaiter(void 0, void 0, void 0, function* () {
         render(React.createElement(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: {
                 // eslint-disable-next-line no-console
@@ -231,4 +304,27 @@ describe('Message', () => {
         render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: { 'aria-label': 'test' } }));
         expect(screen.getByRole('button', { name: 'test' })).toBeTruthy();
     });
+    it('should handle hasRoundAvatar correctly when it is true', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", hasRoundAvatar: true }));
+        expect(screen.getByRole('img')).toBeTruthy();
+        expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
+        expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar--round');
+    });
+    it('should handle hasRoundAvatar correctly when it is false', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", hasRoundAvatar: false }));
+        expect(screen.getByRole('img')).toBeTruthy();
+        expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
+        expect(screen.getByRole('img')).not.toHaveClass('pf-chatbot__message-avatar--round');
+    });
+    it('should handle avatarProps correctly by spreading it onto the Message Avatar', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", avatarProps: { className: 'test' } }));
+        expect(screen.getByRole('img')).toBeTruthy();
+        expect(screen.getByRole('img')).toHaveClass('test');
+    });
+    it('should handle avatarProps and hasRoundAvatar correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", avatarProps: { className: 'test' }, hasRoundAvatar: false }));
+        expect(screen.getByRole('img')).toBeTruthy();
+        expect(screen.getByRole('img')).toHaveClass('test');
+        expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
+    });
 });

package/dist/esm/ResponseActions/ResponseActions.test.js

@@ -12,6 +12,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ResponseActions from './ResponseActions';
 import userEvent from '@testing-library/user-event';
+import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons';
 const ALL_ACTIONS = [
     { type: 'positive', label: 'Good response' },
     { type: 'negative', label: 'Bad response' },
@@ -19,6 +20,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.createElement(RedoIcon, null)
+        },
+        download: {
+            ariaLabel: 'Download',
+            onClick: jest.fn(),
+            tooltipContent: 'Download',
+            icon: React.createElement(DownloadIcon, null)
+        },
+        info: {
+            ariaLabel: 'Info',
+            onClick: jest.fn(),
+            tooltipContent: 'Info',
+            icon: React.createElement(InfoCircleIcon, null)
+        }
+    }
+];
 describe('ResponseActions', () => {
     it('should render buttons correctly', () => {
         ALL_ACTIONS.forEach(({ type, label }) => {
@@ -59,4 +82,19 @@ describe('ResponseActions', () => {
             expect(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];
+            render(React.createElement(ResponseActions, { 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(screen.getByRole('button', { name: key })).toBeTruthy();
+        });
+    });
 });

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts"],"version":"5.6.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.1.0-prerelease.17",
+  "version": "2.1.0-prerelease.19",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -75,5 +75,9 @@
     "victory-cursor-container": "^37.1.1",
     "victory-tooltip": "^37.1.1",
     "victory-bar": "^37.1.1"
+  },
+  "overrides": {
+    "puppeteer": "^23.6.1",
+    "puppeteer-cluster": "^0.24.0"
   }
 }

package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
+import squareImg from './PF-social-color-square.svg';
 
 export const BotMessageExample: React.FunctionComponent = () => {
   const markdown = `
@@ -82,6 +83,13 @@ export default MessageLoading;
         avatar={patternflyAvatar}
         content="Text-based message, where the bot's name is truncated"
       />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={squareImg}
+        content="Text-based message from a bot with a square avatar. You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `<Message>` component via `avatarProps`."
+        hasRoundAvatar={false}
+      />
     </>
   );
 };

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithAttachment.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import PreviewAttachment from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
 import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
-import userAvatar from './user_avatar.jpg';
+import userAvatar from './user_avatar.svg';
 
 interface ModalData {
   code: string;

package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -33,7 +33,6 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
 import patternflyAvatar from './patternfly_avatar.jpg';
-import userAvatar from './user_avatar.jpg';
 import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
 import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails';
 import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
@@ -41,6 +40,9 @@ import FileDropZone from '@patternfly/chatbot/dist/dynamic/FileDropZone';
 import { PreviewAttachment } from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
 import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
 
+import userAvatar from './user_avatar.svg';
+import squareImg from './PF-social-color-square.svg';
+
 The `content` prop of the `<Message>` component is passed to a `<Markdown>` component (from [react-markdown](https://remarkjs.github.io/react-markdown/)), which is configured to translate plain text strings into PatternFly [`<Content>` components](/components/content) and code blocks into PatternFly [`<CodeBlock>` components.](/components/code-block)
 
 ## Messages
@@ -53,6 +55,10 @@ Messages from the chatbot will be marked with an "AI" label to clearly communica
 
 By default, a date and timestamp is displayed with each message. We recommend using the `timestamp` prop in real chatbots, since it will allow you to set persistent dates and times on messages, even if the messages re-render. You can update `timestamp` with a different [date and time format](/ux-writing/numerics) as needed.
 
+<br />
+
+You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `<Message>` component via `avatarProps`.
+
 ```js file="./BotMessage.tsx"
 
 ```
@@ -101,7 +107,7 @@ The API for a source requires a link at minimum, but we strongly recommend provi
 
 ### User messages
 
-Messages from users have a different background color to differentiate them from bot messages. You can also display a custom avatar that is uploaded by the user.
+Messages from users have a different background color to differentiate them from bot messages. You can also display a custom avatar that is uploaded by the user. You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `<Message>` component via `avatarProps`.
 
 ```js file="./UserMessage.tsx"
 

package/patternfly-docs/content/extensions/chatbot/examples/Messages/PF-social-color-square.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="228px" height="228px" viewBox="0 0 228 228" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-social-color-square </title>
+    <defs>
+        <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-social-color-square" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-2">
+            <rect id="Rectangle" fill="#0066CC" x="0" y="0" width="228" height="228" rx="8"></rect>
+            <g id="Group" transform="translate(27, 27)">
+                <path d="M69,0 L175,0 L175,106 C116.457817,106 69,58.5421835 69,0 L69,0 L69,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.4"></path>
+                <path d="M175,2.04658255 L175,152.848101 C175,165.082257 165.082257,175 152.848101,175 L73.5063044,175 L175,2.04658255 Z M172.953417,4.68958206e-13 L1.98951966e-13,101.493696 L1.98951966e-13,22.1518987 C1.98951966e-13,9.91774288 9.91774288,4.68958206e-13 22.1518987,4.54747351e-13 L172.953417,4.68958206e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/patternfly-docs/content/extensions/chatbot/examples/Messages/PF-social-dark-square.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="228px" height="228px" viewBox="0 0 228 228" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-social-dark-square </title>
+    <defs>
+        <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-social-dark-square" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-2">
+            <rect id="Rectangle" fill="#212427" x="0" y="0" width="228" height="228" rx="8"></rect>
+            <g id="Group" transform="translate(27, 27)">
+                <path d="M69,0 L175,0 L175,106 C116.457817,106 69,58.5421835 69,0 L69,0 L69,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.4"></path>
+                <path d="M175,2.04658255 L175,152.848101 C175,165.082257 165.082257,175 152.848101,175 L73.5063044,175 L175,2.04658255 Z M172.953417,1.42108547e-14 L1.98951966e-13,101.493696 L1.98951966e-13,22.1518987 C1.98951966e-13,9.91774288 9.91774288,1.42108547e-14 22.1518987,0 L172.953417,1.42108547e-14 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import userAvatar from './user_avatar.jpg';
+import userAvatar from './user_avatar.svg';
 
 export const UserMessageExample: React.FunctionComponent = () => {
   const markdown = `A paragraph with *emphasis* and **strong importance**.
@@ -32,6 +32,13 @@ Here is an unordered list:
         avatar={userAvatar}
       />
       <Message name="User" role="user" content={markdown} avatar={userAvatar} />
+      <Message
+        name="User"
+        role="user"
+        content="Example user message with `avatarProps` set to add a border"
+        avatar={userAvatar}
+        avatarProps={{ isBordered: true }}
+      />
     </>
   );
 };

package/patternfly-docs/content/extensions/chatbot/examples/Messages/user_avatar.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#F0F0F0;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#D2D2D2;}
+	.st2{fill:#B8BBBE;}
+	.st3{fill:#D2D2D2;}
+</style>
+<rect class="st0" width="36" height="36"/>
+<path class="st1" d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4s6.4,2.9,6.4,6.4S21.3,20.1,17.7,20.1z"/>
+<path class="st2" d="M13.3,36l0-6.7c-2,0.4-2.9,1.4-3.1,3.5L10.1,36H13.3z"/>
+<path class="st3" d="M10.1,36l0.1-3.2c0.2-2.1,1.1-3.1,3.1-3.5l0,6.7h9.4l0-6.7c2,0.4,2.9,1.4,3.1,3.5l0.1,3.2h4.7
+	c-0.4-3.9-1.3-9-2.9-11c-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-0.6-6.3-0.6s-6.1,0.7-6.1,0.7c-1.2,0.4-2.4,1.2-3.4,2.6
+	C6.7,27,5.8,32.2,5.4,36H10.1z"/>
+<path class="st2" d="M25.9,36l-0.1-3.2c-0.2-2.1-1.1-3.1-3.1-3.5l0,6.7H25.9z"/>
+</svg>

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotToggleBasic.tsx

@@ -5,7 +5,7 @@ export const BasicDemo: React.FunctionComponent = () => {
   const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(false);
   return (
     <ChatbotToggle
-      toolTipLabel="Chatbot"
+      tooltipLabel="Chatbot"
       isChatbotVisible={chatbotVisible}
       onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
     />

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotWelcomeInteraction.tsx

@@ -7,7 +7,7 @@ import ChatbotFooter from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
 import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
 import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
 import Message, { MessageProps } from '@patternfly/chatbot/dist/dynamic/Message';
-import userAvatar from '../Messages/user_avatar.jpg';
+import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import { FormGroup, Radio } from '@patternfly/react-core';
 
@@ -41,7 +41,8 @@ export const ChatbotWelcomeInteractionDemo: React.FunctionComponent = () => {
       content: message,
       name: 'User',
       avatar: userAvatar,
-      timestamp: date.toLocaleString()
+      timestamp: date.toLocaleString(),
+      avatarProps: { isBordered: true }
     });
     newMessages.push({
       id: generateId(),

package/patternfly-docs/content/extensions/chatbot/examples/UI/CustomClosedIcon.tsx

@@ -80,7 +80,7 @@ export const BasicDemo: React.FunctionComponent = () => {
 
   return (
     <ChatbotToggle
-      toolTipLabel="Virtual assistant"
+      tooltipLabel="Virtual assistant"
       isChatbotVisible={chatbotVisible}
       onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
       closedToggleIcon={closedToggleIcon}

package/patternfly-docs/content/extensions/chatbot/examples/UI/SkipToContent.tsx

@@ -26,7 +26,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
         Skip to chatbot
       </SkipToContent>
       <ChatbotToggle
-        toolTipLabel="Chatbot"
+        tooltipLabel="Chatbot"
         isChatbotVisible={chatbotVisible}
         onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
         id="chatbot-toggle"

package/patternfly-docs/content/extensions/chatbot/examples/UI/SquareChatbotToggle.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ChatbotToggle from '@patternfly/virtual-assistant/dist/dynamic/ChatbotToggle';
+
+export const SquareChatbotToggle: React.FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(false);
+  return (
+    <ChatbotToggle
+      tooltipLabel="Chatbot"
+      isChatbotVisible={chatbotVisible}
+      onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
+      isRound={false}
+    />
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -76,7 +76,7 @@ import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
 import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
 import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
-import userAvatar from '../Messages/user_avatar.jpg';
+import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 ## Structure
@@ -164,6 +164,14 @@ A custom icon can be passed to the toggle. To ensure the icon is visible in both
 
 ```
 
+### Custom toggle shape
+
+A custom shape can be set for the toggle. To override the default circle shape, set `isRound` to `false`. This will set the toggle to a square shape, but you can pass in additional classes to further customize the shape.
+
+```js file="./SquareChatbotToggle.tsx" isFullscreen
+
+```
+
 ## Header
 
 ### Header sections

package/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md

@@ -42,7 +42,7 @@ import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-dra
 import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
-import userAvatar from '../Messages/user_avatar.jpg';
+import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 ## Demos

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -53,7 +53,7 @@ import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
-import userAvatar from '../Messages/user_avatar.jpg';
+import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 ### Basic chatbot

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx

@@ -30,7 +30,7 @@ import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
-import userAvatar from '../Messages/user_avatar.jpg';
+import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 const footnoteProps = {
@@ -102,7 +102,8 @@ const initialMessages: MessageProps[] = [
     content: 'Hello, can you give me an example of what you can do?',
     name: 'User',
     avatar: userAvatar,
-    timestamp: date.toLocaleString()
+    timestamp: date.toLocaleString(),
+    avatarProps: { isBordered: true }
   },
   {
     id: '2',
@@ -222,7 +223,8 @@ export const ChatbotDemo: React.FunctionComponent = () => {
       content: message,
       name: 'User',
       avatar: userAvatar,
-      timestamp: date.toLocaleString()
+      timestamp: date.toLocaleString(),
+      avatarProps: { isBordered: true }
     });
     newMessages.push({
       id: generateId(),
@@ -335,7 +337,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
         Skip to chatbot
       </SkipToContent>
       <ChatbotToggle
-        toolTipLabel="Chatbot"
+        tooltipLabel="Chatbot"
         isChatbotVisible={chatbotVisible}
         onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
         id="chatbot-toggle"

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx

@@ -27,7 +27,7 @@ import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
-import userAvatar from '../Messages/user_avatar.jpg';
+import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 interface ModalData {
@@ -54,6 +54,7 @@ export const BasicDemo: React.FunctionComponent = () => {
       content: "I'm referring to this attachment for added context in our conversation.",
       name: 'User',
       avatar: userAvatar,
+      avatarProps: { isBordered: true },
       attachmentName: 'auth-operator.yml',
       attachmentId: '1',
       onAttachmentClose,
@@ -167,7 +168,7 @@ export const BasicDemo: React.FunctionComponent = () => {
   return (
     <>
       <ChatbotToggle
-        toolTipLabel="Chatbot"
+        tooltipLabel="Chatbot"
         isChatbotVisible={chatbotVisible}
         onToggleChatbot={() => {
           setChatbotVisible(!chatbotVisible);

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx

@@ -14,7 +14,7 @@ import { Divider, DropdownGroup, DropdownItem, DropdownList, DropEvent } from '@
 import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
 import { useDropzone } from 'react-dropzone';
-import userAvatar from '../Messages/user_avatar.jpg';
+import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 const initialMenuItems = [
@@ -71,7 +71,8 @@ const messages: MessageProps[] = [
     role: 'user',
     content: 'Hello, can you give me an example of what you can do?',
     name: 'User',
-    avatar: userAvatar
+    avatar: userAvatar,
+    avatarProps: { isBordered: true }
   },
   {
     role: 'bot',
@@ -210,7 +211,7 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
       {/* this is required for react-dropzone to work in Safari and Firefox */}
       <input {...getInputProps()} />
       <ChatbotToggle
-        toolTipLabel="Chatbot"
+        tooltipLabel="Chatbot"
         isChatbotVisible={chatbotVisible}
         onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
       />

package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx

@@ -38,7 +38,7 @@ import ChatbotHeader, {
 import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
 import { BarsIcon } from '@patternfly/react-icons';
-import userAvatar from '../Messages/user_avatar.jpg';
+import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 const footnoteProps = {
@@ -110,7 +110,8 @@ const initialMessages: MessageProps[] = [
     content: 'Hello, can you give me an example of what you can do?',
     name: 'User',
     avatar: userAvatar,
-    timestamp: date.toLocaleString()
+    timestamp: date.toLocaleString(),
+    avatarProps: { isBordered: true }
   },
   {
     id: '2',
@@ -221,7 +222,8 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
       content: message,
       name: 'User',
       avatar: userAvatar,
-      timestamp: date.toLocaleString()
+      timestamp: date.toLocaleString(),
+      avatarProps: { isBordered: true }
     });
     newMessages.push({
       id: generateId(),