@patternfly/chatbot 2.2.1 → 6.3.0-prerelease.10

package/patternfly-docs/content/extensions/chatbot/examples/UI/CompactSettings.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 CompactSettingsDemo: 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 t he button on screen readers.
+        <MenuToggle size="sm" 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 size="sm" 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 size="sm" 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 size="sm" 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 size="sm" 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 size="sm" 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 isCompact 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 isCompact isVisible={chatbotVisible} displayMode={displayMode}>
+        {areSettingsOpen ? (
+          <>
+            <ChatbotHeader className="pf-m-compact">
+              <ChatbotHeaderMain>
+                <ChatbotHeaderTitle>
+                  <Title headingLevel="h1" size="2xl">
+                    Settings
+                  </Title>
+                </ChatbotHeaderTitle>
+              </ChatbotHeaderMain>
+              <ChatbotHeaderCloseButton isCompact onClick={() => setAreSettingsOpen(false)} />
+            </ChatbotHeader>
+            <SettingsForm isCompact fields={children} />
+          </>
+        ) : (
+          <>{regularChatbot}</>
+        )}
+      </Chatbot>
+    </>
+  );
+};

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

@@ -0,0 +1,136 @@
+import React from 'react';
+import { Button, FormGroup, Radio, SkipToContent } from '@patternfly/react-core';
+import TermsOfUse from '@patternfly/chatbot/dist/dynamic/TermsOfUse';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+
+export const TermsOfUseCompactExample: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(true);
+  const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
+  const chatbotRef = React.useRef<HTMLDivElement>(null);
+  const termsRef = React.useRef<HTMLDivElement>(null);
+
+  const handleSkipToContent = (e) => {
+    e.preventDefault();
+    if (!isModalOpen && chatbotRef.current) {
+      chatbotRef.current.focus();
+    }
+    if (isModalOpen && termsRef.current) {
+      termsRef.current.focus();
+    }
+  };
+
+  const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const onPrimaryAction = () => {
+    // eslint-disable-next-line no-console
+    console.log('Clicked primary action');
+  };
+
+  const onSecondaryAction = () => {
+    // eslint-disable-next-line no-console
+    console.log('Clicked secondary action');
+  };
+
+  const introduction = (
+    <>
+      <p>
+        Welcome to PatternFly! These terms and conditions outline the rules and regulations for the use of PatternFly's
+        website, located at <a href="https://patternfly.org">www.patternfly.org.</a>
+      </p>
+      <p>
+        By accessing this website, you are agreeing with our terms and conditions. If you do not agree to all of these
+        terms and conditions, do not continue to use PatternFly.
+      </p>
+    </>
+  );
+
+  const terminology = (
+    <>
+      <p>
+        The following terminology applies to these Terms and Conditions, Privacy Statement, Disclaimer Notice, and all
+        Agreements:
+      </p>
+      <ul>
+        <li>
+          "Client", "You", and "Your" refer to you, the person using this website who is compliant with the Company's
+          terms and conditions.
+        </li>
+        <li>
+          "The Company", "Ourselves", "We", "Our", and "Us", refer to our Company. "Party", "Parties", or "Us", refers
+          to both the Client and ourselves.
+        </li>
+      </ul>
+    </>
+  );
+
+  const body = (
+    <>
+      <h2>Introduction</h2>
+      {introduction}
+      <h2>Terminology</h2>
+      {terminology}
+    </>
+  );
+
+  return (
+    <>
+      <SkipToContent style={{ zIndex: '999' }} onClick={handleSkipToContent} href="#">
+        Skip to chatbot
+      </SkipToContent>
+      <div
+        style={{
+          position: 'fixed',
+          padding: 'var(--pf-t--global--spacer--lg)',
+          zIndex: '601',
+          boxShadow: 'var(--pf-t--global--box-shadow--lg)'
+        }}
+      >
+        <FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Display mode">
+          <Radio
+            isChecked={displayMode === ChatbotDisplayMode.default}
+            onChange={() => setDisplayMode(ChatbotDisplayMode.default)}
+            name="basic-inline-radio"
+            label="Default"
+            id="default"
+          />
+          <Radio
+            isChecked={displayMode === ChatbotDisplayMode.docked}
+            onChange={() => setDisplayMode(ChatbotDisplayMode.docked)}
+            name="basic-inline-radio"
+            label="Docked"
+            id="docked"
+          />
+          <Radio
+            isChecked={displayMode === ChatbotDisplayMode.fullscreen}
+            onChange={() => setDisplayMode(ChatbotDisplayMode.fullscreen)}
+            name="basic-inline-radio"
+            label="Fullscreen"
+            id="fullscreen"
+          />
+          <Radio
+            isChecked={displayMode === ChatbotDisplayMode.embedded}
+            onChange={() => setDisplayMode(ChatbotDisplayMode.embedded)}
+            name="basic-inline-radio"
+            label="Embedded"
+            id="embedded"
+          />
+        </FormGroup>
+        <Button onClick={handleModalToggle}>Launch modal</Button>
+      </div>
+      <Chatbot ref={chatbotRef} displayMode={displayMode} isVisible></Chatbot>
+      <TermsOfUse
+        ref={termsRef}
+        displayMode={displayMode}
+        isModalOpen={isModalOpen}
+        handleModalToggle={handleModalToggle}
+        onPrimaryAction={onPrimaryAction}
+        onSecondaryAction={onSecondaryAction}
+        isCompact
+      >
+        {body}
+      </TermsOfUse>
+    </>
+  );
+};

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

@@ -83,7 +83,7 @@ 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';
+import { CloseIcon, SearchIcon, OutlinedCommentsIcon } from '@patternfly/react-icons';
 
 ## Structure
 
@@ -396,6 +396,13 @@ This example also includes an example of how to use [skip to content](/patternfl
 
 ```
 
+### Compact terms of use
+
+To apply compact styling to the terms of use modal, pass `isCompact` to `<TermsOfUse>`. This will remove the header image and adjust the spacing of text, so that there is less white space in the modal.
+```js file="./TermsOfUseCompact.tsx" isFullscreen
+
+```
+
 ### 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.
@@ -406,6 +413,13 @@ In this demo, you can toggle the settings page by clicking the "Settings" button
 
 ```
 
+### Compact settings
+
+To make the settings menu compact, with less spacing between the menu contents, pass `isCompact` to the `<SettingsForm>`.
+```js file="./CompactSettings.tsx" isFullscreen
+
+```
+
 ## Modals
 
 ### Modal

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

@@ -59,7 +59,6 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import { getTrackingProviders } from "@patternfly/chatbot/dist/dynamic/tracking";
 
-
 ### Basic ChatBot
 
 This demo displays a basic ChatBot, which includes:
@@ -87,6 +86,14 @@ This demo displays a basic ChatBot, which includes:
 
 ```
 
+### Compact ChatBot
+
+This demo displays a basic compact ChatBot
+
+```js file="./ChatbotCompact.tsx" isFullscreen
+
+```
+
 ### Embedded ChatBot
 
 This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed within a page in your product. This demo includes:

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

@@ -34,6 +34,8 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import { getTrackingProviders } from '@patternfly/chatbot/dist/dynamic/tracking';
 import { InitProps } from '@patternfly/chatbot/dist/dynamic/tracking';
+import '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/chatbot/dist/css/main.css';
 
 const footnoteProps = {
   label: 'ChatBot uses AI. Check for mistakes.',
@@ -98,17 +100,18 @@ export default MessageLoading;
 const date = new Date();
 
 const initProps: InitProps = {
+  verbose: false,
   segmentKey: 'TODO-key', // TODO add your key here
   posthogKey: 'TODO-key',
   umamiKey: 'TODO-key',
-  umamiHostUrl: 'http://localhost:3000', // TODO where is your JS provider?
+  umamiHostUrl: 'http://localhost:3000', // TODO where is your Umami installation?
   console: true,
   something: 'test'
 };
 
 const tracking = getTrackingProviders(initProps);
-tracking.identify('user-123'); // TODO get real user id
-tracking.trackPageView(window.document.documentURI);
+tracking.identify('user-123', { superUser: true }); // TODO get real user id + properties
+tracking.trackPageView(window.location.href);
 
 const actionEventName = 'MessageAction';
 const initialMessages: MessageProps[] = [

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx

@@ -29,6 +29,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 '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/chatbot/dist/css/main.css';
 
 interface ModalData {
   code: string;

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx

@@ -16,6 +16,8 @@ import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '
 import { useDropzone } from 'react-dropzone';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/chatbot/dist/css/main.css';
 
 const initialMenuItems = [
   <DropdownList key="list-1">