Merge pull request #212 from rebeccaalpert/screenshots

Update screenshots and deprecate default avatars in examples

Author: nicolethoen

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/BotMessage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-
 import Message from '@patternfly/virtual-assistant/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
 
 export const AttachmentMenuExample: React.FunctionComponent = () => {
   const markdown = `
@@ -35,9 +35,15 @@ export default MessageLoading;
 `;
   return (
     <>
-      <Message name="Bot" role="bot" content="Example content with updated timestamp text" timestamp="1 hour ago" />
-      <Message name="Bot" role="bot" content={markdown} />
-      <Message name="Bot" role="bot" content="Example content" isLoading />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="Example content with updated timestamp text"
+        timestamp="1 hour ago"
+      />
+      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={markdown} />
+      <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
     </>
   );
 };

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/ChatbotMessage.md

@@ -22,8 +22,9 @@ import Message from '@patternfly/virtual-assistant/dist/dynamic/Message';
 import PreviewAttachment from '@patternfly/virtual-assistant/dist/dynamic/PreviewAttachment';
 import AttachmentEdit from '@patternfly/virtual-assistant/dist/dynamic/AttachmentEdit';
 import SourcesCard from '@patternfly/virtual-assistant/dist/dynamic/SourcesCard';
-import customImage from './custom_user_img.jpeg';
 import { RobotIcon } from '@patternfly/react-icons/dist/esm/icons/robot-icon';
+import patternflyAvatar from './patternfly_avatar.jpg';
+import userAvatar from './user_avatar.jpg';
 
 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)
 
@@ -77,7 +78,7 @@ You can add actions to a message, to allow users to interact with the message co
 
 ### Messages with sources
 
-If you are using Retrieval-Augmented Generation, you may want to display sources in a message. Passing `sources` to `<Message>` allows you to paginate between the sources you provide. 
+If you are using Retrieval-Augmented Generation, you may want to display sources in a message. Passing `sources` to `<Message>` allows you to paginate between the sources you provide.
 
 The API for a source requires a link at minimum, but we strongly recommend providing a more descriptive title and body description so users have enough context. The title is limited to 1 line and the body is limited to 2 lines.
 

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/MessageWithAttachment.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Message from '@patternfly/virtual-assistant/dist/dynamic/Message';
 import PreviewAttachment from '@patternfly/virtual-assistant/dist/dynamic/PreviewAttachment';
 import AttachmentEdit from '@patternfly/virtual-assistant/dist/dynamic/AttachmentEdit';
+import userAvatar from './user_avatar.jpg';
 
 export const AttachmentMenuExample: React.FunctionComponent = () => {
   const [isPreviewModalOpen, setIsPreviewModalOpen] = React.useState<boolean>(false);
@@ -14,6 +15,7 @@ export const AttachmentMenuExample: React.FunctionComponent = () => {
       <Message
         name="User"
         role="user"
+        avatar={userAvatar}
         content="Here is an uploaded file"
         attachmentName="auth-operator.yml"
         attachmentId="1"

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/MessageWithResponseActions.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 
 import Message from '@patternfly/virtual-assistant/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
 
 export const AttachmentMenuExample: React.FunctionComponent = () => (
   <Message
     name="Bot"
     role="bot"
+    avatar={patternflyAvatar}
     content="Example content with updated timestamp text"
     timestamp="1 hour ago"
     actions={{

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/MessageWithSources.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-
 import Message from '@patternfly/virtual-assistant/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
 
 export const AttachmentMenuExample: React.FunctionComponent = () => {
   const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
@@ -13,6 +13,7 @@ export const AttachmentMenuExample: React.FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
+        avatar={patternflyAvatar}
         content="Example with sources"
         sources={{
           sources: [
@@ -38,6 +39,7 @@ export const AttachmentMenuExample: React.FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
+        avatar={patternflyAvatar}
         content="Example with very long sources"
         sources={{
           sources: [
@@ -58,6 +60,7 @@ export const AttachmentMenuExample: React.FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
+        avatar={patternflyAvatar}
         content="Example with only one source"
         sources={{
           sources: [
@@ -73,6 +76,7 @@ export const AttachmentMenuExample: React.FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
+        avatar={patternflyAvatar}
         content="Example with sources that include a title and link"
         sources={{
           sources: [
@@ -92,6 +96,7 @@ export const AttachmentMenuExample: React.FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
+        avatar={patternflyAvatar}
         content="Example with link-only sources (not recommended)"
         sources={{
           sources: [

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/UserMessage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Message from '@patternfly/virtual-assistant/dist/dynamic/Message';
-import customImage from './custom_user_img.jpeg';
+import userAvatar from './user_avatar.jpg';
 
 export const AttachmentMenuExample: React.FunctionComponent = () => {
   const markdown = `A paragraph with *emphasis* and **strong importance**.
@@ -15,11 +15,11 @@ Here is an inline code - \`() => void\``;
       <Message
         name="User"
         role="user"
-        content="Example content with custom avatar image and updated timestamp text"
+        content="Example content with updated timestamp text"
         timestamp="1 hour ago"
-        avatar={customImage}
+        avatar={userAvatar}
       />
-      <Message name="User" role="user" content={markdown} />
+      <Message name="User" role="user" content={markdown} avatar={userAvatar} />
     </>
   );
 };

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/custom_user_img.jpeg

@@ -42,6 +42,8 @@ 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 '../ChatbotHeader/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../ChatbotHeader/PF-IconLogo-Reverse.svg';
+import userAvatar from '../ChatbotMessage/user_avatar.jpg';
+import patternflyAvatar from '../ChatbotMessage/patternfly_avatar.jpg';
 
 # Demos
 

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/patternfly_avatar.jpg

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

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/user_avatar.jpg

@@ -30,6 +30,8 @@ import PFHorizontalLogoColor from '../ChatbotHeader/PF-HorizontalLogo-Color.svg'
 import PFHorizontalLogoReverse from '../ChatbotHeader/PF-HorizontalLogo-Reverse.svg';
 import PFIconLogoColor from '../ChatbotHeader/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../ChatbotHeader/PF-IconLogo-Reverse.svg';
+import userAvatar from '../ChatbotMessage/user_avatar.jpg';
+import patternflyAvatar from '../ChatbotMessage/patternfly_avatar.jpg';
 
 const footnoteProps = {
   label: 'Lightspeed uses AI. Check for mistakes.',
@@ -93,12 +95,14 @@ const initialMessages: MessageProps[] = [
   {
     role: 'user',
     content: 'Hello, can you give me an example of what you can do?',
-    name: 'User'
+    name: 'User',
+    avatar: userAvatar
   },
   {
     role: 'bot',
     content: markdown,
     name: 'Bot',
+    avatar: patternflyAvatar,
     actions: {
       // eslint-disable-next-line no-console
       positive: { onClick: () => console.log('Good response') },
@@ -191,12 +195,13 @@ export const ChatbotDemo: React.FunctionComponent = () => {
     // we can't use structuredClone since messages contains functions, but we can't mutate
     // items that are going into state or the UI won't update correctly
     messages.forEach((message) => newMessages.push(message));
-    newMessages.push({ role: 'user', content: message, name: 'User' });
+    newMessages.push({ role: 'user', content: message, name: 'User', avatar: userAvatar });
     newMessages.push({
       role: 'bot',
       content: 'API response goes here',
       name: 'bot',
-      isLoading: true
+      isLoading: true,
+      avatar: patternflyAvatar
     });
     setMessages(newMessages);
 
@@ -212,6 +217,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
         content: 'API response goes here',
         name: 'bot',
         isLoading: false,
+        avatar: patternflyAvatar,
         actions: {
           // eslint-disable-next-line no-console
           positive: { onClick: () => console.log('Good response') },

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/AttachmentDemos.md

@@ -27,6 +27,8 @@ import PFHorizontalLogoColor from '../ChatbotHeader/PF-HorizontalLogo-Color.svg'
 import PFHorizontalLogoReverse from '../ChatbotHeader/PF-HorizontalLogo-Reverse.svg';
 import PFIconLogoColor from '../ChatbotHeader/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../ChatbotHeader/PF-IconLogo-Reverse.svg';
+import userAvatar from '../ChatbotMessage/user_avatar.jpg';
+import patternflyAvatar from '../ChatbotMessage/patternfly_avatar.jpg';
 
 interface ModalData {
   code: string;
@@ -51,6 +53,7 @@ export const BasicDemo: React.FunctionComponent = () => {
       role: 'user',
       content: "I'm referring to this attachment for added context in our conversation.",
       name: 'User',
+      avatar: userAvatar,
       attachmentName: 'auth-operator.yml',
       attachmentId: '1',
       onAttachmentClose,
@@ -63,6 +66,7 @@ export const BasicDemo: React.FunctionComponent = () => {
     {
       role: 'bot',
       content: 'Great, I can reference this attachment throughout our conversation.',
+      avatar: patternflyAvatar,
       name: 'Bot'
     }
   ];

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/Chatbot.md

@@ -14,6 +14,8 @@ import { Divider, DropdownGroup, DropdownItem, DropdownList, DropEvent } from '@
 import FileDetailsLabel from '@patternfly/virtual-assistant/dist/dynamic/FileDetailsLabel';
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
 import { useDropzone } from 'react-dropzone';
+import userAvatar from '../ChatbotMessage/user_avatar.jpg';
+import patternflyAvatar from '../ChatbotMessage/patternfly_avatar.jpg';
 
 const initialMenuItems = [
   <DropdownList key="list-1">
@@ -68,12 +70,14 @@ const messages: MessageProps[] = [
   {
     role: 'user',
     content: 'Hello, can you give me an example of what you can do?',
-    name: 'User'
+    name: 'User',
+    avatar: userAvatar
   },
   {
     role: 'bot',
     content: 'I sure can!',
-    name: 'Bot'
+    name: 'Bot',
+    avatar: patternflyAvatar
   }
 ];
 

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/Chatbot.tsx

@@ -37,6 +37,8 @@ import ChatbotHeader, {
 import PFHorizontalLogoColor from '../ChatbotHeader/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../ChatbotHeader/PF-HorizontalLogo-Reverse.svg';
 import { BarsIcon } from '@patternfly/react-icons';
+import userAvatar from '../ChatbotMessage/user_avatar.jpg';
+import patternflyAvatar from '../ChatbotMessage/patternfly_avatar.jpg';
 
 const footnoteProps = {
   label: 'Lightspeed uses AI. Check for mistakes.',
@@ -100,12 +102,14 @@ const initialMessages: MessageProps[] = [
   {
     role: 'user',
     content: 'Hello, can you give me an example of what you can do?',
-    name: 'User'
+    name: 'User',
+    avatar: userAvatar
   },
   {
     role: 'bot',
     content: markdown,
     name: 'Bot',
+    avatar: patternflyAvatar,
     actions: {
       // eslint-disable-next-line no-console
       positive: { onClick: () => console.log('Good response') },
@@ -190,11 +194,12 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
     // we can't use structuredClone since messages contains functions, but we can't mutate
     // items that are going into state or the UI won't update correctly
     messages.forEach((message) => newMessages.push(message));
-    newMessages.push({ role: 'user', content: message, name: 'User' });
+    newMessages.push({ role: 'user', content: message, name: 'User', avatar: userAvatar });
     newMessages.push({
       role: 'bot',
       content: 'API response goes here',
       name: 'bot',
+      avatar: patternflyAvatar,
       isLoading: true
     });
     setMessages(newMessages);
@@ -210,6 +215,7 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
         role: 'bot',
         content: 'API response goes here',
         name: 'bot',
+        avatar: patternflyAvatar,
         isLoading: false,
         actions: {
           // eslint-disable-next-line no-console