@patternfly/chatbot 6.7.0-prerelease.3 → 6.7.0-prerelease.5

package/dist/esm/Message/Message.js

@@ -32,8 +32,9 @@ import DeepThinking from '../DeepThinking';
 import ToolCall from '../ToolCall';
 import MarkdownContent from '../MarkdownContent';
 import { css } from '@patternfly/react-styles';
+import RhUiAiChatbotIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-chatbot-icon';
 export const MessageBase = (_a) => {
-    var { children, role, alignment = 'start', isMetadataVisible = true, content, extraContent, name, avatar, timestamp, isLoading, actions, persistActionSelection, showActionsOnInteraction = false, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], additionalRemarkPlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse, deepThinking, remarkGfmProps, toolCall, hasNoImagesInUserMessages = true, isPrimary, useFilledIconsOnClick } = _a, props = __rest(_a, ["children", "role", "alignment", "isMetadataVisible", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "persistActionSelection", "showActionsOnInteraction", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "additionalRemarkPlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse", "deepThinking", "remarkGfmProps", "toolCall", "hasNoImagesInUserMessages", "isPrimary", "useFilledIconsOnClick"]);
+    var { children, role, alignment = 'start', isMetadataVisible = true, content, extraContent, name, avatar, isAvatarHidden = false, timestamp, isLoading, actions, persistActionSelection, showActionsOnInteraction = false, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], additionalRemarkPlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse, deepThinking, remarkGfmProps, toolCall, hasNoImagesInUserMessages = true, isPrimary, useFilledIconsOnClick } = _a, props = __rest(_a, ["children", "role", "alignment", "isMetadataVisible", "content", "extraContent", "name", "avatar", "isAvatarHidden", "timestamp", "isLoading", "actions", "persistActionSelection", "showActionsOnInteraction", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "additionalRemarkPlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse", "deepThinking", "remarkGfmProps", "toolCall", "hasNoImagesInUserMessages", "isPrimary", "useFilledIconsOnClick"]);
     const [messageText, setMessageText] = useState(content);
     useEffect(() => {
         setMessageText(content);
@@ -61,7 +62,23 @@ export const MessageBase = (_a) => {
         }
         return (_jsxs(_Fragment, { children: [beforeMainContent && _jsx(_Fragment, { children: beforeMainContent }), error ? _jsx(ErrorMessage, Object.assign({}, error)) : handleMarkdown()] }));
     };
-    return (_jsxs("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: css(`pf-chatbot__message pf-chatbot__message--${role}`, alignment === 'end' && 'pf-m-end'), "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [avatar && (_jsx(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps))), _jsxs("div", { className: "pf-chatbot__message-contents", children: [isMetadataVisible && (_jsxs("div", { className: "pf-chatbot__message-meta", children: [name && (_jsx("span", { className: "pf-chatbot__message-name", children: _jsx(Truncate, { content: name }) })), role === 'bot' && (_jsx(Label, { variant: "outline", isCompact: true, children: botWord })), _jsx(Timestamp, { date: date, children: timestamp })] })), _jsx("div", { className: "pf-chatbot__message-response", children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && _jsx(_Fragment, { children: afterMainContent }), toolResponse && _jsx(ToolResponse, Object.assign({}, toolResponse)), deepThinking && _jsx(DeepThinking, Object.assign({}, deepThinking)), toolCall && _jsx(ToolCall, Object.assign({}, toolCall)), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && (_jsx(_Fragment, { children: Array.isArray(actions) ? (_jsx("div", { className: css('pf-chatbot__response-actions-groups', showActionsOnInteraction && 'pf-m-visible-interaction'), children: actions.map((actionGroup, index) => (_jsx(ResponseActions, { actions: actionGroup.actions || actionGroup, persistActionSelection: persistActionSelection || actionGroup.persistActionSelection, useFilledIconsOnClick: useFilledIconsOnClick }, index))) })) : (_jsx(ResponseActions, { actions: actions, persistActionSelection: persistActionSelection, useFilledIconsOnClick: useFilledIconsOnClick, showActionsOnInteraction: showActionsOnInteraction })) })), userFeedbackForm && (_jsx(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact }))), userFeedbackComplete && (_jsx(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && (_jsx("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
+    const avatarClasses = css(`pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`);
+    /* We are using an empty alt tag intentionally in order to reduce noise on screen readers */
+    const botAvatar = (_jsx(Avatar, Object.assign({ className: avatarClasses, alt: "", isBordered: true }, avatarProps, { src: undefined, initials: undefined, children: _jsx(RhUiAiChatbotIcon, {}) })));
+    let _avatar;
+    if (!isAvatarHidden) {
+        if (role === 'bot') {
+            _avatar = botAvatar;
+        }
+        else if (avatar) {
+            _avatar =
+                typeof avatar === 'string' ? (_jsx(Avatar, Object.assign({ className: avatarClasses, src: avatar, alt: "" }, avatarProps))) : (_jsx(Avatar, Object.assign({ className: avatarClasses, alt: "" }, avatarProps, { children: avatar })));
+        }
+        else if (avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.initials) {
+            _avatar = _jsx(Avatar, Object.assign({ className: avatarClasses, alt: "" }, avatarProps));
+        }
+    }
+    return (_jsxs("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: css(`pf-chatbot__message pf-chatbot__message--${role}`, alignment === 'end' && 'pf-m-end'), "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [_avatar && _avatar, _jsxs("div", { className: "pf-chatbot__message-contents", children: [isMetadataVisible && (_jsxs("div", { className: "pf-chatbot__message-meta", children: [name && (_jsx("span", { className: "pf-chatbot__message-name", children: _jsx(Truncate, { content: name }) })), role === 'bot' && (_jsx(Label, { variant: "outline", isCompact: true, children: botWord })), _jsx(Timestamp, { date: date, children: timestamp })] })), _jsx("div", { className: "pf-chatbot__message-response", children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && _jsx(_Fragment, { children: afterMainContent }), toolResponse && _jsx(ToolResponse, Object.assign({}, toolResponse)), deepThinking && _jsx(DeepThinking, Object.assign({}, deepThinking)), toolCall && _jsx(ToolCall, Object.assign({}, toolCall)), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && (_jsx(_Fragment, { children: Array.isArray(actions) ? (_jsx("div", { className: css('pf-chatbot__response-actions-groups', showActionsOnInteraction && 'pf-m-visible-interaction'), children: actions.map((actionGroup, index) => (_jsx(ResponseActions, { actions: actionGroup.actions || actionGroup, persistActionSelection: persistActionSelection || actionGroup.persistActionSelection, useFilledIconsOnClick: useFilledIconsOnClick }, index))) })) : (_jsx(ResponseActions, { actions: actions, persistActionSelection: persistActionSelection, useFilledIconsOnClick: useFilledIconsOnClick, showActionsOnInteraction: showActionsOnInteraction })) })), userFeedbackForm && (_jsx(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact }))), userFeedbackComplete && (_jsx(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && (_jsx("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
                                         var _a;
                                         return (_jsx("div", { className: "pf-chatbot__message-attachment", children: _jsx(FileDetailsLabel, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId, variant: isPrimary ? 'outline' : undefined }) }, (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name));
                                     }) })), !isLoading && endContent && _jsx(_Fragment, { children: endContent })] })) })] })] })));

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

@@ -217,11 +217,23 @@ describe('Message', () => {
         })).toBeInTheDocument();
     });
     it('should render avatar correctly', () => {
-        render(_jsx(Message, { avatar: "./testImg", role: "bot", name: "Bot", content: "Hi" }));
+        render(_jsx(Message, { avatar: "./testImg", role: "user", name: "A", content: "Hi" }));
         expect(screen.getByRole('img')).toHaveAttribute('src', './testImg');
     });
     it('should not render avatar if no avatar prop is passed', () => {
+        render(_jsx(Message, { role: "user", name: "A", content: "Hi" }));
+        expect(screen.queryByRole('img')).not.toBeInTheDocument();
+    });
+    it('should render bot avatar if no avatar prop is passed', () => {
         render(_jsx(Message, { role: "bot", name: "Bot", content: "Hi" }));
+        expect(screen.queryAllByRole('img', { hidden: true })[0]).toBeVisible();
+    });
+    it('should not render avatar if isAvatarHidden is passed', () => {
+        render(_jsx(Message, { role: "user", name: "A", content: "Hi", isAvatarHidden: true }));
+        expect(screen.queryByRole('img')).not.toBeInTheDocument();
+    });
+    it('should not render bot avatar if isAvatarHidden is passed', () => {
+        render(_jsx(Message, { role: "bot", name: "Bot", content: "Hi", isAvatarHidden: true }));
         expect(screen.queryByRole('img')).not.toBeInTheDocument();
     });
     it('should render botWord correctly', () => {

package/dist/esm/MessageDivider/MessageDivider.js

@@ -14,7 +14,7 @@ import { Divider, Label } from '@patternfly/react-core';
 const MessageDivider = (_a) => {
     var { variant = 'inset', content = new Date().toLocaleDateString() } = _a, props = __rest(_a, ["variant", "content"]);
     if (variant === 'inset') {
-        return (_jsxs("div", Object.assign({ className: "pf-chatbot__message-divider pf-m-divider pf-m-wrap" }, props, { children: [_jsx(Divider, {}), _jsx(Label, { variant: "outline", children: content })] })));
+        return (_jsxs("div", Object.assign({ className: "pf-chatbot__message-divider pf-m-divider pf-m-wrap" }, props, { children: [_jsx(Divider, {}), _jsx(Label, { children: content })] })));
     }
     return (_jsx("div", Object.assign({ className: "pf-chatbot__message-divider pf-m-wrap" }, props, { children: _jsx(Label, { children: content }) })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.7.0-prerelease.3",
+  "version": "6.7.0-prerelease.5",
   "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",
@@ -33,11 +33,11 @@
     "tag": "prerelease"
   },
   "dependencies": {
-    "@patternfly/react-code-editor": "^6.1.0",
-    "@patternfly/react-core": "^6.1.0",
-    "@patternfly/react-icons": "^6.5.1",
-    "@patternfly/react-styles": "^6.1.0",
-    "@patternfly/react-table": "^6.1.0",
+    "@patternfly/react-code-editor": "^6.6.0",
+    "@patternfly/react-core": "^6.6.0",
+    "@patternfly/react-icons": "^6.6.0",
+    "@patternfly/react-styles": "^6.6.0",
+    "@patternfly/react-table": "^6.6.0",
     "@segment/analytics-next": "^1.76.0",
     "clsx": "^2.1.0",
     "path-browserify": "^1.0.1",
@@ -66,8 +66,8 @@
   },
   "devDependencies": {
     "@octokit/rest": "^18.0.0",
-    "@patternfly/documentation-framework": "6.28.9",
-    "@patternfly/patternfly": "^6.1.0",
+    "@patternfly/documentation-framework": "^6.47.0",
+    "@patternfly/patternfly": "^6.6.0",
     "@patternfly/patternfly-a11y": "^5.0.0",
     "@types/dom-speech-recognition": "^0.0.4",
     "@types/react": "^18.2.61",

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

@@ -8,7 +8,6 @@ import {
   Ref
 } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 import squareImg from './PF-social-color-square.svg';
 import {
   AlertActionLink,
@@ -290,25 +289,18 @@ _Italic text, formatted with single underscores_
 
   return (
     <>
+      <Message name="Bot" role="bot" content={`This is a text-based message from a bot named "Bot."`} />
       <Message
         name="Bot"
         role="bot"
-        avatar={patternflyAvatar}
-        content={`This is a text-based message from a bot named "Bot."`}
-      />
-      <Message
-        name="Bot"
-        role="bot"
-        avatar={patternflyAvatar}
         content={`This is a text-based message from "Bot," with an updated timestamp.`}
         timestamp="1 hour ago"
       />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
-      <Message role="bot" avatar={patternflyAvatar} content="This message is from a nameless bot." />
+      <Message name="Bot" role="bot" content="Example content" isLoading />
+      <Message role="bot" content="This message is from a nameless bot." />
       <Message
         name="Default Openshift Container Platform Assistant That Can Help With Any Query You Might Need Help With"
         role="bot"
-        avatar={patternflyAvatar}
         content="This is a message from a bot with really long name: it's truncated!"
       />
       <Message
@@ -322,7 +314,6 @@ _Italic text, formatted with single underscores_
       <Message
         name="Bot"
         role="bot"
-        avatar={patternflyAvatar}
         isMetadataVisible={false}
         content="This is a message from a bot with metadata not visible."
       />
@@ -355,7 +346,6 @@ _Italic text, formatted with single underscores_
       <Message
         name="Bot"
         role="bot"
-        avatar={patternflyAvatar}
         content={renderContent()}
         tableProps={
           variant === 'Table' ? { 'aria-label': 'App information and user roles for bot messages' } : undefined

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

@@ -1,13 +1,11 @@
 import { FunctionComponent } from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 
 export const ResponseActionClickedExample: FunctionComponent = () => (
   <Message
     name="Bot"
     role="bot"
-    avatar={patternflyAvatar}
     content="I updated your account with those settings. You're ready to set up your first dashboard!"
     actions={{
       // eslint-disable-next-line no-console

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

@@ -1,7 +1,6 @@
 import { FunctionComponent } from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
 
@@ -9,7 +8,6 @@ export const CustomActionExample: FunctionComponent = () => (
   <Message
     name="Bot"
     role="bot"
-    avatar={patternflyAvatar}
     content="I updated your account with those settings. You're ready to set up your first dashboard!"
     actions={{
       regenerate: {

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

@@ -11,7 +11,6 @@ import ToolCall from '@patternfly/chatbot/dist/dynamic/ToolCall';
 import ToolResponse from '@patternfly/chatbot/dist/dynamic/ToolResponse';
 import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
 import ResponseActions, { ResponseActionsGroups } from '@patternfly/chatbot/dist/dynamic/ResponseActions';
-import patternflyAvatar from './patternfly_avatar.jpg';
 import userAvatar from './user_avatar.svg';
 
 const handlePositiveResponse = () => {
@@ -36,7 +35,7 @@ const handleListen = () => {
 
 export const MessageWithCustomStructure: FunctionComponent = () => (
   <>
-    <Message name="Bot" role="bot" avatar={patternflyAvatar}>
+    <Message name="Bot" role="bot">
       <MessageAndActions>
         <MarkdownContent
           content={`This is a basic message with a more custom, fine-tuned structure. You can pass markdown to the MarkdownContent component, such as **bold content with double asterisks** or _italic content with single underscores_.`}

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

@@ -1,13 +1,11 @@
 import { FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 
 export const MessageWithDeepThinkingExample: FunctionComponent = () => (
   <>
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="This example has a body description that's within the recommended limit of 2 lines."
       deepThinking={{
         toggleContent: 'Show thinking',
@@ -18,7 +16,6 @@ export const MessageWithDeepThinkingExample: FunctionComponent = () => (
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="This example has deep thinking that is collapsed by default:"
       deepThinking={{
         isDefaultExpanded: false,
@@ -30,7 +27,6 @@ export const MessageWithDeepThinkingExample: FunctionComponent = () => (
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="This example has deep thinking that is loading:"
       deepThinking={{
         isDefaultExpanded: false,

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

@@ -1,21 +1,14 @@
 import { FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';
 
 export const MessageWithDividersExample: FunctionComponent = () => (
   <>
-    <Message
-      name="Bot"
-      role="bot"
-      avatar={patternflyAvatar}
-      content={`This is a text-based message from a bot named "Bot."`}
-    />
+    <Message name="Bot" role="bot" content={`This is a text-based message from a bot named "Bot."`} />
     <MessageDivider variant="inset" content="1 hour ago" />
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content={`This is a text-based message from "Bot," with an updated timestamp.`}
       timestamp="1 hour ago"
     />

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

@@ -1,6 +1,5 @@
 import { useState, FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 import { Checkbox, FormGroup, Flex, FlexItem } from '@patternfly/react-core';
 
 export const MessageWithFeedbackExample: FunctionComponent = () => {
@@ -50,7 +49,6 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
           <Message
             name="Bot"
             role="bot"
-            avatar={patternflyAvatar}
             content="This is a message with the feedback card:"
             userFeedbackForm={{
               quickResponses: [
@@ -73,7 +71,6 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
           <Message
             name="Bot"
             role="bot"
-            avatar={patternflyAvatar}
             content="This is a compact message with the feedback card:"
             userFeedbackForm={{
               quickResponses: [
@@ -112,7 +109,6 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
           <Message
             name="Bot"
             role="bot"
-            avatar={patternflyAvatar}
             content="This is a thank-you message, which is displayed once the feedback card is submitted:"
             // eslint-disable-next-line no-console
             userFeedbackComplete={{
@@ -126,7 +122,6 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
           <Message
             name="Bot"
             role="bot"
-            avatar={patternflyAvatar}
             content="This is a compact thank-you message, which is displayed once the feedback card is submitted:"
             // eslint-disable-next-line no-console
             userFeedbackComplete={{

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

@@ -1,6 +1,5 @@
 import { FunctionComponent, useState } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 import { Button } from '@patternfly/react-core';
 
 export const MessageWithFeedbackTimeoutExample: FunctionComponent = () => {
@@ -17,7 +16,6 @@ export const MessageWithFeedbackTimeoutExample: FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
-        avatar={patternflyAvatar}
         content="This completion message times out after you click **Show card**:"
         userFeedbackComplete={hasFeedback ? { timeout: true, onTimeout: () => setHasFeedback(false) } : undefined}
         isLiveRegion

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

@@ -1,13 +1,11 @@
 import { FunctionComponent } from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 
 export const IconSwappingExample: FunctionComponent = () => (
   <Message
     name="Bot"
     role="bot"
-    avatar={patternflyAvatar}
     content="Click the response actions to see the outlined icons swapped with the filled variants!"
     actions={{
       // eslint-disable-next-line no-console

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

@@ -1,12 +1,10 @@
 import { FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 
 export const MessageWithMarkdownDeepThinkingExample: FunctionComponent = () => (
   <Message
     name="Bot"
     role="bot"
-    avatar={patternflyAvatar}
     content="This example shows how to use Markdown formatting in deep thinking content. Note the use of shouldRetainStyles to maintain proper formatting:"
     deepThinking={{
       shouldRetainStyles: true,

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

@@ -1,12 +1,10 @@
 import { FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 
 export const MessageWithMarkdownToolCallExample: FunctionComponent = () => (
   <Message
     name="Bot"
     role="bot"
-    avatar={patternflyAvatar}
     content="This example shows how to use Markdown formatting in tool call content. Note the use of shouldRetainStyles to maintain proper formatting:"
     toolCall={{
       shouldRetainStyles: true,

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

@@ -1,6 +1,5 @@
 import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 import { CopyIcon, WrenchIcon } from '@patternfly/react-icons';
 import {
   Button,
@@ -35,7 +34,6 @@ export const MessageWithToolResponseExample: FunctionComponent = () => {
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="This example shows how to use Markdown formatting in tool response content. Note the use of shouldRetainStyles to maintain proper formatting:"
       toolResponse={{
         shouldRetainStyles: true,

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

@@ -1,14 +1,12 @@
 import { FunctionComponent } from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 
 export const MessageWithMultipleActionGroups: FunctionComponent = () => (
   <>
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="This message contains multiple action groups, each with their own selection persistence: \n1. Feedback actions (thumbs up/down) with persistent selections \n2. Utility actions (copy, download) with non-persistent selections \n3. Listen action with persistent selection"
       actions={[
         {
@@ -41,7 +39,6 @@ export const MessageWithMultipleActionGroups: FunctionComponent = () => (
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="This message contains multiple action groups, both of which persist selections."
       actions={[
         {

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

@@ -1,13 +1,11 @@
 import { FunctionComponent } from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 
 export const MessageWithPersistedActions: FunctionComponent = () => (
   <Message
     name="Bot"
     role="bot"
-    avatar={patternflyAvatar}
     content="I updated your account with those settings. You're ready to set up your first dashboard! Click a button and then click outside the message - notice the selection persists."
     actions={{
       // eslint-disable-next-line no-console

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

@@ -1,6 +1,5 @@
 import { FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 import { CopyIcon, WrenchIcon } from '@patternfly/react-icons';
 
 export const MessageWithQuickResponsesExample: FunctionComponent = () => (
@@ -8,7 +7,6 @@ export const MessageWithQuickResponsesExample: FunctionComponent = () => (
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="Did you clear your cache?"
       quickResponses={[
         { id: '1', content: 'Yes', onClick: () => alert('Clicked yes') },
@@ -18,7 +16,6 @@ export const MessageWithQuickResponsesExample: FunctionComponent = () => (
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="What browser are you noticing the issue in?"
       quickResponses={[
         { id: '1', content: 'Microsoft Edge', onClick: () => alert('Clicked Edge') },
@@ -31,7 +28,6 @@ export const MessageWithQuickResponsesExample: FunctionComponent = () => (
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="Welcome back, User! How can I help you today?"
       quickResponses={[
         { id: '1', content: 'Help me with an access issue', onClick: () => alert('Clicked id 1') },
@@ -44,7 +40,6 @@ export const MessageWithQuickResponsesExample: FunctionComponent = () => (
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="Did you clear your cache?"
       quickResponses={[
         { id: '1', content: 'Yes', isDisabled: true },
@@ -54,7 +49,6 @@ export const MessageWithQuickResponsesExample: FunctionComponent = () => (
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="Welcome back, User! How can I help you today?"
       quickResponses={[
         { id: '1', content: 'Help me with an access issue', onClick: () => alert('Clicked id 1') },
@@ -67,7 +61,6 @@ export const MessageWithQuickResponsesExample: FunctionComponent = () => (
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="Example with compact responses"
       quickResponses={[
         { id: '1', content: 'Yes', onClick: () => alert('Clicked id 1') },
@@ -78,7 +71,6 @@ export const MessageWithQuickResponsesExample: FunctionComponent = () => (
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="Example with icons"
       quickResponses={[
         { id: '1', content: 'Update your settings', onClick: () => alert('Clicked yes'), icon: <WrenchIcon /> },

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

@@ -1,6 +1,5 @@
 import { FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 import { explorePipelinesQuickStart } from './explore-pipeline-quickstart.ts';
 import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts';
 import { QuickStart } from '@patternfly/chatbot/dist/esm/Message/QuickStarts/types';
@@ -10,7 +9,6 @@ export const MessageWithQuickStartExample: FunctionComponent = () => (
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="Follow this quick guide to install the Pipelines Operator."
       quickStarts={{
         quickStart: explorePipelinesQuickStart as QuickStart,
@@ -20,7 +18,6 @@ export const MessageWithQuickStartExample: FunctionComponent = () => (
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="This quick start tile includes prerequisites and a default icon."
       quickStarts={{
         quickStart: monitorSampleAppQuickStart,
@@ -30,7 +27,6 @@ export const MessageWithQuickStartExample: FunctionComponent = () => (
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="This quick start tile is compact"
       quickStarts={{
         quickStart: monitorSampleAppQuickStart,

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

@@ -1,14 +1,12 @@
 import { FunctionComponent } from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 
 export const ResponseActionExample: FunctionComponent = () => (
   <>
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="I updated your account with those settings. You're ready to set up your first dashboard!"
       actions={{
         // eslint-disable-next-line no-console
@@ -27,7 +25,6 @@ export const ResponseActionExample: FunctionComponent = () => (
       name="Bot"
       role="bot"
       showActionsOnInteraction
-      avatar={patternflyAvatar}
       content="This message has response actions visually hidden until you hover over the message via mouse, or an action would receive focus via keyboard."
       actions={{
         // eslint-disable-next-line no-console

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

@@ -1,6 +1,5 @@
 import { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 import { Button, Flex, FlexItem, Label, Popover } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 
@@ -31,7 +30,6 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
-        avatar={patternflyAvatar}
         content="This example has a custom subtitle and footer with no pagination"
         sources={{
           sources: [
@@ -83,7 +81,6 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
-        avatar={patternflyAvatar}
         content="This example has a body description that's within the recommended limit of 2 lines:"
         sources={{
           sources: [
@@ -112,7 +109,6 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
-        avatar={patternflyAvatar}
         content="This example has a body description that's longer than the recommended limit of 2 lines, with a link to load the rest of the description:"
         sources={{
           sources: [
@@ -141,7 +137,6 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
-        avatar={patternflyAvatar}
         content="This example has a truncated title:"
         sources={{
           sources: [
@@ -164,7 +159,6 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
-        avatar={patternflyAvatar}
         content="This example only includes 1 source:"
         sources={{
           sources: [
@@ -181,7 +175,6 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
-        avatar={patternflyAvatar}
         content="This example has a title and no body description:"
         sources={{
           sources: [
@@ -203,7 +196,6 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
-        avatar={patternflyAvatar}
         content="This example displays the source as a link, without a title (not recommended)"
         sources={{
           sources: [
@@ -223,7 +215,6 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
-        avatar={patternflyAvatar}
         content="This example displays a compact sources card"
         sources={{
           sources: [
@@ -245,7 +236,6 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
-        avatar={patternflyAvatar}
         content="This example demonstrates the non-paginated layout option. When enabled, all source cards are displayed in a flex layout that wraps automatically based on available space:"
         sources={{
           sources: [