@patternfly/chatbot 6.3.0-prerelease.9 → 6.4.0-prerelease.2

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

@@ -0,0 +1,196 @@
+// Assisted by: Cursor
+import React, { FunctionComponent, useState } from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { Checkbox, DropdownItem, DropdownList } from '@patternfly/react-core';
+import { ThumbtackIcon } from '@patternfly/react-icons';
+
+// Sample conversations
+const initialConversations: { [key: string]: Conversation[] } = {
+  Today: [
+    {
+      id: '1',
+      text: 'Red Hat products and services',
+      label: 'Conversation options for "Red Hat products and services"'
+    }
+  ],
+  'This month': [
+    {
+      id: '2',
+      text: 'Enterprise Linux installation and setup',
+      label: 'Conversation options for "Enterprise Linux installation and setup"'
+    },
+    {
+      id: '3',
+      text: 'Troubleshoot system crash',
+      label: 'Conversation options for "Troubleshoot system crash"'
+    }
+  ],
+  March: [
+    {
+      id: '4',
+      text: 'Ansible security and updates',
+      label: 'Conversation options for "Ansible security and updates"'
+    },
+    {
+      id: '5',
+      text: 'Red Hat certification',
+      label: 'Conversation options for "Red Hat certification"'
+    },
+    {
+      id: '6',
+      text: 'Lightspeed user documentation',
+      label: 'Conversation options for "Lightspeed user documentation"'
+    }
+  ],
+  February: [
+    {
+      id: '7',
+      text: 'Crashing pod assistance',
+      label: 'Conversation options for "Crashing pod assistance"'
+    },
+    {
+      id: '8',
+      text: 'OpenShift AI pipelines',
+      label: 'Conversation options for "OpenShift AI pipelines"'
+    },
+    {
+      id: '9',
+      text: 'Updating subscription plan',
+      label: 'Conversation options for "Updating subscription plan"'
+    },
+    {
+      id: '10',
+      text: 'Red Hat licensing options',
+      label: 'Conversation options for "Red Hat licensing options"'
+    }
+  ],
+  January: [
+    {
+      id: '11',
+      text: 'RHEL system performance',
+      label: 'Conversation options for "RHEL system performance"'
+    },
+    {
+      id: '12',
+      text: 'Manage user accounts',
+      label: 'Conversation options for "Manage user accounts"'
+    }
+  ]
+};
+
+export const ChatbotHeaderPinDemo: FunctionComponent = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(true);
+  const [isCompact, setIsCompact] = useState(false);
+  const [pinnedConversations, setPinnedConversations] = useState<Set<string>>(new Set());
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  const handlePinToggle = (conversationId: string) => {
+    setPinnedConversations((prev) => {
+      const newPinned = new Set(prev);
+      if (newPinned.has(conversationId)) {
+        newPinned.delete(conversationId);
+      } else {
+        newPinned.add(conversationId);
+      }
+      return newPinned;
+    });
+  };
+
+  const createMenuItems = (conversationId: string) => {
+    const isPinned = pinnedConversations.has(conversationId);
+
+    return [
+      <DropdownList key={`${conversationId}-menu`} aria-label="Conversation options">
+        <DropdownItem
+          value={isPinned ? 'Unpin' : 'Pin'}
+          id={isPinned ? 'Unpin' : 'Pin'}
+          onClick={() => handlePinToggle(conversationId)}
+        >
+          {isPinned ? 'Unpin' : 'Pin'}
+        </DropdownItem>
+        <DropdownItem value="Delete" id="Delete">
+          Delete
+        </DropdownItem>
+        <DropdownItem value="Rename" id="Rename">
+          Rename
+        </DropdownItem>
+        <DropdownItem value="Archive" id="Archive">
+          Archive
+        </DropdownItem>
+      </DropdownList>
+    ];
+  };
+
+  // Reorganize conversations to show pinned ones at the top
+  const organizeConversations = () => {
+    const organized: { [key: string]: Conversation[] } = {};
+    const pinnedItems: Conversation[] = [];
+
+    // Collect all pinned conversations first
+    Object.entries(initialConversations).forEach(([_period, conversations]) => {
+      conversations.forEach((conv) => {
+        if (pinnedConversations.has(conv.id)) {
+          pinnedItems.push({
+            ...conv,
+            menuItems: createMenuItems(conv.id),
+            icon: <ThumbtackIcon />
+          });
+        }
+      });
+    });
+
+    // Add pinned section if there are pinned items
+    if (pinnedItems.length > 0) {
+      organized.Pinned = pinnedItems;
+    }
+
+    // Add unpinned conversations
+    Object.entries(initialConversations).forEach(([period, conversations]) => {
+      const unpinnedConversations = conversations
+        .filter((conv) => !pinnedConversations.has(conv.id))
+        .map((conv) => ({
+          ...conv,
+          menuItems: createMenuItems(conv.id)
+        }));
+
+      if (unpinnedConversations.length > 0) {
+        organized[period] = unpinnedConversations;
+      }
+    });
+
+    return organized;
+  };
+
+  const conversations = organizeConversations();
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isDrawerOpen}
+        onChange={() => setIsDrawerOpen(!isDrawerOpen)}
+        id="drawer-pin-visible"
+        name="drawer-pin-visible"
+      ></Checkbox>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="drawer-pin-compact"
+        name="drawer-pin-compact"
+      ></Checkbox>
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => setIsDrawerOpen(!isDrawerOpen)}
+        isDrawerOpen={isDrawerOpen}
+        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
@@ -7,8 +7,8 @@ import { Checkbox, DropdownItem, DropdownList } from '@patternfly/react-core';
 
 const menuItems = [
   <DropdownList key="list-1">
-    <DropdownItem value="Share" id="Share">
-      Share
+    <DropdownItem value="Download" id="Download">
+      Download
     </DropdownItem>
     <DropdownItem value="Rename" id="Rename">
       Rename
@@ -22,10 +22,10 @@ const menuItems = [
   </DropdownList>
 ];
 
-export const ChatbotHeaderDrawerWithSelection: React.FunctionComponent = () => {
-  const [isDrawerOpen, setIsDrawerOpen] = React.useState(true);
-  const [currentSelection, setCurrentSelection] = React.useState('2');
-  const [isCompact, setIsCompact] = React.useState(false);
+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[] } = {

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