@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.21

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

@@ -1,16 +1,65 @@
-import React from 'react';
-import { Button, FormGroup, ModalBody, ModalFooter, ModalHeader, Radio } from '@patternfly/react-core';
+import { useState, FunctionComponent, MouseEvent as ReactMouseEvent, Ref, CSSProperties } from 'react';
+import {
+  Button,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  Stack
+} from '@patternfly/react-core';
 import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
 import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 
-export const ChatbotModalExample: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
+export const ChatbotModalExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select display mode');
 
-  const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleModalToggle = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
+  const onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setSelected(value as string);
+    setIsOpen(false);
+    if (value === 'Default') {
+      setDisplayMode(ChatbotDisplayMode.default);
+    }
+    if (value === 'Docked') {
+      setDisplayMode(ChatbotDisplayMode.docked);
+    }
+    if (value === 'Fullscreen') {
+      setDisplayMode(ChatbotDisplayMode.fullscreen);
+    }
+    if (value === 'Embedded') {
+      setDisplayMode(ChatbotDisplayMode.embedded);
+    }
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
+
   return (
     <>
       <div
@@ -21,37 +70,25 @@ export const ChatbotModalExample: React.FunctionComponent = () => {
           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>
+        <Stack hasGutter>
+          <Select
+            id="single-select"
+            isOpen={isOpen}
+            selected={selected}
+            onSelect={onSelect}
+            onOpenChange={(isOpen) => setIsOpen(isOpen)}
+            toggle={toggle}
+            shouldFocusToggleOnSelect
+          >
+            <SelectList>
+              <SelectOption value="Default">Default</SelectOption>
+              <SelectOption value="Docked">Docked</SelectOption>
+              <SelectOption value="Fullscreen">Fullscreen</SelectOption>
+              <SelectOption value="Embedded">Embedded</SelectOption>
+            </SelectList>
+          </Select>
+          <Button onClick={handleModalToggle}>Launch modal</Button>
+        </Stack>
       </div>
       <Chatbot displayMode={displayMode} isVisible></Chatbot>
       <ChatbotModal

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import { FunctionComponent, useState } from 'react';
 import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
 
-export const BasicDemo: React.FunctionComponent = () => {
-  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(false);
+export const BasicDemo: FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = useState<boolean>(false);
   return (
     <ChatbotToggle
       tooltipLabel="Chatbot"

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, useRef, FunctionComponent } from 'react';
 
 import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotContent from '@patternfly/chatbot/dist/dynamic/ChatbotContent';
@@ -11,12 +11,12 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import { FormGroup, Radio } from '@patternfly/react-core';
 
-export const ChatbotWelcomeInteractionDemo: React.FunctionComponent = () => {
-  const [messages, setMessages] = React.useState<MessageProps[]>([]);
-  const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
-  const [announcement, setAnnouncement] = React.useState<string>();
-  const [position, setPosition] = React.useState<'top' | 'bottom'>('top');
-  const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
+export const ChatbotWelcomeInteractionDemo: FunctionComponent = () => {
+  const [messages, setMessages] = useState<MessageProps[]>([]);
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = useState(false);
+  const [announcement, setAnnouncement] = useState<string>();
+  const [position, setPosition] = useState<'top' | 'bottom'>('top');
+  const scrollToBottomRef = useRef<HTMLDivElement>(null);
   const isVisible = true;
   const displayMode = ChatbotDisplayMode.default;
 
@@ -80,7 +80,7 @@ export const ChatbotWelcomeInteractionDemo: React.FunctionComponent = () => {
           // eslint-disable-next-line no-console
           copy: { onClick: () => console.log('Copy') },
           // eslint-disable-next-line no-console
-          share: { onClick: () => console.log('Share') },
+          download: { onClick: () => console.log('Download') },
           // eslint-disable-next-line no-console
           listen: { onClick: () => console.log('Listen') }
         }

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

@@ -1,10 +1,10 @@
-import React from 'react';
+import { FunctionComponent, useState } from 'react';
 
 import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
 import { Checkbox } from '@patternfly/react-core';
 
-export const ChatbotWelcomePromptExample: React.FunctionComponent = () => {
-  const [showWelcomePrompts, setShowWelcomePrompts] = React.useState(true);
+export const ChatbotWelcomePromptExample: FunctionComponent = () => {
+  const [showWelcomePrompts, setShowWelcomePrompts] = useState(true);
 
   const welcomePrompts = [
     {

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

@@ -0,0 +1,282 @@
+import { useState, FormEvent, FunctionComponent, MouseEvent } 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: FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+  const [isThemeOpen, setIsThemeOpen] = useState(false);
+  const [isLanguageOpen, setIsLanguageOpen] = useState(false);
+  const [isVoiceOpen, setIsVoiceOpen] = useState(false);
+  const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default);
+  const [areSettingsOpen, setAreSettingsOpen] = 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: 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: 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: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', value);
+    setIsVoiceOpen(false);
+  };
+
+  const handleChange = (_event: FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const themeDropdown = (
+    <Dropdown
+      isOpen={isThemeOpen}
+      onSelect={onThemeSelect}
+      onOpenChange={(isOpen: boolean) => setIsThemeOpen(isOpen)}
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
+      shouldPreventScrollOnItemFocus
+      toggle={(toggleRef: 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: 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: 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: 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/CustomClosedIcon.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { FunctionComponent, useState } from 'react';
 import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
 
-export const BasicDemo: React.FunctionComponent = () => {
-  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(false);
+export const BasicDemo: FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = useState<boolean>(false);
 
   const closedToggleIcon: () => JSX.Element = () => (
     <svg

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

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import { useState, FunctionComponent, MouseEvent, Ref } from 'react';
 import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
 import {
   Button,
@@ -23,13 +22,13 @@ import ChatbotHeader, {
 } 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);
+export const SettingsDemo: FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+  const [isThemeOpen, setIsThemeOpen] = useState(false);
+  const [isLanguageOpen, setIsLanguageOpen] = useState(false);
+  const [isVoiceOpen, setIsVoiceOpen] = useState(false);
+  const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default);
+  const [areSettingsOpen, setAreSettingsOpen] = useState(true);
   const chatbotVisible = true;
 
   const onFocus = (id: string) => {
@@ -41,10 +40,7 @@ export const SettingsDemo: React.FunctionComponent = () => {
     setIsThemeOpen(!isThemeOpen);
   };
 
-  const onThemeSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    value: string | number | undefined
-  ) => {
+  const onThemeSelect = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     // eslint-disable-next-line no-console
     console.log('selected', value);
     onFocus('theme');
@@ -56,7 +52,7 @@ export const SettingsDemo: React.FunctionComponent = () => {
   };
 
   const onLanguageSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    _event: MouseEvent<Element, MouseEvent> | undefined,
     value: string | number | undefined
   ) => {
     // eslint-disable-next-line no-console
@@ -70,16 +66,13 @@ export const SettingsDemo: React.FunctionComponent = () => {
     setIsVoiceOpen(!isVoiceOpen);
   };
 
-  const onVoiceSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    value: string | number | undefined
-  ) => {
+  const onVoiceSelect = (_event: 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) => {
+  const handleChange = (_event: FormEvent<HTMLInputElement>, checked: boolean) => {
     setIsChecked(checked);
   };
 
@@ -91,7 +84,7 @@ export const SettingsDemo: React.FunctionComponent = () => {
       shouldFocusToggleOnSelect
       shouldFocusFirstItemOnOpen
       shouldPreventScrollOnItemFocus
-      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+      toggle={(toggleRef: 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}>
@@ -116,7 +109,7 @@ export const SettingsDemo: React.FunctionComponent = () => {
       shouldFocusToggleOnSelect
       shouldFocusFirstItemOnOpen
       shouldPreventScrollOnItemFocus
-      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+      toggle={(toggleRef: 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}>
@@ -140,7 +133,7 @@ export const SettingsDemo: React.FunctionComponent = () => {
       shouldFocusToggleOnSelect
       shouldFocusFirstItemOnOpen
       shouldPreventScrollOnItemFocus
-      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+      toggle={(toggleRef: 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}>
@@ -210,7 +203,7 @@ export const SettingsDemo: React.FunctionComponent = () => {
   ];
 
   const onSelectDropdownItem = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    _event: MouseEvent<Element, MouseEvent> | undefined,
     value: string | number | undefined
   ) => {
     if (value === 'Settings') {

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

@@ -1,13 +1,13 @@
-import React from 'react';
+import { useState, useRef, FunctionComponent } from 'react';
 
 import { SkipToContent } from '@patternfly/react-core';
 import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
 import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 
-export const ChatbotDemo: React.FunctionComponent = () => {
-  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const chatbotRef = React.useRef<HTMLDivElement>(null);
+export const ChatbotDemo: FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = useState<boolean>(true);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const chatbotRef = useRef<HTMLDivElement>(null);
   const displayMode = ChatbotDisplayMode.default;
 
   const handleSkipToContent = (e) => {

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

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