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

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithToolResponse.tsx

@@ -23,113 +23,230 @@ export const MessageWithToolResponseExample: FunctionComponent = () => {
   };
 
   return (
-    <Message
-      name="Bot"
-      role="bot"
-      avatar={patternflyAvatar}
-      content="This example has a body description that's within the recommended limit of 2 lines:"
-      toolResponse={{
-        toggleContent: 'Tool response: toolName',
-        subheading: 'Thought for 3 seconds',
-        body: "Here's the summary for your toolName response:",
-        cardTitle: (
-          <Flex alignItems={{ default: 'alignItemsCenter' }} justifyContent={{ default: 'justifyContentSpaceBetween' }}>
-            <FlexItem>
-              <Flex direction={{ default: 'column' }} gap={{ default: 'gapXs' }}>
-                <FlexItem grow={{ default: 'grow' }}>
-                  <Flex gap={{ default: 'gapXs' }}>
-                    <FlexItem>
-                      <WrenchIcon style={{ color: 'var(--pf-t--global--icon--color--brand--default' }} />
-                    </FlexItem>
-                    <FlexItem>toolName</FlexItem>
-                  </Flex>
-                </FlexItem>
-                <FlexItem>
-                  <Flex gap={{ default: 'gapSm' }} style={{ fontSize: '12px', fontWeight: '400' }}>
-                    <FlexItem>Execution time:</FlexItem>
-                    <FlexItem>0.12 seconds</FlexItem>
-                  </Flex>
-                </FlexItem>
-              </Flex>
-            </FlexItem>
-            <FlexItem>
-              <Button
-                variant="plain"
-                aria-label="Copy tool response to clipboard"
-                icon={<CopyIcon style={{ color: 'var(--pf-t--global--icon--color--subtle)' }} />}
-              ></Button>
-            </FlexItem>
-          </Flex>
-        ),
-        cardBody: (
-          <>
-            <DescriptionList
-              style={{ '--pf-v6-c-description-list--RowGap': 'var(--pf-t--global--spacer--md)' } as any}
-              aria-label="Tool response"
+    <>
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="This message has a body description that's within the recommended limit of 2 lines:"
+        toolResponse={{
+          toggleContent: 'Tool response: toolName',
+          subheading: 'Thought for 3 seconds',
+          body: "Here's the summary for your toolName response:",
+          cardTitle: (
+            <Flex
+              alignItems={{ default: 'alignItemsCenter' }}
+              justifyContent={{ default: 'justifyContentSpaceBetween' }}
             >
-              <DescriptionListGroup
-                style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
+              <FlexItem>
+                <Flex direction={{ default: 'column' }} gap={{ default: 'gapXs' }}>
+                  <FlexItem grow={{ default: 'grow' }}>
+                    <Flex gap={{ default: 'gapXs' }}>
+                      <FlexItem>
+                        <WrenchIcon style={{ color: 'var(--pf-t--global--icon--color--brand--default' }} />
+                      </FlexItem>
+                      <FlexItem>toolName</FlexItem>
+                    </Flex>
+                  </FlexItem>
+                  <FlexItem>
+                    <Flex gap={{ default: 'gapSm' }} style={{ fontSize: '12px', fontWeight: '400' }}>
+                      <FlexItem>Execution time:</FlexItem>
+                      <FlexItem>0.12 seconds</FlexItem>
+                    </Flex>
+                  </FlexItem>
+                </Flex>
+              </FlexItem>
+              <FlexItem>
+                <Button
+                  variant="plain"
+                  aria-label="Copy tool response to clipboard"
+                  icon={<CopyIcon style={{ color: 'var(--pf-t--global--icon--color--subtle)' }} />}
+                ></Button>
+              </FlexItem>
+            </Flex>
+          ),
+          cardBody: (
+            <>
+              <DescriptionList
+                style={{ '--pf-v6-c-description-list--RowGap': 'var(--pf-t--global--spacer--md)' } as any}
+                aria-label="Tool response"
               >
-                <DescriptionListTerm>Parameters</DescriptionListTerm>
-                <DescriptionListDescription>
-                  <Flex direction={{ default: 'column' }}>
-                    <FlexItem>Optional description text for parameters.</FlexItem>
-                    <FlexItem>
-                      <Flex gap={{ default: 'gapSm' }}>
-                        <FlexItem>
-                          <Label variant="outline" color="blue">
-                            type
-                          </Label>
-                        </FlexItem>
-                        <FlexItem>
-                          <Label variant="outline" color="blue">
-                            properties
-                          </Label>
-                        </FlexItem>
-                        <FlexItem>
-                          <Label variant="outline" color="blue">
-                            label
-                          </Label>
-                        </FlexItem>
-                        <FlexItem>
-                          <Label variant="outline" color="blue">
-                            label
-                          </Label>
-                        </FlexItem>
-                      </Flex>
-                    </FlexItem>
-                  </Flex>
-                </DescriptionListDescription>
-              </DescriptionListGroup>
-              <DescriptionListGroup
-                style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
+                <DescriptionListGroup
+                  style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
+                >
+                  <DescriptionListTerm>Parameters</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <Flex direction={{ default: 'column' }}>
+                      <FlexItem>Optional description text for parameters.</FlexItem>
+                      <FlexItem>
+                        <Flex gap={{ default: 'gapSm' }}>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              type
+                            </Label>
+                          </FlexItem>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              properties
+                            </Label>
+                          </FlexItem>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              label
+                            </Label>
+                          </FlexItem>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              label
+                            </Label>
+                          </FlexItem>
+                        </Flex>
+                      </FlexItem>
+                    </Flex>
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup
+                  style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
+                >
+                  <DescriptionListTerm>Response</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <ExpandableSection
+                      variant={ExpandableSectionVariant.truncate}
+                      toggleTextExpanded="show less of response"
+                      toggleTextCollapsed="show more of response"
+                      onToggle={onToggle}
+                      isExpanded={isExpanded}
+                      style={
+                        {
+                          '--pf-v6-c-expandable-section__content--Opacity': '1',
+                          '--pf-v6-c-expandable-section__content--PaddingInlineStart': 0,
+                          '--pf-v6-c-expandable-section__content--TranslateY': 0,
+                          '--pf-v6-c-expandable-section--m-expand-top__content--TranslateY': 0
+                        } as any
+                      }
+                    >
+                      Descriptive text about the tool response, including completion status, details on the data that
+                      was processed, or anything else relevant to the use case.
+                    </ExpandableSection>
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+              </DescriptionList>
+            </>
+          )
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="This message has a tool response that is collapsed by default:"
+        toolResponse={{
+          isDefaultExpanded: false,
+          toggleContent: 'Tool response: toolName',
+          subheading: 'Thought for 3 seconds',
+          body: "Here's the summary for your toolName response:",
+          cardTitle: (
+            <Flex
+              alignItems={{ default: 'alignItemsCenter' }}
+              justifyContent={{ default: 'justifyContentSpaceBetween' }}
+            >
+              <FlexItem>
+                <Flex direction={{ default: 'column' }} gap={{ default: 'gapXs' }}>
+                  <FlexItem grow={{ default: 'grow' }}>
+                    <Flex gap={{ default: 'gapXs' }}>
+                      <FlexItem>
+                        <WrenchIcon style={{ color: 'var(--pf-t--global--icon--color--brand--default' }} />
+                      </FlexItem>
+                      <FlexItem>toolName</FlexItem>
+                    </Flex>
+                  </FlexItem>
+                  <FlexItem>
+                    <Flex gap={{ default: 'gapSm' }} style={{ fontSize: '12px', fontWeight: '400' }}>
+                      <FlexItem>Execution time:</FlexItem>
+                      <FlexItem>0.12 seconds</FlexItem>
+                    </Flex>
+                  </FlexItem>
+                </Flex>
+              </FlexItem>
+              <FlexItem>
+                <Button
+                  variant="plain"
+                  aria-label="Copy tool response to clipboard"
+                  icon={<CopyIcon style={{ color: 'var(--pf-t--global--icon--color--subtle)' }} />}
+                ></Button>
+              </FlexItem>
+            </Flex>
+          ),
+          cardBody: (
+            <>
+              <DescriptionList
+                style={{ '--pf-v6-c-description-list--RowGap': 'var(--pf-t--global--spacer--md)' } as any}
+                aria-label="Tool response"
               >
-                <DescriptionListTerm>Response</DescriptionListTerm>
-                <DescriptionListDescription>
-                  <ExpandableSection
-                    variant={ExpandableSectionVariant.truncate}
-                    toggleTextExpanded="show less of response"
-                    toggleTextCollapsed="show more of response"
-                    onToggle={onToggle}
-                    isExpanded={isExpanded}
-                    style={
-                      {
-                        '--pf-v6-c-expandable-section__content--Opacity': '1',
-                        '--pf-v6-c-expandable-section__content--PaddingInlineStart': 0,
-                        '--pf-v6-c-expandable-section__content--TranslateY': 0,
-                        '--pf-v6-c-expandable-section--m-expand-top__content--TranslateY': 0
-                      } as any
-                    }
-                  >
-                    Descriptive text about the tool response, including completion status, details on the data that was
-                    processed, or anything else relevant to the use case.
-                  </ExpandableSection>
-                </DescriptionListDescription>
-              </DescriptionListGroup>
-            </DescriptionList>
-          </>
-        )
-      }}
-    />
+                <DescriptionListGroup
+                  style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
+                >
+                  <DescriptionListTerm>Parameters</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <Flex direction={{ default: 'column' }}>
+                      <FlexItem>Optional description text for parameters.</FlexItem>
+                      <FlexItem>
+                        <Flex gap={{ default: 'gapSm' }}>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              type
+                            </Label>
+                          </FlexItem>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              properties
+                            </Label>
+                          </FlexItem>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              label
+                            </Label>
+                          </FlexItem>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              label
+                            </Label>
+                          </FlexItem>
+                        </Flex>
+                      </FlexItem>
+                    </Flex>
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup
+                  style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
+                >
+                  <DescriptionListTerm>Response</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <ExpandableSection
+                      variant={ExpandableSectionVariant.truncate}
+                      toggleTextExpanded="show less of response"
+                      toggleTextCollapsed="show more of response"
+                      onToggle={onToggle}
+                      isExpanded={isExpanded}
+                      style={
+                        {
+                          '--pf-v6-c-expandable-section__content--Opacity': '1',
+                          '--pf-v6-c-expandable-section__content--PaddingInlineStart': 0,
+                          '--pf-v6-c-expandable-section__content--TranslateY': 0,
+                          '--pf-v6-c-expandable-section--m-expand-top__content--TranslateY': 0
+                        } as any
+                      }
+                    >
+                      Descriptive text about the tool response, including completion status, details on the data that
+                      was processed, or anything else relevant to the use case.
+                    </ExpandableSection>
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+              </DescriptionList>
+            </>
+          )
+        }}
+      />
+    </>
   );
 };

package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -122,6 +122,24 @@ When `persistActionSelection` is `true`:
 
 ```
 
+### Multiple messsage action groups
+
+To maintain finer control over message action selection behavior, you can create groups of actions by passing an array of objects to the `actions` prop. This allows you to separate actions into conceptually or functionally different groups and implement different behavior for each group as needed. For example, you could separate feedback actions (thumbs up/down) form utility actions (copy and download), and have different selection behaviors for each group.
+
+To provide flexibility for your use case, there are 2 approaches you can take to pass an array of objects to `actions`:
+
+1. Pass an array of objects, where each object contains:
+
+   - `actions`: An `action` object containing the actions for that group (the same format as a single `action` object)
+
+   - `persistActionSelection` (optional): A boolean to control whether selections persists for this specific group
+
+2. Pass an array of `action` objects (the same format as a single `action` object) and (optionally) a value for the `persistActionSelection` property that will apply to all groups.
+
+```js file="./MessageWithMultipleActionGroups.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:

package/src/DeepThinking/DeepThinking.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 DeepThinking from './DeepThinking';
 
@@ -58,4 +59,64 @@ describe('DeepThinking', () => {
     const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
     expect(subheadingContainer).toBeFalsy();
   });
+
+  it('should pass through cardBodyProps', () => {
+    render(
+      <DeepThinking {...defaultProps} body="Thinking content" cardBodyProps={{ className: 'custom-card-body-class' }} />
+    );
+
+    const cardBody = screen.getByText('Thinking content').closest('.pf-v6-c-card__body');
+    expect(cardBody).toHaveClass('custom-card-body-class');
+  });
+
+  it('Renders expanded by default', () => {
+    render(<DeepThinking {...defaultProps} body="Thinking content" />);
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Thinking content')).toBeVisible();
+  });
+
+  it('Renders collapsed when isDefaultExpanded is false', () => {
+    render(<DeepThinking isDefaultExpanded={false} {...defaultProps} body="Thinking content" />);
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByText('Thinking content')).not.toBeVisible();
+  });
+
+  it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+    render(
+      <DeepThinking
+        {...defaultProps}
+        isDefaultExpanded={false}
+        body="Thinking content"
+        expandableSectionProps={{ isExpanded: true }}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Thinking content')).toBeVisible();
+  });
+
+  it('expandableSectionProps.onToggle overrides internal onToggle behavior', async () => {
+    const user = userEvent.setup();
+    const customOnToggle = jest.fn();
+
+    render(
+      <DeepThinking
+        {...defaultProps}
+        isDefaultExpanded={false}
+        body="Thinking content"
+        expandableSectionProps={{ onToggle: customOnToggle }}
+      />
+    );
+
+    const toggleButton = screen.getByRole('button', { name: defaultProps.toggleContent });
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(toggleButton);
+
+    expect(customOnToggle).toHaveBeenCalled();
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByText('Thinking content')).not.toBeVisible();
+  });
 });

package/src/DeepThinking/DeepThinking.tsx

@@ -14,6 +14,8 @@ import { useState, type FunctionComponent } from 'react';
 export interface DeepThinkingProps {
   /** 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 */
@@ -32,9 +34,10 @@ export const DeepThinking: FunctionComponent<DeepThinkingProps> = ({
   expandableSectionProps,
   subheading,
   toggleContent,
+  isDefaultExpanded = true,
   cardBodyProps
 }: DeepThinkingProps) => {
-  const [isExpanded, setIsExpanded] = useState(true);
+  const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);