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

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -203,6 +203,20 @@
   }
 }
 
+.pf-chatbot:is(.pf-chatbot--drawer, .pf-chatbot--docked) .pf-chatbot__history {
+  // .pf-v6-c-menu {
+  //   @at-root :where(.pf-v6-theme-glass) & {
+  //     --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  //   }
+  // }
+
+  // .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
+  //   @at-root :where(.pf-v6-theme-glass) & {
+  //     background-color: var(--pf-t--global--background--color--floating--default);
+  //   }
+  // }
+}
+
 // ============================================================================
 // Chatbot Display Mode - Docked
 // ============================================================================

package/src/ChatbotFooter/ChatbotFooter.scss

@@ -6,10 +6,7 @@
 // ============================================================================
 .pf-chatbot__footer {
   --pf-chatbot__footer--RowGap: var(--pf-t--global--spacer--md);
-  background-color: var(
-    --pf-t--global--background--color--floating--secondary--default,
-    --pf-t--global--background--color--secondary--default
-  );
+  background-color: var(--pf-t--global--background--color--floating--secondary--default);
   display: flex;
   flex-direction: column;
   row-gap: var(--pf-chatbot__footer--RowGap);
@@ -19,6 +16,17 @@
     background-color: var(--pf-t--global--background--color--primary--default);
   }
 }
+
+.pf-chatbot:not(.pf-chatnot--default) {
+  .pf-chatbot__footer {
+    background-color: var(--pf-t--global--background--color--secondary--default);
+
+    @at-root :where(.pf-v6-theme-glass) & {
+      background-color: var(--pf-t--global--background--color--glass--primary--default);
+    }
+  }
+}
+
 .pf-chatbot__footer-container {
   padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg);
   display: flex;
@@ -35,12 +43,6 @@
   .pf-chatbot--fullscreen {
     .pf-chatbot__footer {
       align-items: center;
-      .pf-v6-c-divider {
-        display: none;
-      }
-    }
-    .pf-chatbot__footer {
-      background-color: var(--pf-t--global--background--color--secondary--default);
     }
 
     .pf-chatbot__footer-container {

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -9,10 +9,7 @@
   grid-template-columns: 1fr auto;
   gap: var(--pf-t--global--spacer--sm);
   position: relative; // this is so focus ring on parent chatbot doesn't include header
-  background-color: var(
-    --pf-t--global--background--color--floating--secondary--default,
-    --pf-t--global--background--color--secondary--default
-  );
+  background-color: var(--pf-t--global--background--color--floating--secondary--default);
   justify-content: space-between;
   padding: var(--pf-t--global--spacer--lg);
 
@@ -58,28 +55,13 @@
   }
 }
 
-// ============================================================================
-// Chatbot Display Mode - Fullscreen and Embedded
-// ============================================================================
-@media screen and (min-width: 64rem) {
-  .pf-chatbot--fullscreen,
-  .pf-chatbot--embedded {
-    .pf-chatbot__header {
-      background-color: var(--pf-t--global--background--color--primary--default);
-    }
-    .pf-chatbot__header__divider {
-      display: none;
-    }
-  }
-}
-
-// ============================================================================
-// Chatbot Display Mode - Docked and Drawer
-// ============================================================================
-.pf-chatbot--drawer,
-.pf-chatbot--docked {
+.pf-chatbot:not(.pf-chatbot--default) {
   .pf-chatbot__header {
-    background-color: var(--pf-t--global--background--color--secondary--floating--default);
+    background-color: var(--pf-t--global--background--color--secondary--default);
+
+    @at-root :where(.pf-v6-theme-glass) & {
+      background-color: var(--pf-t--global--background--color--glass--primary--default);
+    }
   }
 }
 
@@ -98,12 +80,6 @@
     border-radius: inherit;
   }
 
-  .pf-v6-c-button__icon,
-  .pf-v6-c-menu-toggle__icon,
-  .pf-v6-c-icon__content {
-    color: var(--pf-t--global--icon--color--subtle);
-  }
-
   .pf-v6-c-button__icon,
   .pf-v6-c-menu-toggle__icon {
     display: flex;
@@ -122,13 +98,6 @@
   }
 }
 
-// Rotate icon
-.pf-chatbot__button--toggle-options {
-  svg {
-    transform: rotate(90deg);
-  }
-}
-
 // ============================================================================
 // Examples
 // ============================================================================
@@ -169,18 +138,3 @@
 .pf-chatbot__header .pf-chatbot__actions .pf-v6-c-menu-toggle.pf-m-secondary.pf-m-compact {
   width: initial;
 }
-
-// ============================================================================
-// High contrast
-// ============================================================================
-:root:where(.pf-v6-theme-high-contrast) {
-  // Chatbot Display Mode - Fullscreen and Embedded
-  @media screen and (min-width: 64rem) {
-    .pf-chatbot--fullscreen,
-    .pf-chatbot--embedded {
-      .pf-chatbot__header__divider {
-        display: var(--pf-v6-hidden-visible--Display);
-      }
-    }
-  }
-}

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx

@@ -11,7 +11,7 @@ import {
   Icon,
   MenuToggleProps
 } from '@patternfly/react-core';
-import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisHorizontalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-horizontal-fill-icon';
 
 export interface ChatbotHeaderOptionsDropdownProps extends Omit<DropdownProps, 'toggle'> {
   /** Content to be displayed in the chatbot header */
@@ -56,7 +56,7 @@ export const ChatbotHeaderOptionsDropdown: FunctionComponent<ChatbotHeaderOption
         ref={toggleRef}
         icon={
           <Icon size={isCompact ? 'lg' : 'xl'} isInline>
-            <EllipsisIcon />
+            <RhUiEllipsisHorizontalFillIcon />
           </Icon>
         }
         isExpanded={isOptionsMenuOpen}

package/src/ChatbotModal/ChatbotModal.scss

@@ -9,7 +9,6 @@
   inset-inline-end: var(--pf-t--global--spacer--lg);
   width: 30rem !important;
   height: 70vh;
-  background-color: var(--pf-t--global--background--color--secondary--default) !important;
 
   .pf-v6-c-modal-box__title {
     --pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--h3);
@@ -55,13 +54,6 @@
   }
 }
 
-// ============================================================================
-// Chatbot Display Mode - Default
-// ============================================================================
-.pf-chatbot__chatbot-modal--default {
-  box-shadow: unset !important;
-}
-
 // ============================================================================
 // Chatbot Display Mode - Docked
 // ============================================================================
@@ -71,7 +63,6 @@
   inset-inline-end: 0;
   border-radius: 0 !important;
   --pf-v6-c-modal-box--MaxHeight: 100vh !important;
-  box-shadow: unset !important;
 }
 
 // ============================================================================

package/src/ChatbotWelcomePrompt/__snapshots__/ChatbotWelcomePrompt.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`ChatbotWelcomePrompt should render welcome prompt 1`] = `
   >
     <h1
       class="pf-v6-c-content--h1"
-      data-ouia-component-id="OUIA-Generated-Content-1"
+      data-ouia-component-id="OUIA-Generated-Content-:r0:"
       data-ouia-component-type="PF6/Content"
       data-ouia-safe="true"
       data-pf-content="true"

package/src/FileDetailsLabel/FileDetailsLabel.scss

@@ -30,6 +30,11 @@
   .pf-chatbot__file-label > .pf-v6-c-label__content {
     --pf-v6-c-label--Color: var(--pf-t--global--background--color--primary--default);
   }
+
+  @at-root :where(.pf-v6-theme-glass) & {
+    --pf-v6-c-label--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+    --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  }
 }
 
 .pf-v6-theme-dark {

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/MessageBar/MessageBar.scss

@@ -36,33 +36,24 @@
     position: absolute;
     inset: 0;
     border-radius: inherit;
-    border: var(--pf-t--global--border--width--control--default) solid transparent;
+    border: var(--pf-t--global--border--width--control--default) solid
+      var(--pf-t--global--border--color--control--default);
     pointer-events: none;
     transition:
       border-color var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
       border-width var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm);
   }
 
-  &::after {
-    border-color: var(--pf-t--global--border--color--control--default, transparent);
-  }
-
-  &.pf-m-primary {
-    &::after {
-      border-color: var(--pf-t--global--border--color--control--default, --pf-t--global--border--color--default);
-    }
-  }
-
   &:hover {
     &::after {
-      border-color: var(--pf-t--global--border--color--hover, --pf-t--global--border--color--default);
+      border-color: var(--pf-t--global--border--color--control--hover);
       border-width: var(--pf-t--global--border--width--control--hover);
     }
   }
 
   &:focus-within {
     &::after {
-      border-color: var(--pf-t--global--border--color--clicked, --pf-t--global--border--color--default);
+      border-color: var(--pf-t--global--border--color--control--clicked);
       border-width: var(--pf-t--global--border--width--control--clicked);
     }
   }
@@ -183,14 +174,3 @@
 .pf-chatbot__message-bar.pf-m-multiline {
   border-radius: calc(var(--pf-t--global--border--radius--small) * 2);
 }
-
-// ============================================================================
-// High contrast styles
-// ============================================================================
-:root:where(.pf-v6-theme-high-contrast) {
-  .pf-chatbot__message-bar {
-    &::after {
-      border-color: var(--pf-t--global--border--color--control--default, --pf-t--global--border--color--default);
-    }
-  }
-}

package/src/MessageDivider/MessageDivider.scss

@@ -12,30 +12,28 @@
   }
 
   .pf-v6-c-label {
-    --pf-v6-c-label--BackgroundColor: var(--pf-t--global--background--color--tertiary--default); 
-    --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--default); 
-    --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact); 
+    --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--default);
+    --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
     --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
-    
+
     .pf-v6-c-label__text {
       font-weight: var(--pf-t--global--font--weight--body--bold);
       text-align: center;
-    }  
+    }
   }
 
-  &.pf-m-divider {    
+  &.pf-m-divider {
     .pf-v6-c-label {
-      --pf-v6-c-label--BackgroundColor: var(--pf-t--global--background--color--secondary--default); 
       --pf-v6-c-label--MaxWidth: 75%;
 
       justify-self: center;
     }
-    
+
     .pf-v6-c-divider {
       align-self: center;
     }
   }
-  
+
   &.pf-m-wrap {
     .pf-v6-c-label,
     .pf-v6-c-label__text {

package/src/MessageDivider/MessageDivider.tsx

@@ -20,7 +20,7 @@ const MessageDivider: FunctionComponent<MessageDividerProps> = ({
     return (
       <div className="pf-chatbot__message-divider pf-m-divider pf-m-wrap" {...props}>
         <Divider />
-        <Label variant="outline">{content}</Label>
+        <Label>{content}</Label>
       </div>
     );
   }