diff --git a/.gitignore b/.gitignore index 6f782c7fc..2ce58ee10 100644 --- a/.gitignore +++ b/.gitignore @@ -13,6 +13,8 @@ results .eslintcache generated +!generated/**/*.png + # package managers lerna-debug.log diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/about-virtual-assistant.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/about-virtual-assistant.md index 50ff31c92..01ce37b22 100644 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/about-virtual-assistant.md +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/about-virtual-assistant.md @@ -1,8 +1,9 @@ --- section: PatternFly-AI subsection: Chatbot -id: About chatbot +id: Overview sortValue: 1 +source: About --- **Note:** The PatternFly chatbot extension lives in its own package [`@patternfly/virtual-assistant`](https://www.npmjs.com/package/@patternfly/virtual-assistant) @@ -13,15 +14,15 @@ It is important to leverage AI in a way that improves the experiences of your us ## How to use the chatbot -To illustrate the capabilities of the chatbot, we offer a [chatbot container demo](/patternfly-ai/chatbot/chatbot-container/react-demos) and a [chatbot attachments demo](/patternfly-ai/chatbot/chatbot-attachments/react-demos). To learn how to write for chatbot experiences, refer to our [chatbot writing guidelines.](/patternfly-ai/conversation-design/#writing-for-chatbots) +To illustrate the capabilities of the chatbot, we offer a [chatbot container demo](/patternfly-ai/chatbot/overview/demo) and a [chatbot attachments demo](/patternfly-ai/chatbot/messages/demo). To learn how to write for chatbot experiences, refer to our [chatbot writing guidelines.](/patternfly-ai/conversation-design/#writing-for-chatbots) We currently support the follow features to customize your chatbot experience: -- [The chatbot container](/patternfly-ai/chatbot/chatbot-container) -- [A toggle for the chatbot container](/patternfly-ai/chatbot/chatbot-toggle) -- [The chatbot header](/patternfly-ai/chatbot/chatbot-header) -- [The chatbot footer](/patternfly-ai/chatbot/chatbot-footer) -- [Messages, from the chatbot and from users](/patternfly-ai/chatbot/chatbot-messages) -- [Chatbot attachments](/patternfly-ai/chatbot/chatbot-attachments) -- [Conversation history](/patternfly-ai/chatbot/chatbot-conversation-history) +- [The chatbot container](/patternfly-ai/chatbot/ui#container) +- [A toggle for the chatbot container](/patternfly-ai/chatbot/ui#toggle) +- [The chatbot header](/patternfly-ai/chatbot/ui#header) +- [The chatbot footer](/patternfly-ai/chatbot/ui#footer) +- [Messages, from the chatbot and from users](/patternfly-ai/chatbot/messages) +- [Chatbot attachments](/patternfly-ai/chatbot/messages#attachments) +- [Conversation history](/patternfly-ai/chatbot/ui#navigation) We will continue to grow and evolve our chatbot. If you notice a bug or have any suggestions, feel free to file an issue in our [GitHub repository!](https://github.com/patternfly/virtual-assistant/issues) Make sure to check if there is already a pre-existing issue before creating a new one. \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Chatbot/Chatbot.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Chatbot/Chatbot.md deleted file mode 100644 index c73cb88f5..000000000 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Chatbot/Chatbot.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -# Sidenav top-level section -# should be the same for all markdown files -section: PatternFly-AI -subsection: Chatbot -# Sidenav secondary level section -# should be the same for all markdown files -id: Chatbot container -# 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 -# These are found through the sourceProps function provided in patternfly-docs.source.js -propComponents: [ -'Chatbot', -'ChatbotContent', -'MessageBox', -'ChatbotWelcomePrompt', -'WelcomePrompt' -] -sortValue: 2 ---- - -import Chatbot, { ChatbotDisplayMode } from '@patternfly/virtual-assistant/dist/dynamic/Chatbot'; -import ChatbotContent from '@patternfly/virtual-assistant/dist/dynamic/ChatbotContent'; -import ChatbotWelcomePrompt from '@patternfly/virtual-assistant/dist/dynamic/ChatbotWelcomePrompt'; -import MessageBox from '@patternfly/virtual-assistant/dist/dynamic/MessageBox'; -import Message from '@patternfly/virtual-assistant/dist/dynamic/Message'; -import ChatbotToggle from '@patternfly/virtual-assistant/dist/dynamic/ChatbotToggle'; - -### Container - -The PatternFly chatbot is a separate window that overlays or is embedded within other UI content. This container can be shown and hidden via [the chatbot toggle.](/patternfly-ai/chatbot/chatbot-toggle) - -The `` component is the container that encompasses the chatbot experience. It adapts to various display modes (overlay/default, docked, fullscreen, and embedded) and supports both light and dark themes. - -The "embedded" display mode is meant to be used within a [PatternFly page](/components/page) or other container within your product. - -```js file="./ChatbotContainer.tsx" isFullscreen - -``` - -### Content and message box - -The `` component is the container that is placed within the ``, between the [``](/patternfly-ai/chatbot/chatbot-header) and [``.](/patternfly-ai/chatbot/chatbot-footer) -
-
-`` usually contains a `` for displaying messages. -
-
-Your code structure should look like this: - -```noLive - - - - - ... - - - - -``` - -**Note**: When messages update, it is important to announce new messages to users of assistive technology. To do this, make sure to set the `announcement` prop on `` whenever you display a new message in ``. You can view this in action in our [basic chatbot](/patternfly-ai/chatbot/chatbot-container/react-demos#basic-chatbot) and [embedded chatbot](/patternfly-ai/chatbot/chatbot-container/react-demos#embedded-chatbot) demos. - -### Welcome prompt - -To introduce users to the chatbot experience, a welcome prompt can fill the message box before they input their first message. This brief message should follow our [conversation design guidelines](/patternfly-ai/conversation-design) to welcome users to the chatbot experience and encourage them to interact. - -To provide users with a more specific direction, you can also include optional welcome prompts. - -```js file="./ChatbotWelcomePrompt.tsx" - -``` - -### Skip to content - -To provide page context, we recommend using a "skip to chatbot" button. This allows you to skip past other content on the page, directly to the chatbot content, using a [PatternFly skip to content component](/components/skip-to-content). To display this button, you must tab into the main window. -
-
-When using default or docked modes, we recommend putting focus on the toggle if the chatbot is closed, and the chatbot when it is open. For fullscreen and embedded, we recommend putting the focus on the first focusable item in the chatbot, such as a menu toggle. This can be seen in our more fully-featured demos for the [default, embedded, and fullscreen chatbot](patternfly-ai/chatbot/chatbot-container/react-demos/basic-chatbot) and the [embedded chatbot](/patternfly-ai/chatbot/chatbot-container/react-demos/embedded-chatbot). - -```js file="./SkipToContent.tsx" isFullscreen - -``` 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 deleted file mode 100644 index 67d66e0cc..000000000 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/ChatbotAttachment.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -# Sidenav top-level section -# should be the same for all markdown files -section: PatternFly-AI -subsection: Chatbot -# Sidenav secondary level section -# should be the same for all markdown files -id: Chatbot attachments -# 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 -# These are found through the sourceProps function provided in patternfly-docs.source.js -propComponents: ['AttachMenu', 'AttachmentEdit', 'FileDetails', 'FileDetailsLabel', 'FileDropZone', 'PreviewAttachment'] -sortValue: 7 ---- - -import AttachmentEdit from '@patternfly/virtual-assistant/dist/dynamic/AttachmentEdit'; -import FileDetails from '@patternfly/virtual-assistant/dist/dynamic/FileDetails'; -import FileDetailsLabel from '@patternfly/virtual-assistant/dist/dynamic/FileDetailsLabel'; -import FileDropZone from '@patternfly/virtual-assistant/dist/dynamic/FileDropZone'; -import { PreviewAttachment } from '@patternfly/virtual-assistant/dist/dynamic/PreviewAttachment'; -import ChatbotAlert from '@patternfly/virtual-assistant/dist/dynamic/ChatbotAlert'; - -We are using [react-dropzone](https://react-dropzone.js.org) for opening the file dialog and handling drag and drop. It does not process files or provide any way to make HTTP requests to a server. If you need this, [react-dropzone](https://react-dropzone.js.org) suggests [filepond](https://pqina.nl/filepond/) or [uppy.io.](https://uppy.io/) - -### Attachment label - -When an attachment is successfully uploaded, a label will appear in the message box. There are several label variants that cover different attachment states, including: - -- **Plain:** Default attachment labels, which display the filename and extension. -- **Closeable:** Attachments that can be dismissed. -- **Clickable:** Attachments that can be selected, typically to open file details. -- **Loading:** Attachments that are still being uploaded. - -```js file="./FileDetailsLabel.tsx" - -``` - -### Attachment preview - -To allow users to preview the contents of an attachment, load a read-only view of the file contents in a new modal. - -```js file="./PreviewAttachment.tsx" - -``` - -### Editable attachments - -To allow users to edit an attached file, load a new code editor within the chatbot window. On this screen, you can allow users to edit a file and save changes if they'd like. Return users to the main chatbot window once they dismiss the editor. - -```js file="./AttachmentEdit.tsx" - -``` - -### Failed attachment error - -When an attachment upload fails, a [danger alert](/components/alert) is displayed to provide details about the reason for failure. - -```js file="./AttachmentError.tsx" - -``` - -### Attachment dropzone - -An attachment dropzone allows users to upload files via drag and drop. - -```js file="./FileDropZone.tsx" - -``` diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.md deleted file mode 100644 index ba650c1fd..000000000 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -# Sidenav top-level section -# should be the same for all markdown files -section: PatternFly-AI -subsection: Chatbot -# Sidenav secondary level section -# should be the same for all markdown files -id: Chatbot conversation history -# 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 -# These are found through the sourceProps function provided in patternfly-docs.source.js -propComponents: ['ChatbotConversationHistoryNav', 'Conversation'] ---- - -import { ChatbotDisplayMode } from '@patternfly/virtual-assistant/dist/dynamic/Chatbot'; -import ChatbotConversationHistoryNav from '@patternfly/virtual-assistant/dist/dynamic/ChatbotConversationHistoryNav'; -import { -ChatbotHeader, -ChatbotHeaderMain, -ChatbotHeaderMenu, -ChatbotHeaderTitle, -} from '@patternfly/virtual-assistant/dist/dynamic/ChatbotHeader'; -import { DropdownItem, DropdownList, Checkbox } from '@patternfly/react-core'; -import { ChatbotContent } from '@patternfly/virtual-assistant/dist/dynamic/ChatbotContent'; - -### Conversation history navigation - -The chatbot conversation history is contained in an interactive drawer, where users can interact with previous conversations or start a new conversation. - -The `` component is a wrapper placed within ``, which contains all other chatbot components in `drawerContent`. There is a focus trap so users can only tab within the drawer while it is open. - -The code structure will look like this: - -``` - - - - - ... - - - - - }> - - -``` - -The conversation history drawer looks different depending on the `displayMode` of the parent ``. (As shown in the [main chatbot demo](/patternfly-ai/chatbot/chatbot-container/react-demos#basic-chatbot).): - -- `Default` and `docked` display modes display the conversation history on top of the rest of the chatbot content, with a PatternFly backdrop between the drawer panel and drawer content. -- `Fullscreen` and `embedded` display modes display the conversation history in line with the drawer content. - -### Drawer with search and "new chat" button - -In the conversation history drawer, users can search previous chatbot conversations via an input field. To customize the placeholder text, use `searchInputPlaceholder`. Provide an aria label via `searchInputAriaLabel`. - -They can also start new conversations via a "New chat" button. To customize the button label, use `newChatButtonText`. - -Both the search input field and "New chat" buttons are optional. - -```js file="./ChatbotHeaderDrawer.tsx" - -``` - -### Drawer with conversation actions - -Actions can be added to conversations with `menuItems`. Optionally, you can also add a `className` to the menu via `menuClassName`, change the default aria-label and tooltip content via `label`, or add an `onSelect` callback for when a user selects an item. - -```js file="./ChatbotHeaderDrawerWithActions.tsx" - -``` 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 deleted file mode 100644 index 578f5ba7c..000000000 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotFooter/ChatbotFooter.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -# Sidenav top-level section -# should be the same for all markdown files -section: PatternFly-AI -subsection: Chatbot -# Sidenav secondary level section -# should be the same for all markdown files -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 -# These are found through the sourceProps function provided in patternfly-docs.source.js -propComponents: - [ - 'ChatbotFooter', - 'MessageBar', - 'ChatbotFootnote', - 'ChatbotFootnotePopover', - 'ChatbotFootnotePopoverCTA', - 'ChatbotFootnotePopoverBannerImage', - 'ChatbotFootnotePopoverLink', - 'MessageBarWithAttachMenuProps', - 'SourceDetailsMenuItem' - ] -sortValue: 5 ---- - -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'; -import { useDropzone } from 'react-dropzone'; - -### Footnote with popover - -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. - -```js file="./ChatbotFootnote.tsx" - -``` - -### Message bar with speech recognition and file attachment - -In Safari and Chrome, you will see a microphone button in the message bar if `hasMicrophoneButton` is passed to ``. The button will only appear if `'SpeechRecognition'` or `'webkitSpeechRecognition'` are available in `window`. This does not currently work in Firefox. - -By default the message bar supports file uploads via an attach button. Setting `hasAttachButton` to `false` will disable that feature. - -```js file="./ChatbotMessageBar.tsx" - -``` - -### Message bar with attach menu appended to attach button - -You can change the behavior of the attach button to open a menu, rather than the default file viewer for your operating system. This menu can display different actions related to attachments. - -Attachments can also be added to the chatbot via [drag and drop.](/patternfly-ai/chatbot/chatbot-attachments#attachment-dropzone) - -```js file="./ChatbotMessageBarAttach.tsx" - -``` - -### Message bar with stop button - -If you are using streaming, you can add a stop button to the message bar that allows users to stop a response from a chatbot. - -To enable the stop button, set `hasStopButton` to `true` and pass in a `handleStopButton` callback function. You can use this callback to trigger an [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) configured as part of your API call. - -```js file="./ChatbotMessageBarStop.tsx" - -``` - -### Footer with message bar and footnote - -A simple footer with a message bar and footnote would have this code structure: - -```noLive - - - - -``` - -```js file="./ChatbotFooter.tsx" - -``` 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 deleted file mode 100644 index ddb22eccd..000000000 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotHeader/ChatbotHeader.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -# Sidenav top-level section -# should be the same for all markdown files -section: PatternFly-AI -subsection: Chatbot -# Sidenav secondary level section -# should be the same for all markdown files -id: Chatbot header -# 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 -# These are found through the sourceProps function provided in patternfly-docs.source.js -propComponents: - [ - 'ChatbotHeader', - 'ChatbotHeaderMain', - 'ChatbotHeaderMenu', - 'ChatbotHeaderActions', - 'ChatbotHeaderTitle', - 'ChatbotHeaderOptionsDropdown', - 'ChatbotHeaderSelectorDropdown' - ] -sortValue: 4 ---- - -import { -ChatbotHeader, -ChatbotHeaderMain, -ChatbotHeaderMenu, -ChatbotHeaderActions, -ChatbotHeaderTitle, -ChatbotHeaderOptionsDropdown, -ChatbotHeaderSelectorDropdown -} from '@patternfly/virtual-assistant/dist/dynamic/ChatbotHeader'; -import { -ChatbotDisplayMode -} from '@patternfly/virtual-assistant/dist/dynamic/Chatbot'; -import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon'; -import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon'; -import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon'; -import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg'; -import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg'; - -### Header sections - -The chatbot header is persistent, and contains the title for the chatbot window, as well as any related controls and actions. - -The `` has 2 sections: - -- `` contains the title and an optional menu toggle: - - `` handles the layout and display of a title or image at different responsive sizes. - - `` (optional) is placed on the left side of the header and used to toggle a chat history menu. -- `` contains any additional controls: - - The `` component is a standard PatternFly dropdown that matches the chatbot styles. - - The `` component is a dropdown with a menu toggle that is intended to be used to update chatbot settings (like the display mode). - -Your `` code structure should look like this: - -```noLive - - - - - - - - - - -``` - -### Header title - -By default, `` renders any children that are passed in. Optionally, you can pass in a `displayMode`, `showOnEmbedded`, `showOnDocked`, `showOnFullScreen`, and/or `showOnDefault` to render content conditionally. - -```js file="./ChatbotHeaderTitle.tsx" - -``` - -### Header options - -There are a variety of options and customizations you can make to the header, to adjust how information is displayed, or to add additional controls. - - -In this example, select the respective checkbox to toggle these features: - -- **Menu:** Users can select the menu toggle to open a menu of additional options or actions. -- **Left-aligned logo** -- **Centered logo** -- **Selector dropdown:** Users can choose from preselected options in a dropdown menu. For example, they can toggle between AI models. -- **Options dropdown:** Users can select chatbot options from a menu. For example, they can switch between chatbot display modes. - -```js file="./ChatbotHeaderBasic.tsx" - -``` diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotToggle/ChatbotToggle.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotToggle/ChatbotToggle.md deleted file mode 100644 index e0594c136..000000000 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotToggle/ChatbotToggle.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -# Sidenav top-level section -# should be the same for all markdown files -section: PatternFly-AI -subsection: Chatbot -# Sidenav secondary level section -# should be the same for all markdown files -id: Chatbot toggle -# 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 -# These are found through the sourceProps function provided in patternfly-docs.source.js -propComponents: ['ChatbotToggle'] -sortValue: 3 ---- - -import ChatbotToggle from '@patternfly/virtual-assistant/dist/dynamic/ChatbotToggle'; - -### Basic toggle - -To allow users to open and close the chatbot window as needed, add a toggle. - -```js file="./ChatbotToggleBasic.tsx" isFullscreen - -``` - -### Custom toggle icon - -A custom icon can be passed to the toggle. To ensure the icon is visible in both light and dark themes, use an SVG image and set `fill="currentColor"`. - -```js file="./CustomClosedIcon.tsx" isFullscreen - -``` diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/AttachMenu.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/AttachMenu.tsx similarity index 100% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/AttachMenu.tsx rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/AttachMenu.tsx diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/AttachmentEdit.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/AttachmentEdit.tsx similarity index 100% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/AttachmentEdit.tsx rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/AttachmentEdit.tsx diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/AttachmentError.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/AttachmentError.tsx similarity index 100% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/AttachmentError.tsx rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/AttachmentError.tsx diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/BotMessage.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/BotMessage.tsx similarity index 100% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/BotMessage.tsx rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/BotMessage.tsx diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/FileDetails.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/FileDetails.tsx similarity index 100% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/FileDetails.tsx rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/FileDetails.tsx diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/FileDetailsLabel.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/FileDetailsLabel.tsx similarity index 100% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/FileDetailsLabel.tsx rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/FileDetailsLabel.tsx diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/FileDropZone.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/FileDropZone.tsx similarity index 100% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/FileDropZone.tsx rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/FileDropZone.tsx diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/MessageWithAttachment.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/MessageWithAttachment.tsx similarity index 100% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/MessageWithAttachment.tsx rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/MessageWithAttachment.tsx diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/MessageWithCustomResponseActions.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/MessageWithCustomResponseActions.tsx similarity index 100% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/MessageWithCustomResponseActions.tsx rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/MessageWithCustomResponseActions.tsx diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/MessageWithQuickResponses.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/MessageWithQuickResponses.tsx similarity index 100% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/MessageWithQuickResponses.tsx rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/MessageWithQuickResponses.tsx diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/MessageWithResponseActions.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/MessageWithResponseActions.tsx similarity index 100% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/MessageWithResponseActions.tsx rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/MessageWithResponseActions.tsx diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/MessageWithSources.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/MessageWithSources.tsx similarity index 100% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/MessageWithSources.tsx rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/MessageWithSources.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/Messages/Messages.md similarity index 61% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/ChatbotMessage.md rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/Messages.md index cf5d0b49f..b78c0694d 100644 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/ChatbotMessage.md +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/Messages.md @@ -5,22 +5,27 @@ section: PatternFly-AI subsection: Chatbot # Sidenav secondary level section # should be the same for all markdown files -id: Chatbot messages +id: Messages # 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 +# These are found through the sourceProps function provided in patternfly-docs.source.js propComponents: [ -'Message', -'PreviewAttachment', -'AttachmentEdit', -'ActionProps', -'SourcesCardProps' + 'AttachMenu', + 'AttachmentEdit', + 'FileDetails', + 'FileDetailsLabel', + 'FileDropZone', + 'PreviewAttachment', + 'Message', + 'PreviewAttachment', + 'ActionProps', + 'SourcesCardProps' ] -sortValue: 6 +sortValue: 3 --- import Message from '@patternfly/virtual-assistant/dist/dynamic/Message'; -import PreviewAttachment from '@patternfly/virtual-assistant/dist/dynamic/PreviewAttachment'; -import AttachmentEdit from '@patternfly/virtual-assistant/dist/dynamic/AttachmentEdit'; import SourcesCard from '@patternfly/virtual-assistant/dist/dynamic/SourcesCard'; import { RobotIcon } from '@patternfly/react-icons/dist/esm/icons/robot-icon'; import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; @@ -28,9 +33,17 @@ import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon'; import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon'; import patternflyAvatar from './patternfly_avatar.jpg'; import userAvatar from './user_avatar.jpg'; +import AttachmentEdit from '@patternfly/virtual-assistant/dist/dynamic/AttachmentEdit'; +import FileDetails from '@patternfly/virtual-assistant/dist/dynamic/FileDetails'; +import FileDetailsLabel from '@patternfly/virtual-assistant/dist/dynamic/FileDetailsLabel'; +import FileDropZone from '@patternfly/virtual-assistant/dist/dynamic/FileDropZone'; +import { PreviewAttachment } from '@patternfly/virtual-assistant/dist/dynamic/PreviewAttachment'; +import ChatbotAlert from '@patternfly/virtual-assistant/dist/dynamic/ChatbotAlert'; The `content` prop of the `` component is passed to a `` component (from [react-markdown](https://remarkjs.github.io/react-markdown/)), which is configured to translate plain text strings into PatternFly [`` components](/components/content) and code blocks into PatternFly [`` components.](/components/code-block) +## Messages + ### Bot messages Messages from the chatbot will be marked with an "AI" label to clearly communicate the use of AI to users. The chatbot can display different `content` types, including plain text, code, or a loading animation (via `isLoading`). @@ -43,6 +56,48 @@ By default, a date and timestamp is displayed with each message. You can update ``` +### Messages actions + +You can add actions to a message, to allow users to interact with the message content. These actions can include: + +- Feedback responses that allow users to rate a message as "good" or "bad". +- Copy and share controls that allow users to share the message content with others. +- A listen action, that will read the message content out loud. + +**Note:** The logic for the actions is not built into the component and must be implemented by the consuming application. + +```js file="./MessageWithResponseActions.tsx" + +``` + +### Custom message actions + +Beyond the standard message actions (positive, negative, copy, share, or listen), you can add custom actions to a bot message by passing an `actions` object to the `` component. This object can contain the following customizations: `ariaLabel`, `onClick`, `className`, `isDisabled`, `tooltipContent`, `tooltipProps`, and `icon`. + +```js file="./MessageWithCustomResponseActions.tsx" + +``` + +### Messages with quick responses + +You can offer convenient, clickable responses to messages in the form of quick actions. Quick actions are [PatternFly labels](/components/label/) in a label group, configured to display up to 5 visible labels. + +To add quick actions, pass `quickResponses` to ``. This can be overridden by passing additional `` props to `quickResponseContainerProps`, or additional `