@patternfly/chatbot 2.1.0-prerelease.17

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
+import { Radio } from '@patternfly/react-core/dist/dynamic/Radio';
+import { FormGroup } from '@patternfly/react-core/dist/dynamic/FormGroup';
+import { Stack } from '@patternfly/react-core/dist/dynamic/Stack';
+
+export const FileDetailsLabelExample: React.FunctionComponent = () => {
+  const [variant, setVariant] = React.useState('plain');
+
+  return (
+    <Stack hasGutter>
+      <FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Variant">
+        <Radio
+          isChecked={variant === 'plain'}
+          onChange={() => setVariant('plain')}
+          name="basic-inline-radio"
+          label="Plain"
+          id="plain"
+        />
+        <Radio
+          isChecked={variant === 'closeable'}
+          onChange={() => setVariant('closeable')}
+          name="basic-inline-radio"
+          label="Closeable"
+          id="closeable"
+        />
+        <Radio
+          isChecked={variant === 'clickable'}
+          onChange={() => setVariant('clickable')}
+          name="basic-inline-radio"
+          label="Clickable"
+          id="clickable"
+        />
+        <Radio
+          isChecked={variant === 'loading'}
+          onChange={() => setVariant('loading')}
+          name="basic-inline-radio"
+          label="Loading"
+          id="loading"
+        />
+      </FormGroup>
+      <div className="pf-chatbot__file-details-example">
+        <FileDetailsLabel
+          fileName="auth-operator.yml"
+          // eslint-disable-next-line no-console
+          {...(variant === 'closeable' && { onClose: () => console.log('clicked close button!') })}
+          // eslint-disable-next-line no-console
+          {...(variant === 'clickable' && { onClick: () => console.log('clicked entire button!') })}
+          {...(variant === 'loading' && { isLoading: true })}
+        />
+      </div>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import FileDropZone from '@patternfly/chatbot/dist/dynamic/FileDropZone';
+import { DropEvent } from '@patternfly/react-core';
+
+interface readFile {
+  fileName: string;
+  data?: string;
+  loadResult?: 'danger' | 'success';
+  loadError?: DOMException;
+}
+
+export const DropzoneExample: React.FunctionComponent = () => {
+  const [currentFiles, setCurrentFiles] = React.useState<File[]>([]);
+  const [readFileData, setReadFileData] = React.useState<readFile[]>([]);
+
+  // remove files from both state arrays based on their name
+  const removeFiles = (namesOfFilesToRemove: string[]) => {
+    const newCurrentFiles = currentFiles.filter(
+      (currentFile) => !namesOfFilesToRemove.some((fileName) => fileName === currentFile.name)
+    );
+
+    setCurrentFiles(newCurrentFiles);
+
+    const newReadFiles = readFileData.filter(
+      (readFile) => !namesOfFilesToRemove.some((fileName) => fileName === readFile.fileName)
+    );
+
+    setReadFileData(newReadFiles);
+  };
+
+  // callback that will be called by the react dropzone with the newly dropped file objects
+  const handleFileDrop = (_event: DropEvent, droppedFiles: File[]) => {
+    // any custom validation you'd like
+    if (droppedFiles.length > 1) {
+      alert('Error: Dropped too many files');
+      return;
+    }
+    if (droppedFiles[0].size > 25000000) {
+      alert('Error: File size too large');
+      return;
+    }
+    // identify what, if any, files are re-uploads of already uploaded files
+    const currentFileNames = currentFiles.map((file) => file.name);
+    const reUploads = droppedFiles.filter((droppedFile) => currentFileNames.includes(droppedFile.name));
+
+    /** this promise chain is needed because if the file removal is done at the same time as the file adding react
+     * won't realize that the status items for the re-uploaded files needs to be re-rendered */
+    Promise.resolve()
+      .then(() => removeFiles(reUploads.map((file) => file.name)))
+      .then(() => alert(`Dropped ${droppedFiles.map((file) => file.name)}`));
+  };
+
+  return (
+    <FileDropZone onFileDrop={handleFileDrop} displayMode="fullscreen">
+      <div className="pf-chatbot__file-drop-zone-example">
+        Content that shows when no dragging is happening (drag an item here to see the drop zone)
+      </div>
+    </FileDropZone>
+  );
+};

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

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import PreviewAttachment from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
+import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
+import userAvatar from './user_avatar.jpg';
+
+interface ModalData {
+  code: string;
+  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>();
+
+  const onClick = (event: React.MouseEvent, name: string) => {
+    setCurrentModalData({ fileName: name, code: 'test' });
+    setIsEditModalOpen(false);
+    setIsPreviewModalOpen(true);
+  };
+
+  const onClose = (event: React.MouseEvent, name: string, id: number | string | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log(`Closed attachment with name: ${name} and id: ${id}`);
+  };
+
+  return (
+    <>
+      <Message
+        name="User"
+        role="user"
+        avatar={userAvatar}
+        content="Here is an uploaded file"
+        attachments={[{ name: 'auth-operator.yml', id: '1', onClick, onClose }]}
+      />
+      <Message
+        name="User"
+        role="user"
+        avatar={userAvatar}
+        content="Here are two uploaded files"
+        attachments={[
+          { name: 'auth-operator.yml', id: '1' },
+          { name: 'patternfly.svg', id: '2' }
+        ]}
+      />
+      {currentModalData && (
+        <PreviewAttachment
+          code={currentModalData?.code}
+          fileName={currentModalData?.fileName}
+          isModalOpen={isPreviewModalOpen}
+          onEdit={() => {
+            setIsPreviewModalOpen(false);
+            setIsEditModalOpen(true);
+          }}
+          onDismiss={() => setCurrentModalData(undefined)}
+          handleModalToggle={() => setIsPreviewModalOpen(false)}
+        />
+      )}
+      {currentModalData && (
+        <AttachmentEdit
+          code={currentModalData?.code}
+          fileName={currentModalData?.fileName}
+          isModalOpen={isEditModalOpen}
+          onSave={() => {
+            setIsEditModalOpen(false);
+          }}
+          onCancel={() => setCurrentModalData(undefined)}
+          handleModalToggle={() => setIsEditModalOpen(false)}
+        />
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,39 @@
+import React 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 = () => (
+  <Message
+    name="Bot"
+    role="bot"
+    avatar={patternflyAvatar}
+    content="Example with custom actions"
+    actions={{
+      regenerate: {
+        ariaLabel: 'Regenerate',
+        // eslint-disable-next-line no-console
+        onClick: () => console.log('Clicked regenerate'),
+        tooltipContent: 'Regenerate',
+        icon: <RedoIcon />
+      },
+      download: {
+        ariaLabel: 'Download',
+        // eslint-disable-next-line no-console
+        onClick: () => console.log('Clicked download'),
+        tooltipContent: 'Download',
+        icon: <DownloadIcon />
+      },
+      info: {
+        ariaLabel: 'Info',
+        // eslint-disable-next-line no-console
+        onClick: () => console.log('Clicked info'),
+        tooltipContent: 'Info',
+        icon: <InfoCircleIcon />
+      }
+    }}
+  />
+);

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+
+export const MessageWithQuickResponsesExample: React.FunctionComponent = () => (
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Did you clear your cache?"
+      quickResponses={[
+        { id: '1', content: 'Yes', onClick: () => alert('Clicked yes') },
+        { id: '2', content: 'No', onClick: () => alert('Clicked no') }
+      ]}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="What browser are you noticing the issue in?"
+      quickResponses={[
+        { id: '1', content: 'Microsoft Edge', onClick: () => alert('Clicked Edge') },
+        { id: '2', content: 'Google Chrome', onClick: () => alert('Clicked Chrome') },
+        { id: '3', content: 'Mozilla Firefox', onClick: () => alert('Clicked Firefox') },
+        { id: '4', content: 'Apple Safari', onClick: () => alert('Clicked Safari') },
+        { id: '5', content: 'Internet Explorer', onClick: () => alert('Clicked Internet Explorer') }
+      ]}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Welcome back! How can I help?"
+      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') }
+      ]}
+    />
+  </>
+);

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+
+export const ResponseActionExample: React.FunctionComponent = () => (
+  <Message
+    name="Bot"
+    role="bot"
+    avatar={patternflyAvatar}
+    content="Example with all prebuilt actions"
+    actions={{
+      // eslint-disable-next-line no-console
+      positive: { onClick: () => console.log('Good response') },
+      // eslint-disable-next-line no-console
+      negative: { onClick: () => console.log('Bad response') },
+      // eslint-disable-next-line no-console
+      copy: { onClick: () => console.log('Copy') },
+      // eslint-disable-next-line no-console
+      share: { onClick: () => console.log('Share') },
+      // eslint-disable-next-line no-console
+      listen: { onClick: () => console.log('Listen') }
+    }}
+  />
+);

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

@@ -0,0 +1,118 @@
+import React 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) => {
+    // eslint-disable-next-line no-console
+    console.log(`Page changed to ${newPage}`);
+  };
+
+  return (
+    <>
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="Example with sources"
+        sources={{
+          sources: [
+            {
+              title: 'Getting started with Red Hat OpenShift',
+              link: '#',
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...'
+            },
+            {
+              title: 'Azure Red Hat OpenShift documentation',
+              link: '#',
+              body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...'
+            },
+            {
+              title: 'OKD Documentation: Home',
+              link: '#',
+              body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon ...'
+            }
+          ],
+          onSetPage
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="Example with very long sources"
+        sources={{
+          sources: [
+            {
+              title: 'Getting started with Red Hat OpenShift AI and other products',
+              link: '#',
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...'
+            },
+            {
+              title: 'Azure Red Hat OpenShift documentation | Red Hat',
+              link: '#',
+              body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...'
+            }
+          ],
+          onSetPage
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="Example with only one source"
+        sources={{
+          sources: [
+            {
+              title: 'Getting started with Red Hat OpenShift',
+              link: '#',
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...'
+            }
+          ],
+          onSetPage
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="Example with sources that include a title and link"
+        sources={{
+          sources: [
+            { title: 'Getting started with Red Hat OpenShift', link: '#' },
+            {
+              title: 'Azure Red Hat OpenShift documentation',
+              link: '#'
+            },
+            {
+              title: 'OKD Documentation: Home',
+              link: '#'
+            }
+          ],
+          onSetPage
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="Example with link-only sources (not recommended)"
+        sources={{
+          sources: [
+            {
+              link: '#'
+            },
+            {
+              link: '#'
+            },
+            {
+              link: '#'
+            }
+          ],
+          onSetPage
+        }}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,171 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: PatternFly-AI
+subsection: ChatBot
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Messages
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents:
+  [
+    'AttachMenu',
+    'AttachmentEdit',
+    'FileDetails',
+    'FileDetailsLabel',
+    'FileDropZone',
+    'PreviewAttachment',
+    'Message',
+    'PreviewAttachment',
+    'ActionProps',
+    'SourcesCardProps'
+  ]
+sortValue: 3
+---
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+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';
+import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
+import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
+import patternflyAvatar from './patternfly_avatar.jpg';
+import userAvatar from './user_avatar.jpg';
+import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
+import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails';
+import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
+import FileDropZone from '@patternfly/chatbot/dist/dynamic/FileDropZone';
+import { PreviewAttachment } from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
+import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
+
+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)
+
+## Messages
+
+### Bot messages
+
+Messages from the chatbot will be marked with an "AI" label to clearly communicate the use of AI to users. The chatbot can display different `content` types, including plain text, code, or a loading animation (via `isLoading`).
+
+<br />
+
+By default, a date and timestamp is displayed with each message. We recommend using the `timestamp` prop in real chatbots, since it will allow you to set persistent dates and times on messages, even if the messages re-render. You can update `timestamp` with a different [date and time format](/ux-writing/numerics) as needed.
+
+```js file="./BotMessage.tsx"
+
+```
+
+### Messages actions
+
+You can add actions to a message, to allow users to interact with the message content. These actions can include:
+
+- Feedback responses that allow users to rate a message as "good" or "bad".
+- Copy and share controls that allow users to share the message content with others.
+- A listen action, that will read the message content out loud.
+
+**Note:** The logic for the actions is not built into the component and must be implemented by the consuming application.
+
+```js file="./MessageWithResponseActions.tsx"
+
+```
+
+### Custom message actions
+
+Beyond the standard message actions (positive, negative, 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: `ariaLabel`, `onClick`, `className`, `isDisabled`, `tooltipContent`, `tooltipProps`, and `icon`.
+
+```js file="./MessageWithCustomResponseActions.tsx"
+
+```
+
+### Messages with quick responses
+
+You can offer convenient, clickable responses to messages in the form of quick actions. Quick actions are [PatternFly labels](/components/label/) in a label group, configured to display up to 5 visible labels.
+
+To add quick actions, pass `quickResponses` to `<Message>`. This can be overridden by passing additional `<LabelGroup>` props to `quickResponseContainerProps`, or additional `<Label>` props to `quickResponses`.
+
+```js file="./MessageWithQuickResponses.tsx"
+
+```
+
+### Messages with sources
+
+If you are using Retrieval-Augmented Generation, you may want to display sources in a message. Passing `sources` to `<Message>` allows you to paginate between the sources you provide.
+
+The API for a source requires a link at minimum, but we strongly recommend providing a more descriptive title and body description so users have enough context. The title is limited to 1 line and the body is limited to 2 lines.
+
+```js file="./MessageWithSources.tsx"
+
+```
+
+### User messages
+
+Messages from users have a different background color to differentiate them from bot messages. You can also display a custom avatar that is uploaded by the user.
+
+```js file="./UserMessage.tsx"
+
+```
+
+## File attachments
+
+### Messages with attachments
+
+When [attachments](/patternfly-ai/chatbot/messages#file-attachments) are shared and displayed in the chatbot window, users will see a selectable and dismissible message that contains file details in a label. Selecting the file label can open a preview modal, which allows users to view or make edits to the file contents.
+
+The `<PreviewAttachment>` component displays a modal with a read-only view of the attached file's contents. Selecting the "edit" button will open the `<AttachmentEdit>` component, which provides an interactive environment where users can make changes to the file.
+
+If a `displayMode` is not passed to `<PreviewAttachment>` or `<AttachmentEdit>`, they both default to overlaying the default `displayMode` of the `<Chatbot>` component.
+
+**Note:** This example does not actually apply any edits to the attached file. That logic depends on the implementation.
+
+```js file="./MessageWithAttachment.tsx"
+
+```
+
+We are using [react-dropzone](https://react-dropzone.js.org) for opening the file dialog and handling drag and drop. It does not process files or provide any way to make HTTP requests to a server. If you need this, [react-dropzone](https://react-dropzone.js.org) suggests [filepond](https://pqina.nl/filepond/) or [uppy.io.](https://uppy.io/). To handle edge cases, like restricting the number or size of files, you can pass a function to the `handleAttach` prop on `MessageBar` or `onFileDrop` prop in `FileDropZone.`
+
+### Attachment label
+
+When an attachment is successfully uploaded, a label will appear in the message box. There are several label variants that cover different attachment states, including:
+
+- **Plain:** Default attachment labels, which display the filename and extension.
+- **Closeable:** Attachments that can be dismissed.
+- **Clickable:** Attachments that can be selected, typically to open file details.
+- **Loading:** Attachments that are still being uploaded.
+
+```js file="./FileDetailsLabel.tsx"
+
+```
+
+### Attachment preview
+
+To allow users to preview the contents of an attachment, load a read-only view of the file contents in a new modal.
+
+```js file="./PreviewAttachment.tsx"
+
+```
+
+### Editable attachments
+
+To allow users to edit an attached file, load a new code editor within the chatbot window. On this screen, you can allow users to edit a file and save changes if they'd like. Return users to the main chatbot window once they dismiss the editor.
+
+```js file="./AttachmentEdit.tsx"
+
+```
+
+### Failed attachment error
+
+When an attachment upload fails, a [danger alert](/components/alert) is displayed to provide details about the reason for failure.
+
+```js file="./AttachmentError.tsx"
+
+```
+
+### Attachment dropzone
+
+An attachment dropzone allows users to upload files via drag and drop.
+
+```js file="./FileDropZone.tsx"
+
+```

package/patternfly-docs/content/extensions/chatbot/examples/Messages/PaperclipIcon.svg

@@ -0,0 +1,10 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3934_2737)">
+<path d="M14.4766 3.27344C13.5234 2.32031 11.9766 2.32031 11.0234 3.27344L3.83594 10.4609C2.19141 12.1055 2.19141 14.7695 3.83594 16.4141C5.48047 18.0586 8.14453 18.0586 9.78906 16.4141L15.7266 10.4766C16.1523 10.0508 16.8477 10.0508 17.2734 10.4766C17.6992 10.9023 17.6992 11.5977 17.2734 12.0234L11.3359 17.9609C8.83594 20.4609 4.78906 20.4609 2.28906 17.9609C-0.210938 15.4609 -0.210938 11.4141 2.28906 8.91406L9.47656 1.72656C11.2852 -0.0820313 14.2148 -0.0820313 16.0234 1.72656C17.832 3.53516 17.832 6.46484 16.0234 8.27344L9.14844 15.1484C8.03125 16.2656 6.21875 16.2656 5.10156 15.1484C3.98438 14.0312 3.98438 12.2188 5.10156 11.1016L10.7266 5.47656C11.1523 5.05078 11.8477 5.05078 12.2734 5.47656C12.6992 5.90234 12.6992 6.59766 12.2734 7.02344L6.64844 12.6484C6.38672 12.9102 6.38672 13.3398 6.64844 13.6016C6.91016 13.8633 7.33984 13.8633 7.60156 13.6016L14.4766 6.72656C15.4297 5.77344 15.4297 4.22656 14.4766 3.27344Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_3934_2737">
+<rect width="17.5" height="20" fill="white" transform="translate(0.25)"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { PreviewAttachment } from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
+
+export const PreviewAttachmentExample: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <>
+      <Button onClick={handleModalToggle}>Launch modal</Button>
+      <PreviewAttachment
+        code="I am a code snippet"
+        fileName="test.yaml"
+        handleModalToggle={handleModalToggle}
+        isModalOpen={isModalOpen}
+        onDismiss={() => null}
+        onEdit={() => null}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import userAvatar from './user_avatar.jpg';
+
+export const UserMessageExample: React.FunctionComponent = () => {
+  const markdown = `A paragraph with *emphasis* and **strong importance**.
+
+> A block quote with ~strikethrough~ and a URL: https://reactjs.org.
+
+Here is an inline code - \`() => void\`
+
+Here is an ordered list: 
+
+1. Item 1
+2. Item 3
+3. Item 4
+
+Here is an unordered list:
+
+* Item 1
+* Item 2
+* Item 3`;
+
+  return (
+    <>
+      <Message
+        name="User"
+        role="user"
+        content="Example content with updated timestamp text"
+        timestamp="1 hour ago"
+        avatar={userAvatar}
+      />
+      <Message name="User" role="user" content={markdown} avatar={userAvatar} />
+    </>
+  );
+};