feat(Message): add default bot message avatar

package.json

@@ -39,10 +39,10 @@
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@octokit/rest": "^18.0.0",
-    "@patternfly/documentation-framework": "^6.44.0",
-    "@patternfly/patternfly": "^6.5.2",
-    "@patternfly/react-icons": "^6.5.1",
-    "@patternfly/react-table": "^6.5.1",
+    "@patternfly/documentation-framework": "6.45.0",
+    "@patternfly/patternfly": "6.6.0-prerelease.14",
+    "@patternfly/react-icons": "6.6.0-prerelease.3",
+    "@patternfly/react-table": "6.6.0-prerelease.8",
     "@swc/core": "1.3.96",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
@@ -92,6 +92,5 @@
   },
   "dependencies": {
     "react-dropzone": "^14.3.8"
-  },
-  "packageManager": "yarn@4.5.0+sha512.837566d24eec14ec0f5f1411adb544e892b3454255e61fdef8fd05f3429480102806bac7446bc9daff3896b01ae4b62d00096c7e989f1596f2af10b927532f39"
+  }
 }

packages/module/package.json

@@ -33,11 +33,11 @@
     "tag": "prerelease"
   },
   "dependencies": {
-    "@patternfly/react-code-editor": "^6.5.1",
-    "@patternfly/react-core": "^6.5.1",
-    "@patternfly/react-icons": "^6.5.1",
-    "@patternfly/react-styles": "^6.5.1",
-    "@patternfly/react-table": "^6.5.1",
+    "@patternfly/react-code-editor": "6.6.0-prerelease.9",
+    "@patternfly/react-core": "6.6.0-prerelease.8",
+    "@patternfly/react-icons": "6.6.0-prerelease.3",
+    "@patternfly/react-styles": "6.6.0-prerelease.3",
+    "@patternfly/react-table": "6.6.0-prerelease.8",
     "@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.44.0",
-    "@patternfly/patternfly": "^6.5.2",
+    "@patternfly/documentation-framework": "6.45.0",
+    "@patternfly/patternfly": "6.6.0-prerelease.14",
     "@patternfly/patternfly-a11y": "^5.0.0",
     "@types/dom-speech-recognition": "^0.0.4",
     "@types/react": "^18.2.61",

packages/module/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

packages/module/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

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

@@ -1,15 +1,13 @@
 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';
 
 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: {

packages/module/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_.`}

packages/module/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,

packages/module/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"
     />

packages/module/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={{

packages/module/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

packages/module/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

packages/module/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,

packages/module/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,

packages/module/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,

packages/module/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={[
         {

packages/module/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