feat(ResponseActions): Allow for manual control over clicked state (#579)

Apply visual change when isClicked prop is applied to ResponseActions component. Only 1 value maintains selection at a time, according to pre-defined order. User-defined click state persists. Also added demo and tests.

Author: karthikjeeyar

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithClickedResponseActions.tsx

@@ -0,0 +1,25 @@
+import { FunctionComponent } from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+
+export const ResponseActionClickedExample: 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!"
+    actions={{
+      // eslint-disable-next-line no-console
+      positive: { onClick: () => console.log('Good response'), isClicked: true },
+      // 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') }
+    }}
+  />
+);

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx

@@ -15,6 +15,7 @@ export const CustomActionExample: FunctionComponent = () => (
       regenerate: {
         ariaLabel: 'Regenerate',
         clickedAriaLabel: 'Regenerated',
+        isClicked: true,
         // eslint-disable-next-line no-console
         onClick: () => console.log('Clicked regenerate'),
         tooltipContent: 'Regenerate',

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -79,13 +79,30 @@ You can add actions to a message, to allow users to interact with the message co
 
 ```
 
+### Message actions clicked state
+
+You can apply a clicked state to message actions, to convey that the action has previously been selected.
+
+To define which message response action should show a clicked state when the `<ResponseActions>` component first renders, use the `isClicked` boolean property within each action's configuration object.
+
+To make an action button appear active by default, set `isClicked: true`. Only 1 action can be visually active at any given time.
+
+If you unintentionally set `isClicked: true` for multiple buttons, the component will apply a predefined internal precedence order to resolve the conflict. The button encountered first in this order will be displayed as clicked, while other buttons will sustain their default appearance. The default precedence of button actions is: "positive", "negative", "copy", "share", "listen", followed by any other custom actions (in object key order).
+
+Once the component has rendered, user interactions will take precedence over the initial `isClicked` prop. Clicking a button will activate it and deactivate any other active button. The `isDisabled` prop for each action button specifies if a button is interactive or not.
+
+```js file="./MessageWithClickedResponseActions.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:
 
 - `ariaLabel`
 - `onClick`
 - `className`
+- `isClicked`
 - `isDisabled`
 - `tooltipContent`
 - `tooltipContent`

packages/module/src/ResponseActions/ResponseActions.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import ResponseActions from './ResponseActions';
+import ResponseActions, { ActionProps } from './ResponseActions';
 import userEvent from '@testing-library/user-event';
 import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons';
 import Message from '../Message';
@@ -129,6 +129,103 @@ describe('ResponseActions', () => {
     expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
   });
+
+  it('should handle isClicked prop within group of buttons correctly', async () => {
+    render(
+      <ResponseActions
+        actions={
+          {
+            positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: true },
+            negative: { 'data-testid': 'negative-btn', onClick: jest.fn() }
+          } as Record<string, ActionProps>
+        }
+      />
+    );
+
+    expect(screen.getByTestId('positive-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should set "listen" button as active if its `isClicked` is true', async () => {
+    render(
+      <ResponseActions
+        actions={
+          {
+            positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: false },
+            negative: { 'data-testid': 'negative-btn', onClick: jest.fn(), isClicked: false },
+            listen: { 'data-testid': 'listen-btn', onClick: jest.fn(), isClicked: true }
+          } as Record<string, ActionProps>
+        }
+      />
+    );
+    expect(screen.getByTestId('listen-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    expect(screen.getByTestId('positive-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should prioritize "positive" when both "positive" and "negative" are set to clicked', async () => {
+    render(
+      <ResponseActions
+        actions={
+          {
+            positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: true },
+            negative: { 'data-testid': 'negative-btn', onClick: jest.fn(), isClicked: true }
+          } as Record<string, ActionProps>
+        }
+      />
+    );
+    // Positive button should take precendence
+    expect(screen.getByTestId('positive-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should set an additional action button as active if it is initially clicked and no predefined are clicked', async () => {
+    const [additionalActions] = CUSTOM_ACTIONS;
+    const customActions = {
+      positive: { 'data-testid': 'positive', onClick: jest.fn(), isClicked: false },
+      negative: { 'data-testid': 'negative', onClick: jest.fn(), isClicked: false },
+      ...Object.keys(additionalActions).reduce((acc, actionKey) => {
+        acc[actionKey] = {
+          ...additionalActions[actionKey],
+          'data-testid': actionKey,
+          isClicked: actionKey === 'regenerate'
+        };
+        return acc;
+      }, {})
+    };
+    render(<ResponseActions actions={customActions} />);
+
+    Object.keys(customActions).forEach((actionKey) => {
+      if (actionKey === 'regenerate') {
+        expect(screen.getByTestId(actionKey)).toHaveClass('pf-chatbot__button--response-action-clicked');
+      } else {
+        // Other actions should not have clicked class
+        expect(screen.getByTestId(actionKey)).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+      }
+    });
+  });
+
+  it('should activate the clicked button and deactivate any previously active button', async () => {
+    const actions = {
+      positive: { 'data-testid': 'positive', onClick: jest.fn(), isClicked: false },
+      negative: { 'data-testid': 'negative', onClick: jest.fn(), isClicked: true }
+    };
+    render(<ResponseActions actions={actions} />);
+
+    const negativeBtn = screen.getByTestId('negative');
+    const positiveBtn = screen.getByTestId('positive');
+    // negative button is initially clicked
+    expect(negativeBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(positiveBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(positiveBtn);
+
+    // positive button should now have the clicked class
+    expect(positiveBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(negativeBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
   it('should render buttons correctly', () => {
     ALL_ACTIONS.forEach(({ type, label }) => {
       render(<ResponseActions actions={{ [type]: { onClick: jest.fn() } }} />);

packages/module/src/ResponseActions/ResponseActions.tsx

@@ -55,12 +55,40 @@ export interface ResponseActionProps {
 
 export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ actions }) => {
   const [activeButton, setActiveButton] = useState<string>();
+  const [clickStatePersisted, setClickStatePersisted] = useState<boolean>(false);
+  useEffect(() => {
+    // Define the order of precedence for checking initial `isClicked`
+    const actionPrecedence = ['positive', 'negative', 'copy', 'share', 'download', 'listen'];
+    let initialActive: string | undefined;
+
+    // Check predefined actions first based on precedence
+    for (const actionName of actionPrecedence) {
+      const actionProp = actions[actionName as keyof typeof actions];
+      if (actionProp?.isClicked) {
+        initialActive = actionName;
+        break;
+      }
+    }
+    // If no predefined action was initially clicked, check additionalActions
+    if (!initialActive) {
+      const clickedActionName = Object.keys(additionalActions).find(
+        (actionName) => !actionPrecedence.includes(actionName) && additionalActions[actionName]?.isClicked
+      );
+      initialActive = clickedActionName;
+    }
+    if (initialActive) {
+      // Click state is explicitly controlled by consumer.
+      setClickStatePersisted(true);
+    }
+    setActiveButton(initialActive);
+  }, [actions]);
+
   const { positive, negative, copy, share, download, listen, ...additionalActions } = actions;
   const responseActions = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const handleClickOutside = (e) => {
-      if (responseActions.current && !responseActions.current.contains(e.target)) {
+      if (responseActions.current && !responseActions.current.contains(e.target) && !clickStatePersisted) {
         setActiveButton(undefined);
       }
     };
@@ -69,13 +97,14 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
     return () => {
       window.removeEventListener('click', handleClickOutside);
     };
-  }, []);
+  }, [clickStatePersisted]);
 
   const handleClick = (
     e: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent,
     id: string,
     onClick?: (event: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent) => void
   ) => {
+    setClickStatePersisted(false);
     setActiveButton(id);
     onClick && onClick(e);
   };