@patternfly/chatbot 6.5.0-prerelease.8 → 6.5.0

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

@@ -1,7 +1,7 @@
 ---
 # Sidenav top-level section
 # should be the same for all markdown files
-section: PatternFly-AI
+section: extensions
 subsection: ChatBot
 # Sidenav secondary level section
 # should be the same for all markdown files
@@ -14,24 +14,40 @@ propComponents:
   [
     'AttachMenu',
     'AttachmentEdit',
-    'FileDetailsProps',
-    'FileDetailsLabelProps',
     'FileDropZone',
-    'PreviewAttachment',
     'Message',
-    'MessageExtraContent',
-    'PreviewAttachment',
+    'ErrorMessage',
+    'MessageLoadingProps',
+    'MessageInputProps',
+    'MessageAndActionsProps',
+    'MarkdownContent',
+    'QuickResponseProps',
+    'QuickStartTileProps',
+    'UserFeedback',
+    'UserFeedbackComplete',
+    'DeepThinking',
+    'ToolCall',
+    'ToolResponse',
+    'SourcesCard',
+    'ResponseActionsGroupsProps',
+    'ResponseActionProps',
     'ActionProps',
-    'SourcesCardProps',
-    'UserFeedbackProps',
-    'UserFeedbackCompleteProps',
-    'QuickResponseProps'
+    'MessageAttachmentsContainerProps',
+    'MessageAttachmentItemProps',
+    'FileDetailsProps',
+    'FileDetailsLabelProps',
+    'MessageExtraContent',
+    'PreviewAttachment'
   ]
 sortValue: 3
 ---
 
-import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import Message, { ErrorMessage, MessageAndActions, MessageLoading, MessageAttachmentItem, MessageAttachmentsContainer } from '@patternfly/chatbot/dist/dynamic/Message';
+import MarkdownContent from '@patternfly/chatbot/dist/dynamic/MarkdownContent';
 import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';
+import ToolCall from '@patternfly/chatbot/dist/dynamic/ToolCall';
+import ResponseActions, { ResponseActionsGroups } from '@patternfly/chatbot/dist/dynamic/ResponseActions';
+import ToolResponse from '@patternfly/chatbot/dist/dynamic/ToolResponse';
 import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
 import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CopyIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, OutlinedQuestionCircleIcon, RedoIcon, RobotIcon, WrenchIcon } from '@patternfly/react-icons';
@@ -108,6 +124,38 @@ Once the component has rendered, user interactions will take precedence over the
 
 ```
 
+### Message actions persistent selections
+
+By default, message actions will automatically deselect when you click outside the component or on a different action button. To persist the selection instead, set `persistActionSelection` to `true`.
+
+When `persistActionSelection` is `true`:
+
+- The selected action will remain selected even when you click outside the component.
+- Clicking a different button will still switch the selection to that button.
+- Clicking the same action button again will toggle the selection off, though you will have to move your focus elsewhere to see the visual state change.
+
+```js file="./MessageWithPersistedActions.tsx"
+
+```
+
+### 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:
@@ -130,9 +178,9 @@ You can apply a `clickedAriaLabel` and `clickedTooltipContent` once a button is
 
 ### Message feedback
 
-When a user selects a positive or negative [message action](#message-actions), you can display a message feedback card that acknowledges their response and provides space for additional written feedback. These cards can be manually dismissed via the close button and the thank-you card can be [configured to time out automatically](/patternfly-ai/chatbot/messages#message-feedback-with-timeouts).
+When a user selects a positive or negative [message action](#message-actions), you can display a message feedback card that acknowledges their response and provides space for additional written feedback. These cards can be manually dismissed via the close button and the thank-you card can be [configured to time out automatically](/extensions/chatbot/messages#message-feedback-with-timeouts).
 
-You can see the full feedback flow [in the message demos](/patternfly-ai/chatbot/messages/demo#message-feedback).
+You can see the full feedback flow [in the message demos](/extensions/chatbot/messages/demo#message-feedback).
 
 The message feedback cards will immediately receive focus by default, but you can remove this behavior by passing `focusOnLoad: false` to the `<Message>` (as shown in the following examples). For better usability, you should generally keep the default focus behavior.
 
@@ -239,11 +287,40 @@ You can add custom content to specific parts of a `<Message>` via the `extraCont
 
 ```
 
+### Custom message structure
+
+For more advanced use cases, you can build completely custom message structures by passing children directly to `<Message>`. This approach is useful when you need to customize the order or structure of message elements beyond what the standard props allow.
+
+When creating custom message structures, you must follow an intended composable structure.
+
+1. **Message content and actions:** Wrap in `<MessageAndActions>`. This includes, but is not limited to:
+
+   - `<MarkdownContent>`: For rendering markdown or plain text content
+   - `<ErrorMessage>`
+   - `<MessageLoading>`
+   - `<MessageInput>`
+   - `<ToolCall>`
+   - `<ToolResponse>`
+   - `<DeepThinking>`
+   - `<QuickResponse>`
+   - `<QuickStartTile>`
+   - `<UserFeedback>` and `<UserFeedbackComplete>`
+   - `<SourcesCard>`
+   - `<ResponseActionsGroups>` and `<ResponseActions>`
+
+2. **File attachments:** Placed outside `<MessageAndActions>` and wrapped in attachment containers:
+   - `<MessageAttachmentsContainer>`: Container for all attachments
+   - `<MessageAttachmentItem>`: Individual attachment wrapper (contains `<FileDetailsLabel>` or other attachment components)
+
+```ts file="./MessageWithCustomStructure.tsx"
+
+```
+
 ## File attachments
 
 ### Messages with attachments
 
-When [attachments](/patternfly-ai/chatbot/messages#file-attachments) are shared and displayed in the ChatBot window, users will see a selectable and dismissible message that contains file details in a label. Selecting the file label can open a preview modal, which allows users to view or make edits to the file contents.
+When [attachments](/extensions/chatbot/messages#file-attachments) are shared and displayed in the ChatBot window, users will see a selectable and dismissible message that contains file details in a label. Selecting the file label can open a preview modal, which allows users to view or make edits to the file contents.
 
 The `<PreviewAttachment>` component displays a modal with a read-only view of the attached file's contents. Selecting the "edit" button will open the `<AttachmentEdit>` component, which provides an interactive environment where users can make changes to the file.
 
@@ -317,3 +394,35 @@ An attachment dropzone allows users to upload files via drag and drop.
 ```js file="./FileDropZone.tsx"
 
 ```
+
+## Examples with Markdown
+
+The ChatBot supports Markdown formatting in several message components, allowing you to display rich, formatted content. This is particularly useful when you need to include code snippets, lists, emphasis, or other formatted text. The following examples demonstrate different ways you can use Markdown in a few of the ChatBot components, but this is not an exhaustive list of all Markdown customizations you can make.
+
+To enable Markdown rendering, use the appropriate Markdown flag prop (such as `isBodyMarkdown`, `isSubheadingMarkdown`, or `isExpandableContentMarkdown`) depending on the component and content you're formatting.
+
+**Important:** When using Markdown in these components, set `shouldRetainStyles: true` to retain the styling of the context the Markdown is used in. This ensures that Markdown content maintains the proper font sizes, colors, and other styling properties of its parent component. For example, Markdown passed into a toggle will retain the ChatBot toggle styling, while Markdown in a card body will maintain the appropriate card body styling. Without this prop, the Markdown may override the contextual styles and create inconsistencies with the rest of the ChatBot interface.
+
+### Tool calls with Markdown
+
+When displaying tool call information, you can use Markdown in the expandable content to provide formatted details about what the tool is processing. This is useful for showing structured data, code snippets, or formatted lists.
+
+```ts file="./MessageWithMarkdownToolCall.tsx"
+
+```
+
+### Deep thinking with Markdown
+
+Deep thinking content can include Markdown formatting in both the subheading and body to better communicate the LLM's reasoning process. This allows you to emphasize key points, structure thought processes with lists, or include other formatting.
+
+```ts file="./MessageWithMarkdownDeepThinking.tsx"
+
+```
+
+### Tool responses with Markdown
+
+Tool response cards support Markdown in multiple areas, including the toggle content, subheading, and body. Use `shouldRetainStyles: true` along with the appropriate Markdown flag props to ensure proper formatting and spacing.
+
+```ts file="./MessageWithMarkdownToolResponse.tsx"
+
+```

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

@@ -333,6 +333,7 @@ _Italic text, formatted with single underscores_
         avatar={userAvatar}
         avatarProps={{ isBordered: true }}
       />
+      <Message name="User" role="user" content="This is a user message with no avatar" />
       <Message
         name="User"
         role="user"