@patternfly/chatbot 6.3.0-prerelease.8 → 6.3.0

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

@@ -1,12 +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 InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-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"
@@ -16,21 +15,13 @@ export const CustomActionExample: React.FunctionComponent = () => (
       regenerate: {
         ariaLabel: 'Regenerate',
         clickedAriaLabel: 'Regenerated',
+        isClicked: true,
         // eslint-disable-next-line no-console
         onClick: () => console.log('Clicked regenerate'),
         tooltipContent: 'Regenerate',
         clickedTooltipContent: 'Regenerated',
         icon: <RedoIcon />
       },
-      download: {
-        ariaLabel: 'Download',
-        clickedAriaLabel: 'Downloaded',
-        // eslint-disable-next-line no-console
-        onClick: () => console.log('Clicked download'),
-        tooltipContent: 'Download',
-        clickedTooltipContent: 'Downloaded',
-        icon: <DownloadIcon />
-      },
       info: {
         ariaLabel: 'Info',
         // eslint-disable-next-line no-console

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"
@@ -17,7 +17,7 @@ export const ResponseActionExample: 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/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

@@ -31,6 +31,7 @@ sortValue: 3
 ---
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
 import { RobotIcon } from '@patternfly/react-icons/dist/esm/icons/robot-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
@@ -47,6 +48,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)
 
@@ -78,6 +80,22 @@ You can add actions to a message, to allow users to interact with the message co
 
 ```
 
+### Message actions clicked state
+
+You can apply a clicked state to message actions, to convey that the action has previously been selected.
+
+To define which message response action should show a clicked state when the `<ResponseActions>` component first renders, use the `isClicked` boolean property within each action's configuration object.
+
+To make an action button appear active by default, set `isClicked: true`. Only 1 action can be visually active at any given time.
+
+If you unintentionally set `isClicked: true` for multiple buttons, the component will apply a predefined internal precedence order to resolve the conflict. The button encountered first in this order will be displayed as clicked, while other buttons will sustain their default appearance. The default precedence of button actions is: "positive", "negative", "copy", "share", "listen", followed by any other custom actions (in object key order).
+
+Once the component has rendered, user interactions will take precedence over the initial `isClicked` prop. Clicking a button will activate it and deactivate any other active button. The `isDisabled` prop for each action button specifies if a button is interactive or not.
+
+```js file="./MessageWithClickedResponseActions.tsx"
+
+```
+
 ### Custom message actions
 
 Beyond the standard message actions (good response, bad response, copy, share, or listen), you can add custom actions to a bot message by passing an `actions` object to the `<Message>` component. This object can contain the following customizations:
@@ -85,6 +103,7 @@ Beyond the standard message actions (good response, bad response, copy, share, o
 - `ariaLabel`
 - `onClick`
 - `className`
+- `isClicked`
 - `isDisabled`
 - `tooltipContent`
 - `tooltipContent`

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 {
@@ -10,17 +9,20 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
+import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 
-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');
+  const [isExpandable, setIsExpanded] = useState(false);
 
   /* eslint-disable indent */
   const renderContent = () => {
     switch (variant) {
       case 'Code':
+      case 'Expandable code':
         return code;
       case 'Inline code':
         return inlineCode;
@@ -64,8 +66,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,28 +154,33 @@ _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);
+    if (value === 'Expandable code') {
+      setIsExpanded(true);
+    } else {
+      setIsExpanded(false);
+    }
   };
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
   };
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       className="pf-v6-u-mb-md"
       ref={toggleRef}
@@ -184,7 +189,7 @@ _Italic text, formatted with single underscores_
       style={
         {
           width: '200px'
-        } as React.CSSProperties
+        } as CSSProperties
       }
     >
       {selected}
@@ -218,6 +223,7 @@ _Italic text, formatted with single underscores_
       >
         <SelectList>
           <SelectOption value="Code">Code</SelectOption>
+          <SelectOption value="Expandable code">Expandable code</SelectOption>
           <SelectOption value="Inline code">Inline code</SelectOption>
           <SelectOption value="Heading">Heading</SelectOption>
           <SelectOption value="Block quotes">Block quotes</SelectOption>
@@ -244,6 +250,11 @@ _Italic text, formatted with single underscores_
         error={variant === 'Error' ? error : undefined}
         onEditUpdate={() => setIsEditable(false)}
         onEditCancel={() => setIsEditable(false)}
+        codeBlockProps={{ isExpandable, expandableSectionProps: { truncateMaxLines: isExpandable ? 1 : undefined } }}
+        // In this example, custom plugin will override any custom expandedText or collapsedText attributes provided
+        // The purpose of this plugin is to provide unique link names for the code blocks
+        // Because they are in the same message, this requires a custom plugin to parse the syntax tree
+        additionalRehypePlugins={[rehypeCodeBlockToggle]}
       />
     </>
   );

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

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,17 +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 [isCompact, setIsCompact] = 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) => {

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
@@ -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
@@ -49,9 +49,9 @@ const conversations: { [key: string]: Conversation[] } = {
   ]
 };
 
-export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
-  const [isDrawerOpen, setIsDrawerOpen] = React.useState(true);
-  const [isCompact, setIsCompact] = React.useState(false);
+export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(true);
+  const [isCompact, setIsCompact] = useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   return (

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