Merge pull request #846 from thatblindgeye/iss815

thatblindgeye · web-flow · commit dba0d76d51ae · 2026-06-05T13:57:43.000-04:00
fix(ChatbotFootnote): updated verbiage and combined examples
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFooter.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFooter.tsx
@@ -8,7 +8,7 @@ export const ChatbotFooterExample: FunctionComponent = () => {
   return (
     <ChatbotFooter>
       <MessageBar onSendMessage={handleSend} hasMicrophoneButton hasAttachButton />
-      <ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
+      <ChatbotFootnote label="Always review AI-generated content prior to use." />
     </ChatbotFooter>
   );
 };
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFootnote.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFootnote.tsx
@@ -2,25 +2,31 @@ import { FunctionComponent } from 'react';
 import { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
 
 export const FootnoteDemo: FunctionComponent = () => (
-  <ChatbotFootnote
-    label="ChatBot uses AI. Check for mistakes."
-    popover={{
-      title: 'Verify information',
-      description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
-      bannerImage: {
-        src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
-        alt: 'Example image for footnote popover'
-      },
-      cta: {
-        label: 'Dismiss',
-        onClick: () => {
-          alert('Do something!');
+  <>
+    <h4>Static text</h4>
+    <ChatbotFootnote label="Always review AI-generated content prior to use." />
+    <br />
+    <h4>With popover</h4>
+    <ChatbotFootnote
+      label="Always review AI-generated content prior to use."
+      popover={{
+        title: 'Verify information',
+        description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
+        bannerImage: {
+          src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
+          alt: 'Example image for footnote popover'
+        },
+        cta: {
+          label: 'Dismiss',
+          onClick: () => {
+            alert('Do something!');
+          }
+        },
+        link: {
+          label: 'View AI policy',
+          url: 'https://www.redhat.com/'
         }
-      },
-      link: {
-        label: 'View AI policy',
-        url: 'https://www.redhat.com/'
-      }
-    }}
-  />
+      }}
+    />
+  </>
 );
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md
@@ -240,10 +240,11 @@ In this example, select the respective checkbox to toggle these features:
 
 ## Footer
 
-### Footnote with popover
+### Footnote
 
-A footnote can be placed in the ChatBot footer to communicate any legal disclaimers or information about the ChatBot.
-Footnotes can be static text or a button that opens a popover.
+A `<ChatbotFootnote>` can be placed in the ChatBot footer to communicate any legal disclaimers or information about the ChatBot.
+
+To create a static text footnote, pass the `label` property. To create a footnote button that triggers a popover, pass in both the `label` and `popover` properties.
 
 ```js file="./ChatbotFootnote.tsx"
 
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx
@@ -37,25 +37,7 @@ import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
 const footnoteProps = {
-  label: 'ChatBot uses AI. Check for mistakes.',
-  popover: {
-    title: 'Verify information',
-    description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
-    bannerImage: {
-      src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
-      alt: 'Example image for footnote popover'
-    },
-    cta: {
-      label: 'Dismiss',
-      onClick: () => {
-        alert('Do something!');
-      }
-    },
-    link: {
-      label: 'View AI policy',
-      url: 'https://www.redhat.com/'
-    }
-  }
+  label: 'Always review AI-generated content prior to use.'
 };
 
 const markdown = `A paragraph with *emphasis* and **strong importance**.
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx
@@ -273,7 +273,7 @@ export const BasicDemo: FunctionComponent = () => {
               }}
               onAttachRejected={handleAttachRejected}
             />
-            <ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
+            <ChatbotFootnote label="Always review AI-generated content prior to use." />
           </ChatbotFooter>
         </FileDropZone>
       </Chatbot>
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx
@@ -262,7 +262,7 @@ export const AttachmentMenuDemo: FunctionComponent = () => {
                   onAttachMenuToggleClick: onToggleClick
                 }}
               />
-              <ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
+              <ChatbotFootnote label="Always review AI-generated content prior to use." />
             </ChatbotFooter>
           </>
         </FileDropZone>
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotCompact.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotCompact.tsx
@@ -33,25 +33,7 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 const footnoteProps = {
-  label: 'ChatBot uses AI. Check for mistakes.',
-  popover: {
-    title: 'Verify information',
-    description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
-    bannerImage: {
-      src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
-      alt: 'Example image for footnote popover'
-    },
-    cta: {
-      label: 'Dismiss',
-      onClick: () => {
-        alert('Do something!');
-      }
-    },
-    link: {
-      label: 'View AI policy',
-      url: 'https://www.redhat.com/'
-    }
-  }
+  label: 'Always review AI-generated content prior to use.'
 };
 
 const markdown = `A paragraph with *emphasis* and **strong importance**.
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotDisplayMode.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotDisplayMode.tsx
@@ -53,25 +53,7 @@ import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
 const footnoteProps = {
-  label: 'ChatBot uses AI. Check for mistakes.',
-  popover: {
-    title: 'Verify accuracy',
-    description: `While ChatBot strives for accuracy, there's always a possibility of errors. It's a good practice to verify critical information from reliable sources, especially if it's crucial for decision-making or actions.`,
-    bannerImage: {
-      src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
-      alt: 'Example image for footnote popover'
-    },
-    cta: {
-      label: 'Got it',
-      onClick: () => {
-        alert('Do something!');
-      }
-    },
-    link: {
-      label: 'Learn more',
-      url: 'https://www.redhat.com/'
-    }
-  }
+  label: 'Always review AI-generated content prior to use.'
 };
 
 const markdown = `A paragraph with *emphasis* and **strong importance**.`;
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx
@@ -46,25 +46,7 @@ import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
 const footnoteProps = {
-  label: 'ChatBot uses AI. Check for mistakes.',
-  popover: {
-    title: 'Verify accuracy',
-    description: `While ChatBot strives for accuracy, there's always a possibility of errors. It's a good practice to verify critical information from reliable sources, especially if it's crucial for decision-making or actions.`,
-    bannerImage: {
-      src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
-      alt: 'Example image for footnote popover'
-    },
-    cta: {
-      label: 'Got it',
-      onClick: () => {
-        alert('Do something!');
-      }
-    },
-    link: {
-      label: 'Learn more',
-      url: 'https://www.redhat.com/'
-    }
-  }
+  label: 'Always review AI-generated content prior to use.'
 };
 
 const markdown = `A paragraph with *emphasis* and **strong importance**.
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotScrolling.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotScrolling.tsx
@@ -36,25 +36,7 @@ import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
 const footnoteProps = {
-  label: 'ChatBot uses AI. Check for mistakes.',
-  popover: {
-    title: 'Verify information',
-    description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
-    bannerImage: {
-      src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
-      alt: 'Example image for footnote popover'
-    },
-    cta: {
-      label: 'Dismiss',
-      onClick: () => {
-        alert('Do something!');
-      }
-    },
-    link: {
-      label: 'View AI policy',
-      url: 'https://www.redhat.com/'
-    }
-  }
+  label: 'Always review AI-generated content prior to use.'
 };
 
 const markdown = `A paragraph with *emphasis* and **strong importance**.
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotTranscripts.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotTranscripts.tsx
@@ -36,25 +36,7 @@ import '@patternfly/chatbot/dist/css/main.css';
 import saveAs from 'file-saver';
 
 const footnoteProps = {
-  label: 'ChatBot uses AI. Check for mistakes.',
-  popover: {
-    title: 'Verify information',
-    description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
-    bannerImage: {
-      src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
-      alt: 'Example image for footnote popover'
-    },
-    cta: {
-      label: 'Dismiss',
-      onClick: () => {
-        alert('Do something!');
-      }
-    },
-    link: {
-      label: 'View AI policy',
-      url: 'https://www.redhat.com/'
-    }
-  }
+  label: 'Always review AI-generated content prior to use.'
 };
 
 const markdown = `A paragraph with *emphasis* and **strong importance**.
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx
@@ -44,25 +44,7 @@ import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
 const footnoteProps = {
-  label: 'ChatBot uses AI. Check for mistakes.',
-  popover: {
-    title: 'Verify information',
-    description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
-    bannerImage: {
-      src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
-      alt: 'Example image for footnote popover'
-    },
-    cta: {
-      label: 'Dismiss',
-      onClick: () => {
-        alert('Do something!');
-      }
-    },
-    link: {
-      label: 'View AI policy',
-      url: 'https://www.redhat.com/'
-    }
-  }
+  label: 'Always review AI-generated content prior to use.'
 };
 
 const markdown = `A paragraph with *emphasis* and **strong importance**.
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/WhiteEmbeddedChatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/WhiteEmbeddedChatbot.tsx
@@ -44,25 +44,7 @@ import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
 const footnoteProps = {
-  label: 'ChatBot uses AI. Check for mistakes.',
-  popover: {
-    title: 'Verify information',
-    description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
-    bannerImage: {
-      src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
-      alt: 'Example image for footnote popover'
-    },
-    cta: {
-      label: 'Dismiss',
-      onClick: () => {
-        alert('Do something!');
-      }
-    },
-    link: {
-      label: 'View AI policy',
-      url: 'https://www.redhat.com/'
-    }
-  }
+  label: 'Always review AI-generated content prior to use.'
 };
 
 const markdown = `A paragraph with *emphasis* and **strong importance**.
diff --git a/packages/module/src/ChatbotFooter/ChatbotFootnote.tsx b/packages/module/src/ChatbotFooter/ChatbotFootnote.tsx
@@ -5,15 +5,8 @@
 import type { HTMLProps, FunctionComponent } from 'react';
 
 import { useState } from 'react';
-
-// Import Patternfly components
 import { Button, Content, ContentVariants, Flex, PopoverProps } from '@patternfly/react-core';
-
-// Import Patternfly icons
-import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
-
-// Import Chatbot components
 import ChatbotPopover from '../ChatbotPopover/ChatbotPopover';
 
 export interface ChatbotFootnoteProps extends Omit<HTMLProps<HTMLDivElement>, 'popover'> {
@@ -38,6 +31,10 @@ export interface ChatbotFootnotePopover {
   link?: ChatbotFootnotePopoverLink;
   /** Props for PF Popover */
   popoverProps?: PopoverProps;
+  /** Flag indicating whether the popover close button is rendered. Either this or a cta that closes the popover
+   * must be present.
+   */
+  showClose?: boolean;
 }
 
 export interface ChatbotFootnotePopoverCTA {
@@ -66,10 +63,15 @@ export const ChatbotFootnote: FunctionComponent<ChatbotFootnoteProps> = ({
   className,
   ...props
 }: ChatbotFootnoteProps) => {
-  // Popover visibility state
+  if (!popover?.cta && !popover?.showClose) {
+    // eslint-disable-next-line no-console
+    console.error(
+      'ChatbotFootnote: You must provide either the popover.cta or popover.showClose props in order to render a button that can close the popover.'
+    );
+  }
+
   const [isVisible, setIsVisible] = useState<boolean>(false);
 
-  // Define popover body content
   const popoverBodyContent = (
     <>
       {popover?.bannerImage && <img src={popover.bannerImage.src} alt={popover.bannerImage.alt} />}
@@ -121,11 +123,11 @@ export const ChatbotFootnote: FunctionComponent<ChatbotFootnoteProps> = ({
           minWidth={popover.popoverProps?.minWidth || '432'}
           maxWidth={popover.popoverProps?.maxWidth || '432'}
           distance={popover.popoverProps?.distance || 16}
-          showClose={false}
+          showClose={popover?.showClose || false}
           {...popover.popoverProps}
         >
-          <Button variant="link" size="sm">
-            {label} <InfoCircleIcon />
+          <Button aria-haspopup="dialog" isExpanded={isVisible} variant="link" size="sm">
+            {label}
           </Button>
         </ChatbotPopover>
       )}
