@patternfly/chatbot 1.0.0

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

@@ -0,0 +1,32 @@
+import { FunctionComponent } from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
+
+export const CustomActionExample: FunctionComponent = () => (
+  <Message
+    name="Bot"
+    role="bot"
+    content="I updated your account with those settings. You're ready to set up your first dashboard!"
+    actions={{
+      regenerate: {
+        ariaLabel: 'Regenerate',
+        clickedAriaLabel: 'Regenerated',
+        isClicked: true,
+        // eslint-disable-next-line no-console
+        onClick: () => console.log('Clicked regenerate'),
+        tooltipContent: 'Regenerate',
+        clickedTooltipContent: 'Regenerated',
+        icon: <RedoIcon />
+      },
+      info: {
+        ariaLabel: 'Info',
+        // eslint-disable-next-line no-console
+        onClick: () => console.log('Clicked info'),
+        tooltipContent: 'Info',
+        icon: <InfoCircleIcon />
+      }
+    }}
+  />
+);

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

@@ -0,0 +1,101 @@
+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 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">
+      <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

@@ -0,0 +1,40 @@
+import { FunctionComponent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+
+export const MessageWithDeepThinkingExample: FunctionComponent = () => (
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      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"
+      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."
+      }}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      content="This example has deep thinking that is loading:"
+      deepThinking={{
+        isDefaultExpanded: false,
+        toggleContent: 'Show thinking',
+        subheading: 'Thought for 3 seconds',
+        body: "Here's why I said this.",
+        isLoading: true
+      }}
+    />
+  </>
+);

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

@@ -0,0 +1,17 @@
+import { FunctionComponent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';
+
+export const MessageWithDividersExample: FunctionComponent = () => (
+  <>
+    <Message name="Bot" role="bot" content={`This is a text-based message from a bot named "Bot."`} />
+    <MessageDivider variant="inset" content="1 hour ago" />
+    <Message
+      name="Bot"
+      role="bot"
+      content={`This is a text-based message from "Bot," with an updated timestamp.`}
+      timestamp="1 hour ago"
+    />
+    <MessageDivider variant="fullWidth" content="Agent joined the chat" />
+  </>
+);

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

@@ -0,0 +1,138 @@
+import { useState, FunctionComponent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import { Checkbox, FormGroup, Flex, FlexItem } from '@patternfly/react-core';
+
+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 = <>This is additional content.</>;
+  const privacyStatement = 'Do not share any personal or other sensitive information in your feedback.';
+
+  return (
+    <>
+      <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
+        <FlexItem>
+          <FormGroup role="radiogroup" isInline isStack fieldId="feedback-card" label="Variant">
+            <Checkbox
+              isChecked={hasTextArea}
+              onChange={() => {
+                setHasTextArea(!hasTextArea);
+              }}
+              name="feedback-card-with-text-area"
+              label="Has text area"
+              id="has-text-area"
+            />
+            <Checkbox
+              isChecked={hasChildren}
+              onChange={() => {
+                setHasChildren(!hasChildren);
+              }}
+              name="feedback-card-with-children"
+              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>
+          <Message
+            name="Bot"
+            role="bot"
+            content="This is a message with the feedback card:"
+            userFeedbackForm={{
+              quickResponses: [
+                { id: '1', content: 'Helpful information' },
+                { id: '2', content: 'Easy to understand' },
+                { id: '3', content: 'Resolved my issue' }
+              ],
+              onSubmit: (quickResponse, additionalFeedback) =>
+                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
+            }}
+          />
+        </FlexItem>
+        <FlexItem>
+          <Message
+            name="Bot"
+            role="bot"
+            content="This is a compact message with the feedback card:"
+            userFeedbackForm={{
+              quickResponses: [
+                { id: '1', content: 'Helpful information' },
+                { id: '2', content: 'Easy to understand' },
+                { id: '3', content: 'Resolved my issue' }
+              ],
+              onSubmit: (quickResponse, additionalFeedback) =>
+                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
+            }}
+            isCompact
+          />
+        </FlexItem>
+      </Flex>
+      <Flex direction={{ default: 'column' }}>
+        <FlexItem>
+          <FormGroup role="radiogroup" isInline fieldId="feedback-thank-you" label="Variant">
+            <Checkbox
+              isChecked={hasCloseButton}
+              onChange={() => {
+                setHasCloseButton(!hasCloseButton);
+              }}
+              name="basic-inline-radio"
+              label="Has close button"
+              id="has-close"
+            />
+          </FormGroup>
+        </FlexItem>
+        <FlexItem>
+          <Message
+            name="Bot"
+            role="bot"
+            content="This is a thank-you message, which is displayed once the feedback card is submitted:"
+            // eslint-disable-next-line no-console
+            userFeedbackComplete={{
+              // eslint-disable-next-line no-console
+              onClose: hasCloseButton ? () => console.log('closed completion message') : undefined,
+              focusOnLoad: false
+            }}
+          />
+        </FlexItem>
+        <FlexItem>
+          <Message
+            name="Bot"
+            role="bot"
+            content="This is a compact thank-you message, which is displayed once the feedback card is submitted:"
+            // eslint-disable-next-line no-console
+            userFeedbackComplete={{
+              // eslint-disable-next-line no-console
+              onClose: hasCloseButton ? () => console.log('closed completion message') : undefined,
+              focusOnLoad: false
+            }}
+            isCompact
+          />
+        </FlexItem>
+      </Flex>
+    </>
+  );
+};

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

@@ -0,0 +1,25 @@
+import { FunctionComponent, useState } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import { Button } from '@patternfly/react-core';
+
+export const MessageWithFeedbackTimeoutExample: FunctionComponent = () => {
+  const [hasFeedback, setHasFeedback] = useState(false);
+
+  return (
+    <>
+      <Button variant="secondary" onClick={() => setHasFeedback(true)}>
+        Show card
+      </Button>
+      <Button variant="secondary" onClick={() => setHasFeedback(false)}>
+        Remove card
+      </Button>
+      <Message
+        name="Bot"
+        role="bot"
+        content="This completion message times out after you click **Show card**:"
+        userFeedbackComplete={hasFeedback ? { timeout: true, onTimeout: () => setHasFeedback(false) } : undefined}
+        isLiveRegion
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,20 @@
+import { FunctionComponent } from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+
+export const IconSwappingExample: FunctionComponent = () => (
+  <Message
+    name="Bot"
+    role="bot"
+    content="Click the response actions to see the outlined icons swapped with the filled variants!"
+    actions={{
+      // eslint-disable-next-line no-console
+      positive: { onClick: () => console.log('Good response') },
+      // eslint-disable-next-line no-console
+      negative: { onClick: () => console.log('Bad response') },
+      // eslint-disable-next-line no-console
+      copy: { onClick: () => console.log('Copied') }
+    }}
+    useFilledIconsOnClick
+  />
+);

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

@@ -0,0 +1,24 @@
+import { FunctionComponent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+
+export const MessageWithMarkdownDeepThinkingExample: FunctionComponent = () => (
+  <Message
+    name="Bot"
+    role="bot"
+    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,27 @@
+import { FunctionComponent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+
+export const MessageWithMarkdownToolCallExample: FunctionComponent = () => (
+  <Message
+    name="Bot"
+    role="bot"
+    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,198 @@
+import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+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"
+      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>
+          </>
+        )
+      }}
+    />
+  );
+};