@patternfly/chatbot 6.3.0-prerelease.9 → 6.3.0

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

@@ -1,43 +1,68 @@
-import React from 'react';
-import { FormGroup, Radio } from '@patternfly/react-core';
+import { CSSProperties, FunctionComponent, Ref, useState, MouseEvent as ReactMouseEvent } from 'react';
 import { ChatbotHeaderTitle } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import { MenuToggle, MenuToggleElement, Select, SelectList, SelectOption } from '@patternfly/react-core';
 
-export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
-  const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
+export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
+  const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select display mode');
+
+  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 === 'Embedded') {
+      setDisplayMode(ChatbotDisplayMode.embedded);
+    }
+    if (value === 'Docked') {
+      setDisplayMode(ChatbotDisplayMode.docked);
+    }
+    if (value === 'Full screen') {
+      setDisplayMode(ChatbotDisplayMode.fullscreen);
+    }
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
+    <MenuToggle
+      className="pf-v6-u-mb-md"
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
 
   return (
     <>
-      <FormGroup role="radiogroup" isInline fieldId="header-title-variants-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.embedded}
-          onChange={() => setDisplayMode(ChatbotDisplayMode.embedded)}
-          name="basic-inline-radio"
-          label="Embedded"
-          id="embedded"
-        />
-        <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="Full screen"
-          id="full-screen"
-        />
-      </FormGroup>
+      <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="Embedded">Embedded</SelectOption>
+          <SelectOption value="Docked">Docked</SelectOption>
+          <SelectOption value="Full screen">Full screen</SelectOption>
+        </SelectList>
+      </Select>
       <ChatbotHeaderTitle
         displayMode={displayMode}
         showOnEmbedded="Embedded"

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
 
-export const ChatbotMessageBarExample: React.FunctionComponent = () => {
+export const ChatbotMessageBarExample: FunctionComponent = () => {
   const handleSend = (message) => alert(message);
 
   return <MessageBar onSendMessage={handleSend} hasMicrophoneButton />;

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

@@ -1,13 +1,13 @@
-import React from 'react';
+import { useState, isValidElement, cloneElement, Children, FunctionComponent, ReactNode } from 'react';
 import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
 import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
 import { Divider, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
 import { useDropzone } from 'react-dropzone';
 
-export const ChatbotMessageBarDefaultAttachExample: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [userFacingMenuItems, setUserFacingMenuItems] = React.useState<React.ReactNode>([]);
+export const ChatbotMessageBarDefaultAttachExample: FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [userFacingMenuItems, setUserFacingMenuItems] = useState<ReactNode>([]);
 
   const handleSend = (message) => alert(message);
   const { open, getInputProps } = useDropzone({
@@ -21,18 +21,18 @@ export const ChatbotMessageBarDefaultAttachExample: React.FunctionComponent = ()
     setUserFacingMenuItems(initialMenuItems.concat(uploadMenuItems));
   };
 
-  const findMatchingElements = (elements: React.ReactNode[], targetValue: string) => {
-    let matchingElements = [] as React.ReactNode[];
+  const findMatchingElements = (elements: ReactNode[], targetValue: string) => {
+    let matchingElements = [] as ReactNode[];
 
     elements.forEach((element) => {
-      if (React.isValidElement(element)) {
+      if (isValidElement(element)) {
         // Check if the element's value matches the targetValue
         if (element.props.value && element.props.value.toLowerCase().includes(targetValue.toLowerCase())) {
-          matchingElements.push(React.cloneElement(element, { key: element.props.value }));
+          matchingElements.push(cloneElement(element, { key: element.props.value }));
         }
 
         // Recursively check the element's children
-        const children = React.Children.toArray(element.props.children);
+        const children = Children.toArray(element.props.children);
         matchingElements = matchingElements.concat(findMatchingElements(children, targetValue));
       }
     });

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

@@ -1,9 +1,9 @@
-import React from 'react';
+import { useState, FunctionComponent } from 'react';
 import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
 import { Checkbox } from '@patternfly/react-core';
 
-export const ChatbotMessageBarDisabledExample: React.FunctionComponent = () => {
-  const [isDisabled, setIsDisabled] = React.useState(false);
+export const ChatbotMessageBarDisabledExample: FunctionComponent = () => {
+  const [isDisabled, setIsDisabled] = useState(false);
   const handleSend = (message) => alert(message);
 
   return (

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
 
-export const ChatbotMessageBarExample: React.FunctionComponent = () => {
+export const ChatbotMessageBarExample: FunctionComponent = () => {
   const handleSend = (message) => alert(message);
 
   return (

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
 
-export const ChatbotMessageBarStop: React.FunctionComponent = () => {
+export const ChatbotMessageBarStop: FunctionComponent = () => {
   const handleSend = (message) => alert(message);
 
   const handleStopButton = () => alert('Stop button clicked');

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

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import { useState, FormEvent, FunctionComponent, MouseEvent } 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 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);
+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) => {
@@ -41,10 +40,7 @@ export const CompactSettingsDemo: 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 CompactSettingsDemo: 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 CompactSettingsDemo: 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 CompactSettingsDemo: 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 t he button on screen readers.
         <MenuToggle size="sm" id="theme" ref={toggleRef} onClick={onThemeToggleClick} isExpanded={isThemeOpen}>
@@ -116,7 +109,7 @@ export const CompactSettingsDemo: 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 size="sm" id="language" ref={toggleRef} onClick={onLanguageToggleClick} isExpanded={isLanguageOpen}>
@@ -140,7 +133,7 @@ export const CompactSettingsDemo: 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 size="sm" id="voice" ref={toggleRef} onClick={onVoiceToggleClick} isExpanded={isVoiceOpen}>
@@ -210,7 +203,7 @@ export const CompactSettingsDemo: 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/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"