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

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

@@ -1,4 +1,12 @@
-import { CSSProperties, useState, Fragment, FunctionComponent, MouseEvent, Ref } from 'react';
+import {
+  CSSProperties,
+  useState,
+  Fragment,
+  FunctionComponent,
+  MouseEvent as ReactMouseEvent,
+  KeyboardEvent as ReactKeyboardEvent,
+  Ref
+} from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import squareImg from './PF-social-color-square.svg';
@@ -44,6 +52,8 @@ export const BotMessageExample: FunctionComponent = () => {
         return table;
       case 'Image':
         return image;
+      case 'Footnote':
+        return footnote;
       default:
         return;
     }
@@ -150,6 +160,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: ',
@@ -165,8 +187,8 @@ _Italic text, formatted with single underscores_
     )
   };
 
-  const onSelect = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
-    setVariant(value);
+  const onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setVariant(value as string);
     setSelected(value as string);
     setIsOpen(false);
     if (value === 'Expandable code') {
@@ -196,6 +218,76 @@ _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('bot-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;
+
+        // If this is a backref link (going back to footnote reference),
+        // we want to highlight more of the ref line and not just the link itself
+        // since the target is so small
+        if (targetElement.id?.startsWith('bot-message-fnref-')) {
+          const refLink = targetElement;
+
+          // Walk up the DOM to find a meaningful container
+          let parent = refLink.parentElement;
+          while (parent && parent.tagName.toLowerCase() !== 'p' && parent !== document.body) {
+            parent = parent.parentElement;
+          }
+
+          // Use if found, otherwise use the immediate parent or target as a fallback
+          elementToHighlight = parent || refLink.parentElement || 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--background--color--tertiary--default)';
+
+        setTimeout(() => {
+          elementToHighlight.style.backgroundColor = originalBackground;
+          setTimeout(() => {
+            elementToHighlight.style.transition = originalTransition;
+          }, 300);
+        }, 1000);
+      }
+    }
+  };
+
+  const onClick = (event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {
+    handleFootnoteNavigation(event);
+  };
+
   return (
     <>
       <Message
@@ -248,6 +340,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>
@@ -265,6 +358,11 @@ _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: 'Bot message footnotes', clobberPrefix: 'bot-message-' }
+        }}
       />
     </>
   );

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/ImagePreview.tsx

@@ -0,0 +1,53 @@
+import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
+import { Button, Checkbox } from '@patternfly/react-core';
+import ImagePreview from '@patternfly/chatbot/dist/dynamic/ImagePreview';
+import filePreview from './file-preview.svg';
+
+export const AttachmentEditModalExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isCompact, setIsCompact] = useState(false);
+  const [hasNav, setHasNav] = useState(false);
+
+  const handleModalToggle = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Show multiple images"
+        isChecked={hasNav}
+        onChange={() => setHasNav(!hasNav)}
+        id="modal-compact-image-has-nav"
+        name="modal-compact-image-has-nav"
+      ></Checkbox>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="modal-compact-image-preview"
+        name="modal-compact-image-preview"
+      ></Checkbox>
+      <Button onClick={handleModalToggle}>Launch image preview modal</Button>
+      <ImagePreview
+        isModalOpen={isModalOpen}
+        handleModalToggle={handleModalToggle}
+        isCompact={isCompact}
+        onCloseFileDetailsLabel={() => {
+          // eslint-disable-next-line no-console
+          console.log('Clicked close button');
+        }}
+        images={
+          hasNav
+            ? /* eslint-disable indent */
+              [
+                { fileName: 'image1.png', fileSize: '134KB', image: <img src={filePreview} alt="Preview one" /> },
+                { fileName: 'image2.png', fileSize: '134KB', image: <img src={filePreview} alt="Preview two" /> }
+              ]
+            : [{ fileName: 'image.png', fileSize: '134KB', image: <img src={filePreview} alt="One" /> }]
+          /* eslint-enable indent */
+        }
+      ></ImagePreview>
+    </>
+  );
+};

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"