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

package/dist/esm/MessageBox/MessageBox.js

@@ -16,7 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
 import JumpButton from './JumpButton';
 export const MessageBox = forwardRef((_a, ref) => {
-    var { announcement, ariaLabel = 'Scrollable message log', children, className, position = 'top', onScrollToTopClick, onScrollToBottomClick, enableSmartScroll = false } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "className", "position", "onScrollToTopClick", "onScrollToBottomClick", "enableSmartScroll"]);
+    var { announcement, ariaLabel = 'Scrollable message log', children, className, position = 'top', onScrollToTopClick, onScrollToBottomClick, enableSmartScroll = false, jumpButtonTopProps, jumpButtonBottomProps, jumpButtonBottomTooltipProps, jumpButtonTopTooltipProps } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "className", "position", "onScrollToTopClick", "onScrollToBottomClick", "enableSmartScroll", "jumpButtonTopProps", "jumpButtonBottomProps", "jumpButtonBottomTooltipProps", "jumpButtonTopTooltipProps"]);
     const [atTop, setAtTop] = useState(false);
     const [atBottom, setAtBottom] = useState(true);
     const [isOverflowing, setIsOverflowing] = useState(false);
@@ -200,6 +200,6 @@ export const MessageBox = forwardRef((_a, ref) => {
         onTouchMove,
         onTouchEnd
     };
-    return (_jsxs(_Fragment, { children: [_jsx(JumpButton, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop }), _jsxs("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className !== null && className !== void 0 ? className : ''}`, ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [children, _jsx("div", { className: "pf-chatbot__messagebox-announcement", "aria-live": "polite", children: announcement })] })), _jsx(JumpButton, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: () => scrollToBottom({ resumeSmartScroll: true }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(JumpButton, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop, jumpButtonProps: jumpButtonTopProps, jumpButtonTooltipProps: jumpButtonTopTooltipProps }), _jsxs("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className !== null && className !== void 0 ? className : ''}`, ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [children, _jsx("div", { className: "pf-chatbot__messagebox-announcement", "aria-live": "polite", children: announcement })] })), _jsx(JumpButton, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: () => scrollToBottom({ resumeSmartScroll: true }), jumpButtonProps: jumpButtonBottomProps, jumpButtonTooltipProps: jumpButtonBottomTooltipProps })] }));
 });
 export default MessageBox;

package/dist/esm/MessageBox/MessageBox.test.js

@@ -51,7 +51,7 @@ describe('MessageBox', () => {
             region.dispatchEvent(new Event('scroll'));
         });
         yield waitFor(() => {
-            userEvent.click(screen.getByRole('button', { name: /Jump bottom/i }));
+            userEvent.click(screen.getByRole('button', { name: /Back to bottom/i }));
             expect(spy).toHaveBeenCalled();
         });
     }));
@@ -70,7 +70,7 @@ describe('MessageBox', () => {
             region.dispatchEvent(new Event('scroll'));
         });
         yield waitFor(() => {
-            userEvent.click(screen.getByRole('button', { name: /Jump top/i }));
+            userEvent.click(screen.getByRole('button', { name: /Back to top/i }));
             expect(spy).toHaveBeenCalled();
         });
     }));

package/dist/esm/SourcesCard/SourcesCard.d.ts

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'react';
-import { ButtonProps, CardProps } from '@patternfly/react-core';
+import { ButtonProps, CardBodyProps, CardFooterProps, CardProps, CardTitleProps, TruncateProps } from '@patternfly/react-core';
 export interface SourcesCardProps extends CardProps {
     /** Additional classes for the pagination navigation container. */
     className?: string;
@@ -13,6 +13,8 @@ export interface SourcesCardProps extends CardProps {
     sources: {
         /** Title of sources card */
         title?: string;
+        /** Subtitle of sources card */
+        subtitle?: string;
         /** Link to source */
         link: string;
         /** Body of sources card */
@@ -25,6 +27,10 @@ export interface SourcesCardProps extends CardProps {
         onClick?: React.MouseEventHandler<HTMLButtonElement>;
         /** Any additional props applied to the title of the Sources card  */
         titleProps?: ButtonProps;
+        /** Custom footer applied to the Sources card */
+        footer?: React.ReactNode;
+        /** Additional props passed to Truncate component */
+        truncateProps?: TruncateProps;
     }[];
     /** Label for the English word "source" */
     sourceWord?: string;
@@ -44,6 +50,12 @@ export interface SourcesCardProps extends CardProps {
     showMoreWords?: string;
     /** Label for English words "show less" */
     showLessWords?: string;
+    /** Additional props passed to card title */
+    cardTitleProps?: CardTitleProps;
+    /** Additional props passed to card body */
+    cardBodyProps?: CardBodyProps;
+    /** Additional props passed to card footer */
+    cardFooterProps?: CardFooterProps;
 }
 declare const SourcesCard: FunctionComponent<SourcesCardProps>;
 export default SourcesCard;

package/dist/esm/SourcesCard/SourcesCard.js

@@ -16,7 +16,7 @@ import { Button, ButtonVariant, Card, CardBody, CardFooter, CardTitle, Expandabl
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 const SourcesCard = (_a) => {
     var _b;
-    var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less', isCompact } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact"]);
+    var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less', isCompact, cardTitleProps, cardBodyProps, cardFooterProps } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact", "cardTitleProps", "cardBodyProps", "cardFooterProps"]);
     const [page, setPage] = useState(1);
     const [isExpanded, setIsExpanded] = useState(false);
     const onToggle = (_event, isExpanded) => {
@@ -26,15 +26,15 @@ const SourcesCard = (_a) => {
         setPage(newPage);
         onSetPage && onSetPage(_evt, newPage);
     };
-    const renderTitle = (title) => {
+    const renderTitle = (title, truncateProps) => {
         if (title) {
-            return _jsx(Truncate, { content: title });
+            return _jsx(Truncate, Object.assign({ content: title }, truncateProps));
         }
         return `Source ${page}`;
     };
-    return (_jsxs("div", { className: "pf-chatbot__source", children: [_jsx("span", { children: pluralize(sources.length, sourceWord, sourceWordPlural) }), _jsxs(Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [_jsx(CardTitle, { className: "pf-chatbot__sources-card-title", children: _jsx(Button, Object.assign({ component: "a", variant: ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? _jsx(ExternalLinkSquareAltIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, onClick: (_b = sources[page - 1].onClick) !== null && _b !== void 0 ? _b : undefined }, sources[page - 1].titleProps, { children: renderTitle(sources[page - 1].title) })) }), sources[page - 1].body && (_jsx(CardBody, { className: `pf-chatbot__sources-card-body`, children: sources[page - 1].hasShowMore ? (
+    return (_jsxs("div", { className: "pf-chatbot__source", children: [_jsx("span", { children: pluralize(sources.length, sourceWord, sourceWordPlural) }), _jsxs(Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [_jsx(CardTitle, Object.assign({ className: "pf-chatbot__sources-card-title" }, cardTitleProps, { children: _jsxs("div", { className: "pf-chatbot__sources-card-title-container", children: [_jsx(Button, Object.assign({ component: "a", variant: ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? _jsx(ExternalLinkSquareAltIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, onClick: (_b = sources[page - 1].onClick) !== null && _b !== void 0 ? _b : undefined }, sources[page - 1].titleProps, { children: renderTitle(sources[page - 1].title, sources[page - 1].truncateProps) })), sources[page - 1].subtitle && (_jsx("span", { className: "pf-chatbot__sources-card-subtitle", children: sources[page - 1].subtitle }))] }) })), sources[page - 1].body && (_jsx(CardBody, Object.assign({ className: `pf-chatbot__sources-card-body ${sources[page - 1].footer ? 'pf-chatbot__compact-sources-card-body' : undefined}` }, cardBodyProps, { children: sources[page - 1].hasShowMore ? (
                         // prevents extra VO announcements of button text - parent Message has aria-live
-                        _jsx("div", { "aria-live": "off", children: _jsx(ExpandableSection, { variant: ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : (_jsx("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) })), sources.length > 1 && (_jsx(CardFooter, { className: "pf-chatbot__sources-card-footer-container", children: _jsx("div", { className: "pf-chatbot__sources-card-footer", children: _jsxs("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [_jsx(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
+                        _jsx("div", { "aria-live": "off", children: _jsx(ExpandableSection, { variant: ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : (_jsx("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) }))), sources[page - 1].footer ? (_jsx(CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer" }, cardFooterProps, { children: sources[page - 1].footer }))) : (sources.length > 1 && (_jsx(CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer-container" }, cardFooterProps, { children: _jsx("div", { className: "pf-chatbot__sources-card-footer", children: _jsxs("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [_jsx(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
                                             const newPage = page >= 1 ? page - 1 : 1;
                                             onPreviousClick && onPreviousClick(event, newPage);
                                             handleNewPage(event, newPage);
@@ -42,6 +42,6 @@ const SourcesCard = (_a) => {
                                             const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
                                             onNextClick && onNextClick(event, newPage);
                                             handleNewPage(event, newPage);
-                                        }, children: _jsx(Icon, { isInline: true, iconSize: "lg", children: _jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _jsx("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }) }) }) })] }) }) }))] }))] }));
+                                        }, children: _jsx(Icon, { isInline: true, iconSize: "lg", children: _jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _jsx("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }) }) }) })] }) }) }))))] }))] }));
 };
 export default SourcesCard;

package/dist/esm/SourcesCard/SourcesCard.test.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
@@ -179,4 +179,53 @@ describe('SourcesCard', () => {
         render(_jsx(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '', titleProps: { className: 'test' } }] }));
         expect(screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
     });
+    it('should apply cardTitleProps appropriately', () => {
+        render(_jsx(SourcesCard, { cardTitleProps: { 'data-testid': 'card-title', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '' }] }));
+        expect(screen.getByTestId('card-title')).toHaveClass('test');
+    });
+    it('should apply cardBodyProps appropriately', () => {
+        render(_jsx(SourcesCard, { cardBodyProps: { 'data-testid': 'card-body', body: 'To make an apple pie, you must first...', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }] }));
+        expect(screen.getByTestId('card-body')).toHaveClass('test');
+    });
+    it('should apply cardFooterProps appropriately', () => {
+        render(_jsx(SourcesCard, { cardFooterProps: { 'data-testid': 'card-footer', className: 'test' }, sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ] }));
+        expect(screen.getByTestId('card-footer')).toHaveClass('test');
+    });
+    it('should apply truncateProps appropriately', () => {
+        render(_jsx(SourcesCard, { sources: [
+                {
+                    title: 'How to make an apple pie',
+                    link: '',
+                    truncateProps: { 'data-testid': 'card-truncate', className: 'test' }
+                }
+            ] }));
+        expect(screen.getByTestId('card-truncate')).toHaveClass('test');
+    });
+    it('should apply custom footer appropriately when there is one source', () => {
+        render(_jsx(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '', footer: _jsx(_Fragment, { children: "I am a custom footer" }) }] }));
+        expect(screen.getByText('I am a custom footer'));
+        expect(screen.queryByText('1/1')).toBeFalsy();
+    });
+    it('should apply custom footer appropriately when are multiple sources', () => {
+        render(_jsx(SourcesCard, { sources: [
+                { title: 'How to make an apple pie', link: '', footer: _jsx(_Fragment, { children: "I am a custom footer" }) },
+                { title: 'How to bake bread', link: '' }
+            ] }));
+        expect(screen.getByText('I am a custom footer'));
+        // does not show navigation bar
+        expect(screen.queryByText('1/2')).toBeFalsy();
+    });
+    it('should apply footer props to custom footer appropriately', () => {
+        render(_jsx(SourcesCard, { cardFooterProps: { 'data-testid': 'card-footer', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '', footer: _jsx(_Fragment, { children: "I am a custom footer" }) }] }));
+        expect(screen.getByText('I am a custom footer'));
+        expect(screen.getByTestId('card-footer')).toHaveClass('test');
+    });
+    it('should apply subtitle appropriately', () => {
+        render(_jsx(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '', subtitle: 'You must first create the universe' }] }));
+        expect(screen.getByText('How to make an apple pie'));
+        expect(screen.getByText('You must first create the universe'));
+    });
 });

package/dist/esm/ToolResponse/ToolResponse.d.ts

@@ -0,0 +1,30 @@
+import { CardBodyProps, CardProps, CardTitleProps, DividerProps, ExpandableSectionProps } from '@patternfly/react-core';
+import { type FunctionComponent } from 'react';
+export interface ToolResponseProps {
+    /** Toggle content shown for expandable section */
+    toggleContent: React.ReactNode;
+    /** Additional props passed to expandable section */
+    expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+    /** Subheading rendered inside expandable section */
+    subheading?: string;
+    /** Body text rendered inside expandable section */
+    body?: React.ReactNode | string;
+    /** Content passed into tool response card body */
+    cardBody: React.ReactNode;
+    /** Content passed into tool response card title */
+    cardTitle: React.ReactNode;
+    /** Additional props passed to main card */
+    cardProps?: CardProps;
+    /** Additional props passed to main card body */
+    cardBodyProps?: CardBodyProps;
+    /** Additional props passed to tool response card */
+    toolResponseCardProps?: CardProps;
+    /** Additional props passed to tool response card body */
+    toolResponseCardBodyProps?: CardBodyProps;
+    /** Additional props passed to tool response card divider */
+    toolResponseCardDividerProps?: DividerProps;
+    /** Additional props passed to tool response card title */
+    toolResponseCardTitleProps?: CardTitleProps;
+}
+export declare const ToolResponse: FunctionComponent<ToolResponseProps>;
+export default ToolResponse;

package/dist/esm/ToolResponse/ToolResponse.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// Tool Response Card
+// ============================================================================
+import { Card, CardBody, CardTitle, Divider, ExpandableSection } from '@patternfly/react-core';
+import { useState } from 'react';
+export const ToolResponse = ({ body, cardProps, expandableSectionProps, subheading, cardBody, cardTitle, cardBodyProps, toggleContent, toolResponseCardBodyProps, toolResponseCardDividerProps, toolResponseCardProps, toolResponseCardTitleProps }) => {
+    const [isExpanded, setIsExpanded] = useState(true);
+    const onToggle = (_event, isExpanded) => {
+        setIsExpanded(isExpanded);
+    };
+    return (_jsx(Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response" }, cardProps, { children: _jsx(CardBody, Object.assign({}, cardBodyProps, { children: _jsx(ExpandableSection, Object.assign({ toggleContent: toggleContent, onToggle: onToggle, isExpanded: isExpanded, isIndented: true, className: "pf-chatbot__tool-response-expandable-section" }, expandableSectionProps, { children: _jsxs("div", { className: "pf-chatbot__tool-response-section", children: [subheading && (_jsx("div", { className: "pf-chatbot__tool-response-subheading", children: _jsx("span", { children: subheading }) })), body && _jsx("div", { className: "pf-chatbot__tool-response-body", children: body }), _jsxs(Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response-card" }, toolResponseCardProps, { children: [_jsx(CardTitle, Object.assign({}, toolResponseCardTitleProps, { children: cardTitle })), _jsx(Divider, Object.assign({}, toolResponseCardDividerProps)), _jsx(CardBody, Object.assign({}, toolResponseCardBodyProps, { children: cardBody }))] }))] }) })) })) })));
+};
+export default ToolResponse;

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

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

package/dist/esm/ToolResponse/ToolResponse.test.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ToolResponse from './ToolResponse';
+describe('ToolResponse', () => {
+    const defaultProps = {
+        toggleContent: 'Tool response: toolName',
+        cardTitle: 'Title',
+        cardBody: 'Body'
+    };
+    it('should render with required props only', () => {
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps)));
+        expect(screen.getByText('Title')).toBeTruthy();
+        expect(screen.getByText('Body')).toBeTruthy();
+        expect(screen.getByText('Tool response: toolName')).toBeTruthy();
+    });
+    it('should render subheading when provided', () => {
+        const subheading = 'Tool execution result';
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps, { subheading: subheading })));
+        expect(screen.getByText(subheading)).toBeTruthy();
+    });
+    it('should render body content when provided', () => {
+        const body = 'This is the tool response body content';
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps, { body: body })));
+        expect(screen.getByText(body)).toBeTruthy();
+    });
+    it('should render with complex content including React elements', () => {
+        const body = (_jsxs("div", { children: [_jsx("p", { children: "Complex body content" }), _jsxs("ul", { children: [_jsx("li", { children: "Item 1" }), _jsx("li", { children: "Item 2" })] })] }));
+        const cardTitle = _jsx("strong", { children: "API Response" });
+        const cardBody = (_jsx("div", { children: _jsx("code", { children: "{ status: 'success' }" }) }));
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps, { body: body, cardTitle: cardTitle, cardBody: cardBody })));
+        expect(screen.getByText('Complex body content')).toBeTruthy();
+        expect(screen.getByText('Item 1')).toBeTruthy();
+        expect(screen.getByText('Item 2')).toBeTruthy();
+        expect(screen.getByText('API Response')).toBeTruthy();
+        expect(screen.getByText("{ status: 'success' }")).toBeTruthy();
+    });
+    it('should apply custom className from cardProps', () => {
+        const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { cardProps: { className: 'custom-tool-response-class' } })));
+        expect(container.querySelector('.custom-tool-response-class')).toBeTruthy();
+    });
+    it('should pass through expandableSectionProps', () => {
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps, { expandableSectionProps: { className: 'custom-expandable-class' } })));
+        expect(document.querySelector('.custom-expandable-class')).toBeTruthy();
+    });
+    it('should pass through toolResponseCardProps', () => {
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps, { toolResponseCardProps: { className: 'custom-card-class' } })));
+        expect(document.querySelector('.custom-card-class')).toBeTruthy();
+    });
+    it('should not render subheading span when subheading is not provided', () => {
+        const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps)));
+        const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
+        expect(subheadingContainer).toBeFalsy();
+    });
+});

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

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

package/dist/esm/ToolResponse/index.js

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

package/dist/esm/index.d.ts

@@ -26,12 +26,16 @@ export { default as CodeModal } from './CodeModal';
 export * from './CodeModal';
 export { default as Compare } from './Compare';
 export * from './Compare';
+export { default as DeepThinking } from './DeepThinking';
+export * from './DeepThinking';
 export { default as FileDetails } from './FileDetails';
 export * from './FileDetails';
 export { default as FileDetailsLabel } from './FileDetailsLabel';
 export * from './FileDetailsLabel';
 export { default as FileDropZone } from './FileDropZone';
 export * from './FileDropZone';
+export { default as FilePreview } from './FilePreview';
+export * from './FilePreview';
 export { default as LoadingMessage } from './LoadingMessage';
 export * from './LoadingMessage';
 export { default as Message } from './Message';
@@ -54,5 +58,7 @@ export { default as SourcesCard } from './SourcesCard';
 export * from './SourcesCard';
 export { default as TermsOfUse } from './TermsOfUse';
 export * from './TermsOfUse';
+export { default as ToolResponse } from './ToolResponse';
+export * from './ToolResponse';
 export { default as tracking } from './tracking';
 export * from './tracking';

package/dist/esm/index.js

@@ -27,12 +27,16 @@ export { default as CodeModal } from './CodeModal';
 export * from './CodeModal';
 export { default as Compare } from './Compare';
 export * from './Compare';
+export { default as DeepThinking } from './DeepThinking';
+export * from './DeepThinking';
 export { default as FileDetails } from './FileDetails';
 export * from './FileDetails';
 export { default as FileDetailsLabel } from './FileDetailsLabel';
 export * from './FileDetailsLabel';
 export { default as FileDropZone } from './FileDropZone';
 export * from './FileDropZone';
+export { default as FilePreview } from './FilePreview';
+export * from './FilePreview';
 export { default as LoadingMessage } from './LoadingMessage';
 export * from './LoadingMessage';
 export { default as Message } from './Message';
@@ -55,5 +59,7 @@ export { default as SourcesCard } from './SourcesCard';
 export * from './SourcesCard';
 export { default as TermsOfUse } from './TermsOfUse';
 export * from './TermsOfUse';
+export { default as ToolResponse } from './ToolResponse';
+export * from './ToolResponse';
 export { default as tracking } from './tracking';
 export * from './tracking';

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/index.ts","../src/Message/Plugins/rehypeCodeBlockToggle.ts","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/MessageDivider/MessageDivider.test.tsx","../src/MessageDivider/MessageDivider.tsx","../src/MessageDivider/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/DeepThinking/DeepThinking.test.tsx","../src/DeepThinking/DeepThinking.tsx","../src/DeepThinking/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/FilePreview/FilePreview.test.tsx","../src/FilePreview/FilePreview.tsx","../src/FilePreview/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/index.ts","../src/Message/Plugins/rehypeCodeBlockToggle.ts","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/SuperscriptMessage/SuperscriptMessage.tsx","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/MessageDivider/MessageDivider.test.tsx","../src/MessageDivider/MessageDivider.tsx","../src/MessageDivider/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/ToolResponse/ToolResponse.test.tsx","../src/ToolResponse/ToolResponse.tsx","../src/ToolResponse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.4.0-prerelease.2",
+  "version": "6.4.0-prerelease.20",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "scripts": {
-    "build": "sass src/main.scss dist/css/main.css && npm run build:index && npm run build:js && npm run build:esm && npm run build:fed:packages",
+    "build": "npm run build:css && npm run build:index && npm run build:js && npm run build:esm && npm run build:fed:packages",
     "build:watch": "npm run build:js && npm run build:esm -- --watch && npm run build:fed:packages -- --watch",
     "build:esm": "tsc --build --verbose ./tsconfig.json",
     "build:fed:packages": "node generate-fed-package-json.js",
     "build:js": "tsc -p tsconfig.cjs.json",
     "build:index": "node generate-index.js",
+    "build:css": "sass src/main.scss dist/css/main.css",
+    "build:css:watch": "sass src/main.scss dist/css/main.css --watch",
     "clean": "rimraf dist",
     "docs:develop": "pf-docs-framework start",
     "docs:build": "pf-docs-framework build all --output public",
@@ -38,7 +40,6 @@
     "@segment/analytics-next": "^1.76.0",
     "posthog-js": "^1.194.4",
     "clsx": "^2.1.0",
-    "framer-motion": "^11.3.28",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0",
     "rehype-unwrap-images": "^1.0.0",
@@ -48,11 +49,11 @@
     "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "6.8.2",
+    "@patternfly/documentation-framework": "6.19.0",
     "@patternfly/patternfly": "^6.1.0",
     "@patternfly/patternfly-a11y": "^5.0.0",
     "@types/dom-speech-recognition": "^0.0.4",

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

@@ -1,4 +1,12 @@
-import { CSSProperties, useState, Fragment, FunctionComponent, MouseEvent, Ref } from 'react';
+import {
+  CSSProperties,
+  useState,
+  Fragment,
+  FunctionComponent,
+  MouseEvent as ReactMouseEvent,
+  KeyboardEvent as ReactKeyboardEvent,
+  Ref
+} from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import squareImg from './PF-social-color-square.svg';
@@ -44,6 +52,8 @@ export const BotMessageExample: FunctionComponent = () => {
         return table;
       case 'Image':
         return image;
+      case 'Footnote':
+        return footnote;
       default:
         return;
     }
@@ -150,6 +160,18 @@ _Italic text, formatted with single underscores_
 
   const image = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
 
+  const footnote = `This is some text that has a short footnote[^1] and this is text with a longer footnote.[^bignote]
+
+  [^1]: This is a short footnote. To return the highlight to the original message, click the arrow. 
+  
+  [^bignote]: This is a long footnote with multiple paragraphs and formatting.
+
+      To break long footnotes into paragraphs, indent the text. 
+
+      Add as many paragraphs as you like. You can include *italic text*, **bold text**, and \`code\`.
+
+      > You can even include blockquotes in footnotes!`;
+
   const error = {
     title: 'Could not load chat',
     children: 'Wait a few minutes and check your network settings. If the issue persists: ',
@@ -165,8 +187,8 @@ _Italic text, formatted with single underscores_
     )
   };
 
-  const onSelect = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
-    setVariant(value);
+  const onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setVariant(value as string);
     setSelected(value as string);
     setIsOpen(false);
     if (value === 'Expandable code') {
@@ -196,6 +218,76 @@ _Italic text, formatted with single underscores_
     </MenuToggle>
   );
 
+  const handleFootnoteNavigation = (event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {
+    const target = event.target as HTMLElement;
+
+    // Depending on whether it is a click event or keyboard event, target may be a link or something like a span
+    // Look for the closest anchor element (could be a parent)
+    const anchorElement = target.closest('a');
+    const href = anchorElement?.getAttribute('href');
+
+    // Check if this is a footnote link - we only have internal links in this example, so this is all we need here
+    if (href && href.startsWith('#')) {
+      // Prevent default behavior to avoid page re-render on click in PatternFly docs framework
+      event.preventDefault();
+
+      let targetElement: HTMLElement | null = null;
+      const targetId = href.replace('#', '');
+      targetElement = document.querySelector(`[id="${targetId}"]`);
+
+      if (targetElement) {
+        let focusTarget = targetElement;
+
+        // If we found a footnote definition container, focus on the parent li element
+        if (targetElement.id?.startsWith('bot-message-fn-')) {
+          // Find the parent li element that contains the footnote
+          const parentLi = targetElement.closest('li');
+          if (parentLi) {
+            focusTarget = parentLi as HTMLElement;
+          }
+        }
+
+        focusTarget.focus();
+
+        let elementToHighlight = targetElement;
+
+        // If this is a backref link (going back to footnote reference),
+        // we want to highlight more of the ref line and not just the link itself
+        // since the target is so small
+        if (targetElement.id?.startsWith('bot-message-fnref-')) {
+          const refLink = targetElement;
+
+          // Walk up the DOM to find a meaningful container
+          let parent = refLink.parentElement;
+          while (parent && parent.tagName.toLowerCase() !== 'p' && parent !== document.body) {
+            parent = parent.parentElement;
+          }
+
+          // Use if found, otherwise use the immediate parent or target as a fallback
+          elementToHighlight = parent || refLink.parentElement || targetElement;
+        }
+
+        // Briefly highlight the target element for fun to show what you can do
+        const originalBackground = elementToHighlight.style.backgroundColor;
+        const originalTransition = elementToHighlight.style.transition;
+
+        elementToHighlight.style.transition = 'background-color 0.3s ease';
+        elementToHighlight.style.backgroundColor = 'var(--pf-t--global--background--color--tertiary--default)';
+
+        setTimeout(() => {
+          elementToHighlight.style.backgroundColor = originalBackground;
+          setTimeout(() => {
+            elementToHighlight.style.transition = originalTransition;
+          }, 300);
+        }, 1000);
+      }
+    }
+  };
+
+  const onClick = (event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {
+    handleFootnoteNavigation(event);
+  };
+
   return (
     <>
       <Message
@@ -248,6 +340,7 @@ _Italic text, formatted with single underscores_
           <SelectOption value="More complex list">More complex list</SelectOption>
           <SelectOption value="Table">Table</SelectOption>
           <SelectOption value="Image">Image</SelectOption>
+          <SelectOption value="Footnote">Footnote</SelectOption>
           <SelectOption value="Error">Error</SelectOption>
         </SelectList>
       </Select>
@@ -265,6 +358,11 @@ _Italic text, formatted with single underscores_
         // The purpose of this plugin is to provide unique link names for the code blocks
         // Because they are in the same message, this requires a custom plugin to parse the syntax tree
         additionalRehypePlugins={[rehypeCodeBlockToggle]}
+        linkProps={{ onClick }}
+        // clobberPrefix controls the label ids
+        reactMarkdownProps={{
+          remarkRehypeOptions: { footnoteLabel: 'Bot message footnotes', clobberPrefix: 'bot-message-' }
+        }}
       />
     </>
   );