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 5f28e2bf..cb5703bf 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 96eb85f1..10206f96 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 42268f66..1a8a8af7 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.
+
+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
index 8c7b284f..eb1ff5de 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 228efd98..01bd49d2 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 04488061..b3320ec6 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 f7ccf5b0..3245ff5b 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 1b0e305b..06db70f1 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 7f07c061..629fa2fb 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 293555d9..2722d4cb 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 21dd794c..c169b6df 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 ec54452b..fff5e6d9 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 8b40a1da..07d4dd05 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 87415896..f948e26b 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'> {
@@ -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 = ({
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 &&
}
@@ -121,11 +123,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}
>
-