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

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={{

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent, MouseEvent, useState } from 'react';
 import {
   Brand,
   Bullseye,
@@ -27,19 +27,16 @@ import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-dra
 import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
 
-export const BasicDemo: React.FunctionComponent = () => {
-  const [selectedModel, setSelectedModel] = React.useState('Granite Code 7B');
-  const [showAll, setShowAll] = React.useState<boolean>(true);
-  const [showMenu, setShowMenu] = React.useState<boolean>(true);
-  const [showLogo, setShowLogo] = React.useState<boolean>(false);
-  const [showCenteredLogo, setShowCenteredLogo] = React.useState<boolean>(true);
-  const [showSelectorDropdown, setShowSelectorDropdown] = React.useState<boolean>(true);
-  const [showOptionsDropdown, setShowOptionsDropdown] = React.useState<boolean>(true);
+export const BasicDemo: FunctionComponent = () => {
+  const [selectedModel, setSelectedModel] = useState('Granite Code 7B');
+  const [showAll, setShowAll] = useState<boolean>(true);
+  const [showMenu, setShowMenu] = useState<boolean>(true);
+  const [showLogo, setShowLogo] = useState<boolean>(false);
+  const [showCenteredLogo, setShowCenteredLogo] = useState<boolean>(true);
+  const [showSelectorDropdown, setShowSelectorDropdown] = useState<boolean>(true);
+  const [showOptionsDropdown, setShowOptionsDropdown] = useState<boolean>(true);
 
-  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);
   };
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, FunctionComponent } from 'react';
 import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotConversationHistoryNav, {
   Conversation
@@ -59,16 +59,17 @@ const EMPTY_STATE = {
   icon: OutlinedCommentsIcon
 };
 
-export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(true);
-  const [isButtonOrderReversed, setIsButtonOrderReversed] = React.useState(false);
-  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [isButtonOrderReversed, setIsButtonOrderReversed] = useState(false);
+  const [isCompact, setIsCompact] = useState(false);
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [hasError, setHasError] = React.useState(false);
-  const [isEmpty, setIsEmpty] = React.useState(false);
-  const [hasNoResults, setHasNoResults] = React.useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [isEmpty, setIsEmpty] = useState(false);
+  const [hasNoResults, setHasNoResults] = useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   const findMatchingItems = (targetValue: string) => {
@@ -136,6 +137,13 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
         id="drawer-has-no-results"
         name="drawer-has-no-results"
       ></Checkbox>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="drawer-compact"
+        name="drawer-compact"
+      ></Checkbox>
       <ChatbotConversationHistoryNav
         displayMode={displayMode}
         onDrawerToggle={() => setIsOpen(!isOpen)}
@@ -162,6 +170,7 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
         errorState={hasError ? ERROR : undefined}
         emptyState={isEmpty ? EMPTY_STATE : undefined}
         noResultsState={hasNoResults ? NO_RESULTS : undefined}
+        isCompact={isCompact}
       />
     </>
   );

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, FunctionComponent } from 'react';
 import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotConversationHistoryNav, {
   Conversation
@@ -24,10 +24,10 @@ const initialConversations: Conversation[] = [
   { id: '12', text: 'Manage user accounts', noIcon: true }
 ];
 
-export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(true);
-  const [isButtonOrderReversed, setIsButtonOrderReversed] = React.useState(false);
-  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [isButtonOrderReversed, setIsButtonOrderReversed] = useState(false);
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
   const displayMode = ChatbotDisplayMode.embedded;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, FunctionComponent } from 'react';
 import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotConversationHistoryNav, {
   Conversation
@@ -38,12 +38,12 @@ const NO_RESULTS = {
   icon: SearchIcon
 };
 
-export const ChatbotHeaderDrawerResizableDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(true);
-  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+export const ChatbotHeaderDrawerResizableDemo: FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
-  const [showNoResults, setShowNoResults] = React.useState(false);
+  const [showNoResults, setShowNoResults] = useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   const findMatchingItems = (targetValue: string) => {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent, useState } from 'react';
 import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotConversationHistoryNav, {
   Conversation
@@ -49,8 +49,9 @@ const conversations: { [key: string]: Conversation[] } = {
   ]
 };
 
-export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
-  const [isDrawerOpen, setIsDrawerOpen] = React.useState(true);
+export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(true);
+  const [isCompact, setIsCompact] = useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   return (
@@ -62,6 +63,13 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
         id="drawer-actions-visible"
         name="drawer-actions-visible"
       ></Checkbox>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="drawer-actions-compact"
+        name="drawer-actions-compact"
+      ></Checkbox>
       <ChatbotConversationHistoryNav
         displayMode={displayMode}
         onDrawerToggle={() => setIsDrawerOpen(!isDrawerOpen)}
@@ -69,6 +77,7 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
         setIsDrawerOpen={setIsDrawerOpen}
         conversations={conversations}
         drawerContent={<div>Drawer content</div>}
+        isCompact={isCompact}
       />
     </>
   );

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent, useState } from 'react';
 import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotConversationHistoryNav, {
   Conversation
@@ -22,9 +22,10 @@ const menuItems = [
   </DropdownList>
 ];
 
-export const ChatbotHeaderDrawerWithSelection: React.FunctionComponent = () => {
-  const [isDrawerOpen, setIsDrawerOpen] = React.useState(true);
-  const [currentSelection, setCurrentSelection] = React.useState('2');
+export const ChatbotHeaderDrawerWithSelection: FunctionComponent = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(true);
+  const [currentSelection, setCurrentSelection] = useState('2');
+  const [isCompact, setIsCompact] = useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   const conversations: { [key: string]: Conversation[] } = {
@@ -60,8 +61,15 @@ export const ChatbotHeaderDrawerWithSelection: React.FunctionComponent = () => {
         label="Display drawer"
         isChecked={isDrawerOpen}
         onChange={() => setIsDrawerOpen(!isDrawerOpen)}
-        id="drawer-actions-visible"
-        name="drawer-actions-visible"
+        id="drawer-selected-visible"
+        name="drawer-selected-visible"
+      ></Checkbox>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="drawer-selected-compact"
+        name="drawer-selected-compact"
       ></Checkbox>
       <ChatbotConversationHistoryNav
         displayMode={displayMode}
@@ -72,6 +80,7 @@ export const ChatbotHeaderDrawerWithSelection: React.FunctionComponent = () => {
         drawerContent={<div>Drawer content</div>}
         activeItemId={currentSelection}
         onSelectActiveItem={(_e, id) => setCurrentSelection(id as string)}
+        isCompact={isCompact}
       />
     </>
   );

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');