@patternfly/chatbot 6.3.0-prerelease.17 → 6.3.0-prerelease.18

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

@@ -0,0 +1,130 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { Component, createRef } from 'react';
+import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
+import { css } from '@patternfly/react-styles';
+import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
+import { debounce, getResizeObserver, getUniqueId } from '@patternfly/react-core';
+export var ExpandableSectionVariant;
+(function (ExpandableSectionVariant) {
+    ExpandableSectionVariant["default"] = "default";
+    ExpandableSectionVariant["truncate"] = "truncate";
+})(ExpandableSectionVariant || (ExpandableSectionVariant = {}));
+const setLineClamp = (element, lines, language, isExpanded) => {
+    if (!element || !lines || lines < 1 || typeof isExpanded === 'undefined') {
+        return;
+    }
+    if (language) {
+        const selector = `.language-${language.toLowerCase()}`;
+        const childElement = element.querySelector(selector);
+        if (!childElement) {
+            return;
+        }
+        if (isExpanded) {
+            // Reset all truncation-related styles to their default values
+            childElement.style.removeProperty('-webkit-line-clamp');
+            childElement.style.removeProperty('display');
+            childElement.style.removeProperty('-webkit-box-orient');
+            childElement.style.removeProperty('overflow');
+        }
+        else {
+            childElement.style.setProperty('-webkit-line-clamp', lines.toString());
+            childElement.style.setProperty('display', '-webkit-box');
+            childElement.style.setProperty('-webkit-box-orient', 'vertical');
+            childElement.style.setProperty('overflow', 'hidden');
+        }
+    }
+};
+class ExpandableSectionForSyntaxHighlighter extends Component {
+    constructor(props) {
+        var _a;
+        super(props);
+        this.expandableContentRef = createRef();
+        /* eslint-disable-next-line */
+        this.observer = () => { };
+        this.checkToggleVisibility = () => {
+            var _a;
+            if ((_a = this.expandableContentRef) === null || _a === void 0 ? void 0 : _a.current) {
+                const maxLines = this.props.truncateMaxLines || parseInt(lineClamp.value);
+                const totalLines = this.expandableContentRef.current.scrollHeight /
+                    parseInt(getComputedStyle(this.expandableContentRef.current).lineHeight);
+                this.setState({
+                    hasToggle: totalLines > maxLines
+                });
+            }
+        };
+        this.resize = () => {
+            if (this.expandableContentRef.current) {
+                const { offsetWidth } = this.expandableContentRef.current;
+                if (this.state.previousWidth !== offsetWidth) {
+                    this.setState({ previousWidth: offsetWidth });
+                    this.checkToggleVisibility();
+                }
+            }
+        };
+        this.handleResize = debounce(this.resize, 250);
+        this.state = {
+            isExpanded: (_a = props.isExpanded) !== null && _a !== void 0 ? _a : false,
+            hasToggle: true,
+            previousWidth: undefined
+        };
+    }
+    componentDidMount() {
+        if (this.props.variant === ExpandableSectionVariant.truncate) {
+            const expandableContent = this.expandableContentRef.current;
+            if (expandableContent) {
+                this.setState({ previousWidth: expandableContent.offsetWidth });
+                this.observer = getResizeObserver(expandableContent, this.handleResize, false);
+                if (this.props.truncateMaxLines) {
+                    setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.state.isExpanded);
+                }
+            }
+            this.checkToggleVisibility();
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.variant === ExpandableSectionVariant.truncate &&
+            (prevProps.truncateMaxLines !== this.props.truncateMaxLines ||
+                prevProps.children !== this.props.children ||
+                prevProps.isExpanded !== this.props.isExpanded)) {
+            const expandableContent = this.expandableContentRef.current;
+            setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.props.isExpanded);
+            this.checkToggleVisibility();
+        }
+    }
+    componentWillUnmount() {
+        if (this.props.variant === ExpandableSectionVariant.truncate) {
+            this.observer();
+        }
+    }
+    render() {
+        const _a = this.props, { className, children, isExpanded, isDetached, displaySize, isWidthLimited, isIndented, contentId, toggleId, variant } = _a, props = __rest(_a, ["className", "children", "isExpanded", "isDetached", "displaySize", "isWidthLimited", "isIndented", "contentId", "toggleId", "variant"]);
+        if (isDetached && !toggleId) {
+            /* eslint-disable no-console */
+            console.warn('ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.');
+        }
+        const uniqueContentId = contentId || getUniqueId('expandable-section-content');
+        const uniqueToggleId = toggleId || getUniqueId('expandable-section-toggle');
+        return (_jsx("div", Object.assign({ className: css(styles.expandableSection, isExpanded && styles.modifiers.expanded, displaySize === 'lg' && styles.modifiers.displayLg, isWidthLimited && styles.modifiers.limitWidth, isIndented && styles.modifiers.indented, variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate, className) }, props, { children: _jsx("div", { ref: this.expandableContentRef, className: css(styles.expandableSectionContent), hidden: variant !== ExpandableSectionVariant.truncate && !isExpanded, id: uniqueContentId, "aria-labelledby": uniqueToggleId, role: "region", children: children }) })));
+    }
+}
+ExpandableSectionForSyntaxHighlighter.displayName = 'ExpandableSection';
+ExpandableSectionForSyntaxHighlighter.defaultProps = {
+    className: '',
+    isDetached: false,
+    displaySize: 'default',
+    isWidthLimited: false,
+    isIndented: false,
+    variant: 'default'
+};
+export { ExpandableSectionForSyntaxHighlighter };

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
-import { AlertProps, AvatarProps, ButtonProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
+import { AlertProps, AvatarProps, ButtonProps, ExpandableSectionProps, ExpandableSectionToggleProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
 import { QuickStart, QuickstartAction } from './QuickStarts/types';
@@ -64,9 +64,24 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     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[];

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

@@ -403,6 +403,30 @@ describe('Message', () => {
         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(_jsx(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: { isExpandable: true } }));
+        const button = screen.getByRole('button', { name: /Show more/i });
+        yield 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();
+        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('can click copy code button', () => __awaiter(void 0, void 0, void 0, function* () {
         // need explicit setup since RTL stubs clipboard if you do this
         const user = userEvent.setup();

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/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/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/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/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.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/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/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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.3.0-prerelease.17",
+  "version": "6.3.0-prerelease.18",
   "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",

package/patternfly-docs/content/extensions/chatbot/design-guidelines.md

@@ -261,6 +261,16 @@ Each time a user begins a new conversation, display a [welcome message, with pro
 
 As much as possible, the suggested prompts should consider the user’s location in the service or application, or the situation their project is undergoing. 
 
+### Executing user requests
+
+Instead of automatically initiating what sounds like a request from a user, the ChatBot should ask users to confirm or deny their intent. This differentiates moments where users are simply asking about feasibility, rather than actually making a request.
+
+This can be done using the [quick response](/patternfly-ai/chatbot/messages#messages-with-quick-responses) buttons:
+
+<div class="ws-docs-content-img">
+![Confirmation options from a bot in response to a user's request.](./img/quick-response-confirmation.svg)
+</div>
+
 ### Using the conversation history menu
 
 The ChatBot history menu contains a log of a users' previous chats. Clicking the menu icon opens a side drawer in the ChatBot window.

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

@@ -0,0 +1,51 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: PatternFly-AI
+subsection: ChatBot
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Customizing messages
+source: Customizing messages
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+sortValue: 60
+---
+
+## Modifying static content
+
+The ChatBot extension `<Message>` component transforms Markdown to PatternFly React components via [react-markdown](https://github.com/remarkjs/react-markdown), which supports both [rehype](https://unifiedjs.com/explore/package/rehype/) and [remark](https://unifiedjs.com/explore/package/remark/) plugins for further output customization.
+
+remark parses Markdown as input and serializes Markdown as output, while rehype does the same for HTML. This allows you to target and make transformations at specific checkpoints in the transformation process: either while the text tree is still in Markdown, or while the text tree is in HTML format. For more detailed information on the architecture of this library, see the [react-markdown documentation](https://github.com/remarkjs/react-markdown?tab=readme-ov-file#architecture).
+
+You may need these plugins if, for example, you wanted to change the `href` on a link based on the link text. The `<Message>` prop `rehypePlugins` will accept any custom rehype plugins. We use already use these plugins in ChatBot to [render images a certain way](https://www.npmjs.com/package/rehype-unwrap-images) and [handle external links](https://www.npmjs.com/package/rehype-external-links).
+
+There are many open source libraries available for other common customization needs. If you can't find one for your use case, [Unified](https://unifiedjs.com/) has a helpful [guide on creating custom plugins](https://unifiedjs.com/learn/guide/create-a-rehype-plugin/).
+For a more direct example, if we wanted to change the `href` on links that included the text string `react`, we could write a very basic plugin like this:
+
+```
+import { visit } from 'unist-util-visit';
+
+export const rehypeLinkHrefUpdater = (options) => (tree) => {
+  visit(tree, 'element', (node) => {
+    if (node.tagName === 'a' && node.properties) {
+      if (node.properties.href.includes('react')) {
+        node.properties.href = '#';
+      }
+    }
+  });
+};
+
+```
+
+You could then pass `[rehypeLinkHrefUpdater]` to the `additionalRehypePlugins` prop on `<Message>` to have this applied to all relevant links read by that `<Message>` component.
+
+## Modifying dynamic content
+
+Props can also be used to modify dynamic content in messages.
+
+Continuing with our link modification example, let's say you also wanted to add custom `onClick` events. In this case, you would not use `remark` or `rehype`, since they're for static tree manipulation.
+
+Instead, you can utilize ChatBot features to customize dynamic content. We offer many `<Message>` props that allow you to implement custom behavior.
+For example, you can use `linkProps` to pass `onClick` events and other PatternFly `<Button>` props down to links. A very basic example would be `linkProps={{onClick: (event) => console.log(event}}`, which would apply to every link in the `<Message>`. Or, you could use the `event.target`, adding your own custom `onClick` logic based on the `innerText`, `innerHTML`, or other attributes of the `event.target`.

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

@@ -15,11 +15,13 @@ export const BotMessageExample: FunctionComponent = () => {
   const [variant, setVariant] = useState<string>('Code');
   const [isOpen, setIsOpen] = useState(false);
   const [selected, setSelected] = useState<string>('Message content type');
+  const [isExpandable, setIsExpanded] = useState(false);
 
   /* eslint-disable indent */
   const renderContent = () => {
     switch (variant) {
       case 'Code':
+      case 'Expandable code':
         return code;
       case 'Heading':
         return heading;
@@ -166,6 +168,11 @@ _Italic text, formatted with single underscores_
     setVariant(value);
     setSelected(value as string);
     setIsOpen(false);
+    if (value === 'Expandable code') {
+      setIsExpanded(true);
+    } else {
+      setIsExpanded(false);
+    }
   };
 
   const onToggleClick = () => {
@@ -237,6 +244,7 @@ _Italic text, formatted with single underscores_
       >
         <SelectList>
           <SelectOption value="Code">Code</SelectOption>
+          <SelectOption value="Expandable code">Expandable code</SelectOption>
           <SelectOption value="Inline code">Inline code</SelectOption>
           <SelectOption value="Heading">Heading</SelectOption>
           <SelectOption value="Block quotes">Block quotes</SelectOption>
@@ -259,6 +267,7 @@ _Italic text, formatted with single underscores_
           variant === 'Table' ? { 'aria-label': 'App information and user roles for bot messages' } : undefined
         }
         error={variant === 'Error' ? error : undefined}
+        codeBlockProps={{ isExpandable, expandableSectionProps: { truncateMaxLines: isExpandable ? 1 : undefined } }}
       />
     </>
   );

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

@@ -15,11 +15,13 @@ export const UserMessageExample: FunctionComponent = () => {
   const [isEditable, setIsEditable] = useState<boolean>(true);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selected, setSelected] = useState<string>('Message content type');
+  const [isExpandable, setIsExpanded] = useState(false);
 
   /* eslint-disable indent */
   const renderContent = () => {
     switch (variant) {
       case 'Code':
+      case 'Expandable code':
         return code;
       case 'Inline code':
         return inlineCode;
@@ -166,6 +168,11 @@ _Italic text, formatted with single underscores_
     setVariant(value);
     setSelected(value as string);
     setIsOpen(false);
+    if (value === 'Expandable code') {
+      setIsExpanded(true);
+    } else {
+      setIsExpanded(false);
+    }
   };
 
   const onToggleClick = () => {
@@ -215,6 +222,7 @@ _Italic text, formatted with single underscores_
       >
         <SelectList>
           <SelectOption value="Code">Code</SelectOption>
+          <SelectOption value="Expandable code">Expandable code</SelectOption>
           <SelectOption value="Inline code">Inline code</SelectOption>
           <SelectOption value="Heading">Heading</SelectOption>
           <SelectOption value="Block quotes">Block quotes</SelectOption>
@@ -241,6 +249,7 @@ _Italic text, formatted with single underscores_
         error={variant === 'Error' ? error : undefined}
         onEditUpdate={() => setIsEditable(false)}
         onEditCancel={() => setIsEditable(false)}
+        codeBlockProps={{ isExpandable, expandableSectionProps: { truncateMaxLines: isExpandable ? 1 : undefined } }}
       />
     </>
   );