feat(ResponseActions): Add option for persistent selections

rebeccaalpert · rebeccaalpert · commit d90facc9e80a · 2025-10-30T14:58:30.000-04:00
Assisted-by: Cursor
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithPersistedActions.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithPersistedActions.tsx
@@ -0,0 +1,26 @@
+import { FunctionComponent } from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+
+export const MessageWithPersistedActions: FunctionComponent = () => (
+  <Message
+    name="Bot"
+    role="bot"
+    avatar={patternflyAvatar}
+    content="I updated your account with those settings. You're ready to set up your first dashboard! Click a button and then click outside the message - notice the selection persists."
+    actions={{
+      // eslint-disable-next-line no-console
+      positive: { onClick: () => console.log('Good response') },
+      // eslint-disable-next-line no-console
+      negative: { onClick: () => console.log('Bad response') },
+      // eslint-disable-next-line no-console
+      copy: { onClick: () => console.log('Copy') },
+      // eslint-disable-next-line no-console
+      download: { onClick: () => console.log('Download') },
+      // eslint-disable-next-line no-console
+      listen: { onClick: () => console.log('Listen') }
+    }}
+    persistActionSelection
+  />
+);
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md
@@ -108,6 +108,20 @@ Once the component has rendered, user interactions will take precedence over the
 
 ```
 
+### Message actions selection options
+
+By default, message actions will automatically deselect when clicking outside the component or clicking a different action button. You can opt-in to persist the selection by setting `persistActionSelection` to `true`.
+
+When `persistActionSelection` is `true`:
+
+- The selected action will remain selected even when clicking outside the component
+- Clicking the same button again will toggle the selection off, though you will have to move your focus elsewhere to see a visual state change
+- Clicking a different button will switch the selection to that button
+
+```js file="./MessageWithPersistedActions.tsx"
+
+```
+
 ### Custom message actions
 
 Beyond the standard message actions (good response, bad response, copy, share, or listen), you can add custom actions to a bot message by passing an `actions` object to the `<Message>` component. This object can contain the following customizations:
diff --git a/packages/module/src/Message/Message.tsx b/packages/module/src/Message/Message.tsx
@@ -108,6 +108,9 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   actions?: {
     [key: string]: ActionProps;
   };
+  /** 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;
   /** Sources for message */
   sources?: SourcesCardProps;
   /** Label for the English word "AI," used to tag messages with role "bot" */
@@ -202,6 +205,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   timestamp,
   isLoading,
   actions,
+  persistActionSelection,
   sources,
   botWord = 'AI',
   loadingWord = 'Loading message',
@@ -499,7 +503,9 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
                 isCompact={isCompact}
               />
             )}
-            {!isLoading && !isEditable && actions && <ResponseActions actions={actions} />}
+            {!isLoading && !isEditable && actions && (
+              <ResponseActions actions={actions} persistActionSelection={persistActionSelection} />
+            )}
             {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} isCompact={isCompact} />}
             {userFeedbackComplete && (
               <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} isCompact={isCompact} />
diff --git a/packages/module/src/ResponseActions/ResponseActions.test.tsx b/packages/module/src/ResponseActions/ResponseActions.test.tsx
@@ -238,30 +238,30 @@ describe('ResponseActions', () => {
   });
 
   it('should be able to call onClick correctly', async () => {
-    ALL_ACTIONS.forEach(async ({ type, label }) => {
+    for (const { type, label } of ALL_ACTIONS) {
       const spy = jest.fn();
       render(<ResponseActions actions={{ [type]: { onClick: spy } }} />);
       await userEvent.click(screen.getByRole('button', { name: label }));
       expect(spy).toHaveBeenCalledTimes(1);
-    });
+    }
   });
 
   it('should swap clicked and non-clicked aria labels on click', async () => {
-    ALL_ACTIONS.forEach(async ({ type, label, clickedLabel }) => {
+    for (const { type, label, clickedLabel } of ALL_ACTIONS) {
       render(<ResponseActions actions={{ [type]: { onClick: jest.fn() } }} />);
       expect(screen.getByRole('button', { name: label })).toBeTruthy();
       await userEvent.click(screen.getByRole('button', { name: label }));
       expect(screen.getByRole('button', { name: clickedLabel })).toBeTruthy();
-    });
+    }
   });
 
   it('should swap clicked and non-clicked tooltips on click', async () => {
-    ALL_ACTIONS.forEach(async ({ type, label, clickedLabel }) => {
+    for (const { type, label, clickedLabel } of ALL_ACTIONS) {
       render(<ResponseActions actions={{ [type]: { onClick: jest.fn() } }} />);
       expect(screen.getByRole('button', { name: label })).toBeTruthy();
       await userEvent.click(screen.getByRole('button', { name: label }));
       expect(screen.getByRole('tooltip', { name: clickedLabel })).toBeTruthy();
-    });
+    }
   });
 
   it('should be able to change aria labels', () => {
@@ -322,4 +322,103 @@ describe('ResponseActions', () => {
       expect(screen.getByTestId(action[key])).toBeTruthy();
     });
   });
+
+  // we are testing for the reverse case already above
+  it('should not deselect when clicking outside when persistActionSelection is true', async () => {
+    render(
+      <Message
+        name="Bot"
+        role="bot"
+        avatar=""
+        content="Test content"
+        actions={{
+          positive: {},
+          negative: {}
+        }}
+        persistActionSelection
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: 'Good response' });
+
+    await userEvent.click(goodBtn);
+    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+
+    await userEvent.click(screen.getByText('Test content'));
+
+    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+  });
+
+  it('should switch selection to another button when persistActionSelection is true', async () => {
+    render(
+      <Message
+        name="Bot"
+        role="bot"
+        avatar=""
+        content="Test content"
+        actions={{
+          positive: {},
+          negative: {}
+        }}
+        persistActionSelection
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: 'Good response' });
+    const badBtn = screen.getByRole('button', { name: 'Bad response' });
+
+    await userEvent.click(goodBtn);
+    expect(goodBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(badBtn);
+    expect(badBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should toggle off when clicking the same button when persistActionSelection is true', async () => {
+    render(
+      <Message
+        name="Bot"
+        role="bot"
+        avatar=""
+        content="Test content"
+        actions={{
+          positive: {},
+          negative: {}
+        }}
+        persistActionSelection
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: 'Good response' });
+
+    await userEvent.click(goodBtn);
+    expect(goodBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(goodBtn);
+    expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should work with custom actions when persistActionSelection is true', async () => {
+    const actions = {
+      positive: { 'data-testid': 'positive', onClick: jest.fn() },
+      negative: { 'data-testid': 'negative', onClick: jest.fn() },
+      custom: {
+        'data-testid': 'custom',
+        onClick: jest.fn(),
+        ariaLabel: 'Custom',
+        tooltipContent: 'Custom action',
+        icon: <DownloadIcon />
+      }
+    };
+    render(<ResponseActions actions={actions} persistActionSelection />);
+
+    const customBtn = screen.getByTestId('custom');
+    await userEvent.click(customBtn);
+    expect(customBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(customBtn);
+    expect(customBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
 });
diff --git a/packages/module/src/ResponseActions/ResponseActions.tsx b/packages/module/src/ResponseActions/ResponseActions.tsx
@@ -53,11 +53,20 @@ export interface ResponseActionProps {
     listen?: ActionProps;
     edit?: ActionProps;
   };
+  /** 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;
 }
 
-export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ actions }) => {
+export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
+  actions,
+  persistActionSelection = false
+}) => {
   const [activeButton, setActiveButton] = useState<string>();
   const [clickStatePersisted, setClickStatePersisted] = useState<boolean>(false);
+
+  const { positive, negative, copy, edit, share, download, listen, ...additionalActions } = actions;
+
   useEffect(() => {
     // Define the order of precedence for checking initial `isClicked`
     const actionPrecedence = ['positive', 'negative', 'copy', 'edit', 'share', 'download', 'listen'];
@@ -82,13 +91,21 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
       // Click state is explicitly controlled by consumer.
       setClickStatePersisted(true);
     }
+    // If persistActionSelection is true, all selections are persisted
+    if (persistActionSelection) {
+      setClickStatePersisted(true);
+    }
     setActiveButton(initialActive);
-  }, [actions]);
+  }, [actions, persistActionSelection]);
 
-  const { positive, negative, copy, edit, share, download, listen, ...additionalActions } = actions;
   const responseActions = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    // Only add click outside listener if not persisting selection
+    if (persistActionSelection) {
+      return;
+    }
+
     const handleClickOutside = (e) => {
       if (responseActions.current && !responseActions.current.contains(e.target) && !clickStatePersisted) {
         setActiveButton(undefined);
@@ -99,15 +116,26 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
     return () => {
       window.removeEventListener('click', handleClickOutside);
     };
-  }, [clickStatePersisted]);
+  }, [clickStatePersisted, persistActionSelection]);
 
   const handleClick = (
     e: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent,
     id: string,
     onClick?: (event: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent) => void
   ) => {
-    setClickStatePersisted(false);
-    setActiveButton(id);
+    if (persistActionSelection) {
+      if (activeButton === id) {
+        // Toggle off if clicking the same button
+        setActiveButton(undefined);
+      } else {
+        // Set new active button
+        setActiveButton(id);
+      }
+      setClickStatePersisted(true);
+    } else {
+      setClickStatePersisted(false);
+      setActiveButton(id);
+    }
     onClick && onClick(e);
   };
 
@@ -129,6 +157,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
           ref={positive.ref}
           aria-expanded={positive['aria-expanded']}
           aria-controls={positive['aria-controls']}
+          aria-pressed={persistActionSelection ? activeButton === 'positive' : undefined}
         ></ResponseActionButton>
       )}
       {negative && (
@@ -147,6 +176,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
           ref={negative.ref}
           aria-expanded={negative['aria-expanded']}
           aria-controls={negative['aria-controls']}
+          aria-pressed={persistActionSelection ? activeButton === 'negative' : undefined}
         ></ResponseActionButton>
       )}
       {copy && (
@@ -165,6 +195,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
           ref={copy.ref}
           aria-expanded={copy['aria-expanded']}
           aria-controls={copy['aria-controls']}
+          aria-pressed={persistActionSelection ? activeButton === 'copy' : undefined}
         ></ResponseActionButton>
       )}
       {edit && (
@@ -183,6 +214,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
           ref={edit.ref}
           aria-expanded={edit['aria-expanded']}
           aria-controls={edit['aria-controls']}
+          aria-pressed={persistActionSelection ? activeButton === 'edit' : undefined}
         ></ResponseActionButton>
       )}
       {share && (
@@ -201,6 +233,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
           ref={share.ref}
           aria-expanded={share['aria-expanded']}
           aria-controls={share['aria-controls']}
+          aria-pressed={persistActionSelection ? activeButton === 'share' : undefined}
         ></ResponseActionButton>
       )}
       {download && (
@@ -219,6 +252,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
           ref={download.ref}
           aria-expanded={download['aria-expanded']}
           aria-controls={download['aria-controls']}
+          aria-pressed={persistActionSelection ? activeButton === 'download' : undefined}
         ></ResponseActionButton>
       )}
       {listen && (
@@ -237,6 +271,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
           ref={listen.ref}
           aria-expanded={listen['aria-expanded']}
           aria-controls={listen['aria-controls']}
+          aria-pressed={persistActionSelection ? activeButton === 'listen' : undefined}
         ></ResponseActionButton>
       )}
 
@@ -257,6 +292,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
           ref={additionalActions[action]?.ref}
           aria-expanded={additionalActions[action]?.['aria-expanded']}
           aria-controls={additionalActions[action]?.['aria-controls']}
+          aria-pressed={persistActionSelection ? activeButton === action : undefined}
         />
       ))}
     </div>
