diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/ChatbotAttachment.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/ChatbotAttachment.md
index 5960819..dd89e3f 100644
--- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/ChatbotAttachment.md
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/ChatbotAttachment.md
@@ -10,7 +10,7 @@ id: Chatbot attachment
source: react
# If you use typescript, the name of the interface to display props for
# These are found through the sourceProps function provided in patternfly-docs.source.js
-propComponents: ['AttachMenu', 'AttachmentEdit', 'FileDetails', 'FileDetailsLabel', 'FileDropZone', 'PreviewAttachment']
+propComponents: ['AttachMenu', 'AttachmentEdit', 'FileDetails', 'FileDetailsLabel', 'FileDropZone', 'PreviewAttachment', 'SourceDetailsMenuItem']
---
import AttachmentEdit from '@patternfly/virtual-assistant/dist/dynamic/AttachmentEdit';
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotFooter.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotFooter.md
index 8ceab8b..3a85b02 100644
--- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotFooter.md
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotFooter.md
@@ -5,7 +5,7 @@ section: extensions
subsection: Chat bots / AI
# Sidenav secondary level section
# should be the same for all markdown files
-id: Chatbot Footer
+id: Chatbot footer
# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
source: react
# If you use typescript, the name of the interface to display props for
@@ -19,14 +19,46 @@ propComponents:
'ChatbotFootnotePopoverCTA',
'ChatbotFootnotePopoverBannerImage',
'ChatbotFootnotePopoverLink',
- 'MessageBarWithAttachMenuProps'
+ 'MessageBarWithAttachMenuProps',
+ 'SourceDetailsMenuItem'
]
---
import { ChatbotFooter, ChatbotFootnote } from '@patternfly/virtual-assistant/dist/dynamic/ChatbotFooter';
import { MessageBar } from '@patternfly/virtual-assistant/dist/dynamic/MessageBar';
+import SourceDetailsMenuItem from '@patternfly/virtual-assistant/dist/dynamic/SourceDetailsMenuItem';
+import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
-### Basic example
+
+### Footnote with popover
+A footnote can be placed in a chatbot footer to display any legal disclaimers or information about the chatbot.
+Footnotes can be static text or a button which triggers a popover.
+
+```js file="./ChatbotFootnote.tsx"
+
+```
+
+### Message bar with speech to text
+By default the message bar enables uploading files. Setting the `hasAttachButton` to `false` will disable that feature.
+
+```js file="./ChatbotMessageBar.tsx"
+
+```
+
+### Message bar with attach menu appended to attach button
+```js file="./ChatbotMessageBarAttach.tsx"
+
+```
+
+### Simple footer with Message bar and footnote
+
+Footers contain the message bar and optional interactive footnote
+```noLive
+
+
+
+
+```
```js file="./ChatbotFooter.tsx"
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotFooter.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotFooter.tsx
index d1fb9c1..7322f2e 100644
--- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotFooter.tsx
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotFooter.tsx
@@ -2,35 +2,13 @@ import React from 'react';
import { ChatbotFooter, ChatbotFootnote } from '@patternfly/virtual-assistant/dist/dynamic/ChatbotFooter';
import { MessageBar } from '@patternfly/virtual-assistant/dist/dynamic/MessageBar';
-const footnoteProps = {
- label: 'Lightspeed uses AI. Check for mistakes.',
- popover: {
- title: 'Verify accuracy',
- description: `While Lightspeed 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/'
- }
- }
-};
-
-export const BasicDemo: React.FunctionComponent = () => {
+export const ChatbotFooterExample: React.FunctionComponent = () => {
const handleSend = (message) => alert(message);
return (
-
+
);
};
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotFootnote.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotFootnote.tsx
new file mode 100644
index 0000000..8e9eb90
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotFootnote.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { ChatbotFootnote } from '@patternfly/virtual-assistant/dist/dynamic/ChatbotFooter';
+
+export const FootnoteDemo: React.FunctionComponent = () => (
+ {
+ alert('Do something!');
+ }
+ },
+ link: {
+ label: 'Learn more',
+ url: 'https://www.redhat.com/'
+ }
+ }}
+ />
+);
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotMessageBar.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotMessageBar.tsx
new file mode 100644
index 0000000..ab6c221
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotMessageBar.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { MessageBar } from '@patternfly/virtual-assistant/dist/dynamic/MessageBar';
+
+export const ChatbotMessageBarExample: React.FunctionComponent = () => {
+ const handleSend = (message) => alert(message);
+
+ return ;
+};
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotMessageBarAttach.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotMessageBarAttach.tsx
new file mode 100644
index 0000000..ad6857e
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotMessageBarAttach.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import { MessageBar } from '@patternfly/virtual-assistant/dist/dynamic/MessageBar';
+import SourceDetailsMenuItem from '@patternfly/virtual-assistant/dist/dynamic/SourceDetailsMenuItem';
+import { Divider, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
+import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
+
+export const ChatbotMessageBarDefaultAttachExample: React.FunctionComponent = () => {
+ const [isOpen, setIsOpen] = React.useState(false);
+ const [userFacingMenuItems, setUserFacingMenuItems] = React.useState([]);
+
+ const handleSend = (message) => alert(message);
+
+ const onTextChange = (textValue: string) => {
+ if (textValue === '') {
+ setUserFacingMenuItems(initialMenuItems.concat(uploadMenuItems));
+ return;
+ }
+
+ const newMenuItems = findMatchingElements(initialMenuItems, textValue);
+ // this is necessary because the React nodes we find traversing the recursive search
+ // aren't correctly wrapped in a DropdownList. This leads to problems with the
+ // auth-operator item where it winds up floating in a bad place in the DOM and never
+ // gets removed
+ setUserFacingMenuItems(
+ <>
+
+ {newMenuItems.length === 0 ? (
+ No results found
+ ) : (
+ newMenuItems.map((item) => item)
+ )}
+
+ {uploadMenuItems.map((item) => item)}
+ >
+ );
+ };
+
+ const onToggleClick = () => {
+ setUserFacingMenuItems(initialMenuItems.concat(uploadMenuItems));
+ };
+
+ const initialMenuItems = [
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ name="auth-operator"
+ type="Pod"
+ />
+
+ ,
+
+
+ }>
+ Alerts
+
+ }>
+ Events
+
+ }>
+ Logs
+
+ }>
+ YAML - Status
+
+ }>
+ YAML - All contents
+
+
+
+ ];
+
+ const uploadMenuItems = [
+ ,
+
+ {
+ open();
+ setIsOpen(!isOpen);
+ }}
+ key="upload"
+ value="upload"
+ id="upload"
+ icon={}
+ >
+ Upload from computer
+
+
+ ];
+
+ return (
+ {
+ // eslint-disable-next-line no-console
+ console.log('selected', value);
+ },
+ attachMenuInputPlaceholder: 'Search cluster resources...',
+ onAttachMenuInputChange: onTextChange,
+ onAttachMenuToggleClick: onToggleClick
+ }}
+ />
+ );
+};
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotHeader/ChatbotHeader.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotHeader/ChatbotHeader.md
index a98dd32..7603ece 100644
--- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotHeader/ChatbotHeader.md
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotHeader/ChatbotHeader.md
@@ -38,7 +38,7 @@ import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-dra
import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg';
import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
-### Basic example
+### Chatbot header with controls
```js file="./ChatbotHeaderBasic.tsx"
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/ChatbotMessage.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/ChatbotMessage.md
new file mode 100644
index 0000000..66cc99d
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/ChatbotMessage.md
@@ -0,0 +1,12 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Chat bots / AI
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Chatbot messages
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+---
+
diff --git a/packages/module/src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx b/packages/module/src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx
index 7b38543..7caf247 100644
--- a/packages/module/src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx
+++ b/packages/module/src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx
@@ -1,7 +1,7 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
import { Icon, Flex, Stack, StackItem } from '@patternfly/react-core';
-interface SourceDetailsMenuItemProps {
+export interface SourceDetailsMenuItemProps extends React.HTMLProps {
/** Icon */
icon: React.ReactNode;
/** Name of source */
@@ -10,8 +10,13 @@ interface SourceDetailsMenuItemProps {
type?: string;
}
-export const SourceDetailsMenuItem = ({ icon, name, type }: PropsWithChildren) => (
-
+export const SourceDetailsMenuItem: React.FunctionComponent = ({
+ icon,
+ name,
+ type,
+ ...props
+}: SourceDetailsMenuItemProps) => (
+