@patternfly/chatbot 6.6.0-prerelease.5 → 6.6.0-prerelease.7

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -307,7 +307,7 @@ describe('ChatbotConversationHistoryNav', () => {
         isLoading
       />
     );
-    expect(screen.getByRole('dialog', { name: /Loading chatbot conversation history/i })).toBeTruthy();
+    expect(screen.getByRole('dialog', { name: /Loading chatbot chat history/i })).toBeTruthy();
     expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
   });
 

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -84,7 +84,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   activeItemId?: string | number;
   /** Callback function for when an item is selected */
   onSelectActiveItem?: (event?: React.MouseEvent, itemId?: string | number) => void;
-  /** Items shown in conversation history */
+  /** Items shown in chat history */
   conversations: Conversation[] | { [key: string]: Conversation[] };
   /** Additional button props for new chat button. */
   newChatButtonProps?: ButtonProps;

package/src/ChatbotConversationHistoryNav/LoadingState.tsx

@@ -4,11 +4,7 @@ import type { FunctionComponent } from 'react';
 export const LoadingState: FunctionComponent<SkeletonProps> = ({ screenreaderText, ...rest }: SkeletonProps) => (
   <div className="pf-chatbot__history-loading">
     <div className="pf-chatbot__history-loading-block">
-      <Skeleton
-        screenreaderText={screenreaderText ?? 'Loading chatbot conversation history'}
-        fontSize="3xl"
-        {...rest}
-      />
+      <Skeleton screenreaderText={screenreaderText ?? 'Loading chatbot chat history'} fontSize="3xl" {...rest} />
     </div>
     <div className="pf-chatbot__history-loading-block">
       <Skeleton fontSize="sm" width="70%" {...rest} />

package/src/ChatbotFooter/ChatbotFooter.scss

@@ -6,7 +6,10 @@
 // ============================================================================
 .pf-chatbot__footer {
   --pf-chatbot__footer--RowGap: var(--pf-t--global--spacer--md);
-  background-color: var(--pf-t--global--background--color--secondary--default);
+  background-color: var(
+    --pf-t--global--background--color--floating--secondary--default,
+    --pf-t--global--background--color--secondary--default
+  );
   display: flex;
   flex-direction: column;
   row-gap: var(--pf-chatbot__footer--RowGap);
@@ -36,6 +39,10 @@
         display: none;
       }
     }
+    .pf-chatbot__footer {
+      background-color: var(--pf-t--global--background--color--secondary--default);
+    }
+
     .pf-chatbot__footer-container {
       width: 90%;
       max-width: 60rem;

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -9,7 +9,10 @@
   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--secondary--default);
+  background-color: var(
+    --pf-t--global--background--color--floating--secondary--default,
+    --pf-t--global--background--color--secondary--default
+  );
   justify-content: space-between;
   padding: var(--pf-t--global--spacer--lg);
 
@@ -76,7 +79,7 @@
 .pf-chatbot--drawer,
 .pf-chatbot--docked {
   .pf-chatbot__header {
-    background-color: var(--pf-t--global--background--color--secondary--default);
+    background-color: var(--pf-t--global--background--color--secondary--floating--default);
   }
 }
 

package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx

@@ -12,7 +12,7 @@ describe('ChatbotHeaderMenu', () => {
   it('should call onMenuToggle when ChatbotHeaderMenu button is clicked', () => {
     const onMenuToggle = jest.fn();
     render(<ChatbotHeaderMenu className="custom-header-menu" onMenuToggle={onMenuToggle} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Chat history menu' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Chat history drawer' }));
 
     expect(onMenuToggle).toHaveBeenCalled();
   });

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -25,9 +25,9 @@ const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
   className,
   onMenuToggle,
   tooltipProps,
-  menuAriaLabel = 'Chat history menu',
+  menuAriaLabel = 'Chat history drawer',
   innerRef,
-  tooltipContent = 'Chat history menu',
+  tooltipContent = 'Chat history drawer',
   isCompact,
   ...props
 }: ChatbotHeaderMenuProps) => {

package/src/Message/Message.scss

@@ -92,6 +92,18 @@
     gap: var(--pf-t--global--spacer--sm);
   }
 
+  .pf-m-visible-interaction {
+    opacity: 0;
+    transition-timing-function: var(--pf-t--global--motion--timing-function--default);
+    transition-duration: var(--pf-t--global--motion--duration--fade--short);
+    transition-property: opacity;
+  }
+
+  &:hover .pf-m-visible-interaction,
+  .pf-m-visible-interaction:focus-within {
+    opacity: 1;
+  }
+
   // targets footnotes specifically
   .footnotes,
   .pf-chatbot__message-text.footnotes {

package/src/Message/Message.test.tsx

@@ -1415,4 +1415,140 @@ describe('Message', () => {
     expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
     expect(screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
   });
+
+  it('should apply pf-m-visible-interaction class to response actions when showActionsOnInteraction is true', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        showActionsOnInteraction
+        actions={{
+          positive: { onClick: jest.fn() }
+        }}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions');
+    expect(responseContainer).toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class to response actions when showActionsOnInteraction is false', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        showActionsOnInteraction={false}
+        actions={{
+          positive: { onClick: jest.fn() }
+        }}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions');
+    expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class to response actions by default', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        actions={{
+          positive: { onClick: jest.fn() }
+        }}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions');
+    expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should apply pf-m-visible-interaction class to grouped actions container when showActionsOnInteraction is true', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        showActionsOnInteraction
+        actions={[
+          {
+            positive: { onClick: jest.fn() },
+            negative: { onClick: jest.fn() }
+          },
+          {
+            copy: { onClick: jest.fn() }
+          }
+        ]}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions-groups');
+    expect(responseContainer).toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class to grouped actions container when showActionsOnInteraction is false', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        showActionsOnInteraction={false}
+        actions={[
+          {
+            positive: { onClick: jest.fn() },
+            negative: { onClick: jest.fn() }
+          },
+          {
+            copy: { onClick: jest.fn() }
+          }
+        ]}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions-groups');
+    expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class to grouped actions container by default', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        actions={[
+          {
+            positive: { onClick: jest.fn() },
+            negative: { onClick: jest.fn() }
+          },
+          {
+            copy: { onClick: jest.fn() }
+          }
+        ]}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions-groups');
+    expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+  });
 });

package/src/Message/Message.tsx

@@ -114,6 +114,10 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
    * For finer control of multiple action groups, use persistActionSelection on each group.
    */
   persistActionSelection?: boolean;
+  /** Flag indicating whether the actions container is only visible when a message is hovered or an action would receive focus. Note
+   * that setting this to true will append tooltips inline instead of the document.body.
+   */
+  showActionsOnInteraction?: boolean;
   /** Sources for message */
   sources?: SourcesCardProps;
   /** Label for the English word "AI," used to tag messages with role "bot" */
@@ -214,6 +218,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   isLoading,
   actions,
   persistActionSelection,
+  showActionsOnInteraction = false,
   sources,
   botWord = 'AI',
   loadingWord = 'Loading message',
@@ -382,7 +387,12 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
                 {!isLoading && !isEditable && actions && (
                   <>
                     {Array.isArray(actions) ? (
-                      <div className="pf-chatbot__response-actions-groups">
+                      <div
+                        className={css(
+                          'pf-chatbot__response-actions-groups',
+                          showActionsOnInteraction && 'pf-m-visible-interaction'
+                        )}
+                      >
                         {actions.map((actionGroup, index) => (
                           <ResponseActions
                             key={index}
@@ -397,6 +407,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
                         actions={actions}
                         persistActionSelection={persistActionSelection}
                         useFilledIconsOnClick={useFilledIconsOnClick}
+                        showActionsOnInteraction={showActionsOnInteraction}
                       />
                     )}
                   </>

package/src/MessageBar/MessageBar.scss

@@ -19,7 +19,10 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
-  background-color: var(--pf-t--global--background--color--primary--default);
+  background-color: var(
+    --pf-t--global--background--color--control--default,
+    --pf-t--global--background--color--primary--default
+  );
   border-radius: calc(var(--pf-t--global--border--radius--medium) * 2);
   transition: border-color var(--pf-t--global--motion--timing-function--accelerate)
     var(--pf-t--global--motion--duration--sm);
@@ -42,20 +45,20 @@
 
   &.pf-m-primary {
     &::after {
-      border-color: var(--pf-t--global--border--color--default);
+      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--default);
+      border-color: var(--pf-t--global--border--color--control--default, --pf-t--global--border--color--default);
       border-width: var(--pf-t--global--border--width--control--hover);
     }
   }
 
   &:focus-within {
     &::after {
-      border-color: var(--pf-t--global--color--brand--default);
+      border-color: var(--pf-t--global--border--color--control--default, --pf-t--global--border--color--default);
       border-width: var(--pf-t--global--border--width--control--clicked);
     }
   }
@@ -183,7 +186,7 @@
 :root:where(.pf-v6-theme-high-contrast) {
   .pf-chatbot__message-bar {
     &::after {
-      border-color: var(--pf-t--global--border--color--default);
+      border-color: var(--pf-t--global--border--color--control--default, --pf-t--global--border--color--default);
     }
   }
 }

package/src/ResponseActions/ResponseActions.test.tsx

@@ -437,6 +437,65 @@ describe('ResponseActions', () => {
     expect(customBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
   });
 
+  it('should apply pf-m-visible-interaction class when showActionsOnInteraction is true', () => {
+    render(
+      <ResponseActions
+        data-testid="test-id"
+        actions={{
+          positive: { onClick: jest.fn() },
+          negative: { onClick: jest.fn() }
+        }}
+        showActionsOnInteraction
+      />
+    );
+
+    expect(screen.getByTestId('test-id')).toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class when showActionsOnInteraction is false', () => {
+    render(
+      <ResponseActions
+        data-testid="test-id"
+        actions={{
+          positive: { onClick: jest.fn() },
+          negative: { onClick: jest.fn() }
+        }}
+        showActionsOnInteraction={false}
+      />
+    );
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class by default', () => {
+    render(
+      <ResponseActions
+        data-testid="test-id"
+        actions={{
+          positive: { onClick: jest.fn() },
+          negative: { onClick: jest.fn() }
+        }}
+      />
+    );
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should render with custom className', () => {
+    render(
+      <ResponseActions
+        data-testid="test-id"
+        actions={{
+          positive: { onClick: jest.fn() },
+          negative: { onClick: jest.fn() }
+        }}
+        className="custom-class"
+      />
+    );
+
+    expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
+  });
+
   describe('icon swapping with useFilledIconsOnClick', () => {
     it('should render outline icons by default', () => {
       render(

package/src/ResponseActions/ResponseActions.tsx

@@ -13,6 +13,7 @@ import {
 } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
 import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 
 export interface ActionProps extends Omit<ButtonProps, 'ref'> {
   /** Aria-label for the button */
@@ -51,6 +52,8 @@ type ExtendedActionProps = ActionProps & {
  */
 
 export interface ResponseActionProps {
+  /** Additional classes for the response actions container. */
+  className?: string;
   /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
   actions: Record<string, ExtendedActionProps | undefined> & {
     positive?: ActionProps;
@@ -67,12 +70,19 @@ export interface ResponseActionProps {
   /** When true, automatically swaps to filled icon variants when predefined actions are clicked.
    * Predefined actions will use filled variants (e.g., ThumbsUpIcon) when clicked and outline variants (e.g., OutlinedThumbsUpIcon) when not clicked. */
   useFilledIconsOnClick?: boolean;
+  /** Flag indicating whether the actions container is only visible when a message is hovered or an action would receive focus. Note
+   * that setting this to true will append tooltips inline instead of the document.body.
+   */
+  showActionsOnInteraction?: boolean;
 }
 
 export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
+  className,
   actions,
   persistActionSelection = false,
-  useFilledIconsOnClick = false
+  useFilledIconsOnClick = false,
+  showActionsOnInteraction = false,
+  ...props
 }) => {
   const [activeButton, setActiveButton] = useState<string>();
   const [clickStatePersisted, setClickStatePersisted] = useState<boolean>(false);
@@ -173,8 +183,23 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
     return iconMap[actionName].outlined;
   };
 
+  // We want to append the tooltip inline so that hovering the tooltip keeps the actions container visible
+  // when showActionsOnInteraction is true. Otherwise hovering the tooltip causes the actions container
+  // to disappear but the tooltip will remain visible.
+  const getTooltipContainer = (): HTMLElement => responseActions.current || document.body;
+
+  const getTooltipProps = (tooltipProps?: TooltipProps) =>
+    ({
+      ...(showActionsOnInteraction && { appendTo: getTooltipContainer }),
+      ...tooltipProps
+    }) as TooltipProps;
+
   return (
-    <div ref={responseActions} className="pf-chatbot__response-actions">
+    <div
+      ref={responseActions}
+      className={css('pf-chatbot__response-actions', showActionsOnInteraction && 'pf-m-visible-interaction', className)}
+      {...props}
+    >
       {positive && (
         <ResponseActionButton
           {...positive}
@@ -185,7 +210,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
           isDisabled={positive.isDisabled}
           tooltipContent={positive.tooltipContent ?? 'Good response'}
           clickedTooltipContent={positive.clickedTooltipContent ?? 'Good response recorded'}
-          tooltipProps={positive.tooltipProps}
+          tooltipProps={getTooltipProps(positive.tooltipProps)}
           icon={getIcon('positive')}
           isClicked={activeButton === 'positive'}
           ref={positive.ref}
@@ -203,7 +228,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
           isDisabled={negative.isDisabled}
           tooltipContent={negative.tooltipContent ?? 'Bad response'}
           clickedTooltipContent={negative.clickedTooltipContent ?? 'Bad response recorded'}
-          tooltipProps={negative.tooltipProps}
+          tooltipProps={getTooltipProps(negative.tooltipProps)}
           icon={getIcon('negative')}
           isClicked={activeButton === 'negative'}
           ref={negative.ref}
@@ -221,7 +246,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
           isDisabled={copy.isDisabled}
           tooltipContent={copy.tooltipContent ?? 'Copy'}
           clickedTooltipContent={copy.clickedTooltipContent ?? 'Copied'}
-          tooltipProps={copy.tooltipProps}
+          tooltipProps={getTooltipProps(copy.tooltipProps)}
           icon={<OutlinedCopyIcon />}
           isClicked={activeButton === 'copy'}
           ref={copy.ref}
@@ -239,7 +264,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
           isDisabled={edit.isDisabled}
           tooltipContent={edit.tooltipContent ?? 'Edit '}
           clickedTooltipContent={edit.clickedTooltipContent ?? 'Editing'}
-          tooltipProps={edit.tooltipProps}
+          tooltipProps={getTooltipProps(edit.tooltipProps)}
           icon={<PencilAltIcon />}
           isClicked={activeButton === 'edit'}
           ref={edit.ref}
@@ -257,7 +282,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
           isDisabled={share.isDisabled}
           tooltipContent={share.tooltipContent ?? 'Share'}
           clickedTooltipContent={share.clickedTooltipContent ?? 'Shared'}
-          tooltipProps={share.tooltipProps}
+          tooltipProps={getTooltipProps(share.tooltipProps)}
           icon={<ExternalLinkAltIcon />}
           isClicked={activeButton === 'share'}
           ref={share.ref}
@@ -275,7 +300,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
           isDisabled={download.isDisabled}
           tooltipContent={download.tooltipContent ?? 'Download'}
           clickedTooltipContent={download.clickedTooltipContent ?? 'Downloaded'}
-          tooltipProps={download.tooltipProps}
+          tooltipProps={getTooltipProps(download.tooltipProps)}
           icon={<DownloadIcon />}
           isClicked={activeButton === 'download'}
           ref={download.ref}
@@ -293,7 +318,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
           isDisabled={listen.isDisabled}
           tooltipContent={listen.tooltipContent ?? 'Listen'}
           clickedTooltipContent={listen.clickedTooltipContent ?? 'Listening'}
-          tooltipProps={listen.tooltipProps}
+          tooltipProps={getTooltipProps(listen.tooltipProps)}
           icon={<VolumeUpIcon />}
           isClicked={activeButton === 'listen'}
           ref={listen.ref}
@@ -312,7 +337,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
           className={additionalActions[action]?.className}
           isDisabled={additionalActions[action]?.isDisabled}
           tooltipContent={additionalActions[action]?.tooltipContent}
-          tooltipProps={additionalActions[action]?.tooltipProps}
+          tooltipProps={getTooltipProps(additionalActions[action]?.tooltipProps)}
           clickedTooltipContent={additionalActions[action]?.clickedTooltipContent}
           icon={additionalActions[action]?.icon}
           isClicked={activeButton === action}