@patternfly/chatbot 6.7.0-prerelease.4 → 6.7.0-prerelease.6

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

@@ -22,7 +22,6 @@ import ChatbotHeader, { ChatbotHeaderMain } from '@patternfly/chatbot/dist/dynam
 import Compare from '@patternfly/chatbot/dist/dynamic/Compare';
 import { BarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
@@ -53,7 +52,6 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
         timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`
       });
       newMessages.push({
-        avatar: patternflyAvatar,
         id: generateId(),
         name,
         role: 'bot',
@@ -76,7 +74,6 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
           role: 'bot',
           content: `API response from ${name} goes here`,
           name,
-          avatar: patternflyAvatar,
           isLoading: false,
           actions: {
             // eslint-disable-next-line no-console

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

@@ -1,6 +1,5 @@
 import { FunctionComponent, useState, useRef } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
@@ -37,7 +36,6 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="Bot message with user feedback flow; click on a message action to launch the feedback flow. Click submit to see the thank-you message."
       actions={{
         positive: {

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

@@ -39,7 +39,6 @@ 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.svg';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
@@ -109,7 +108,6 @@ const initialMessages: MessageProps[] = [
     role: 'bot',
     content: markdown,
     name: 'Bot',
-    avatar: patternflyAvatar,
     timestamp: date.toLocaleString(),
     actions: {
       // eslint-disable-next-line no-console
@@ -221,7 +219,6 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
       role: 'bot',
       content: 'API response goes here',
       name: 'Bot',
-      avatar: patternflyAvatar,
       isLoading: true,
       timestamp: date.toLocaleString(),
       isPrimary: true
@@ -242,7 +239,6 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
         role: 'bot',
         content: 'API response goes here',
         name: 'Bot',
-        avatar: patternflyAvatar,
         isLoading: false,
         actions: {
           // eslint-disable-next-line no-console

package/src/Message/Message.scss

@@ -11,12 +11,17 @@
   // --------------------------------------------------------------------------
   &-avatar.pf-v6-c-avatar {
     --pf-v6-c-avatar--BorderRadius: 0;
+    flex-shrink: 0;
     position: sticky;
     top: var(--pf-t--global--spacer--md);
     object-fit: cover;
     pointer-events: none; // prevent dragging - interferes with FileDropZone
   }
 
+  &-avatar.pf-v6-c-avatar:not(.pf-m-colorful) {
+    --pf-v6-c-avatar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  }
+
   &-avatar.pf-chatbot__message-avatar--round.pf-v6-c-avatar {
     &:not(.pf-m-xl, .pf-m-lg, .pf-m-md, .pf-m-sm) {
       --pf-v6-c-avatar--Width: 3rem;

package/src/Message/Message.test.tsx

@@ -242,11 +242,23 @@ describe('Message', () => {
     ).toBeInTheDocument();
   });
   it('should render avatar correctly', () => {
-    render(<Message avatar="./testImg" role="bot" name="Bot" content="Hi" />);
+    render(<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(<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(<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(<Message role="user" name="A" content="Hi" isAvatarHidden />);
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+  it('should not render bot avatar if isAvatarHidden is passed', () => {
+    render(<Message role="bot" name="Bot" content="Hi" isAvatarHidden />);
     expect(screen.queryByRole('img')).not.toBeInTheDocument();
   });
   it('should render botWord correctly', () => {

package/src/Message/Message.tsx

@@ -36,6 +36,7 @@ import DeepThinking, { DeepThinkingProps } from '../DeepThinking';
 import ToolCall, { ToolCallProps } 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 interface MessageAttachment {
   /** Name of file attached to the message */
@@ -84,8 +85,10 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   extraContent?: MessageExtraContent;
   /** Name of the user */
   name?: string;
-  /** Avatar src for the user */
-  avatar?: string;
+  /** Avatar for the user. Pass a string for an image src, or a ReactNode for custom content like an svg or icon. Avatars for Messages with role="bot" are pre-defined and not customizable. */
+  avatar?: string | ReactNode;
+  /** Flag indicating whether the avatar is hidden */
+  isAvatarHidden?: boolean;
   /** Timestamp for the message */
   timestamp?: string;
   /** Set this to true if message is being loaded */
@@ -214,6 +217,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   extraContent,
   name,
   avatar,
+  isAvatarHidden = false,
   timestamp,
   isLoading,
   actions,
@@ -326,6 +330,36 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
     );
   };
 
+  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 = (
+    <Avatar className={avatarClasses} alt="" isBordered {...avatarProps} src={undefined} initials={undefined}>
+      <RhUiAiChatbotIcon />
+    </Avatar>
+  );
+
+  let _avatar: ReactNode | undefined;
+
+  if (!isAvatarHidden) {
+    if (role === 'bot') {
+      _avatar = botAvatar;
+    } else if (avatar) {
+      _avatar =
+        typeof avatar === 'string' ? (
+          <Avatar className={avatarClasses} src={avatar} alt="" {...avatarProps} />
+        ) : (
+          <Avatar className={avatarClasses} alt="" {...avatarProps}>
+            {avatar}
+          </Avatar>
+        );
+    } else if (avatarProps?.initials) {
+      _avatar = <Avatar className={avatarClasses} alt="" {...avatarProps} />;
+    }
+  }
+
   return (
     <section
       aria-label={`Message from ${role} - ${dateString}`}
@@ -335,15 +369,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
       ref={innerRef}
       {...props}
     >
-      {/* We are using an empty alt tag intentionally in order to reduce noise on screen readers */}
-      {avatar && (
-        <Avatar
-          className={`pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`}
-          src={avatar}
-          alt=""
-          {...avatarProps}
-        />
-      )}
+      {_avatar && _avatar}
       <div className="pf-chatbot__message-contents">
         {isMetadataVisible && (
           <div className="pf-chatbot__message-meta">

package/src/MessageBox/JumpButton.scss

@@ -13,7 +13,7 @@
   padding: var(--pf-t--global--spacer--md) !important;
   border-radius: var(--pf-t--global--border--radius--pill) !important;
   --pf-v6-c-button--MinWidth: 2rem !important;
-  background-color: var(--pf-t--global--background--color--primary--default) !important;
+  background-color: var(--pf-t--global--background--color--floating--default);
   border: 1px solid var(--pf-t--global--border--color--default) !important;
   box-shadow: var(--pf-t--global--box-shadow--sm);
   color: var(--pf-t--global--icon--color--subtle) !important;
@@ -31,7 +31,7 @@
 
   &:hover,
   &:focus {
-    background-color: var(--pf-t--global--background--color--primary--hover) !important;
+    background-color: var(--pf-t--global--background--color--floating--hover);
     box-shadow: var(--pf-t--global--box-shadow--md) !important;
     color: var(--pf-t--global--icon--color--regular) !important;
   }