@patternfly/chatbot 2.2.0-prerelease.4 → 2.2.0-prerelease.41

package/patternfly-docs/content/extensions/chatbot/examples/UI/Settings.tsx

@@ -0,0 +1,289 @@
+import React from 'react';
+
+import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
+import {
+  Button,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+  Switch,
+  Title
+} from '@patternfly/react-core';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotHeader, {
+  ChatbotHeaderActions,
+  ChatbotHeaderCloseButton,
+  ChatbotHeaderMain,
+  ChatbotHeaderOptionsDropdown,
+  ChatbotHeaderTitle
+} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
+import { CogIcon, ExpandIcon, OpenDrawerRightIcon, OutlinedWindowRestoreIcon } from '@patternfly/react-icons';
+
+export const SettingsDemo: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+  const [isThemeOpen, setIsThemeOpen] = React.useState(false);
+  const [isLanguageOpen, setIsLanguageOpen] = React.useState(false);
+  const [isVoiceOpen, setIsVoiceOpen] = React.useState(false);
+  const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
+  const [areSettingsOpen, setAreSettingsOpen] = React.useState(true);
+  const chatbotVisible = true;
+
+  const onFocus = (id: string) => {
+    const element = document.getElementById(id);
+    (element as HTMLElement).focus();
+  };
+
+  const onThemeToggleClick = () => {
+    setIsThemeOpen(!isThemeOpen);
+  };
+
+  const onThemeSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', value);
+    onFocus('theme');
+    setIsThemeOpen(false);
+  };
+
+  const onLanguageToggleClick = () => {
+    setIsLanguageOpen(!isLanguageOpen);
+  };
+
+  const onLanguageSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', value);
+    onFocus('language');
+    setIsLanguageOpen(false);
+  };
+
+  const onVoiceToggleClick = () => {
+    onFocus('voice');
+    setIsVoiceOpen(!isVoiceOpen);
+  };
+
+  const onVoiceSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', value);
+    setIsVoiceOpen(false);
+  };
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const themeDropdown = (
+    <Dropdown
+      isOpen={isThemeOpen}
+      onSelect={onThemeSelect}
+      onOpenChange={(isOpen: boolean) => setIsThemeOpen(isOpen)}
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
+      shouldPreventScrollOnItemFocus
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <MenuToggle id="theme" ref={toggleRef} onClick={onThemeToggleClick} isExpanded={isThemeOpen}>
+          System
+        </MenuToggle>
+      )}
+      ouiaId="ThemeDropdown"
+    >
+      <DropdownList>
+        <DropdownItem value="System" key="system">
+          System
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+
+  const languageDropdown = (
+    <Dropdown
+      isOpen={isLanguageOpen}
+      onSelect={onLanguageSelect}
+      onOpenChange={(isOpen: boolean) => setIsLanguageOpen(isOpen)}
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
+      shouldPreventScrollOnItemFocus
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <MenuToggle id="language" ref={toggleRef} onClick={onLanguageToggleClick} isExpanded={isLanguageOpen}>
+          Auto-detect
+        </MenuToggle>
+      )}
+      ouiaId="LanguageDropdown"
+    >
+      <DropdownList>
+        <DropdownItem value="Auto-detect" key="auto-detect">
+          Auto-detect
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+  const voiceDropdown = (
+    <Dropdown
+      isOpen={isVoiceOpen}
+      onSelect={onVoiceSelect}
+      onOpenChange={(isOpen: boolean) => setIsVoiceOpen(isOpen)}
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
+      shouldPreventScrollOnItemFocus
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <MenuToggle id="voice" ref={toggleRef} onClick={onVoiceToggleClick} isExpanded={isVoiceOpen}>
+          Bot
+        </MenuToggle>
+      )}
+      ouiaId="VoiceDropdown"
+    >
+      <DropdownList>
+        <DropdownItem value="Bot" key="bot">
+          Bot
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+  const children = [
+    { id: 'theme', label: 'Theme', field: themeDropdown },
+    { id: 'language', label: 'Language', field: languageDropdown },
+    { id: 'voice', label: 'Voice', field: voiceDropdown },
+    {
+      id: 'analytics',
+      label: 'Share analytics',
+      field: (
+        <Switch
+          // We want to add the id property here as well so the label is coupled
+          // with the button on screen readers.
+          id="analytics"
+          aria-label="Togglable option for whether to share analytics"
+          isChecked={isChecked}
+          onChange={handleChange}
+        />
+      )
+    },
+    {
+      id: 'archived-chat',
+      label: 'Archive chat',
+      field: (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <Button id="archived-chat" variant="secondary">
+          Manage
+        </Button>
+      )
+    },
+    {
+      id: 'archive-all',
+      label: 'Archive all chat',
+      field: (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <Button id="archive-all" variant="secondary">
+          Archive all
+        </Button>
+      )
+    },
+    {
+      id: 'delete-all',
+      label: 'Delete all chats',
+      field: (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <Button id="delete-all" variant="danger">
+          Delete all
+        </Button>
+      )
+    }
+  ];
+
+  const onSelectDropdownItem = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    if (value === 'Settings') {
+      setAreSettingsOpen(true);
+    } else {
+      setDisplayMode(value as ChatbotDisplayMode);
+    }
+  };
+
+  const regularChatbot = (
+    <ChatbotHeader>
+      <ChatbotHeaderActions>
+        <ChatbotHeaderOptionsDropdown onSelect={onSelectDropdownItem}>
+          <DropdownGroup label="Display mode">
+            <DropdownList>
+              <DropdownItem
+                value={ChatbotDisplayMode.default}
+                key="switchDisplayOverlay"
+                icon={<OutlinedWindowRestoreIcon aria-hidden />}
+                isSelected={displayMode === ChatbotDisplayMode.default}
+              >
+                <span>Overlay</span>
+              </DropdownItem>
+              <DropdownItem
+                value={ChatbotDisplayMode.docked}
+                key="switchDisplayDock"
+                icon={<OpenDrawerRightIcon aria-hidden />}
+                isSelected={displayMode === ChatbotDisplayMode.docked}
+              >
+                <span>Dock to window</span>
+              </DropdownItem>
+              <DropdownItem
+                value={ChatbotDisplayMode.fullscreen}
+                key="switchDisplayFullscreen"
+                icon={<ExpandIcon aria-hidden />}
+                isSelected={displayMode === ChatbotDisplayMode.fullscreen}
+              >
+                <span>Fullscreen</span>
+              </DropdownItem>
+            </DropdownList>
+          </DropdownGroup>
+          <Divider />
+          <DropdownList>
+            <DropdownItem value="Settings" key="switchSettings" icon={<CogIcon aria-hidden />}>
+              <span>Settings</span>
+            </DropdownItem>
+          </DropdownList>
+        </ChatbotHeaderOptionsDropdown>
+      </ChatbotHeaderActions>
+    </ChatbotHeader>
+  );
+
+  return (
+    <>
+      <Chatbot isVisible={chatbotVisible} displayMode={displayMode}>
+        {areSettingsOpen ? (
+          <>
+            <ChatbotHeader>
+              <ChatbotHeaderMain>
+                <ChatbotHeaderTitle>
+                  <Title headingLevel="h1" size="2xl">
+                    Settings
+                  </Title>
+                </ChatbotHeaderTitle>
+              </ChatbotHeaderMain>
+              <ChatbotHeaderCloseButton onClick={() => setAreSettingsOpen(false)} />
+            </ChatbotHeader>
+            <SettingsForm fields={children} />
+          </>
+        ) : (
+          <>{regularChatbot}</>
+        )}
+      </Chatbot>
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/SquareChatbotToggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ChatbotToggle from '@patternfly/virtual-assistant/dist/dynamic/ChatbotToggle';
+import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
 
 export const SquareChatbotToggle: React.FunctionComponent = () => {
   const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(false);

package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -55,6 +55,7 @@ import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
 import TermsOfUse from '@patternfly/chatbot/dist/dynamic/TermsOfUse';
 import {
 ChatbotHeader,
+ChatbotHeaderCloseButton,
 ChatbotHeaderMain,
 ChatbotHeaderMenu,
 ChatbotHeaderActions,
@@ -66,6 +67,7 @@ import { ChatbotFooter, ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic
 import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
 import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
 import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
+import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
 import { useDropzone } from 'react-dropzone';
 
@@ -75,11 +77,13 @@ import { DropdownItem, DropdownList, Checkbox } from '@patternfly/react-core';
 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 CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import termsAndConditionsHeader from './PF-TermsAndConditionsHeader.svg';
+import { CloseIcon } from '@patternfly/react-icons';
 
 ## Structure
 
@@ -98,11 +102,9 @@ The "embedded" display mode is meant to be used within a [PatternFly page](/comp
 ### Content and message box
 
 The `<ChatbotContent>` component is the container that is placed within the `<Chatbot>`, between the [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) and [`<ChatbotFooter>`.](/patternfly-ai/chatbot/ui#footer)
-<br />
-<br />
+
 `<ChatbotContent>` usually contains a `<ChatbotMessageBox>` for displaying messages.
-<br />
-<br />
+
 Your code structure should look like this:
 
 ```noLive
@@ -140,8 +142,7 @@ To provide users with a more specific direction, you can also include optional w
 ### 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.
-<br />
-<br />
+
 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/overview/demo#basic-chatbot) and the [embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot).
 
 ```js file="./SkipToContent.tsx" isFullscreen
@@ -367,6 +368,24 @@ If you're showing a conversation that is already active, you can set the `active
 
 ```
 
+### Resizable drawer
+
+By default, the conversation history drawer has a fixed width (384px) and a focus trap. To provide users with more flexibility as they navigate their conversation history, or to better support embedded ChatBots on tablet-sized devices or smaller browser windows, you can instead make the drawer resizable. By default, even resizable drawers will still open to their full width on mobile devices.
+
+In this example, the drawer can be resized up to the max size of the parent and resized down to 200px wide. To customize this behavior further (including width, style, and focus behavior) use PatternFly [`<Drawer>` props](/components/drawer#props), [`<DrawerPanelContent>` props](/components/drawer/#drawerpanelcontent), or any other drawer subcomponents.
+
+```js file="./ChatbotHeaderDrawerResizable.tsx"
+
+```
+
+### Drawer with simple menu
+
+The drawer can also be used to display a list of basic menu items.
+
+```js file="./ChatbotHeaderDrawerNavigation.tsx"
+
+```
+
 ### Terms of use
 
 Based on the [PatternFly modal](/components/modal), this modal adapts to the ChatBot display mode and is meant to display terms and conditions for using a ChatBot in your project. The image in the header can be toggled on or off depending on whether the `image` and `altText` props are provided.
@@ -377,6 +396,16 @@ This example also includes an example of how to use [skip to content](/patternfl
 
 ```
 
+### Settings
+
+To contain user preference controls and other ChatBot setting options, you can create a separate settings page that can accept any number of buttons, dropdown menus, toggles, labels, and so on. This settings page will render all components appropriately within all 4 display modes.
+
+In this demo, you can toggle the settings page by clicking the "Settings" button in the display mode menu.
+
+```js file="./Settings.tsx" isFullscreen
+
+```
+
 ## Modals
 
 ### Modal

package/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md

@@ -47,6 +47,20 @@ import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 ## Demos
 
+### Message feedback
+
+When a user selects a positive or negative message action, you can display a message feedback card that acknowledges their response and provides space for additional written feedback. These cards can be manually dismissed via the close button and the thank-you card can be configured to time out automatically.
+
+The following example demonstrates a full feedback flow, which accepts written feedback submission and displays a thank you card.
+
+It also demonstrates how to handle focus appropriately for accessibility. The card will be focused when it appears in the DOM. When the card closes, place the focus back on the launching button. To provide additional context on what the button controls, you can also add `aria-expanded` and `aria-controls` attributes to the feedback buttons.
+
+It is also important to announce when new content appears onscreen for accessibility purposes. `isLiveRegion` is set to true by default on `<Message>` so it will make appropriate announcements for you when the feedback card appears.
+
+```js file="./Feedback.tsx"
+
+```
+
 ### Attach via upload button in message bar
 
 This demo displays unique attachment features, including:

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -21,7 +21,8 @@ propComponents:
     'ChatbotFootnote',
     'MessageBox',
     'Message',
-    'MessageBarWithAttachMenuProps'
+    'MessageBarWithAttachMenuProps',
+    'CompareProps'
   ]
 sortValue: 2
 ---
@@ -34,6 +35,7 @@ import ChatbotFooter, { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic
 import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
 import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import Compare from '@patternfly/chatbot/dist/dynamic/Compare';
 import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
 
 import ChatbotHeader, {
@@ -55,6 +57,8 @@ import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import { getTrackingProviders } from "@patternfly/chatbot/dist/dynamic/tracking";
+
 
 ### Basic ChatBot
 
@@ -66,7 +70,7 @@ This demo displays a basic ChatBot, which includes:
 4. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
 
 - A `<ChatbotWelcomePrompt>`
-- An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages#messages-actions)
+- An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages#message-actions)
 - Logic for enabling auto-scrolling to the most recent message whenever a new message is sent or received using a `scrollToBottomRef`
 
 5. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>` that contains the abilities of:
@@ -92,7 +96,7 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
 3. A [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) with all built sub-components laid out, including a `<ChatbotHeaderTitle>`
 4. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
    - A `<ChatbotWelcomePrompt>`
-   - An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages/#messages-actions)
+   - An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages/#message-actions)
    - Logic for enabling auto-scrolling to the most recent message whenever a new message is sent or received using a `scrollToBottomRef`
 5. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>` that contains the abilities of:
    - [Speech to text.](/patternfly-ai/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)
@@ -103,3 +107,37 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
 ```js file="./EmbeddedChatbot.tsx" isFullscreen
 
 ```
+
+### Inline drawer ChatBot
+
+This demo displays a ChatBot in a static, inline drawer. This demo includes:
+
+1. An empty [PatternFly page](/components/page) with a sidebar and masthead.
+2. A [basic ChatBot](#basic-chatbot), placed beside the page content. It does not overlay the page content, cannot be minimized, and does not allow you to change the display mode by default.
+
+**Note:** The inline drawer ChatBot is built to fit and perform within a drawer, but the implementation of the drawer is up to you. This drawer can look different for each product, but will often be placed to the side of the page, inline with the page content.
+
+```js file="./ChatbotInDrawer.tsx" isFullscreen
+
+```
+
+### Comparing ChatBots
+
+To let users compare how different ChatBots respond to the same prompt, you can add multiple ChatBots within the same window. The following demo illustrates a comparison view pattern that allows users to toggle between different conversations in a single ChatBot window.
+<br /><br />
+Your code structure should look like this:
+
+```noLive
+<Page ... >
+  <div className="pf-chatbot__compare-container">
+    <Compare ... />
+    <ChatbotFooter ... >
+      <MessageBar ... />
+    </ChatbotFooter>
+  </div>
+</Page>
+```
+
+```js file="./EmbeddedComparisonChatbot.tsx" isFullscreen
+
+```