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

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,9 @@ 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';
+import ImagePreview from '@patternfly/chatbot/dist/dynamic/ImagePreview';
+import filePreview from './file-preview.svg';
 
 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 +181,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 +276,22 @@ To allow users to edit an attached file, load a new code editor within the ChatB
 
 ```
 
+### Image preview
+
+To allow users to preview images, load a modal that contains a view of the file name, file size, and the image. Users can toggle between multiple images by using pagination controls at the bottom of the modal. Return users to the main ChatBot window once they close the modal.
+
+```js file="./ImagePreview.tsx"
+
+```
+
+### 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.

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

@@ -19,7 +19,7 @@ export const PreviewAttachmentExample: FunctionComponent = () => {
         id="modal-compact-preview"
         name="modal-compact-preview"
       ></Checkbox>
-      <Button onClick={handleModalToggle}>Launch modal</Button>
+      <Button onClick={handleModalToggle}>Launch attachment preview modal</Button>
       <PreviewAttachment
         code="I am a code snippet"
         fileName="test.yaml"

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

@@ -1,4 +1,14 @@
-import { Fragment, useState, useRef, useEffect, CSSProperties, FunctionComponent, MouseEvent, Ref } from 'react';
+import {
+  Fragment,
+  useState,
+  useRef,
+  useEffect,
+  CSSProperties,
+  FunctionComponent,
+  MouseEvent as ReactMouseEvent,
+  KeyboardEvent as ReactKeyboardEvent,
+  Ref
+} from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from './user_avatar.svg';
 import {
@@ -64,6 +74,8 @@ export const UserMessageExample: FunctionComponent = () => {
         return table;
       case 'Image':
         return image;
+      case 'Footnote':
+        return footnote;
       default:
         return '';
     }
@@ -170,6 +182,18 @@ _Italic text, formatted with single underscores_
 
   const image = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
 
+  const footnote = `This is some text that has a short footnote[^1] and this is text with a longer footnote.[^bignote]
+
+  [^1]: This is a short footnote. To return the highlight to the original message, click the arrow. 
+  
+  [^bignote]: This is a long footnote with multiple paragraphs and formatting.
+
+      To break long footnotes into paragraphs, indent the text. 
+
+      Add as many paragraphs as you like. You can include *italic text*, **bold text**, and \`code\`.
+
+      > You can even include blockquotes in footnotes!`;
+
   const error = {
     title: 'Could not load chat',
     children: 'Wait a few minutes and check your network settings. If the issue persists: ',
@@ -185,7 +209,7 @@ _Italic text, formatted with single underscores_
     )
   };
 
-  const onSelect = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+  const onSelect = (_event: ReactMouseEvent<Element> | undefined, value: string | number | undefined) => {
     setVariant(value);
     setSelected(value as string);
     setIsOpen(false);
@@ -221,6 +245,78 @@ _Italic text, formatted with single underscores_
     </MenuToggle>
   );
 
+  const handleFootnoteNavigation = (event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {
+    const target = event.target as HTMLElement;
+
+    // Depending on whether it is a click event or keyboard event, target may be a link or something like a span
+    // Look for the closest anchor element (could be a parent)
+    const anchorElement = target.closest('a');
+    const href = anchorElement?.getAttribute('href');
+
+    // Check if this is a footnote link - we only have internal links in this example, so this is all we need here
+    if (href && href.startsWith('#')) {
+      // Prevent default behavior to avoid page re-render on click in PatternFly docs framework
+      event.preventDefault();
+
+      let targetElement: HTMLElement | null = null;
+      const targetId = href.replace('#', '');
+      targetElement = document.querySelector(`[id="${targetId}"]`);
+
+      if (targetElement) {
+        let focusTarget = targetElement;
+
+        // If we found a footnote definition container, focus on the parent li element
+        if (targetElement.id?.startsWith('user-message-fn-')) {
+          // Find the parent li element that contains the footnote
+          const parentLi = targetElement.closest('li');
+          if (parentLi) {
+            focusTarget = parentLi as HTMLElement;
+          }
+        }
+
+        focusTarget.focus();
+
+        let elementToHighlight = targetElement;
+        const searchStartElement = targetElement;
+        let elementToHighlightContainer: HTMLElement | null = null;
+
+        // For footnote references, look for an appropriate container
+        if (!targetElement.id?.startsWith('user-message-fn-')) {
+          let parent = searchStartElement.parentElement;
+          while (
+            parent &&
+            !(parent.tagName.toLowerCase() === 'span' && parent.classList.contains('pf-chatbot__message-text')) &&
+            parent !== document.body
+          ) {
+            parent = parent.parentElement;
+          }
+          elementToHighlightContainer = parent;
+        }
+
+        // Use the found container if available, otherwise fall back to the target element
+        elementToHighlight = elementToHighlightContainer || targetElement;
+
+        // Briefly highlight the target element for fun to show what you can do
+        const originalBackground = elementToHighlight.style.backgroundColor;
+        const originalTransition = elementToHighlight.style.transition;
+
+        elementToHighlight.style.transition = 'background-color 0.3s ease';
+        elementToHighlight.style.backgroundColor = 'var(--pf-t--global--icon--color--brand--hover)';
+
+        setTimeout(() => {
+          elementToHighlight.style.backgroundColor = originalBackground;
+          setTimeout(() => {
+            elementToHighlight.style.transition = originalTransition;
+          }, 300);
+        }, 1000);
+      }
+    }
+  };
+
+  const onClick = (event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {
+    handleFootnoteNavigation(event);
+  };
+
   return (
     <>
       <Message
@@ -270,6 +366,7 @@ _Italic text, formatted with single underscores_
           <SelectOption value="More complex list">More complex list</SelectOption>
           <SelectOption value="Table">Table</SelectOption>
           <SelectOption value="Image">Image</SelectOption>
+          <SelectOption value="Footnote">Footnote</SelectOption>
           <SelectOption value="Error">Error</SelectOption>
         </SelectList>
       </Select>
@@ -287,6 +384,14 @@ _Italic text, formatted with single underscores_
         // The purpose of this plugin is to provide unique link names for the code blocks
         // Because they are in the same message, this requires a custom plugin to parse the syntax tree
         additionalRehypePlugins={[rehypeCodeBlockToggle]}
+        linkProps={{ onClick }}
+        // clobberPrefix controls the label ids
+        reactMarkdownProps={{
+          remarkRehypeOptions: {
+            footnoteLabel: 'User message footnotes',
+            clobberPrefix: 'user-message-'
+          }
+        }}
       />
     </>
   );