@patternfly/chatbot 6.5.0-prerelease.9 → 6.6.0-prerelease.1

package/patternfly-docs/content/extensions/chatbot/design-guidelines.md

@@ -1,5 +1,5 @@
 ---
-section: PatternFly-AI
+section: extensions
 subsection: ChatBot
 id: Overview
 sortValue: 1
@@ -22,7 +22,7 @@ import "./images.css"
 1. **Attachments:** Details about files that a user has uploaded to the ChatBot.
 1. **Footer:** A persistent region at the bottom of the ChatBot window that contains the message bar and the footnote.
 1. **Footnote (optional):** A persistent, short message that contains any legal disclaimers or important information about the ChatBot. Footnotes are optional, but strongly recommended. More details can be found in the [footnote guidelines](#footnotes).
-1. **Toggle:** The button that allows users to open and close the ChatBot window. When the ChatBot is opened, the toggle should appear below the ChatBot window. The toggle shape and icon can be customized as needed, as shown in these [ChatBot toggle examples](/patternfly-ai/chatbot/ui#custom-toggle-icon). More details can be found in the [guidelines for accessing a ChatBot](#accessing-a-chatbot).
+1. **Toggle:** The button that allows users to open and close the ChatBot window. When the ChatBot is opened, the toggle should appear below the ChatBot window. The toggle shape and icon can be customized as needed, as shown in these [ChatBot toggle examples](/extensions/chatbot/ui#custom-toggle-icon). More details can be found in the [guidelines for accessing a ChatBot](#accessing-a-chatbot).
 
 ### Messages
 
@@ -37,7 +37,7 @@ import "./images.css"
 1. **Timestamp:** The relative or absolute time that a message was sent.
 1. **Label:** Labels ChatBot messages as "AI."
 1. **Quick responses:** Programmable, clickable actions that allow users to quickly answer questions from the ChatBot.
-1. **Message actions:** Actions that allow users to interact with a bot message. These typically include providing feedback, copying, sharing, or reading aloud, but [custom message actions](/patternfly-ai/chatbot/messages#custom-message-actions) are also supported. More details for the feedback actions can be found in the [message feedback](#message-feedback) section.
+1. **Message actions:** Actions that allow users to interact with a bot message. These typically include providing feedback, copying, sharing, or reading aloud, but [custom message actions](/extensions/chatbot/messages#custom-message-actions) are also supported. More details for the feedback actions can be found in the [message feedback](#message-feedback) section.
 
 #### Welcome message
 
@@ -77,7 +77,7 @@ Selecting the quick start title, or the "Start" link can be configured to launch
 
 ### Message actions 
 
-To allow users to interact with bot messages, utilize message actions. Refer to [the message actions React example](/patternfly-ai/chatbot/messages#message-actions) for an interactive visual.
+To allow users to interact with bot messages, utilize message actions. Refer to [the message actions React example](/extensions/chatbot/messages#message-actions) for an interactive visual.
 
 The following actions can be used for some of the most common interactions:
 
@@ -91,7 +91,7 @@ The following actions can be used for some of the most common interactions:
 1. **Download:** Downloads the chat message. [Learn more about downloading chat transcripts](#downloading-chat-transcripts).
 1. **Listen:** Reads the message content out loud.
 
-You can also use [custom message actions](/patternfly-ai/chatbot/messages#custom-message-actions) as needed for your particular use case. When using custom actions, be sure to add a tooltip that describes the effect that the action will have. For more information, view [our tooltips guidelines](/ux-writing/tooltips). 
+You can also use [custom message actions](/extensions/chatbot/messages#custom-message-actions) as needed for your particular use case. When using custom actions, be sure to add a tooltip that describes the effect that the action will have. For more information, view [our tooltips guidelines](/ux-writing/tooltips). 
 
 #### Message feedback
 
@@ -133,7 +133,7 @@ To message the ChatBot, users can type directly into the message bar in the foot
 1. **Use microphone button:** Supports speech recognition to allow users to use voice input. This feature is currently only available in Chrome and Safari.
 1. **Send button:** Allows users to send a typed message. This button should be disabled until a user has input text.
 
-When a user chooses to use speech input via the microphone button, the button will display a pulsing animation to indicate that the ChatBot is listening to the user (as shown in [this speech recognition example](/patternfly-ai/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)).
+When a user chooses to use speech input via the microphone button, the button will display a pulsing animation to indicate that the ChatBot is listening to the user (as shown in [this speech recognition example](/extensions/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)).
 
 <div class="ws-docs-content-img">
 ![Animation phases of the listening button in the message bar.](./img/listening-pulse.svg)
@@ -266,7 +266,7 @@ As much as possible, the suggested prompts should consider the user’s location
 
 Instead of automatically initiating what sounds like a request from a user, the ChatBot should ask users to confirm or deny their intent. This differentiates moments where users are simply asking about feasibility, rather than actually making a request.
 
-This can be done using the [quick response](/patternfly-ai/chatbot/messages#messages-with-quick-responses) buttons:
+This can be done using the [quick response](/extensions/chatbot/messages#messages-with-quick-responses) buttons:
 
 <div class="ws-docs-content-img">
 ![Confirmation options from a bot in response to a user's request.](./img/quick-response-confirmation.svg)
@@ -310,7 +310,7 @@ Within the settings menu, users can select their preferences for a variety of Ch
 
 ### Attaching files
 
-Using [the attach button](/patternfly-ai/chatbot/overview/design-guidelines#message-bar) in the message bar, users can [attach files](/patternfly-ai/chatbot/messages#file-attachments) to their message to share with the ChatBot.
+Using [the attach button](/extensions/chatbot/overview/design-guidelines#message-bar) in the message bar, users can [attach files](/extensions/chatbot/messages#file-attachments) to their message to share with the ChatBot.
 
 The attach button can follow a couple of patterns, including:
 
@@ -333,7 +333,7 @@ If a message attachment is successful, a label with the file details will be dis
 ![File attached to user message.](./img/attached-file.svg)
 </div>
 
-Users can select the file label to either preview or edit their attachment, as shown in these [attachment examples](/patternfly-ai/chatbot/messages#attachment-preview).
+Users can select the file label to either preview or edit their attachment, as shown in these [attachment examples](/extensions/chatbot/messages#attachment-preview).
 
 If a message attachment fails, an error message should share the reason for failure:
 
@@ -351,7 +351,7 @@ Choose the download action location that best works for your ChatBot:
 
 #### Download via conversation history drawer
 
-If your ChatBot uses a conversation history drawer, you can provide a download option in the [actions menu linked to a previous conversation](/patternfly-ai/chatbot/ui#drawer-with-conversation-actions).
+If your ChatBot uses a conversation history drawer, you can provide a download option in the [actions menu linked to a previous conversation](/extensions/chatbot/ui#drawer-with-conversation-actions).
 
 <div class="ws-docs-content-img">
 ![Expanded menu for previous chat in the history window, which shows a download option.](./img/download-chat-history.svg)
@@ -415,7 +415,7 @@ There are a few display modes that users can choose when interacting with a Chat
 
 ### Layouts
 
-ChatBot supports a side-by-side [comparison layout](/patternfly-ai/chatbot/overview/demo#comparing-chatbots), which allows users to compare 2 chats at once. This can be helpful to let users understand how different models respond to the same prompt.
+ChatBot supports a side-by-side [comparison layout](/extensions/chatbot/overview/demo#comparing-chatbots), which allows users to compare 2 chats at once. This can be helpful to let users understand how different models respond to the same prompt.
 
 <div class="ws-docs-content-img">
 ![2 ChatBots in comparison mode.](./img/comparison.svg)
@@ -429,7 +429,7 @@ Refer to the additional guidelines for [accessing a ChatBot](#accessing-a-chatbo
 
 ## Content considerations
 
-For guidance on writing ChatBot content, refer to our [conversation design guidelines](/patternfly-ai/conversation-design).
+For guidance on writing ChatBot content, refer to our [conversation design guidelines](/ai/conversation-design).
 
 ## Accessibility
 

package/patternfly-docs/content/extensions/chatbot/examples/Analytics/Analytics.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

package/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing 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

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

@@ -318,6 +318,7 @@ _Italic text, formatted with single underscores_
         content="This bot has a square avatar. You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `<Message>` component via `avatarProps`."
         hasRoundAvatar={false}
       />
+      <Message name="Bot" role="bot" content="This is a message from a bot with no avatar." />
       <Select
         id="single-select"
         isOpen={isOpen}

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

@@ -0,0 +1,102 @@
+import { FunctionComponent } from 'react';
+import Message, {
+  ErrorMessage,
+  MessageAndActions,
+  MessageAttachmentItem,
+  MessageAttachmentsContainer,
+  MessageLoading
+} from '@patternfly/chatbot/dist/dynamic/Message';
+import MarkdownContent from '@patternfly/chatbot/dist/dynamic/MarkdownContent';
+import ToolCall from '@patternfly/chatbot/dist/dynamic/ToolCall';
+import ToolResponse from '@patternfly/chatbot/dist/dynamic/ToolResponse';
+import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
+import ResponseActions, { ResponseActionsGroups } from '@patternfly/chatbot/dist/dynamic/ResponseActions';
+import patternflyAvatar from './patternfly_avatar.jpg';
+import userAvatar from './user_avatar.svg';
+
+const handlePositiveResponse = () => {
+  // Handle positive response
+};
+
+const handleNegativeResponse = () => {
+  // Handle negative response
+};
+
+const handleCopy = () => {
+  // Handle copy action
+};
+
+const handleDownload = () => {
+  // Handle download action
+};
+
+const handleListen = () => {
+  // Handle listen action
+};
+
+export const MessageWithCustomStructure: FunctionComponent = () => (
+  <>
+    <Message name="Bot" role="bot" avatar={patternflyAvatar}>
+      <MessageAndActions>
+        <MarkdownContent
+          content={`This is a basic message with a more custom, fine-tuned structure. You can pass markdown to the MarkdownContent component, such as **bold content with double asterisks** or _italic content with single underscores_.`}
+        />
+        <ToolCall titleText="Calling 'awesome_tool'" loadingText="Loading 'awesome_tool'" isLoading={true} />
+        <ToolResponse
+          toggleContent="Tool response: fetch_user_data"
+          subheading="Executed in 0.3 seconds"
+          body="Successfully retrieved user data from the database."
+          cardTitle="User Data Response"
+          cardBody="The tool returned 150 user records matching the specified criteria."
+        />
+        <ErrorMessage title="An issue placed within this custom structure." />
+        <MarkdownContent
+          isMarkdownDisabled
+          textComponent={`You can also pass plain text without markdown to the MarkdownContent component by passing the isMarkdownDisabled prop. Optionally, you can also use the textComponent prop instead of content.`}
+        />
+        <ToolCall titleText="Calling 'more_awesome_tool'" loadingText="Loading 'more_awesome_tool'" isLoading={true} />
+        <ToolCall titleText="Calling 'even_more_awesome_tool'" loadingText="Loading 'even_more_awesome_tool'" />
+        <MarkdownContent content={`You can even place a message loading state in the middle of a message:`} />
+        <MessageLoading loadingWord="Loading something in the middle of a custom structured message" />
+        <ResponseActionsGroups>
+          <ResponseActions
+            actions={{
+              positive: { onClick: handlePositiveResponse, ariaLabel: 'Good response' },
+              negative: { onClick: handleNegativeResponse, ariaLabel: 'Bad response' }
+            }}
+            persistActionSelection={true}
+          />
+          <ResponseActions
+            actions={{
+              copy: { onClick: handleCopy, ariaLabel: 'Copy' },
+              download: { onClick: handleDownload, ariaLabel: 'Download' }
+            }}
+            persistActionSelection={false}
+          />
+          <ResponseActions
+            actions={{
+              listen: { onClick: handleListen, ariaLabel: 'Listen' }
+            }}
+            persistActionSelection={true}
+          />
+        </ResponseActionsGroups>
+      </MessageAndActions>
+    </Message>
+    <Message name="User" role="user" avatar={userAvatar}>
+      <MessageAndActions>
+        <MarkdownContent content="This message is in the MessageAndActions container, and the file attachments below are in their own separate MessageAttachmentsContainer!" />
+      </MessageAndActions>
+      <MessageAttachmentsContainer>
+        <MessageAttachmentItem>
+          <FileDetailsLabel fileName="project-report.pdf" />
+        </MessageAttachmentItem>
+        <MessageAttachmentItem>
+          <FileDetailsLabel fileName="data-analysis.csv" />
+        </MessageAttachmentItem>
+        <MessageAttachmentItem>
+          <FileDetailsLabel fileName="presentation-slides.pptx" />
+        </MessageAttachmentItem>
+      </MessageAttachmentsContainer>
+    </Message>
+  </>
+);

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

@@ -3,15 +3,29 @@ import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 
 export const MessageWithDeepThinkingExample: FunctionComponent = () => (
-  <Message
-    name="Bot"
-    role="bot"
-    avatar={patternflyAvatar}
-    content="This example has a body description that's within the recommended limit of 2 lines."
-    deepThinking={{
-      toggleContent: 'Show thinking',
-      subheading: 'Thought for 3 seconds',
-      body: "Here's why I said this."
-    }}
-  />
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="This example has a body description that's within the recommended limit of 2 lines."
+      deepThinking={{
+        toggleContent: 'Show thinking',
+        subheading: 'Thought for 3 seconds',
+        body: "Here's why I said this."
+      }}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="This example has deep thinking that is collapsed by default:"
+      deepThinking={{
+        isDefaultExpanded: false,
+        toggleContent: 'Show thinking',
+        subheading: 'Thought for 3 seconds',
+        body: "Here's why I said this."
+      }}
+    />
+  </>
 );

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

@@ -7,8 +7,10 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
   const [hasCloseButton, setHasCloseButton] = useState(false);
   const [hasTextArea, setHasTextArea] = useState(false);
   const [hasChildren, setHasChildren] = useState(false);
+  const [hasPrivacyStatement, setHasPrivacyStatement] = useState(false);
 
-  const children = <>Do not share any personal or other sensitive information in your feedback.</>;
+  const children = <>This is additional content.</>;
+  const privacyStatement = 'Do not share any personal or other sensitive information in your feedback.';
 
   return (
     <>
@@ -33,6 +35,15 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
               label="Has additional content"
               id="has-children"
             />
+            <Checkbox
+              isChecked={hasPrivacyStatement}
+              onChange={() => {
+                setHasPrivacyStatement(!hasPrivacyStatement);
+              }}
+              name="feedback-card-with-privacy"
+              label="Has privacy statement"
+              id="has-privacy"
+            />
           </FormGroup>
         </FlexItem>
         <FlexItem>
@@ -51,6 +62,7 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
                 alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
               hasTextArea,
               children: hasChildren ? children : undefined,
+              privacyStatement: hasPrivacyStatement ? privacyStatement : undefined,
               // eslint-disable-next-line no-console
               onClose: () => console.log('closed feedback form'),
               focusOnLoad: false
@@ -73,6 +85,7 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
                 alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
               hasTextArea,
               children: hasChildren ? children : undefined,
+              privacyStatement: hasPrivacyStatement ? privacyStatement : undefined,
               // eslint-disable-next-line no-console
               onClose: () => console.log('closed feedback form'),
               focusOnLoad: false

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithMarkdownDeepThinking.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 MessageWithMarkdownDeepThinkingExample: FunctionComponent = () => (
+  <Message
+    name="Bot"
+    role="bot"
+    avatar={patternflyAvatar}
+    content="This example shows how to use Markdown formatting in deep thinking content. Note the use of shouldRetainStyles to maintain proper formatting:"
+    deepThinking={{
+      shouldRetainStyles: true,
+      toggleContent: 'Show thinking',
+      subheading: '> Thought for 3 seconds',
+      isSubheadingMarkdown: true,
+      body: `I considered **multiple approaches** to answer your question:
+
+1. *Direct response* - Quick but less comprehensive
+2. *Research-based* - Thorough but time-consuming
+3. **Balanced approach** - Combines speed and accuracy
+
+I chose option 3 because it provides the best user experience.`,
+      isBodyMarkdown: true
+    }}
+  />
+);

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

@@ -0,0 +1,29 @@
+import { FunctionComponent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+
+export const MessageWithMarkdownToolCallExample: FunctionComponent = () => (
+  <Message
+    name="Bot"
+    role="bot"
+    avatar={patternflyAvatar}
+    content="This example shows how to use Markdown formatting in tool call content. Note the use of shouldRetainStyles to maintain proper formatting:"
+    toolCall={{
+      shouldRetainStyles: true,
+      titleText: "Calling 'data_processor'",
+      expandableContent: `**Processing data** from the following sources:
+
+- Database query results
+- API responses
+- *Local cache*
+
+\`\`\`json
+{
+  "status": "processing",
+  "items": 42
+}
+\`\`\``,
+      isExpandableContentMarkdown: true
+    }}
+  />
+);

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

@@ -0,0 +1,200 @@
+import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+import { CopyIcon, WrenchIcon } from '@patternfly/react-icons';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  ExpandableSection,
+  ExpandableSectionVariant,
+  Flex,
+  FlexItem,
+  Label
+} from '@patternfly/react-core';
+export const MessageWithToolResponseExample: FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const onToggle = (_event: ReactMouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+  const toolResponseBody = `The tool processed **3 database queries** and returned the following results:
+
+1. User data - *42 records*
+2. Transaction history - *128 records*
+3. Analytics metrics - *15 data points*
+
+\`\`\`json
+{
+  "status": "success",
+  "execution_time": "0.12s"
+}
+\`\`\``;
+  return (
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="This example shows how to use Markdown formatting in tool response content. Note the use of shouldRetainStyles to maintain proper formatting:"
+      toolResponse={{
+        shouldRetainStyles: true,
+        isToggleContentMarkdown: true,
+        toggleContent: '**Tool response:** data_query_tool',
+        isSubheadingMarkdown: true,
+        subheading: '> Completed in 0.12 seconds',
+        body: toolResponseBody,
+        isBodyMarkdown: true,
+        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)'
+              }}
+              aria-label="Tool response"
+            >
+              <DescriptionListGroup
+                style={{
+                  '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)'
+                }}
+              >
+                <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)'
+                }}
+              >
+                <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
+                    }}
+                  >
+                    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/MessageWithMultipleActionGroups.tsx

@@ -0,0 +1,61 @@
+import { FunctionComponent } from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+
+export const MessageWithMultipleActionGroups: FunctionComponent = () => (
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="This message contains multiple action groups, each with their own selection persistence: \n1. Feedback actions (thumbs up/down) with persistent selections \n2. Utility actions (copy, download) with non-persistent selections \n3. Listen action with persistent selection"
+      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') }
+          },
+          persistActionSelection: true
+        },
+        {
+          actions: {
+            // eslint-disable-next-line no-console
+            copy: { onClick: () => console.log('Copy') },
+            // eslint-disable-next-line no-console
+            download: { onClick: () => console.log('Download') }
+          },
+          persistActionSelection: false
+        },
+        {
+          actions: {
+            // eslint-disable-next-line no-console
+            listen: { onClick: () => console.log('Listen') }
+          },
+          persistActionSelection: true
+        }
+      ]}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="This message contains multiple action groups, both of which persist selections."
+      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
+          listen: { onClick: () => console.log('Listen') }
+        }
+      ]}
+      persistActionSelection={true}
+    />
+  </>
+);

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

@@ -0,0 +1,22 @@
+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
+      listen: { onClick: () => console.log('Listen') }
+    }}
+    persistActionSelection
+  />
+);