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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.3.0-prerelease.13",
+  "version": "6.3.0-prerelease.14",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -48,8 +48,8 @@
     "path-browserify": "^1.0.1"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
     "@patternfly/documentation-framework": "6.8.2",
@@ -57,8 +57,6 @@
     "@patternfly/patternfly-a11y": "^5.0.0",
     "@types/dom-speech-recognition": "^0.0.4",
     "@types/react": "^18.2.61",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "rimraf": "^2.7.1",
     "typescript": "^5.3.3",
     "@octokit/rest": "^18.0.0",

package/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachMenu.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, isValidElement, cloneElement, Children, FunctionComponent, ReactNode } from 'react';
 import AttachMenu from '@patternfly/chatbot/dist/dynamic/AttachMenu';
 import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
 import { Button, Divider, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
@@ -63,27 +63,27 @@ const uploadMenuItems = [
   </DropdownList>
 ];
 
-export const AttachmentMenuExample: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [userFacingMenuItems, setUserFacingMenuItems] = React.useState<React.ReactNode>([]);
+export const AttachmentMenuExample: FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [userFacingMenuItems, setUserFacingMenuItems] = useState<ReactNode>([]);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
     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/Messages/AttachmentEdit.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import { FunctionComponent, MouseEvent as ReactMouseEvent, useState } from 'react';
 import { Button, Checkbox } from '@patternfly/react-core';
 import { AttachmentEdit } from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
 
-export const AttachmentEditModalExample: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [isCompact, setIsCompact] = React.useState(false);
+export const AttachmentEditModalExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isCompact, setIsCompact] = useState(false);
 
-  const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleModalToggle = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 

package/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachmentError.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
 
-export const AttachmentErrorExample: React.FunctionComponent = () => (
+export const AttachmentErrorExample: FunctionComponent = () => (
   <ChatbotAlert
     variant="danger"
     // eslint-disable-next-line no-console

package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { CSSProperties, useState, Fragment, FunctionComponent, MouseEvent, Ref } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import squareImg from './PF-social-color-square.svg';
@@ -11,10 +11,10 @@ import {
   SelectOption
 } from '@patternfly/react-core';
 
-export const BotMessageExample: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState<string>('Code');
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('Message content type');
+export const BotMessageExample: FunctionComponent = () => {
+  const [variant, setVariant] = useState<string>('Code');
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Message content type');
 
   /* eslint-disable indent */
   const renderContent = () => {
@@ -63,8 +63,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">
@@ -153,18 +151,18 @@ _Italic text, formatted with single underscores_
     title: 'Could not load chat',
     children: 'Wait a few minutes and check your network settings. If the issue persists: ',
     actionLinks: (
-      <React.Fragment>
+      <Fragment>
         <AlertActionLink component="a" href="#">
           Start a new chat
         </AlertActionLink>
         <AlertActionLink component="a" href="#">
           Contact support
         </AlertActionLink>
-      </React.Fragment>
+      </Fragment>
     )
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+  const onSelect = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     setVariant(value);
     setSelected(value as string);
     setIsOpen(false);
@@ -174,7 +172,7 @@ _Italic text, formatted with single underscores_
     setIsOpen(!isOpen);
   };
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       className="pf-v6-u-mb-md"
       ref={toggleRef}
@@ -183,7 +181,7 @@ _Italic text, formatted with single underscores_
       style={
         {
           width: '200px'
-        } as React.CSSProperties
+        } as CSSProperties
       }
     >
       {selected}

package/patternfly-docs/content/extensions/chatbot/examples/Messages/FileDetails.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails';
 
-export const FileDetailsExample: React.FunctionComponent = () => <FileDetails fileName="test.yml" />;
+export const FileDetailsExample: FunctionComponent = () => <FileDetails fileName="test.yml" />;

package/patternfly-docs/content/extensions/chatbot/examples/Messages/FileDetailsLabel.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import { useState, FunctionComponent, MouseEvent, Ref, CSSProperties } from 'react';
 import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
 import { Stack, MenuToggle, MenuToggleElement, Select, SelectList, SelectOption } from '@patternfly/react-core';
 
-export const FileDetailsLabelExample: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState<string>('plain');
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState<string>('Variant');
+export const FileDetailsLabelExample: FunctionComponent = () => {
+  const [variant, setVariant] = useState<string>('plain');
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selected, setSelected] = useState<string>('Variant');
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
-    setVariant(value);
+  const onSelect = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setVariant(value as string);
     setSelected(value as string);
     setIsOpen(false);
   };
@@ -17,7 +17,7 @@ export const FileDetailsLabelExample: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
       onClick={onToggleClick}
@@ -25,7 +25,7 @@ export const FileDetailsLabelExample: React.FunctionComponent = () => {
       style={
         {
           width: '200px'
-        } as React.CSSProperties
+        } as CSSProperties
       }
     >
       {selected}

package/patternfly-docs/content/extensions/chatbot/examples/Messages/FileDropZone.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent, useState } from 'react';
 import FileDropZone from '@patternfly/chatbot/dist/dynamic/FileDropZone';
 import { DropEvent } from '@patternfly/react-core';
 
@@ -9,9 +9,9 @@ interface readFile {
   loadError?: DOMException;
 }
 
-export const DropzoneExample: React.FunctionComponent = () => {
-  const [currentFiles, setCurrentFiles] = React.useState<File[]>([]);
-  const [readFileData, setReadFileData] = React.useState<readFile[]>([]);
+export const DropzoneExample: FunctionComponent = () => {
+  const [currentFiles, setCurrentFiles] = useState<File[]>([]);
+  const [readFileData, setReadFileData] = useState<readFile[]>([]);
 
   // remove files from both state arrays based on their name
   const removeFiles = (namesOfFilesToRemove: string[]) => {

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithAttachment.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, FunctionComponent, MouseEvent } from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import PreviewAttachment from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
@@ -10,18 +10,18 @@ interface ModalData {
   fileName: string;
 }
 
-export const AttachmentMenuExample: React.FunctionComponent = () => {
-  const [isPreviewModalOpen, setIsPreviewModalOpen] = React.useState<boolean>(false);
-  const [isEditModalOpen, setIsEditModalOpen] = React.useState<boolean>(false);
-  const [currentModalData, setCurrentModalData] = React.useState<ModalData>();
+export const AttachmentMenuExample: FunctionComponent = () => {
+  const [isPreviewModalOpen, setIsPreviewModalOpen] = useState<boolean>(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
+  const [currentModalData, setCurrentModalData] = useState<ModalData>();
 
-  const onClick = (event: React.MouseEvent, name: string) => {
+  const onClick = (event: MouseEvent, name: string) => {
     setCurrentModalData({ fileName: name, code: 'test' });
     setIsEditModalOpen(false);
     setIsPreviewModalOpen(true);
   };
 
-  const onClose = (event: React.MouseEvent, name: string, id: number | string | undefined) => {
+  const onClose = (event: MouseEvent, name: string, id: number | string | undefined) => {
     // eslint-disable-next-line no-console
     console.log(`Closed attachment with name: ${name} and id: ${id}`);
   };

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
@@ -6,7 +6,7 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
 
-export const CustomActionExample: React.FunctionComponent = () => (
+export const CustomActionExample: FunctionComponent = () => (
   <Message
     name="Bot"
     role="bot"

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { useState, FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import { Checkbox, FormGroup, Stack } from '@patternfly/react-core';
 
-export const MessageWithFeedbackExample: React.FunctionComponent = () => {
-  const [hasCloseButton, setHasCloseButton] = React.useState(false);
-  const [hasTextArea, setHasTextArea] = React.useState(false);
+export const MessageWithFeedbackExample: FunctionComponent = () => {
+  const [hasCloseButton, setHasCloseButton] = useState(false);
+  const [hasTextArea, setHasTextArea] = useState(false);
 
   return (
     <>

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedbackTimeout.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { FunctionComponent, useState } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import { Button } from '@patternfly/react-core';
 
-export const MessageWithFeedbackTimeoutExample: React.FunctionComponent = () => {
-  const [hasFeedback, setHasFeedback] = React.useState(false);
+export const MessageWithFeedbackTimeoutExample: FunctionComponent = () => {
+  const [hasFeedback, setHasFeedback] = useState(false);
 
   return (
     <>

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickResponses.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 
-export const MessageWithQuickResponsesExample: React.FunctionComponent = () => (
+export const MessageWithQuickResponsesExample: FunctionComponent = () => (
   <>
     <Message
       name="Bot"

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import { explorePipelinesQuickStart } from './explore-pipeline-quickstart.ts';
 import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts';
 import { QuickStart } from '@patternfly/chatbot/dist/esm/Message/QuickStarts/types';
 
-export const MessageWithQuickStartExample: React.FunctionComponent = () => (
+export const MessageWithQuickStartExample: FunctionComponent = () => (
   <>
     <Message
       name="Bot"

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithResponseActions.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 
-export const ResponseActionExample: React.FunctionComponent = () => (
+export const ResponseActionExample: FunctionComponent = () => (
   <Message
     name="Bot"
     role="bot"

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 
-export const MessageWithSourcesExample: React.FunctionComponent = () => {
-  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+export const MessageWithSourcesExample: FunctionComponent = () => {
+  const onSetPage = (_event: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
     // eslint-disable-next-line no-console
     console.log(`Page changed to ${newPage}`);
   };

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

@@ -47,6 +47,7 @@ import { explorePipelinesQuickStart } from './explore-pipeline-quickstart.ts';
 import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts';
 import userAvatar from './user_avatar.svg';
 import squareImg from './PF-social-color-square.svg';
+import { CSSProperties, useState, Fragment, FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, Ref, isValidElement, cloneElement, Children, ReactNode } from 'react';
 
 The `content` prop of the `<Message>` component is passed to a `<Markdown>` component (from [react-markdown](https://remarkjs.github.io/react-markdown/)), which is configured to translate plain text strings into PatternFly [`<Content>` components](/components/content) and code blocks into PatternFly [`<CodeBlock>` components.](/components/code-block)
 

package/patternfly-docs/content/extensions/chatbot/examples/Messages/PreviewAttachment.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
 import { Button, Checkbox } from '@patternfly/react-core';
 import { PreviewAttachment } from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
 
-export const PreviewAttachmentExample: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [isCompact, setIsCompact] = React.useState(false);
+export const PreviewAttachmentExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isCompact, setIsCompact] = useState(false);
 
-  const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleModalToggle = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 

package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import { Fragment, useState, CSSProperties, FunctionComponent, MouseEvent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from './user_avatar.svg';
 import {
@@ -11,11 +10,11 @@ import {
   SelectOption
 } from '@patternfly/react-core';
 
-export const UserMessageExample: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState<string>('Code');
-  const [isEditable, setIsEditable] = React.useState<boolean>(true);
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState<string>('Message content type');
+export const UserMessageExample: FunctionComponent = () => {
+  const [variant, setVariant] = useState<string>('Code');
+  const [isEditable, setIsEditable] = useState<boolean>(true);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selected, setSelected] = useState<string>('Message content type');
 
   /* eslint-disable indent */
   const renderContent = () => {
@@ -64,8 +63,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">
@@ -154,18 +151,18 @@ _Italic text, formatted with single underscores_
     title: 'Could not load chat',
     children: 'Wait a few minutes and check your network settings. If the issue persists: ',
     actionLinks: (
-      <React.Fragment>
+      <Fragment>
         <AlertActionLink component="a" href="#">
           Start a new chat
         </AlertActionLink>
         <AlertActionLink component="a" href="#">
           Contact support
         </AlertActionLink>
-      </React.Fragment>
+      </Fragment>
     )
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+  const onSelect = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     setVariant(value);
     setSelected(value as string);
     setIsOpen(false);
@@ -175,7 +172,7 @@ _Italic text, formatted with single underscores_
     setIsOpen(!isOpen);
   };
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       className="pf-v6-u-mb-md"
       ref={toggleRef}
@@ -184,7 +181,7 @@ _Italic text, formatted with single underscores_
       style={
         {
           width: '200px'
-        } as React.CSSProperties
+        } as CSSProperties
       }
     >
       {selected}

package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, FunctionComponent } from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from './user_avatar.svg';
@@ -8,12 +8,12 @@ const UserActionEndContent = () => {
   // eslint-disable-next-line no-console
   const onClick = () => console.log('custom button click');
   return (
-    <React.Fragment>
+    <Fragment>
       <Button variant="secondary" ouiaId="Secondary" onClick={onClick}>
         End content button
       </Button>
       <Alert variant="danger" title="Danger alert title" ouiaId="DangerAlert" />
-    </React.Fragment>
+    </Fragment>
   );
 };
 
@@ -36,7 +36,7 @@ const BeforeMainContent = () => (
   </div>
 );
 
-export const UserMessageWithExtraContent: React.FunctionComponent = () => (
+export const UserMessageWithExtraContent: FunctionComponent = () => (
   <>
     <Message
       avatar={userAvatar}

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

@@ -1,14 +1,51 @@
-import React from 'react';
+import { FunctionComponent, useState, Ref, MouseEvent as ReactMouseEvent, CSSProperties } from 'react';
 
 import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
-import { Radio } from '@patternfly/react-core/dist/dynamic/Radio';
 import { Checkbox } from '@patternfly/react-core/dist/dynamic/Checkbox';
-import { FormGroup } from '@patternfly/react-core/dist/dynamic/FormGroup';
 import { Stack } from '@patternfly/react-core/dist/dynamic/Stack';
+import { MenuToggle, MenuToggleElement, Select, SelectList, SelectOption } from '@patternfly/react-core';
 
-export const ChatbotContainerDemo: React.FunctionComponent = () => {
-  const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
-  const [isVisible, setIsVisible] = React.useState(true);
+export const ChatbotContainerDemo: FunctionComponent = () => {
+  const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default);
+  const [isVisible, setIsVisible] = useState(true);
+  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 === 'Overlay / 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 (
     <>
@@ -21,36 +58,22 @@ export const ChatbotContainerDemo: React.FunctionComponent = () => {
         }}
       >
         <Stack hasGutter>
-          <FormGroup role="radiogroup" isInline fieldId="displayModeRadios" label="Display mode">
-            <Radio
-              isChecked={displayMode === ChatbotDisplayMode.default}
-              onChange={() => setDisplayMode(ChatbotDisplayMode.default)}
-              name="basic-inline-radio"
-              label="Overlay / 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>
+          <Select
+            id="single-select"
+            isOpen={isOpen}
+            selected={selected}
+            onSelect={onSelect}
+            onOpenChange={(isOpen) => setIsOpen(isOpen)}
+            toggle={toggle}
+            shouldFocusToggleOnSelect
+          >
+            <SelectList>
+              <SelectOption value="Overlay / default">Overlay / default</SelectOption>
+              <SelectOption value="Docked">Docked</SelectOption>
+              <SelectOption value="Fullscreen">Fullscreen</SelectOption>
+              <SelectOption value="Embedded">Embedded</SelectOption>
+            </SelectList>
+          </Select>
           <Checkbox
             label="Display chatbot container"
             isChecked={isVisible}

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

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

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
 
-export const FootnoteDemo: React.FunctionComponent = () => (
+export const FootnoteDemo: FunctionComponent = () => (
   <ChatbotFootnote
     label="ChatBot uses AI. Check for mistakes."
     popover={{