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) => ( +