@patternfly/chatbot 6.5.0-prerelease.8 → 6.5.0

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
+  />
+);

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

@@ -1,6 +1,7 @@
 import { FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
+import { CopyIcon, WrenchIcon } from '@patternfly/react-icons';
 
 export const MessageWithQuickResponsesExample: FunctionComponent = () => (
   <>
@@ -74,5 +75,15 @@ export const MessageWithQuickResponsesExample: FunctionComponent = () => (
       ]}
       isCompact
     />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Example with icons"
+      quickResponses={[
+        { id: '1', content: 'Update your settings', onClick: () => alert('Clicked yes'), icon: <WrenchIcon /> },
+        { id: '2', content: 'Copy', onClick: () => alert('Clicked no'), icon: <CopyIcon /> }
+      ]}
+    />
   </>
 );

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

@@ -31,7 +31,7 @@ export const MessageWithToolCallExample: FunctionComponent = () => {
           name="Bot"
           role="bot"
           avatar={patternflyAvatar}
-          content="This example has an expandable tool call title, with an additional description::"
+          content="This example has an expandable tool call title, with an additional description:"
           toolCall={{
             titleText: "Calling 'awesome_tool_expansion'",
             expandableContent: 'This is the expandable content for the tool call.',
@@ -39,6 +39,19 @@ export const MessageWithToolCallExample: FunctionComponent = () => {
             loadingText: "Loading 'awesome_tool_expansion'"
           }}
         />
+        <Message
+          name="Bot"
+          role="bot"
+          avatar={patternflyAvatar}
+          content="This example has an expandable tool call that is expanded by default:"
+          toolCall={{
+            isDefaultExpanded: true,
+            titleText: "Calling 'awesome_tool_expansion'",
+            expandableContent: 'This is the expandable content for the tool call.',
+            isLoading: toolCallsAreLoading,
+            loadingText: "Loading 'awesome_tool_expansion'"
+          }}
+        />
       </FlexItem>
     </Flex>
   );