@patternfly/chatbot 6.3.0-prerelease.13 → 6.3.0-prerelease.14

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"

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

@@ -1,15 +1,35 @@
-import React from 'react';
-import { Button, Checkbox, FormGroup, Radio, SkipToContent } from '@patternfly/react-core';
+import {
+  useRef,
+  useState,
+  FunctionComponent,
+  MouseEvent,
+  CSSProperties,
+  Ref,
+  MouseEvent as ReactMouseEvent
+} from 'react';
+import {
+  Button,
+  Checkbox,
+  SkipToContent,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  Stack
+} from '@patternfly/react-core';
 import TermsOfUse from '@patternfly/chatbot/dist/dynamic/TermsOfUse';
 import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import termsAndConditionsHeader from './PF-TermsAndConditionsHeader.svg';
 
-export const TermsOfUseExample: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(true);
-  const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
-  const [hasImage, setHasImage] = React.useState(true);
-  const chatbotRef = React.useRef<HTMLDivElement>(null);
-  const termsRef = React.useRef<HTMLDivElement>(null);
+export const TermsOfUseExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default);
+  const [hasImage, setHasImage] = useState(true);
+  const chatbotRef = useRef<HTMLDivElement>(null);
+  const termsRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select display mode');
 
   const handleSkipToContent = (e) => {
     e.preventDefault();
@@ -21,7 +41,7 @@ export const TermsOfUseExample: React.FunctionComponent = () => {
     }
   };
 
-  const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleModalToggle = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -34,6 +54,41 @@ export const TermsOfUseExample: React.FunctionComponent = () => {
     // eslint-disable-next-line no-console
     console.log('Clicked secondary action');
   };
+  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>
+  );
 
   const introduction = (
     <>
@@ -89,45 +144,33 @@ export const TermsOfUseExample: 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>
-        <Checkbox
-          isChecked={hasImage}
-          aria-label="Toggle whether terms and conditions has a header image"
-          id="toggle-header-image"
-          name="toggle-header-image"
-          label="Has image in header"
-          onChange={(_event, checked) => setHasImage(checked)}
-        ></Checkbox>
-        <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>
+          <Checkbox
+            isChecked={hasImage}
+            aria-label="Toggle whether terms and conditions has a header image"
+            id="toggle-header-image"
+            name="toggle-header-image"
+            label="Has image in header"
+            onChange={(_event, checked) => setHasImage(checked)}
+          ></Checkbox>
+          <Button onClick={handleModalToggle}>Launch modal</Button>
+        </Stack>
       </div>
       <Chatbot ref={chatbotRef} displayMode={displayMode} isVisible></Chatbot>
       <TermsOfUse

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

@@ -1,13 +1,32 @@
-import React from 'react';
-import { Button, FormGroup, Radio, SkipToContent } from '@patternfly/react-core';
+import {
+  useRef,
+  useState,
+  FunctionComponent,
+  MouseEvent,
+  CSSProperties,
+  Ref,
+  MouseEvent as ReactMouseEvent
+} from 'react';
+import {
+  Button,
+  SkipToContent,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  Stack
+} 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);
+export const TermsOfUseCompactExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default);
+  const chatbotRef = useRef<HTMLDivElement>(null);
+  const termsRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select display mode');
 
   const handleSkipToContent = (e) => {
     e.preventDefault();
@@ -19,7 +38,7 @@ export const TermsOfUseCompactExample: React.FunctionComponent = () => {
     }
   };
 
-  const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleModalToggle = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -33,6 +52,42 @@ export const TermsOfUseCompactExample: React.FunctionComponent = () => {
     console.log('Clicked secondary action');
   };
 
+  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>
+  );
+
   const introduction = (
     <>
       <p>
@@ -87,37 +142,25 @@ export const TermsOfUseCompactExample: 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 ref={chatbotRef} displayMode={displayMode} isVisible></Chatbot>
       <TermsOfUse

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

@@ -84,6 +84,7 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import termsAndConditionsHeader from './PF-TermsAndConditionsHeader.svg';
 import { CloseIcon, SearchIcon, OutlinedCommentsIcon } from '@patternfly/react-icons';
+import { FunctionComponent, FormEvent, useState, useRef, MouseEvent, isValidElement, cloneElement, Children, ReactNode, Ref, MouseEvent as ReactMouseEvent, CSSProperties} from 'react';
 
 ## Structure
 
@@ -399,6 +400,7 @@ 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
 
 ```
@@ -416,6 +418,7 @@ 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
 
 ```

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

@@ -44,6 +44,7 @@ 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 { FunctionComponent, useState, useRef, isValidElement, cloneElement, Children, ReactNode, MouseEvent } from 'react';
 
 ## Demos
 

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

@@ -58,6 +58,7 @@ 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";
+import { useEffect,useCallback, useRef, useState, FunctionComponent, MouseEvent } from 'react';
 
 ### Basic ChatBot
 

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

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import { useEffect, useRef, useState, FunctionComponent, MouseEvent } from 'react';
 import { Bullseye, Brand, DropdownList, DropdownItem, DropdownGroup, SkipToContent } from '@patternfly/react-core';
 
 import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
@@ -80,8 +79,6 @@ spec:
 Here is some JavaScript code:
 
 ~~~js
-import React from 'react';
-
 const MessageLoading = () => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">
@@ -179,40 +176,37 @@ const initialConversations = {
 };
 
 const actionEvent2 = 'ActionEvent2';
-export const ChatbotDemo: React.FunctionComponent = () => {
-  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
-  const [displayMode, setDisplayMode] = React.useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
-  const [messages, setMessages] = React.useState<MessageProps[]>(initialMessages);
-  const [selectedModel, setSelectedModel] = React.useState('Granite 7B');
-  const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
-  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
-  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+export const ChatbotDemo: FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = useState<boolean>(true);
+  const [displayMode, setDisplayMode] = useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
+  const [messages, setMessages] = useState<MessageProps[]>(initialMessages);
+  const [selectedModel, setSelectedModel] = useState('Granite 7B');
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
-  const [announcement, setAnnouncement] = React.useState<string>();
-  const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const chatbotRef = React.useRef<HTMLDivElement>(null);
-  const historyRef = React.useRef<HTMLButtonElement>(null);
+  const [announcement, setAnnouncement] = useState<string>();
+  const scrollToBottomRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const chatbotRef = useRef<HTMLDivElement>(null);
+  const historyRef = useRef<HTMLButtonElement>(null);
 
   // Auto-scrolls to the latest message
-  React.useEffect(() => {
+  useEffect(() => {
     // don't scroll the first load - in this demo, we know we start with two messages
     if (messages.length > 2) {
       scrollToBottomRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
   }, [messages]);
 
-  const onSelectModel = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    value: string | number | undefined
-  ) => {
+  const onSelectModel = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     setSelectedModel(value as string);
     tracking.trackSingleItem('ModelSelected', { model: value });
   };
 
   const onSelectDisplayMode = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    _event: MouseEvent<Element, MouseEvent> | undefined,
     value: string | number | undefined
   ) => {
     setDisplayMode(value as ChatbotDisplayMode);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, FunctionComponent, MouseEvent } from 'react';
 import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
 import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotContent from '@patternfly/chatbot/dist/dynamic/ChatbotContent';
@@ -37,7 +37,7 @@ interface ModalData {
   fileName: string;
 }
 
-export const BasicDemo: React.FunctionComponent = () => {
+export const BasicDemo: FunctionComponent = () => {
   const onAttachmentClose = (event, name, id) => {
     const updatedMessages: MessageProps[] = [];
     messages.map((message) => {
@@ -75,19 +75,19 @@ export const BasicDemo: React.FunctionComponent = () => {
     }
   ];
 
-  const [error, setError] = React.useState<string>();
-  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
-  const [file, setFile] = React.useState<File>();
-  const [isLoadingFile, setIsLoadingFile] = React.useState<boolean>(false);
-  const [messages, setMessages] = React.useState<MessageProps[]>(initialMessages);
-  const [isPreviewModalOpen, setIsPreviewModalOpen] = React.useState<boolean>(false);
-  const [isEditModalOpen, setIsEditModalOpen] = React.useState<boolean>(false);
-  const [currentModalData, setCurrentModalData] = React.useState<ModalData>();
-  const [showAlert, setShowAlert] = React.useState<boolean>(false);
-  const [displayMode, setDisplayMode] = React.useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
+  const [error, setError] = useState<string>();
+  const [chatbotVisible, setChatbotVisible] = useState<boolean>(true);
+  const [file, setFile] = useState<File>();
+  const [isLoadingFile, setIsLoadingFile] = useState<boolean>(false);
+  const [messages, setMessages] = useState<MessageProps[]>(initialMessages);
+  const [isPreviewModalOpen, setIsPreviewModalOpen] = useState<boolean>(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
+  const [currentModalData, setCurrentModalData] = useState<ModalData>();
+  const [showAlert, setShowAlert] = useState<boolean>(false);
+  const [displayMode, setDisplayMode] = useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
 
   const onSelectDisplayMode = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    _event: MouseEvent<Element, MouseEvent> | undefined,
     value: string | number | undefined
   ) => {
     setDisplayMode(value as ChatbotDisplayMode);