@patternfly/chatbot 6.3.0-prerelease.9 → 6.3.1

package/src/Message/CodeBlockMessage/CodeBlockMessage.scss

@@ -80,3 +80,10 @@
   background-color: var(--pf-t--global--background--color--tertiary--default);
   font-size: var(--pf-t--global--font--size--body--default);
 }
+
+.pf-chatbot__message-code-toggle {
+  .pf-v6-c-button.pf-m-link {
+    --pf-v6-c-button--m-link--Color: var(--pf-t--global--color--nonstatus--blue--default);
+    --pf-v6-c-button--hover--Color: var(--pf-t--global--color--nonstatus--blue--hover);
+  }
+}

package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -1,37 +1,98 @@
 // ============================================================================
 // Chatbot Main - Message - Content - Code Block
 // ============================================================================
-import React from 'react';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { obsidian } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { useState, useRef, useId, useCallback, useEffect } from 'react';
 // Import PatternFly components
-import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip } from '@patternfly/react-core';
+import {
+  CodeBlock,
+  CodeBlockAction,
+  CodeBlockCode,
+  Button,
+  Tooltip,
+  ExpandableSection,
+  ExpandableSectionToggle,
+  ExpandableSectionProps,
+  ExpandableSectionToggleProps,
+  ExpandableSectionVariant
+} from '@patternfly/react-core';
 
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import { ExtraProps } from 'react-markdown';
+
+export interface CodeBlockMessageProps {
+  /** Content rendered in code block */
+  children?: React.ReactNode;
+  /** Aria label applied to code block */
+  'aria-label'?: string;
+  /** Class name applied to code block */
+  className?: string;
+  /** Whether code block is expandable */
+  isExpandable?: boolean;
+  /** Additional props passed to expandable section if isExpandable is applied */
+  expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+  /** Additional props passed to expandable toggle if isExpandable is applied */
+  expandableSectionToggleProps?: ExpandableSectionToggleProps;
+  /** Link text applied to expandable toggle when expanded */
+  expandedText?: string;
+  /** Link text applied to expandable toggle when collapsed */
+  collapsedText?: string;
+}
+
+const DEFAULT_EXPANDED_TEXT = 'Show less';
+const DEFAULT_COLLAPSED_TEXT = 'Show more';
 
 const CodeBlockMessage = ({
   children,
   className,
   'aria-label': ariaLabel,
+  isExpandable = false,
+  expandableSectionProps,
+  expandableSectionToggleProps,
+  expandedText = DEFAULT_EXPANDED_TEXT,
+  collapsedText = DEFAULT_COLLAPSED_TEXT,
   ...props
-}: JSX.IntrinsicElements['code'] & ExtraProps) => {
-  const [copied, setCopied] = React.useState(false);
+}: CodeBlockMessageProps) => {
+  const [copied, setCopied] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  const buttonRef = React.useRef();
-  const tooltipID = React.useId();
+  const buttonRef = useRef();
+  const tooltipID = useId();
+  const toggleId = useId();
+  const contentId = useId();
+  const codeBlockRef = useRef<HTMLDivElement>(null);
 
   const language = /language-(\w+)/.exec(className || '')?.[1];
 
+  // Get custom toggle text from data attributes if available - for use with rehype plugins
+  const customExpandedText = props['data-expanded-text'];
+  const customCollapsedText = props['data-collapsed-text'];
+
+  const finalExpandedText = customExpandedText || expandedText;
+  const finalCollapsedText = customCollapsedText || collapsedText;
+
+  if (
+    (customExpandedText && expandedText !== DEFAULT_EXPANDED_TEXT) ||
+    (customCollapsedText && collapsedText !== DEFAULT_COLLAPSED_TEXT)
+  ) {
+    // eslint-disable-next-line no-console
+    console.error(
+      'Message:',
+      'Custom rehype plugins that rely on data-expanded-text or data-collapsed-text will override expandedText and collapsedText props if both are passed in.'
+    );
+  }
+
+  const onToggle = (isExpanded) => {
+    setIsExpanded(isExpanded);
+  };
+
   // Handle clicking copy button
-  const handleCopy = React.useCallback((event, text) => {
+  const handleCopy = useCallback((event, text) => {
     navigator.clipboard.writeText(text.toString());
     setCopied(true);
   }, []);
 
   // Reset copied state
-  React.useEffect(() => {
+  useEffect(() => {
     if (copied) {
       const timer = setTimeout(() => {
         setCopied(false);
@@ -56,7 +117,7 @@ const CodeBlockMessage = ({
         {language && <div className="pf-chatbot__message-code-block-language">{language}</div>}
         <Button
           ref={buttonRef}
-          aria-label={ariaLabel ?? 'Copy code button'}
+          aria-label={ariaLabel ?? 'Copy code'}
           variant="plain"
           className="pf-chatbot__button--copy"
           onClick={(event) => handleCopy(event, children)}
@@ -69,17 +130,40 @@ const CodeBlockMessage = ({
   );
 
   return (
-    <div className="pf-chatbot__message-code-block">
+    <div className="pf-chatbot__message-code-block" ref={codeBlockRef}>
       <CodeBlock actions={actions}>
         <CodeBlockCode>
-          {language ? (
-            <SyntaxHighlighter {...props} language={language} style={obsidian} PreTag="div" CodeTag="div" wrapLongLines>
-              {String(children).replace(/\n$/, '')}
-            </SyntaxHighlighter>
-          ) : (
-            <>{children}</>
-          )}
+          <>
+            {isExpandable ? (
+              <ExpandableSection
+                variant={ExpandableSectionVariant.truncate}
+                isExpanded={isExpanded}
+                isDetached
+                toggleId={toggleId}
+                contentId={contentId}
+                {...expandableSectionProps}
+              >
+                {children}
+              </ExpandableSection>
+            ) : (
+              children
+            )}
+          </>
         </CodeBlockCode>
+        {isExpandable && (
+          <ExpandableSectionToggle
+            isExpanded={isExpanded}
+            onToggle={onToggle}
+            direction="up"
+            toggleId={toggleId}
+            contentId={contentId}
+            hasTruncatedContent
+            className="pf-chatbot__message-code-toggle"
+            {...expandableSectionToggleProps}
+          >
+            {isExpanded ? finalExpandedText : finalCollapsedText}
+          </ExpandableSectionToggle>
+        )}
       </CodeBlock>
     </div>
   );

package/src/Message/ErrorMessage/ErrorMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - Error
 // ============================================================================
 
-import React from 'react';
 import { Alert, AlertProps } from '@patternfly/react-core';
 
 const ErrorMessage = ({ title, actionLinks, children, ...props }: AlertProps) => (

package/src/Message/ImageMessage/ImageMessage.tsx

@@ -2,10 +2,9 @@
 // Chatbot Main - Message - Content - Image
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 
-const ImageMessage = ({ children, ...props }: JSX.IntrinsicElements['img'] & ExtraProps) => (
+const ImageMessage = ({ children, ...props }: Omit<JSX.IntrinsicElements['img'], 'ref'> & ExtraProps) => (
   <img className="pf-chatbot__message-image" {...props}>
     {children}
   </img>

package/src/Message/LinkMessage/LinkMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - Link
 // ============================================================================
 
-import React from 'react';
 import { Button, ButtonProps } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 

package/src/Message/ListMessage/ListItemMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - List
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { ListItem } from '@patternfly/react-core';
 

package/src/Message/ListMessage/OrderedListMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - List
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
 

package/src/Message/ListMessage/UnorderedListMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - List
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { List } from '@patternfly/react-core';
 

package/src/Message/Message.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Message from './Message';
@@ -142,18 +142,20 @@ const EMPTY_TABLE = `
 
 const IMAGE = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
 
+const INLINE_IMAGE = `inline text ![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+
 const ERROR = {
   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 checkListItemsRendered = () => {
@@ -426,6 +428,8 @@ describe('Message', () => {
           // eslint-disable-next-line no-console
           share: { onClick: () => console.log('Share') },
           // eslint-disable-next-line no-console
+          download: { onClick: () => console.log('Download') },
+          // eslint-disable-next-line no-console
           listen: { onClick: () => console.log('Listen') }
         }}
       />
@@ -452,6 +456,8 @@ describe('Message', () => {
           // eslint-disable-next-line no-console
           share: { onClick: () => console.log('Share') },
           // eslint-disable-next-line no-console
+          download: { onClick: () => console.log('Download') },
+          // eslint-disable-next-line no-console
           listen: { onClick: () => console.log('Listen') }
         }}
       />
@@ -485,7 +491,37 @@ describe('Message', () => {
   it('should render code correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
     expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
-    expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
+    expect(screen.getByText(/yaml/)).toBeTruthy();
+    expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
+    expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
+    expect(screen.getByText(/metadata:/i)).toBeTruthy();
+    expect(screen.getByText(/name:/i)).toBeTruthy();
+    expect(screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+    expect(screen.getByText(/spec/i)).toBeTruthy();
+    expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
+    expect(screen.getByText(/url:/i)).toBeTruthy();
+    expect(
+      screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)
+    ).toBeTruthy();
+  });
+  it('should render expandable code correctly', () => {
+    render(
+      <Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} codeBlockProps={{ isExpandable: true }} />
+    );
+    expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
+    expect(screen.getByText(/yaml/)).toBeTruthy();
+    expect(screen.getByText(/apiVersion/i)).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Show more/i })).toBeTruthy();
+  });
+  it('should handle click on expandable code correctly', async () => {
+    render(
+      <Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} codeBlockProps={{ isExpandable: true }} />
+    );
+    const button = screen.getByRole('button', { name: /Show more/i });
+    await userEvent.click(button);
+    expect(screen.getByRole('button', { name: /Show less/i })).toBeTruthy();
     expect(screen.getByText(/yaml/)).toBeTruthy();
     expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
     expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
@@ -503,8 +539,8 @@ describe('Message', () => {
     // need explicit setup since RTL stubs clipboard if you do this
     const user = userEvent.setup();
     render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
-    expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
-    await user.click(screen.getByRole('button', { name: 'Copy code button' }));
+    expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
+    await user.click(screen.getByRole('button', { name: 'Copy code' }));
     const clipboardText = await navigator.clipboard.readText();
     expect(clipboardText.trim()).toEqual(CODE.trim());
   });
@@ -787,6 +823,13 @@ describe('Message', () => {
     render(<Message avatar="./img" role="user" name="User" content={IMAGE} />);
     expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
   });
+  it('inline image parent should have class pf-chatbot__message-and-actions', () => {
+    render(<Message avatar="./img" role="user" name="User" content={INLINE_IMAGE} />);
+    expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+    expect(
+      screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i }).parentElement
+    ).toHaveClass('pf-chatbot__message-and-actions');
+  });
   it('should handle external links correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content={`[PatternFly](https://www.patternfly.org/)`} />);
     // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL

package/src/Message/Message.tsx

@@ -1,9 +1,8 @@
 // ============================================================================
 // Chatbot Main - Message
 // ============================================================================
-
-import React, { ReactNode } from 'react';
-
+import { forwardRef, ReactNode, useEffect, useState } from 'react';
+import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import {
@@ -12,6 +11,8 @@ import {
   AvatarProps,
   ButtonProps,
   ContentVariants,
+  ExpandableSectionProps,
+  ExpandableSectionToggleProps,
   FormProps,
   Label,
   LabelGroupProps,
@@ -47,6 +48,7 @@ import { PluggableList } from 'react-markdown/lib';
 import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
+import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -78,7 +80,7 @@ export interface MessageExtraContent {
   endContent?: ReactNode;
 }
 
-export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'role'> {
+export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   /** Unique id for message */
   id?: string;
   /** Role of the user sending the message */
@@ -107,9 +109,24 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   botWord?: string;
   /** Label for the English "Loading message," displayed to screenreaders when loading a message */
   loadingWord?: string;
+  /** Props for code blocks */
   codeBlockProps?: {
+    /** Aria label applied to code blocks */
     'aria-label'?: string;
+    /** Class name applied to code blocks */
     className?: string;
+    /** Whether code blocks are expandable */
+    isExpandable?: boolean;
+    /** Length of text initially shown in expandable code blocks; defaults to 10 characters */
+    maxLength?: number;
+    /** Additional props passed to expandable section if isExpandable is applied */
+    expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+    /** Additional props passed to expandable toggle if isExpandable is applied */
+    expandableSectionToggleProps?: ExpandableSectionToggleProps;
+    /** Link text applied to expandable toggle when expanded */
+    expandedText?: string;
+    /** Link text applied to expandable toggle when collapsed */
+    collapsedText?: string;
   };
   /** Props for quick responses */
   quickResponses?: QuickResponse[];
@@ -139,7 +156,7 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   /** Turns the container into a live region so that changes to content within the Message, such as appending a feedback card, are reliably announced to assistive technology. */
   isLiveRegion?: boolean;
   /** Ref applied to message  */
-  innerRef?: React.Ref<HTMLDivElement>;
+  innerRef?: Ref<HTMLDivElement>;
   /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
   tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
   /** Additional rehype plugins passed from the consumer */
@@ -159,16 +176,16 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   /** Label for the English word "Cancel" used in edit mode. */
   cancelWord?: string;
   /** Callback function for when edit mode update button is clicked */
-  onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onEditUpdate?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
   /** Callback functionf or when edit cancel update button is clicked */
-  onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onEditCancel?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
   /** Props for edit form */
   editFormProps?: FormProps;
   /** Sets message to compact styling. */
   isCompact?: boolean;
 }
 
-export const MessageBase: React.FunctionComponent<MessageProps> = ({
+export const MessageBase: FunctionComponent<MessageProps> = ({
   role,
   content,
   extraContent,
@@ -206,14 +223,14 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   isCompact,
   ...props
 }: MessageProps) => {
-  const [messageText, setMessageText] = React.useState(content);
+  const [messageText, setMessageText] = useState(content);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setMessageText(content);
   }, [content]);
 
   const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-  let rehypePlugins: PluggableList = [rehypeUnwrapImages];
+  let rehypePlugins: PluggableList = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs];
   if (openLinkInNewTab) {
     rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
   }
@@ -243,9 +260,9 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
             editPlaceholder={editPlaceholder}
             updateWord={updateWord}
             cancelWord={cancelWord}
-            onEditUpdate={(event, text) => {
+            onEditUpdate={(event: ReactMouseEvent<HTMLButtonElement, MouseEvent>, value: string) => {
               onEditUpdate && onEditUpdate(event);
-              setMessageText(text);
+              setMessageText(value);
             }}
             onEditCancel={onEditCancel}
             {...editFormProps}
@@ -390,7 +407,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   );
 };
 
-const Message = React.forwardRef((props: MessageProps, ref: React.Ref<HTMLDivElement>) => (
+const Message = forwardRef((props: MessageProps, ref: Ref<HTMLDivElement>) => (
   <MessageBase innerRef={ref} {...props} />
 ));
 

package/src/Message/MessageInput.tsx

@@ -1,8 +1,8 @@
 // ============================================================================
 // Chatbot Main - Message Input
 // ============================================================================
-
-import React from 'react';
+import type { FormEvent, FunctionComponent } from 'react';
+import { useState } from 'react';
 import { ActionGroup, Button, Form, FormProps, TextArea } from '@patternfly/react-core';
 
 export interface MessageInputProps extends FormProps {
@@ -20,7 +20,7 @@ export interface MessageInputProps extends FormProps {
   content?: string;
 }
 
-const MessageInput: React.FunctionComponent<MessageInputProps> = ({
+const MessageInput: FunctionComponent<MessageInputProps> = ({
   editPlaceholder = 'Edit prompt message...',
   updateWord = 'Update',
   cancelWord = 'Cancel',
@@ -29,9 +29,9 @@ const MessageInput: React.FunctionComponent<MessageInputProps> = ({
   content,
   ...props
 }: MessageInputProps) => {
-  const [messageText, setMessageText] = React.useState(content ?? '');
+  const [messageText, setMessageText] = useState(content ?? '');
 
-  const onChange = (event: React.FormEvent<HTMLTextAreaElement>, value: string) => {
+  const onChange = (_event: FormEvent<HTMLTextAreaElement>, value: string) => {
     setMessageText(value);
   };
 

package/src/Message/MessageLoading.tsx

@@ -2,8 +2,6 @@
 // Chatbot Main - Message - Processing
 // ============================================================================
 
-import React from 'react';
-
 const MessageLoading = ({ loadingWord }) => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">

package/src/Message/Plugins/index.ts

@@ -0,0 +1 @@
+export { rehypeCodeBlockToggle } from './rehypeCodeBlockToggle';

package/src/Message/Plugins/rehypeCodeBlockToggle.ts

@@ -0,0 +1,24 @@
+import { visit } from 'unist-util-visit';
+import { Element } from 'hast';
+import { Node } from 'unist';
+
+// Rehype plugin to add language information to code block props
+// Per Eric, Ideally any toggle buttons that can be navigated to would have unique accessible names
+// For the purposes of our examples this should suffice, but in a real-world use case they may need to be more unique
+export const rehypeCodeBlockToggle = () => (tree: Node) => {
+  visit(tree, 'element', (node: Element) => {
+    if (node.tagName === 'code' && node.properties?.className) {
+      const className = node.properties.className as string[];
+      const languageMatch = className.find((cls) => cls.startsWith('language-'));
+
+      if (languageMatch) {
+        const language = languageMatch.replace('language-', '').toUpperCase();
+
+        // Add the language and toggle text as data attributes
+        node.properties['data-language'] = language;
+        node.properties['data-expanded-text'] = `Show less ${language} code`;
+        node.properties['data-collapsed-text'] = `Show more ${language} code`;
+      }
+    }
+  });
+};

package/src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts

@@ -0,0 +1,53 @@
+import { visit } from 'unist-util-visit';
+import { Element } from 'hast';
+import { Node } from 'unist';
+
+// Rehype plugin to remove images from within p tags and put them as separate block-level elements.
+// This allows us to avoid having a blue background on images - this is something Kayla requested.
+export const rehypeMoveImagesOutOfParagraphs = () => (tree: Node) => {
+  const nodesToRemove: { parent: Element; index: number; node: Element }[] = [];
+
+  visit(tree, 'element', (node: Element, index: number | null, parent: Element | null) => {
+    if (node.tagName === 'p' && node.children) {
+      const imagesInParagraph: { node: Element; index: number }[] = [];
+
+      node.children.forEach((child: Node, childIndex: number) => {
+        if (child.type === 'element' && (child as Element).tagName === 'img') {
+          imagesInParagraph.push({ node: child as Element, index: childIndex });
+        }
+      });
+
+      if (imagesInParagraph.length > 0 && parent && index !== null) {
+        imagesInParagraph.forEach(({ node: imgNode, index: imgIndex }) => {
+          nodesToRemove.push({ parent: node, index: imgIndex, node: imgNode });
+        });
+
+        // To avoid issues with index shifting during removal, we process in reverse
+        for (let i = nodesToRemove.length - 1; i >= 0; i--) {
+          const { parent: pTag, index: imgIndexToRemove } = nodesToRemove[i];
+          if (pTag.children) {
+            pTag.children.splice(imgIndexToRemove, 1);
+          }
+        }
+
+        // Insert the removed images after the paragraph
+        const paragraphIndexInParent = parent.children.indexOf(node);
+        if (paragraphIndexInParent !== -1) {
+          imagesInParagraph.forEach(({ node: imgNode }) => {
+            parent.children.splice(paragraphIndexInParent + 1, 0, imgNode);
+          });
+        }
+
+        // Remove paragraph if it's now empty after image removal
+        if (node.children.length === 0) {
+          const paragraphIndexInParent = parent.children.indexOf(node);
+          if (paragraphIndexInParent !== -1) {
+            parent.children.splice(paragraphIndexInParent, 1);
+          }
+        }
+
+        nodesToRemove.length = 0;
+      }
+    }
+  });
+};

package/src/Message/QuickResponse/QuickResponse.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
+import { useState } from 'react';
 import { Label, LabelGroup, LabelGroupProps, LabelProps } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons';
 
@@ -19,13 +20,13 @@ export interface QuickResponseProps {
   isCompact?: boolean;
 }
 
-export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
+export const QuickResponse: FunctionComponent<QuickResponseProps> = ({
   quickResponses,
   quickResponseContainerProps = { numLabels: 5 },
   onSelect,
   isCompact
 }: QuickResponseProps) => {
-  const [selectedQuickResponse, setSelectedQuickResponse] = React.useState<string>();
+  const [selectedQuickResponse, setSelectedQuickResponse] = useState<string>();
 
   const handleQuickResponseClick = (id: string, onClick?: () => void) => {
     setSelectedQuickResponse(id);

package/src/Message/QuickStarts/FallbackImg.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import type { FC } from 'react';
+import { useState } from 'react';
 
 interface FallbackImgProps {
   /** Image source */
@@ -11,8 +12,8 @@ interface FallbackImgProps {
   fallback?: React.ReactNode;
 }
 
-const FallbackImg: React.FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
-  const [isSrcValid, setIsSrcValid] = React.useState<boolean>(true);
+const FallbackImg: FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
+  const [isSrcValid, setIsSrcValid] = useState<boolean>(true);
 
   if (src && isSrcValid) {
     return <img className={className} src={src} alt={alt} onError={() => setIsSrcValid(false)} />;