@patternfly/chatbot 6.5.0-prerelease.3 → 6.5.0-prerelease.30

package/dist/esm/FileDetailsLabel/FileDetailsLabel.d.ts

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
-export interface FileDetailsLabelProps {
+import { LabelProps } from '@patternfly/react-core';
+export interface FileDetailsLabelProps extends Omit<LabelProps, 'onClose' | 'onClick'> {
     /** Name of file, including extension */
     fileName: string;
     /** Unique id of file */

package/dist/esm/MarkdownContent/MarkdownContent.d.ts

@@ -0,0 +1,44 @@
+import { type FunctionComponent, ReactNode } from 'react';
+import { Options } from 'react-markdown';
+import { CodeBlockMessageProps } from '../Message/CodeBlockMessage/CodeBlockMessage';
+import { TableProps } from '@patternfly/react-table';
+import 'highlight.js/styles/vs2015.css';
+import { PluggableList } from 'unified';
+import { ButtonProps } from '@patternfly/react-core';
+/**
+ * MarkdownContent renders content either as plain text or with content with markdown support.
+ *
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface MarkdownContentProps {
+    /** The content to render. Supports markdown formatting by default, or plain text when isMarkdownDisabled is true. */
+    content?: string;
+    /** Disables markdown parsing, allowing only plain text input */
+    isMarkdownDisabled?: boolean;
+    /** Props for code blocks */
+    codeBlockProps?: CodeBlockMessageProps;
+    /** 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 */
+    additionalRehypePlugins?: PluggableList;
+    /** Additional remark plugins passed from the consumer */
+    additionalRemarkPlugins?: PluggableList;
+    /** Whether to open links in message in new tab. */
+    openLinkInNewTab?: boolean;
+    /** Props for links */
+    linkProps?: ButtonProps;
+    /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
+    reactMarkdownProps?: Options;
+    /** Allows passing additional props down to remark-gfm. See https://github.com/remarkjs/remark-gfm?tab=readme-ov-file#options for options */
+    remarkGfmProps?: Options;
+    /** Whether to strip out images in markdown */
+    hasNoImages?: boolean;
+    /** Sets background colors to be appropriate on primary chatbot background */
+    isPrimary?: boolean;
+    /** Custom component to render when markdown is disabled */
+    textComponent?: ReactNode;
+    /** Flag indicating whether content should retain various styles of its context (typically font-size and text color). */
+    shouldRetainStyles?: boolean;
+}
+export declare const MarkdownContent: FunctionComponent<MarkdownContentProps>;
+export default MarkdownContent;

package/dist/esm/MarkdownContent/MarkdownContent.js

@@ -0,0 +1,174 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { ContentVariants } from '@patternfly/react-core';
+import CodeBlockMessage from '../Message/CodeBlockMessage/CodeBlockMessage';
+import TextMessage from '../Message/TextMessage/TextMessage';
+import ListItemMessage from '../Message/ListMessage/ListItemMessage';
+import UnorderedListMessage from '../Message/ListMessage/UnorderedListMessage';
+import OrderedListMessage from '../Message/ListMessage/OrderedListMessage';
+import TableMessage from '../Message/TableMessage/TableMessage';
+import TrMessage from '../Message/TableMessage/TrMessage';
+import TdMessage from '../Message/TableMessage/TdMessage';
+import TbodyMessage from '../Message/TableMessage/TbodyMessage';
+import TheadMessage from '../Message/TableMessage/TheadMessage';
+import ThMessage from '../Message/TableMessage/ThMessage';
+import ImageMessage from '../Message/ImageMessage/ImageMessage';
+import rehypeUnwrapImages from 'rehype-unwrap-images';
+import rehypeExternalLinks from 'rehype-external-links';
+import rehypeSanitize from 'rehype-sanitize';
+import rehypeHighlight from 'rehype-highlight';
+import 'highlight.js/styles/vs2015.css';
+import LinkMessage from '../Message/LinkMessage/LinkMessage';
+import { rehypeMoveImagesOutOfParagraphs } from '../Message/Plugins/rehypeMoveImagesOutOfParagraphs';
+import SuperscriptMessage from '../Message/SuperscriptMessage/SuperscriptMessage';
+import { css } from '@patternfly/react-styles';
+export const MarkdownContent = ({ content, isMarkdownDisabled, codeBlockProps, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], additionalRemarkPlugins = [], linkProps, reactMarkdownProps, remarkGfmProps, hasNoImages = false, isPrimary, textComponent, shouldRetainStyles }) => {
+    let rehypePlugins = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs, rehypeHighlight];
+    if (openLinkInNewTab) {
+        rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
+    }
+    if (additionalRehypePlugins) {
+        rehypePlugins.push(...additionalRehypePlugins);
+    }
+    const disallowedElements = hasNoImages ? ['img'] : [];
+    if (reactMarkdownProps && reactMarkdownProps.disallowedElements) {
+        disallowedElements.push(...reactMarkdownProps.disallowedElements);
+    }
+    if (isMarkdownDisabled) {
+        if (textComponent) {
+            return _jsx(_Fragment, { children: textComponent });
+        }
+        return (_jsx(TextMessage, { component: ContentVariants.p, isPrimary: isPrimary, children: content }));
+    }
+    return (_jsx(Markdown, Object.assign({ components: {
+            section: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (_jsx("section", Object.assign({}, rest, { className: css('pf-chatbot__message-text', shouldRetainStyles && 'pf-m-markdown', rest === null || rest === void 0 ? void 0 : rest.className) })));
+            },
+            p: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (_jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: ContentVariants.p }, rest, { isPrimary: isPrimary })));
+            },
+            code: (_a) => {
+                var { children } = _a, props = __rest(_a, ["children"]);
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, codeProps = __rest(props, ["node"]);
+                return (_jsx(CodeBlockMessage, Object.assign({}, codeProps, codeBlockProps, { isPrimary: isPrimary, shouldRetainStyles: shouldRetainStyles, children: children })));
+            },
+            h1: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return _jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: ContentVariants.h1 }, rest));
+            },
+            h2: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return _jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: ContentVariants.h2 }, rest));
+            },
+            h3: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return _jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: ContentVariants.h3 }, rest));
+            },
+            h4: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return _jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: ContentVariants.h4 }, rest));
+            },
+            h5: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return _jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: ContentVariants.h5 }, rest));
+            },
+            h6: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return _jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: ContentVariants.h6 }, rest));
+            },
+            blockquote: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (_jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: ContentVariants.blockquote }, rest)));
+            },
+            ul: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return _jsx(UnorderedListMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles }, rest));
+            },
+            ol: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return _jsx(OrderedListMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles }, rest));
+            },
+            li: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return _jsx(ListItemMessage, Object.assign({}, rest));
+            },
+            // table requires node attribute for calculating headers for mobile breakpoint
+            table: (props) => (_jsx(TableMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles }, props, tableProps, { isPrimary: isPrimary }))),
+            tbody: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return _jsx(TbodyMessage, Object.assign({}, rest));
+            },
+            thead: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return _jsx(TheadMessage, Object.assign({}, rest));
+            },
+            tr: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return _jsx(TrMessage, Object.assign({}, rest));
+            },
+            td: (props) => {
+                // Conflicts with Td type
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node, width } = props, rest = __rest(props, ["node", "width"]);
+                return _jsx(TdMessage, Object.assign({}, rest));
+            },
+            th: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return _jsx(ThMessage, Object.assign({}, rest));
+            },
+            img: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return _jsx(ImageMessage, Object.assign({}, rest));
+            },
+            a: (props) => {
+                // node is just the details of the document structure - not needed
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (
+                // some a types conflict with ButtonProps, but it's ok because we are using an a tag
+                // there are too many to handle manually
+                _jsx(LinkMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles }, rest, linkProps, { children: props.children })));
+            },
+            // used for footnotes
+            sup: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return _jsx(SuperscriptMessage, Object.assign({}, rest));
+            }
+        }, remarkPlugins: [[remarkGfm, Object.assign({}, remarkGfmProps)], ...additionalRemarkPlugins], rehypePlugins: rehypePlugins }, reactMarkdownProps, { remarkRehypeOptions: Object.assign({ 
+            // removes sr-only class from footnote labels applied by default
+            footnoteLabelProperties: { className: [''] } }, reactMarkdownProps === null || reactMarkdownProps === void 0 ? void 0 : reactMarkdownProps.remarkRehypeOptions), disallowedElements: disallowedElements, children: content })));
+};
+export default MarkdownContent;

package/dist/esm/MarkdownContent/MarkdownContent.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/MarkdownContent/MarkdownContent.test.js

@@ -0,0 +1,187 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import MarkdownContent from './MarkdownContent';
+import rehypeExternalLinks from '../__mocks__/rehype-external-links';
+const BOLD_TEXT = '**Bold text**';
+const ITALIC_TEXT = '*Italic text*';
+const INLINE_CODE = 'Here is inline code: `const x = 5`';
+const CODE_BLOCK = `\`\`\`javascript
+function hello() {
+  console.log('Hello, world!');
+}
+\`\`\``;
+const HEADING = '# Heading 1';
+const LINK = '[PatternFly](https://www.patternfly.org/)';
+const UNORDERED_LIST = `
+* Item 1
+* Item 2
+* Item 3
+`;
+const ORDERED_LIST = `
+1. First item
+2. Second item
+3. Third item
+`;
+const TABLE = `
+| Column 1 | Column 2 |
+|----------|----------|
+| Cell 1   | Cell 2   |
+| Cell 3   | Cell 4   |
+`;
+const BLOCKQUOTE = '> This is a blockquote';
+const IMAGE = '![Alt text](https://example.com/image.png)';
+describe('MarkdownContent', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render bold text correctly', () => {
+        const { container } = render(_jsx(MarkdownContent, { content: BOLD_TEXT }));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(screen.getByText('Bold text')).toBeTruthy();
+    });
+    it('should render italic text correctly', () => {
+        const { container } = render(_jsx(MarkdownContent, { content: ITALIC_TEXT }));
+        expect(container.querySelector('em')).toBeTruthy();
+        expect(screen.getByText('Italic text')).toBeTruthy();
+    });
+    it('should render inline code correctly', () => {
+        render(_jsx(MarkdownContent, { content: INLINE_CODE }));
+        expect(screen.getByText(/const x = 5/)).toBeTruthy();
+    });
+    it('should render code blocks correctly', () => {
+        render(_jsx(MarkdownContent, { content: CODE_BLOCK }));
+        expect(screen.getByText(/function hello/)).toBeVisible();
+        expect(screen.getByText(/console.log/)).toBeVisible();
+        expect(screen.getByRole('button', { name: 'Copy code' })).toBeVisible();
+    });
+    it('should render headings correctly', () => {
+        render(_jsx(MarkdownContent, { content: HEADING }));
+        expect(screen.getByRole('heading', { name: /Heading 1/i })).toBeTruthy();
+    });
+    it('should render links correctly', () => {
+        render(_jsx(MarkdownContent, { content: LINK }));
+        expect(screen.getByRole('link', { name: /PatternFly/i })).toBeTruthy();
+    });
+    it('should render unordered lists correctly', () => {
+        render(_jsx(MarkdownContent, { content: UNORDERED_LIST }));
+        expect(screen.getByText('Item 1')).toBeTruthy();
+        expect(screen.getByText('Item 2')).toBeTruthy();
+        expect(screen.getByText('Item 3')).toBeTruthy();
+        expect(screen.getAllByRole('listitem')).toHaveLength(3);
+    });
+    it('should render ordered lists correctly', () => {
+        render(_jsx(MarkdownContent, { content: ORDERED_LIST }));
+        expect(screen.getByText('First item')).toBeTruthy();
+        expect(screen.getByText('Second item')).toBeTruthy();
+        expect(screen.getByText('Third item')).toBeTruthy();
+        expect(screen.getAllByRole('listitem')).toHaveLength(3);
+    });
+    it('should render tables correctly', () => {
+        render(_jsx(MarkdownContent, { content: TABLE, tableProps: { 'aria-label': 'Test table' } }));
+        expect(screen.getByRole('grid', { name: /Test table/i })).toBeTruthy();
+        expect(screen.getByRole('columnheader', { name: /Column 1/i })).toBeTruthy();
+        expect(screen.getByRole('columnheader', { name: /Column 2/i })).toBeTruthy();
+        expect(screen.getByRole('cell', { name: /Cell 1/i })).toBeTruthy();
+        expect(screen.getByRole('cell', { name: /Cell 2/i })).toBeTruthy();
+    });
+    it('should render blockquotes correctly', () => {
+        var _a;
+        render(_jsx(MarkdownContent, { content: BLOCKQUOTE }));
+        const quote = screen.getByText(/This is a blockquote/);
+        expect(quote).toBeVisible();
+        expect((_a = quote.closest('.pf-v6-c-content--blockquote')) === null || _a === void 0 ? void 0 : _a.tagName).toBe('BLOCKQUOTE');
+    });
+    it('should render images when hasNoImages is false', () => {
+        render(_jsx(MarkdownContent, { content: IMAGE, hasNoImages: false }));
+        expect(screen.getByRole('img', { name: /Alt text/i })).toBeTruthy();
+    });
+    it('should not render images when hasNoImages is true', () => {
+        render(_jsx(MarkdownContent, { content: IMAGE, hasNoImages: true }));
+        expect(screen.queryByRole('img', { name: /Alt text/i })).toBeFalsy();
+    });
+    it('should disable markdown rendering when isMarkdownDisabled is true', () => {
+        render(_jsx(MarkdownContent, { content: BOLD_TEXT, isMarkdownDisabled: true }));
+        expect(screen.getByText('**Bold text**')).toBeTruthy();
+    });
+    it('should render text component when isMarkdownDisabled is true and textComponent is provided', () => {
+        const textComponent = _jsx("div", { "data-testid": "custom-text", children: "Custom text component" });
+        render(_jsx(MarkdownContent, { content: BOLD_TEXT, isMarkdownDisabled: true, textComponent: textComponent }));
+        expect(screen.getByTestId('custom-text')).toBeTruthy();
+        expect(screen.getByText('Custom text component')).toBeTruthy();
+    });
+    it('should apply isPrimary prop to elements', () => {
+        const { container } = render(_jsx(MarkdownContent, { content: INLINE_CODE, isPrimary: true }));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
+    it('should apply shouldRetainStyles prop to elements', () => {
+        const { container } = render(_jsx(MarkdownContent, { content: BOLD_TEXT, shouldRetainStyles: true }));
+        expect(container.querySelector('.pf-m-markdown')).toBeTruthy();
+    });
+    it('should pass codeBlockProps to code blocks', () => {
+        render(_jsx(MarkdownContent, { content: CODE_BLOCK, codeBlockProps: { 'aria-label': 'Custom code block' } }));
+        expect(screen.getByRole('button', { name: /Custom code block/i })).toBeTruthy();
+    });
+    it('should pass tableProps to tables', () => {
+        render(_jsx(MarkdownContent, { content: TABLE, tableProps: { 'aria-label': 'Custom table label' } }));
+        expect(screen.getByRole('grid', { name: /Custom table label/i })).toBeTruthy();
+    });
+    it('should open links in new tab when openLinkInNewTab is true', () => {
+        render(_jsx(MarkdownContent, { content: LINK, openLinkInNewTab: true }));
+        expect(rehypeExternalLinks).toHaveBeenCalledTimes(1);
+    });
+    it('should not open links in new tab when openLinkInNewTab is false', () => {
+        render(_jsx(MarkdownContent, { content: LINK, openLinkInNewTab: false }));
+        expect(rehypeExternalLinks).not.toHaveBeenCalled();
+    });
+    it('should pass linkProps to links', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onClick = jest.fn();
+        render(_jsx(MarkdownContent, { content: LINK, linkProps: { onClick } }));
+        const link = screen.getByRole('link', { name: /PatternFly/i });
+        link.click();
+        expect(onClick).toHaveBeenCalledTimes(1);
+    }));
+    it('should handle reactMarkdownProps.disallowedElements', () => {
+        render(_jsx(MarkdownContent, { content: CODE_BLOCK, reactMarkdownProps: { disallowedElements: ['code'] } }));
+        // Code block should not render when disallowed
+        expect(screen.queryByRole('button', { name: /Copy code/i })).toBeFalsy();
+    });
+    it('should render plain text when no markdown is present', () => {
+        render(_jsx(MarkdownContent, { content: "Plain text without markdown" }));
+        expect(screen.getByText('Plain text without markdown')).toBeTruthy();
+    });
+    it('should handle empty content', () => {
+        const { container } = render(_jsx(MarkdownContent, { content: "" }));
+        expect(container.textContent).toBe('');
+    });
+    it('should handle undefined content', () => {
+        const { container } = render(_jsx(MarkdownContent, {}));
+        expect(container.textContent).toBe('');
+    });
+    it('should render multiple markdown elements together', () => {
+        const content = `# Heading
+
+**Bold text** and *italic text*
+
+\`\`\`javascript
+const x = 5;
+\`\`\`
+
+[Link](https://example.com)`;
+        render(_jsx(MarkdownContent, { content: content }));
+        expect(screen.getByRole('heading', { name: /Heading/i })).toBeTruthy();
+        expect(screen.getByText('Bold text')).toBeTruthy();
+        expect(screen.getByText('italic text')).toBeTruthy();
+        expect(screen.getByText(/const x = 5/)).toBeTruthy();
+        expect(screen.getByRole('link', { name: /Link/i })).toBeTruthy();
+    });
+});

package/dist/esm/MarkdownContent/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './MarkdownContent';
+export * from './MarkdownContent';

package/dist/esm/MarkdownContent/index.js

@@ -0,0 +1,2 @@
+export { default } from './MarkdownContent';
+export * from './MarkdownContent';

package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.d.ts

@@ -18,6 +18,10 @@ export interface CodeBlockMessageProps {
     collapsedText?: string;
     /** Custom actions added to header of code block, after any default actions such as the "copy" action.  */
     customActions?: React.ReactNode;
+    /** Sets background colors to be appropriate on primary chatbot background */
+    isPrimary?: boolean;
+    /** Flag indicating that the content should retain message styles when using Markdown. */
+    shouldRetainStyles?: boolean;
 }
-declare const CodeBlockMessage: ({ children, className, "aria-label": ariaLabel, isExpandable, expandableSectionProps, expandableSectionToggleProps, expandedText, collapsedText, customActions, ...props }: CodeBlockMessageProps) => import("react/jsx-runtime").JSX.Element;
+declare const CodeBlockMessage: ({ children, className, "aria-label": ariaLabel, isExpandable, expandableSectionProps, expandableSectionToggleProps, expandedText, collapsedText, customActions, isPrimary, shouldRetainStyles, ...props }: CodeBlockMessageProps) => import("react/jsx-runtime").JSX.Element;
 export default CodeBlockMessage;

package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.js

@@ -18,11 +18,12 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip, ExpandableSection, ExpandableSectionToggle, ExpandableSectionVariant, getUniqueId } 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 { css } from '@patternfly/react-styles';
 const DEFAULT_EXPANDED_TEXT = 'Show less';
 const DEFAULT_COLLAPSED_TEXT = 'Show more';
 const CodeBlockMessage = (_a) => {
     var _b;
-    var { children, className, 'aria-label': ariaLabel, isExpandable = false, expandableSectionProps, expandableSectionToggleProps, expandedText = DEFAULT_EXPANDED_TEXT, collapsedText = DEFAULT_COLLAPSED_TEXT, customActions } = _a, props = __rest(_a, ["children", "className", 'aria-label', "isExpandable", "expandableSectionProps", "expandableSectionToggleProps", "expandedText", "collapsedText", "customActions"]);
+    var { children, className, 'aria-label': ariaLabel, isExpandable = false, expandableSectionProps, expandableSectionToggleProps, expandedText = DEFAULT_EXPANDED_TEXT, collapsedText = DEFAULT_COLLAPSED_TEXT, customActions, isPrimary, shouldRetainStyles } = _a, props = __rest(_a, ["children", "className", 'aria-label', "isExpandable", "expandableSectionProps", "expandableSectionToggleProps", "expandedText", "collapsedText", "customActions", "isPrimary", "shouldRetainStyles"]);
     const [copied, setCopied] = useState(false);
     const [isExpanded, setIsExpanded] = useState(false);
     const buttonRef = useRef();
@@ -45,8 +46,18 @@ const CodeBlockMessage = (_a) => {
         setIsExpanded(isExpanded);
     };
     // Handle clicking copy button
-    const handleCopy = useCallback((event, text) => {
-        navigator.clipboard.writeText(text.toString());
+    const handleCopy = useCallback((_event, text) => {
+        let textToCopy = '';
+        if (typeof text === 'string') {
+            textToCopy = text;
+        }
+        else {
+            if (codeBlockRef.current) {
+                const codeElement = codeBlockRef.current.querySelector('code');
+                textToCopy = (codeElement === null || codeElement === void 0 ? void 0 : codeElement.textContent) || '';
+            }
+        }
+        navigator.clipboard.writeText(textToCopy);
         setCopied(true);
     }, []);
     // Reset copied state
@@ -59,10 +70,10 @@ const CodeBlockMessage = (_a) => {
         }
     });
     if (!String(children).includes('\n')) {
-        return (_jsx("code", Object.assign({}, props, { className: "pf-chatbot__message-inline-code", children: children })));
+        return (_jsx("code", Object.assign({}, props, { className: `pf-chatbot__message-inline-code ${isPrimary ? 'pf-m-primary' : ''}`, children: children })));
     }
     // Setup code block header
     const actions = (_jsxs(_Fragment, { children: [_jsxs(CodeBlockAction, { className: "pf-chatbot__message-code-block-default-action", children: [language && _jsx("div", { className: "pf-chatbot__message-code-block-language", children: language }), _jsx(Button, { ref: buttonRef, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Copy code', variant: "plain", className: "pf-chatbot__button--copy", onClick: (event) => handleCopy(event, children), children: copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) }), _jsx(Tooltip, { id: tooltipID, content: "Copy", position: "top", triggerRef: buttonRef })] }), customActions] }));
-    return (_jsx("div", { className: "pf-chatbot__message-code-block", ref: codeBlockRef, children: _jsxs(CodeBlock, { actions: actions, children: [_jsx(CodeBlockCode, { children: _jsx(_Fragment, { children: isExpandable ? (_jsx(ExpandableSection, Object.assign({ variant: ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) : (children) }) }), isExpandable && (_jsx(ExpandableSectionToggle, Object.assign({ isExpanded: isExpanded, onToggle: onToggle, direction: "up", toggleId: toggleId, contentId: contentId, hasTruncatedContent: true, className: "pf-chatbot__message-code-toggle" }, expandableSectionToggleProps, { children: isExpanded ? finalExpandedText : finalCollapsedText })))] }) }));
+    return (_jsx("div", { className: css('pf-chatbot__message-code-block', shouldRetainStyles && 'pf-m-markdown'), ref: codeBlockRef, children: _jsxs(CodeBlock, { actions: actions, children: [_jsx(CodeBlockCode, { children: _jsx(_Fragment, { children: isExpandable ? (_jsx(ExpandableSection, Object.assign({ variant: ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) : (children) }) }), isExpandable && (_jsx(ExpandableSectionToggle, Object.assign({ isExpanded: isExpanded, onToggle: onToggle, direction: "up", toggleId: toggleId, contentId: contentId, hasTruncatedContent: true, className: "pf-chatbot__message-code-toggle" }, expandableSectionToggleProps, { children: isExpanded ? finalExpandedText : finalCollapsedText })))] }) }));
 };
 export default CodeBlockMessage;

package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.test.js

@@ -0,0 +1,126 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CodeBlockMessage from './CodeBlockMessage';
+// Mock clipboard API
+Object.assign(navigator, {
+    clipboard: {
+        writeText: jest.fn()
+    }
+});
+describe('CodeBlockMessage', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render inline code for single-line content', () => {
+        render(_jsx(CodeBlockMessage, { className: "language-javascript", children: "const x = 5;" }));
+        const code = screen.getByText('const x = 5;');
+        expect(code.tagName).toBe('CODE');
+        expect(code).toHaveClass('pf-chatbot__message-inline-code');
+    });
+    it('should render code block for multi-line content', () => {
+        const multilineCode = 'const x = 5;\nconst y = 10;';
+        const { container } = render(_jsx(CodeBlockMessage, { className: "language-javascript", children: multilineCode }));
+        const codeElement = container.querySelector('code');
+        expect(codeElement === null || codeElement === void 0 ? void 0 : codeElement.textContent).toBe(multilineCode);
+    });
+    it('should display language label', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        render(_jsx(CodeBlockMessage, { className: "language-javascript", children: code }));
+        expect(screen.getByText('javascript')).toBeInTheDocument();
+    });
+    it('should render copy button', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        render(_jsx(CodeBlockMessage, { children: code }));
+        expect(screen.getByRole('button', { name: 'Copy code' })).toBeInTheDocument();
+    });
+    it('should copy plain string content to clipboard', () => __awaiter(void 0, void 0, void 0, function* () {
+        const code = 'const x = 5;\nconst y = 10;';
+        render(_jsx(CodeBlockMessage, { children: code }));
+        const copyButton = screen.getByRole('button', { name: 'Copy code' });
+        yield userEvent.click(copyButton);
+        expect(navigator.clipboard.writeText).toHaveBeenCalledWith(code);
+    }));
+    it('should extract text content from React elements when copying', () => __awaiter(void 0, void 0, void 0, function* () {
+        // Simulate what happens with syntax highlighting - children become React elements
+        const { container } = render(_jsxs(CodeBlockMessage, { className: "language-javascript", children: [_jsx("span", { className: "hljs-keyword", children: "const" }), " x = 5;", '\n', _jsx("span", { className: "hljs-keyword", children: "const" }), " y = 10;"] }));
+        const copyButton = screen.getByRole('button', { name: 'Copy code' });
+        yield userEvent.click(copyButton);
+        // Should extract actual text content from DOM, not "[object Object]"
+        const codeElement = container.querySelector('code');
+        const expectedText = (codeElement === null || codeElement === void 0 ? void 0 : codeElement.textContent) || '';
+        expect(navigator.clipboard.writeText).toHaveBeenCalledWith(expectedText);
+        expect(expectedText).not.toContain('[object Object]');
+    }));
+    it('should show check icon after copying', () => __awaiter(void 0, void 0, void 0, function* () {
+        const code = 'const x = 5;\nconst y = 10;';
+        render(_jsx(CodeBlockMessage, { children: code }));
+        const copyButton = screen.getByRole('button', { name: 'Copy code' });
+        yield userEvent.click(copyButton);
+        // Check icon should be visible (we can verify by checking if CopyIcon is not present)
+        const svgElement = copyButton.querySelector('svg');
+        expect(svgElement).toBeInTheDocument();
+    }));
+    it('should render expandable section when isExpandable is true', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        render(_jsx(CodeBlockMessage, { isExpandable: true, children: code }));
+        expect(screen.getByRole('button', { name: 'Show more' })).toBeInTheDocument();
+    });
+    it('should toggle expandable section', () => __awaiter(void 0, void 0, void 0, function* () {
+        const code = 'const x = 5;\nconst y = 10;';
+        render(_jsx(CodeBlockMessage, { isExpandable: true, children: code }));
+        const toggleButton = screen.getByRole('button', { name: 'Show more' });
+        yield userEvent.click(toggleButton);
+        expect(screen.getByRole('button', { name: 'Show less' })).toBeInTheDocument();
+    }));
+    it('should use custom expanded/collapsed text', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        render(_jsx(CodeBlockMessage, { isExpandable: true, expandedText: "Hide", collapsedText: "Reveal", children: code }));
+        expect(screen.getByRole('button', { name: 'Reveal' })).toBeInTheDocument();
+    });
+    it('should pass through expandableSectionProps', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        const { container } = render(_jsx(CodeBlockMessage, { isExpandable: true, expandableSectionProps: { className: 'custom-expandable-class' }, children: code }));
+        const expandableSection = container.querySelector('.pf-v6-c-expandable-section.custom-expandable-class');
+        expect(expandableSection).toBeInTheDocument();
+    });
+    it('should render custom actions', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        const customAction = _jsx("button", { "aria-label": "Custom action", children: "Custom" });
+        render(_jsx(CodeBlockMessage, { customActions: customAction, children: code }));
+        expect(screen.getByRole('button', { name: 'Custom action' })).toBeInTheDocument();
+    });
+    it('should apply isPrimary class to inline code', () => {
+        render(_jsx(CodeBlockMessage, { isPrimary: true, children: "const x = 5;" }));
+        const code = screen.getByText('const x = 5;');
+        expect(code).toHaveClass('pf-m-primary');
+    });
+    it('should apply shouldRetainStyles class to code block', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        const { container } = render(_jsx(CodeBlockMessage, { shouldRetainStyles: true, children: code }));
+        const codeBlockDiv = container.querySelector('.pf-chatbot__message-code-block');
+        expect(codeBlockDiv).toHaveClass('pf-m-markdown');
+    });
+    it('should use custom aria-label for copy button', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        render(_jsx(CodeBlockMessage, { "aria-label": "Copy this code", children: code }));
+        expect(screen.getByRole('button', { name: 'Copy this code' })).toBeInTheDocument();
+    });
+    it('should prioritize data-expanded-text over expandedText prop', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn());
+        render(_jsx(CodeBlockMessage, { isExpandable: true, expandedText: "Custom Expanded", "data-expanded-text": "Data Expanded", children: code }));
+        expect(consoleErrorSpy).toHaveBeenCalledWith('Message:', expect.stringContaining('data-expanded-text or data-collapsed-text will override'));
+        consoleErrorSpy.mockRestore();
+    });
+});

package/dist/esm/Message/ErrorMessage/ErrorMessage.d.ts

@@ -1,3 +1,17 @@
 import { AlertProps } from '@patternfly/react-core';
-declare const ErrorMessage: ({ title, actionLinks, children, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * ErrorMessage displays an inline danger alert for error states in messages.
+ * Use this component when passing children to Message to display error information.
+ */
+export interface ErrorMessageProps extends Partial<AlertProps> {
+    /** Content to display in the error alert body */
+    children?: React.ReactNode;
+    /** Additional classes for the error alert */
+    className?: string;
+    /** Title of the error alert */
+    title?: React.ReactNode;
+    /** Action links to display in the alert footer */
+    actionLinks?: React.ReactNode;
+}
+export declare const ErrorMessage: ({ title, actionLinks, children, className, ...props }: ErrorMessageProps) => import("react/jsx-runtime").JSX.Element;
 export default ErrorMessage;