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

package/src/ResponseActions/ResponseActions.tsx

@@ -4,13 +4,16 @@ import {
   ExternalLinkAltIcon,
   VolumeUpIcon,
   OutlinedThumbsUpIcon,
+  ThumbsUpIcon,
   OutlinedThumbsDownIcon,
+  ThumbsDownIcon,
   OutlinedCopyIcon,
   DownloadIcon,
   PencilAltIcon
 } 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 */
@@ -49,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;
@@ -62,11 +67,22 @@ export interface ResponseActionProps {
   /** When true, the selected action will persist even when clicking outside the component.
    * When false (default), clicking outside or clicking another action will deselect the current selection. */
   persistActionSelection?: boolean;
+  /** 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
+  persistActionSelection = false,
+  useFilledIconsOnClick = false,
+  showActionsOnInteraction = false,
+  ...props
 }) => {
   const [activeButton, setActiveButton] = useState<string>();
   const [clickStatePersisted, setClickStatePersisted] = useState<boolean>(false);
@@ -129,6 +145,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
     id: string,
     onClick?: (event: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent) => void
   ) => {
+    e.stopPropagation();
     if (persistActionSelection) {
       if (activeButton === id) {
         // Toggle off if clicking the same button
@@ -145,8 +162,44 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
     onClick && onClick(e);
   };
 
+  const iconMap = {
+    positive: {
+      filled: <ThumbsUpIcon />,
+      outlined: <OutlinedThumbsUpIcon />
+    },
+    negative: {
+      filled: <ThumbsDownIcon />,
+      outlined: <OutlinedThumbsDownIcon />
+    }
+  };
+
+  const getIcon = (actionName: string) => {
+    const isClicked = activeButton === actionName;
+
+    if (isClicked && useFilledIconsOnClick) {
+      return iconMap[actionName].filled;
+    }
+
+    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}
@@ -157,8 +210,8 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
           isDisabled={positive.isDisabled}
           tooltipContent={positive.tooltipContent ?? 'Good response'}
           clickedTooltipContent={positive.clickedTooltipContent ?? 'Good response recorded'}
-          tooltipProps={positive.tooltipProps}
-          icon={<OutlinedThumbsUpIcon />}
+          tooltipProps={getTooltipProps(positive.tooltipProps)}
+          icon={getIcon('positive')}
           isClicked={activeButton === 'positive'}
           ref={positive.ref}
           aria-expanded={positive['aria-expanded']}
@@ -175,8 +228,8 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
           isDisabled={negative.isDisabled}
           tooltipContent={negative.tooltipContent ?? 'Bad response'}
           clickedTooltipContent={negative.clickedTooltipContent ?? 'Bad response recorded'}
-          tooltipProps={negative.tooltipProps}
-          icon={<OutlinedThumbsDownIcon />}
+          tooltipProps={getTooltipProps(negative.tooltipProps)}
+          icon={getIcon('negative')}
           isClicked={activeButton === 'negative'}
           ref={negative.ref}
           aria-expanded={negative['aria-expanded']}
@@ -193,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}
@@ -211,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}
@@ -229,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}
@@ -247,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}
@@ -265,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}
@@ -284,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}