@patternfly/chatbot 6.4.0-prerelease.2 → 6.4.0-prerelease.20

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

@@ -0,0 +1,33 @@
+import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
+import { Button, Checkbox } from '@patternfly/react-core';
+import FilePreview from '@patternfly/chatbot/dist/dynamic/FilePreview';
+
+export const AttachmentEditModalExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isCompact, setIsCompact] = useState(false);
+
+  const handleModalToggle = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="modal-compact-no-preview"
+        name="modal-compact-no-preview"
+      ></Checkbox>
+      <Button onClick={handleModalToggle}>Launch file preview modal</Button>
+      <FilePreview
+        isModalOpen={isModalOpen}
+        handleModalToggle={handleModalToggle}
+        fileName="compressed-file.zip"
+        isCompact={isCompact}
+      >
+        Preview unavailable
+      </FilePreview>
+    </>
+  );
+};

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

@@ -0,0 +1,17 @@
+import { FunctionComponent } from 'react';
+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."
+    }}
+  />
+);

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

@@ -1,104 +1,130 @@
 import { useState, FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
-import { Checkbox, FormGroup, Stack } from '@patternfly/react-core';
+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 children = <>Do not share any personal or other sensitive information in your feedback.</>;
 
   return (
     <>
-      <Stack hasGutter>
-        <FormGroup role="radiogroup" isInline fieldId="feedback-card" label="Variant">
-          <Checkbox
-            isChecked={hasTextArea}
-            onChange={() => {
-              setHasTextArea(!hasTextArea);
+      <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"
+            />
+          </FormGroup>
+        </FlexItem>
+        <FlexItem>
+          <Message
+            name="Bot"
+            role="bot"
+            avatar={patternflyAvatar}
+            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,
+              // eslint-disable-next-line no-console
+              onClose: () => console.log('closed feedback form'),
+              focusOnLoad: false
             }}
-            name="basic-inline-radio"
-            label="Has text area"
-            id="has-text-area"
           />
-        </FormGroup>
-        <Message
-          name="Bot"
-          role="bot"
-          avatar={patternflyAvatar}
-          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,
-            // eslint-disable-next-line no-console
-            onClose: () => console.log('closed feedback form'),
-            focusOnLoad: false
-          }}
-        />
-        <Message
-          name="Bot"
-          role="bot"
-          avatar={patternflyAvatar}
-          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,
-            // eslint-disable-next-line no-console
-            onClose: () => console.log('closed feedback form'),
-            focusOnLoad: false
-          }}
-          isCompact
-        />
-      </Stack>
-      <Stack hasGutter>
-        <FormGroup role="radiogroup" isInline fieldId="feedback-thank-you" label="Variant">
-          <Checkbox
-            isChecked={hasCloseButton}
-            onChange={() => {
-              setHasCloseButton(!hasCloseButton);
+        </FlexItem>
+        <FlexItem>
+          <Message
+            name="Bot"
+            role="bot"
+            avatar={patternflyAvatar}
+            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,
+              // eslint-disable-next-line no-console
+              onClose: () => console.log('closed feedback form'),
+              focusOnLoad: false
             }}
-            name="basic-inline-radio"
-            label="Has close button"
-            id="has-close"
+            isCompact
           />
-        </FormGroup>
-        <Message
-          name="Bot"
-          role="bot"
-          avatar={patternflyAvatar}
-          content="This is a thank-you message, which is displayed once the feedback card is submitted:"
-          // eslint-disable-next-line no-console
-          userFeedbackComplete={{
+        </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"
+            avatar={patternflyAvatar}
+            content="This is a thank-you message, which is displayed once the feedback card is submitted:"
             // eslint-disable-next-line no-console
-            onClose: hasCloseButton ? () => console.log('closed completion message') : undefined,
-            focusOnLoad: false
-          }}
-        />
-        <Message
-          name="Bot"
-          role="bot"
-          avatar={patternflyAvatar}
-          content="This is a compact thank-you message, which is displayed once the feedback card is submitted:"
-          // eslint-disable-next-line no-console
-          userFeedbackComplete={{
+            userFeedbackComplete={{
+              // eslint-disable-next-line no-console
+              onClose: hasCloseButton ? () => console.log('closed completion message') : undefined,
+              focusOnLoad: false
+            }}
+          />
+        </FlexItem>
+        <FlexItem>
+          <Message
+            name="Bot"
+            role="bot"
+            avatar={patternflyAvatar}
+            content="This is a compact thank-you message, which is displayed once the feedback card is submitted:"
             // eslint-disable-next-line no-console
-            onClose: hasCloseButton ? () => console.log('closed completion message') : undefined,
-            focusOnLoad: false
-          }}
-          isCompact
-        />
-      </Stack>
+            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/MessageWithSources.tsx

@@ -1,6 +1,8 @@
 import { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
+import { Button, Flex, FlexItem, Label, Popover } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 
 export const MessageWithSourcesExample: FunctionComponent = () => {
   const onSetPage = (_event: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
@@ -8,8 +10,76 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
     console.log(`Page changed to ${newPage}`);
   };
 
+  const date = new Date();
+
+  const datePart = date.toLocaleDateString('en', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  });
+
+  const timePart = date.toLocaleTimeString('en', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true
+  });
+
+  const formattedDate = `${datePart}, ${timePart}`;
+
   return (
     <>
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="This example has a custom subtitle and footer with no pagination"
+        sources={{
+          sources: [
+            {
+              title: 'Getting started with Red Hat OpenShift',
+              subtitle: 'Red Hat knowledge base',
+              link: '#',
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
+              isExternal: true,
+              footer: (
+                <Flex className="pf-chatbot__sources-card-subtle" gap={{ default: 'gapXs' }}>
+                  <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
+                    <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+                      <FlexItem>
+                        <Label color="green">Confidence 93%</Label>
+                      </FlexItem>
+                      <FlexItem>
+                        <Popover
+                          headerContent={
+                            <Flex gap={{ default: 'gapXs' }}>
+                              <FlexItem>
+                                <OutlinedQuestionCircleIcon />
+                              </FlexItem>
+                              <FlexItem>Why this confidence score?</FlexItem>
+                            </Flex>
+                          }
+                          bodyContent={
+                            <>
+                              A high confidence score indicates a strong match. The system found significant overlap in
+                              key data points, including text content, names, dates, and organizational details, with a
+                              high degree of certainty. This match is highly reliable.
+                            </>
+                          }
+                        >
+                          <Button variant="link" icon={<OutlinedQuestionCircleIcon />}>
+                            Learn about this score
+                          </Button>
+                        </Popover>
+                      </FlexItem>
+                    </Flex>
+                  </FlexItem>
+                  <FlexItem>{`Last updated: ${formattedDate}`}</FlexItem>
+                </Flex>
+              )
+            }
+          ]
+        }}
+      />
       <Message
         name="Bot"
         role="bot"

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

@@ -0,0 +1,135 @@
+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);
+  };
+
+  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"
+            >
+              <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

@@ -34,10 +34,7 @@ import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';
 import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
-import { RobotIcon } from '@patternfly/react-icons/dist/esm/icons/robot-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
-import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
+import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CopyIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, OutlinedQuestionCircleIcon, RedoIcon, RobotIcon, WrenchIcon } from '@patternfly/react-icons';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
 import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails';
@@ -50,6 +47,7 @@ import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/Quic
 import userAvatar from './user_avatar.svg';
 import squareImg from './PF-social-color-square.svg';
 import { CSSProperties, useState, Fragment, FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, Ref, isValidElement, cloneElement, Children, ReactNode, useRef, useEffect } from 'react';
+import FilePreview from '@patternfly/chatbot/dist/dynamic/FilePreview';
 
 The `content` prop of the `<Message>` component is passed to a `<Markdown>` component (from [react-markdown](https://remarkjs.github.io/react-markdown/)), which is configured to translate plain text strings into PatternFly [`<Content>` components](/components/content) and code blocks into PatternFly [`<CodeBlock>` components.](/components/code-block)
 
@@ -181,6 +179,24 @@ The API for a source requires a link at minimum, but we strongly recommend provi
 
 ```
 
+### Messages with tool responses
+
+If you are using [model context protocol (MCP)](https://www.redhat.com/en/blog/model-context-protocol-discover-missing-link-ai-integration), you may find it useful to display information on tool responses as part of a message. Passing `toolResponse` to `<Message>` allows you to display a card with an optional subheading and body, as well as custom card content. Content is intentionally left fully customizable for now as this is an evolving area.
+
+```js file="./MessageWithToolResponse.tsx"
+
+```
+
+### Messages with deep thinking
+
+You can share details about the "thought process" behind an LLM's response, also known as deep thinking. To display a customizable, expandable card with these details, pass `deepThinking` to `<Message>` and provide a subheading (optional) and content body. 
+
+Because this is an evolving area, this card content is currently fully customizable.
+
+```js file="./MessageWithDeepThinking.tsx"
+
+```
+
 ### Messages with quick start tiles
 
 [Quick start](/extensions/quick-starts/) tiles can be added to messages via the `quickStarts` prop. Users can initiate the quick start from a link within the message tile.
@@ -258,6 +274,14 @@ To allow users to edit an attached file, load a new code editor within the ChatB
 
 ```
 
+### File preview
+
+If the contents of an attachment cannot be previewed, load a file preview modal with a view of the file name and an unavailable message. When users close the modal, return to the main ChatBot window.
+
+```js file="./FilePreview.tsx"
+
+```
+
 ### Failed attachment error
 
 When an attachment upload fails, a [danger alert](/components/alert) is displayed to provide details about the reason for failure.