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

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,15 +11,17 @@ 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');
+  const [isExpandable, setIsExpanded] = useState(false);
 
   /* eslint-disable indent */
   const renderContent = () => {
     switch (variant) {
       case 'Code':
+      case 'Expandable code':
         return code;
       case 'Heading':
         return heading;
@@ -63,8 +65,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,28 +153,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}
@@ -183,7 +188,7 @@ _Italic text, formatted with single underscores_
       style={
         {
           width: '200px'
-        } as React.CSSProperties
+        } as CSSProperties
       }
     >
       {selected}
@@ -239,6 +244,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>
@@ -261,6 +267,7 @@ _Italic text, formatted with single underscores_
           variant === 'Table' ? { 'aria-label': 'App information and user roles for bot messages' } : undefined
         }
         error={variant === 'Error' ? error : undefined}
+        codeBlockProps={{ isExpandable, expandableSectionProps: { truncateMaxLines: isExpandable ? 1 : undefined } }}
       />
     </>
   );

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 (
     <>
@@ -40,6 +40,26 @@ export const MessageWithFeedbackExample: React.FunctionComponent = () => {
             focusOnLoad: false
           }}
         />
+        <Message
+          name="Bot"
+          role="bot"
+          avatar={patternflyAvatar}
+          content="This is a compact message with the feedback card:"
+          userFeedbackForm={{
+            quickResponses: [
+              { id: '1', content: 'Helpful information' },
+              { id: '2', content: 'Easy to understand' },
+              { id: '3', content: 'Resolved my issue' }
+            ],
+            onSubmit: (quickResponse, additionalFeedback) =>
+              alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
+            hasTextArea,
+            // eslint-disable-next-line no-console
+            onClose: () => console.log('closed feedback form'),
+            focusOnLoad: false
+          }}
+          isCompact
+        />
       </Stack>
       <Stack hasGutter>
         <FormGroup role="radiogroup" isInline fieldId="feedback-thank-you" label="Variant">
@@ -65,6 +85,19 @@ export const MessageWithFeedbackExample: React.FunctionComponent = () => {
             focusOnLoad: false
           }}
         />
+        <Message
+          name="Bot"
+          role="bot"
+          avatar={patternflyAvatar}
+          content="This is a compact thank-you message, which is displayed once the feedback card is submitted:"
+          // eslint-disable-next-line no-console
+          userFeedbackComplete={{
+            // eslint-disable-next-line no-console
+            onClose: hasCloseButton ? () => console.log('closed completion message') : undefined,
+            focusOnLoad: false
+          }}
+          isCompact
+        />
       </Stack>
     </>
   );

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"
@@ -50,5 +50,29 @@ export const MessageWithQuickResponsesExample: React.FunctionComponent = () => (
         { id: '2', content: 'No', onClick: () => alert('Clicked no') }
       ]}
     />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Welcome back, User! How can I help you today?"
+      quickResponses={[
+        { id: '1', content: 'Help me with an access issue', onClick: () => alert('Clicked id 1') },
+        { id: '2', content: 'Show my critical vulnerabilities', onClick: () => alert('Clicked id 2') },
+        { id: '3', content: 'Create new integrations', onClick: () => alert('Clicked id 3') },
+        { id: '4', content: 'Get recommendations from an advisor', onClick: () => alert('Clicked id 4') },
+        { id: '5', content: 'Something else', onClick: () => alert('Clicked id 5') }
+      ]}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Example with compact responses"
+      quickResponses={[
+        { id: '1', content: 'Yes', onClick: () => alert('Clicked id 1') },
+        { id: '2', content: 'No', onClick: () => alert('Clicked id 2') }
+      ]}
+      isCompact
+    />
   </>
 );

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"
@@ -27,5 +27,16 @@ export const MessageWithQuickStartExample: React.FunctionComponent = () => (
         onSelectQuickStart: (id) => alert(id)
       }}
     />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="This quick start tile is compact"
+      quickStarts={{
+        quickStart: monitorSampleAppQuickStart,
+        onSelectQuickStart: (id) => alert(id)
+      }}
+      isCompact
+    />
   </>
 );

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}`);
   };
@@ -150,6 +150,27 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
           onSetPage
         }}
       />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="This example displays a compact sources card"
+        sources={{
+          sources: [
+            {
+              link: '#'
+            },
+            {
+              link: '#'
+            },
+            {
+              link: '#'
+            }
+          ],
+          onSetPage
+        }}
+        isCompact
+      />
     </>
   );
 };

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,16 +1,24 @@
-import React from 'react';
-import { Button } from '@patternfly/react-core';
+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);
+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);
   };
 
   return (
     <>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="modal-compact-preview"
+        name="modal-compact-preview"
+      ></Checkbox>
       <Button onClick={handleModalToggle}>Launch modal</Button>
       <PreviewAttachment
         code="I am a code snippet"
@@ -19,6 +27,7 @@ export const PreviewAttachmentExample: React.FunctionComponent = () => {
         isModalOpen={isModalOpen}
         onDismiss={() => null}
         onEdit={() => null}
+        isCompact={isCompact}
       />
     </>
   );

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,16 +10,18 @@ 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');
+  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 +65,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 +153,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 +188,7 @@ _Italic text, formatted with single underscores_
       style={
         {
           width: '200px'
-        } as React.CSSProperties
+        } as CSSProperties
       }
     >
       {selected}
@@ -218,6 +222,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 +249,7 @@ _Italic text, formatted with single underscores_
         error={variant === 'Error' ? error : undefined}
         onEditUpdate={() => setIsEditable(false)}
         onEditCancel={() => setIsEditable(false)}
+        codeBlockProps={{ isExpandable, expandableSectionProps: { truncateMaxLines: isExpandable ? 1 : undefined } }}
       />
     </>
   );

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}