@patternfly/chatbot 6.5.0-prerelease.20 → 6.5.0-prerelease.22

package/src/Message/Message.test.tsx

@@ -437,7 +437,7 @@ describe('Message', () => {
     expect(screen.queryByRole('button', { name: /No/i })).toBeFalsy();
     expect(screen.getByRole('button', { name: /1 more/i }));
   });
-  it('should be able to show actions', async () => {
+  it('Renders response actions when a single actions object is passed', async () => {
     render(
       <Message
         avatar="./img"
@@ -463,9 +463,204 @@ describe('Message', () => {
       />
     );
     ALL_ACTIONS.forEach(({ label }) => {
-      expect(screen.getByRole('button', { name: label })).toBeTruthy();
+      expect(screen.getByRole('button', { name: label })).toBeVisible();
     });
   });
+  it('Renders response actions when an array of actions objects is passed', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        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
+            edit: { onClick: () => console.log('Edit') },
+            // eslint-disable-next-line no-console
+            share: { onClick: () => console.log('Share') },
+            // eslint-disable-next-line no-console
+            download: { onClick: () => console.log('Download') }
+          },
+          {
+            // eslint-disable-next-line no-console
+            listen: { onClick: () => console.log('Listen') }
+          }
+        ]}
+      />
+    );
+    ALL_ACTIONS.forEach(({ label }) => {
+      expect(screen.getByRole('button', { name: label })).toBeVisible();
+    });
+  });
+  it('Renders response actions when an array of objects containing actions objects is passed', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        actions={[
+          {
+            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') }
+            }
+          },
+          {
+            actions: {
+              // eslint-disable-next-line no-console
+              copy: { onClick: () => console.log('Copy') },
+              // eslint-disable-next-line no-console
+              edit: { onClick: () => console.log('Edit') },
+              // eslint-disable-next-line no-console
+              share: { onClick: () => console.log('Share') },
+              // eslint-disable-next-line no-console
+              download: { onClick: () => console.log('Download') }
+            }
+          },
+          {
+            actions: {
+              // eslint-disable-next-line no-console
+              listen: { onClick: () => console.log('Listen') }
+            }
+          }
+        ]}
+      />
+    );
+    ALL_ACTIONS.forEach(({ label }) => {
+      expect(screen.getByRole('button', { name: label })).toBeVisible();
+    });
+  });
+
+  it('should handle persistActionSelection correctly when a single actions object is passed', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Test message"
+        persistActionSelection
+        actions={{
+          positive: { onClick: jest.fn() },
+          negative: { onClick: jest.fn() }
+        }}
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: /Good response/i });
+    const badBtn = screen.getByRole('button', { name: /Bad response/i });
+
+    await userEvent.click(goodBtn);
+    expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+
+    await userEvent.click(screen.getByText('Test message'));
+    expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+
+    await userEvent.click(badBtn);
+    expect(screen.getByRole('button', { name: /Bad response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+    expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should handle persistActionSelection correctly when an array of actions objects is passed', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Test message"
+        persistActionSelection
+        actions={[
+          {
+            positive: { onClick: jest.fn() },
+            negative: { onClick: jest.fn() }
+          },
+          {
+            copy: { onClick: jest.fn() }
+          }
+        ]}
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: /Good response/i });
+    const copyBtn = screen.getByRole('button', { name: /Copy/i });
+
+    await userEvent.click(goodBtn);
+    expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+
+    await userEvent.click(screen.getByText('Test message'));
+    expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+
+    await userEvent.click(copyBtn);
+    expect(screen.getByRole('button', { name: /Copied/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(screen.getByText('Test message'));
+    expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+    expect(screen.getByRole('button', { name: /Copied/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should handle persistActionSelection correctly when an array of objects containing actions objects is passed', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Test message"
+        actions={[
+          {
+            actions: {
+              positive: { onClick: jest.fn() },
+              negative: { onClick: jest.fn() }
+            },
+            persistActionSelection: true
+          },
+          {
+            actions: {
+              copy: { onClick: jest.fn() }
+            },
+            persistActionSelection: false
+          }
+        ]}
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: /Good response/i });
+    const copyBtn = screen.getByRole('button', { name: /Copy/i });
+
+    await userEvent.click(goodBtn);
+    expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+
+    await userEvent.click(copyBtn);
+    expect(screen.getByRole('button', { name: /Copied/i })).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(screen.getByText('Test message'));
+    expect(screen.getByRole('button', { name: /Good response recorded/i })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+    expect(copyBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
   it('should not show actions if loading', async () => {
     render(
       <Message
@@ -527,6 +722,7 @@ describe('Message', () => {
       expect(screen.queryByRole('button', { name: label })).toBeFalsy();
     });
   });
+
   it('should render unordered lists correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content={UNORDERED_LIST} />);
     expect(screen.getByText('Here is an unordered list:')).toBeTruthy();

package/src/Message/Message.tsx

@@ -104,12 +104,27 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   isLoading?: boolean;
   /** Array of attachments attached to a message */
   attachments?: MessageAttachment[];
-  /** Props for message actions, such as feedback (positive or negative), copy button, edit message, share, and listen */
-  actions?: {
-    [key: string]: ActionProps;
-  };
+  /** Props for message actions, such as feedback (positive or negative), copy button, edit message, share, and listen.
+   * Can be a single actions object or an array of action group objects. When passing an array, you can pass an object of actions or
+   * an object that contains an actions property for finer control of selection persistence.
+   */
+  actions?:
+    | {
+        [key: string]: ActionProps;
+      }
+    | {
+        [key: string]: ActionProps;
+      }[]
+    | {
+        actions: {
+          [key: string]: ActionProps;
+        };
+        persistActionSelection?: boolean;
+      }[];
   /** 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. */
+   * When false (default), clicking outside or clicking another action will deselect the current selection.
+   * For finer control of multiple action groups, use persistActionSelection on each group.
+   */
   persistActionSelection?: boolean;
   /** Sources for message */
   sources?: SourcesCardProps;
@@ -506,7 +521,21 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
               />
             )}
             {!isLoading && !isEditable && actions && (
-              <ResponseActions actions={actions} persistActionSelection={persistActionSelection} />
+              <>
+                {Array.isArray(actions) ? (
+                  <div className="pf-chatbot__response-actions-groups">
+                    {actions.map((actionGroup, index) => (
+                      <ResponseActions
+                        key={index}
+                        actions={actionGroup.actions || actionGroup}
+                        persistActionSelection={persistActionSelection || actionGroup.persistActionSelection}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <ResponseActions actions={actions} persistActionSelection={persistActionSelection} />
+                )}
+              </>
             )}
             {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} isCompact={isCompact} />}
             {userFeedbackComplete && (

package/src/ResponseActions/ResponseActions.scss

@@ -22,6 +22,17 @@
   }
 }
 
+.pf-chatbot__response-actions-groups {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  gap: var(--pf-t--global--spacer--xs);
+
+  .pf-chatbot__response-actions {
+    display: flex;
+  }
+}
+
 .pf-v6-c-button.pf-chatbot__button--response-action-clicked.pf-v6-c-button.pf-m-plain.pf-m-small {
   --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
   --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);

package/src/ToolCall/ToolCall.test.tsx

@@ -181,4 +181,55 @@ describe('ToolCall', () => {
     render(<ToolCall {...defaultProps} cardFooterProps={{ id: 'card-footer-test-id' }} />);
     expect(screen.getByRole('button', { name: 'Run tool' }).closest('#card-footer-test-id')).toBeVisible();
   });
+
+  it('Renders collapsed by default when expandableContent is provided', () => {
+    render(<ToolCall {...defaultProps} expandableContent="Expandable Content" />);
+
+    expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByText('Expandable Content')).not.toBeVisible();
+  });
+
+  it('Renders expanded when isDefaultExpanded is true', () => {
+    render(<ToolCall {...defaultProps} isDefaultExpanded expandableContent="Expandable Content" />);
+
+    expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Expandable Content')).toBeVisible();
+  });
+
+  it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+    render(
+      <ToolCall
+        {...defaultProps}
+        isDefaultExpanded={false}
+        expandableContent="Expandable Content"
+        expandableSectionProps={{ isExpanded: true }}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Expandable Content')).toBeVisible();
+  });
+
+  it('expandableSectionProps.onToggle overrides internal onToggle behavior', async () => {
+    const user = userEvent.setup();
+    const customOnToggle = jest.fn();
+
+    render(
+      <ToolCall
+        {...defaultProps}
+        isDefaultExpanded={false}
+        expandableContent="Expandable Content"
+        expandableSectionProps={{ onToggle: customOnToggle }}
+      />
+    );
+
+    const toggleButton = screen.getByRole('button', { name: defaultProps.titleText });
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(toggleButton);
+
+    expect(customOnToggle).toHaveBeenCalledTimes(1);
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByText('Expandable Content')).not.toBeVisible();
+  });
 });

package/src/ToolCall/ToolCall.tsx

@@ -1,4 +1,4 @@
-import { type FunctionComponent } from 'react';
+import { useState, type FunctionComponent } from 'react';
 import {
   ActionList,
   ActionListProps,
@@ -31,6 +31,8 @@ export interface ToolCallProps {
   spinnerProps?: SpinnerProps;
   /** Content to render within an expandable section. */
   expandableContent?: React.ReactNode;
+  /** Flag indicating whether the expandable content is expanded by default. */
+  isDefaultExpanded?: boolean;
   /** Text content for the "run" action button. */
   runButtonText?: string;
   /** Additional props for the "run" action button. */
@@ -66,6 +68,7 @@ export const ToolCall: FunctionComponent<ToolCallProps> = ({
   loadingText,
   isLoading,
   expandableContent,
+  isDefaultExpanded = false,
   runButtonText = 'Run tool',
   runButtonProps,
   runActionItemProps,
@@ -82,6 +85,12 @@ export const ToolCall: FunctionComponent<ToolCallProps> = ({
   expandableSectionProps,
   spinnerProps
 }: ToolCallProps) => {
+  const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
   const titleContent = (
     <span className={`pf-chatbot__tool-call-title-content`}>
       {isLoading ? (
@@ -124,6 +133,8 @@ export const ToolCall: FunctionComponent<ToolCallProps> = ({
           <ExpandableSection
             className="pf-chatbot__tool-call-expandable-section"
             toggleContent={titleContent}
+            onToggle={onToggle}
+            isExpanded={isExpanded}
             isIndented
             {...expandableSectionProps}
           >

package/src/ToolResponse/ToolResponse.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import ToolResponse from './ToolResponse';
 
@@ -105,4 +106,47 @@ describe('ToolResponse', () => {
     const { container } = render(<ToolResponse {...defaultProps} cardBody={undefined} />);
     expect(container.querySelector('.pf-v6-c-divider')).toBeFalsy();
   });
+
+  it('Renders expanded by default', () => {
+    render(<ToolResponse {...defaultProps} />);
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText(defaultProps.cardTitle)).toBeVisible();
+    expect(screen.getByText(defaultProps.cardBody)).toBeVisible();
+  });
+
+  it('Renders collapsed when isDefaultExpanded is false', () => {
+    render(<ToolResponse isDefaultExpanded={false} {...defaultProps} />);
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByText(defaultProps.cardTitle)).not.toBeVisible();
+    expect(screen.getByText(defaultProps.cardBody)).not.toBeVisible();
+  });
+
+  it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+    render(<ToolResponse {...defaultProps} isDefaultExpanded={false} expandableSectionProps={{ isExpanded: true }} />);
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText(defaultProps.cardTitle)).toBeVisible();
+    expect(screen.getByText(defaultProps.cardBody)).toBeVisible();
+  });
+
+  it('expandableSectionProps.onToggle overrides internal onToggle behavior', async () => {
+    const user = userEvent.setup();
+    const customOnToggle = jest.fn();
+
+    render(
+      <ToolResponse {...defaultProps} isDefaultExpanded={false} expandableSectionProps={{ onToggle: customOnToggle }} />
+    );
+
+    const toggleButton = screen.getByRole('button', { name: defaultProps.toggleContent });
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(toggleButton);
+
+    expect(customOnToggle).toHaveBeenCalledTimes(1);
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByText(defaultProps.cardTitle)).not.toBeVisible();
+    expect(screen.getByText(defaultProps.cardBody)).not.toBeVisible();
+  });
 });

package/src/ToolResponse/ToolResponse.tsx

@@ -18,6 +18,8 @@ import { useState, type FunctionComponent } from 'react';
 export interface ToolResponseProps {
   /** Toggle content shown for expandable section */
   toggleContent: React.ReactNode;
+  /** Flag indicating whether the expandable content is expanded by default. */
+  isDefaultExpanded?: boolean;
   /** Additional props passed to expandable section */
   expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
   /** Subheading rendered inside expandable section */
@@ -51,12 +53,13 @@ export const ToolResponse: FunctionComponent<ToolResponseProps> = ({
   cardTitle,
   cardBodyProps,
   toggleContent,
+  isDefaultExpanded = true,
   toolResponseCardBodyProps,
   toolResponseCardDividerProps,
   toolResponseCardProps,
   toolResponseCardTitleProps
 }: ToolResponseProps) => {
-  const [isExpanded, setIsExpanded] = useState(true);
+  const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);