From 4829fbdd07e093129f0926239f49dfac98a8e89b Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 3 Jun 2026 16:35:05 -0400 Subject: [PATCH 1/3] fix(ChatbotFootnote): updated verbiage and combined examples --- .../chatbot/examples/UI/ChatbotFooter.tsx | 2 +- .../chatbot/examples/UI/ChatbotFootnote.tsx | 46 +++++++++++-------- .../extensions/chatbot/examples/UI/UI.md | 7 +-- .../chatbot/examples/demos/Chatbot.tsx | 20 +------- .../examples/demos/ChatbotAttachment.tsx | 2 +- .../examples/demos/ChatbotAttachmentMenu.tsx | 2 +- .../chatbot/examples/demos/ChatbotCompact.tsx | 20 +------- .../examples/demos/ChatbotDisplayMode.tsx | 20 +------- .../examples/demos/ChatbotInDrawer.tsx | 20 +------- .../examples/demos/ChatbotScrolling.tsx | 20 +------- .../examples/demos/ChatbotTranscripts.tsx | 20 +------- .../examples/demos/EmbeddedChatbot.tsx | 20 +------- .../examples/demos/WhiteEmbeddedChatbot.tsx | 20 +------- .../src/ChatbotFooter/ChatbotFootnote.tsx | 19 ++++++-- 14 files changed, 55 insertions(+), 183 deletions(-) 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 index 5f28e2bfc..cb5703bf8 100644 --- 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 ( - + ); }; 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 index 96eb85f12..10206f96c 100644 --- 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 = () => ( - { - alert('Do something!'); + <> +

Static text

+ +
+

With popover

+ { + 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 index 42268f667..92124156b 100644 --- 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 `` can be placed in the ChatBot footer to communicate any legal disclaimers or information about the ChatBot. + +The footnote can be static text by passing the `label` property, or it can be a button that triggers a popover by also passing the `popover` property. ```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 index 8c7b284f2..eb1ff5de5 100644 --- 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 index 228efd989..01bd49d2f 100644 --- 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} /> - + 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 index 04488061a..b3320ec64 100644 --- 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 }} /> - + 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 index f7ccf5b0a..3245ff5b1 100644 --- 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 index 1b0e305b8..06db70f14 100644 --- 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 index 7f07c0616..629fa2fb8 100644 --- 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 index 293555d93..2722d4cb7 100644 --- 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 index 21dd794c0..c169b6df4 100644 --- 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 index ec54452b4..fff5e6d96 100644 --- 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 index 8b40a1da8..07d4dd056 100644 --- 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 index 874158961..6a627f72b 100644 --- a/packages/module/src/ChatbotFooter/ChatbotFootnote.tsx +++ b/packages/module/src/ChatbotFooter/ChatbotFootnote.tsx @@ -38,6 +38,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 +70,15 @@ export const ChatbotFootnote: FunctionComponent = ({ 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(false); - // Define popover body content const popoverBodyContent = ( <> {popover?.bannerImage && {popover.bannerImage.alt}} @@ -121,11 +130,11 @@ export const ChatbotFootnote: FunctionComponent = ({ minWidth={popover.popoverProps?.minWidth || '432'} maxWidth={popover.popoverProps?.maxWidth || '432'} distance={popover.popoverProps?.distance || 16} - showClose={false} + showClose={popover?.showClose || false} {...popover.popoverProps} > - )} From b90aafc103ba76a2b9a650ef0ea0568d124188ed Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 3 Jun 2026 16:43:29 -0400 Subject: [PATCH 2/3] Fixed lint error --- packages/module/src/ChatbotFooter/ChatbotFootnote.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/module/src/ChatbotFooter/ChatbotFootnote.tsx b/packages/module/src/ChatbotFooter/ChatbotFootnote.tsx index 6a627f72b..f948e26b3 100644 --- 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, 'popover'> { From 4760af5be103dd56f29a8f22b5986e0e31e8c250 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 5 Jun 2026 10:33:27 -0400 Subject: [PATCH 3/3] Erin feedback --- .../content/extensions/chatbot/examples/UI/UI.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 92124156b..1a8a8af7e 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md @@ -244,7 +244,7 @@ In this example, select the respective checkbox to toggle these features: A `` can be placed in the ChatBot footer to communicate any legal disclaimers or information about the ChatBot. -The footnote can be static text by passing the `label` property, or it can be a button that triggers a popover by also passing the `popover` property. +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"