@patternfly/chatbot 2.2.0-prerelease.44 → 2.2.0-prerelease.46

package/dist/esm/Message/Message.js

@@ -41,8 +41,13 @@ import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSanitize from 'rehype-sanitize';
 import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
+import MessageInput from './MessageInput';
 export const MessageBase = (_a) => {
-    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error"]);
+    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, editFormProps } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "editFormProps"]);
+    const [messageText, setMessageText] = React.useState(content);
+    React.useEffect(() => {
+        setMessageText(content);
+    }, [content]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
     let rehypePlugins = [rehypeUnwrapImages];
     if (openLinkInNewTab) {
@@ -60,6 +65,51 @@ export const MessageBase = (_a) => {
     // Keep timestamps consistent between Timestamp component and aria-label
     const date = new Date();
     const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+    const renderMessage = () => {
+        if (isLoading) {
+            return React.createElement(MessageLoading, { loadingWord: loadingWord });
+        }
+        if (isEditable) {
+            return (React.createElement(React.Fragment, null,
+                beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
+                React.createElement(MessageInput, Object.assign({ content: content, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, text) => {
+                        onEditUpdate && onEditUpdate(event);
+                        setMessageText(text);
+                    }, onEditCancel: onEditCancel }, editFormProps))));
+        }
+        return (React.createElement(React.Fragment, null,
+            beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
+            error ? (React.createElement(ErrorMessage, Object.assign({}, error))) : (React.createElement(Markdown, { components: {
+                    p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
+                    code: (_a) => {
+                        var { children } = _a, props = __rest(_a, ["children"]);
+                        return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
+                    },
+                    h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
+                    h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
+                    h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
+                    h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
+                    h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
+                    h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
+                    blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
+                    ul: (props) => React.createElement(UnorderedListMessage, Object.assign({}, props)),
+                    ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
+                    li: (props) => React.createElement(ListItemMessage, Object.assign({}, props)),
+                    table: (props) => React.createElement(TableMessage, Object.assign({}, props, tableProps)),
+                    tbody: (props) => React.createElement(TbodyMessage, Object.assign({}, props)),
+                    thead: (props) => React.createElement(TheadMessage, Object.assign({}, props)),
+                    tr: (props) => React.createElement(TrMessage, Object.assign({}, props)),
+                    td: (props) => {
+                        // Conflicts with Td type
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        const { width } = props, rest = __rest(props, ["width"]);
+                        return React.createElement(TdMessage, Object.assign({}, rest));
+                    },
+                    th: (props) => React.createElement(ThMessage, Object.assign({}, props)),
+                    img: (props) => React.createElement(ImageMessage, Object.assign({}, props)),
+                    a: (props) => (React.createElement(LinkMessage, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps), props.children))
+                }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins }, messageText))));
+    };
     return (React.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props),
         React.createElement(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
         React.createElement("div", { className: "pf-chatbot__message-contents" },
@@ -70,39 +120,8 @@ export const MessageBase = (_a) => {
                 React.createElement(Timestamp, { date: date }, timestamp)),
             React.createElement("div", { className: "pf-chatbot__message-response" },
                 React.createElement("div", { className: "pf-chatbot__message-and-actions" },
-                    isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(React.Fragment, null,
-                        beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
-                        error ? (React.createElement(ErrorMessage, Object.assign({}, error))) : (React.createElement(Markdown, { components: {
-                                p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
-                                code: (_a) => {
-                                    var { children } = _a, props = __rest(_a, ["children"]);
-                                    return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
-                                },
-                                h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
-                                h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
-                                h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
-                                h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
-                                h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
-                                h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
-                                blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
-                                ul: (props) => React.createElement(UnorderedListMessage, Object.assign({}, props)),
-                                ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
-                                li: (props) => React.createElement(ListItemMessage, Object.assign({}, props)),
-                                table: (props) => React.createElement(TableMessage, Object.assign({}, props, tableProps)),
-                                tbody: (props) => React.createElement(TbodyMessage, Object.assign({}, props)),
-                                thead: (props) => React.createElement(TheadMessage, Object.assign({}, props)),
-                                tr: (props) => React.createElement(TrMessage, Object.assign({}, props)),
-                                td: (props) => {
-                                    // Conflicts with Td type
-                                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                                    const { width } = props, rest = __rest(props, ["width"]);
-                                    return React.createElement(TdMessage, Object.assign({}, rest));
-                                },
-                                th: (props) => React.createElement(ThMessage, Object.assign({}, props)),
-                                img: (props) => React.createElement(ImageMessage, Object.assign({}, props)),
-                                a: (props) => (React.createElement(LinkMessage, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps), props.children))
-                            }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins }, content)),
-                        afterMainContent && React.createElement(React.Fragment, null, afterMainContent))),
+                    renderMessage(),
+                    afterMainContent && React.createElement(React.Fragment, null, afterMainContent),
                     !isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
                     quickStarts && quickStarts.quickStart && (React.createElement(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
                     !isLoading && actions && React.createElement(ResponseActions, { actions: actions }),

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

@@ -620,4 +620,50 @@ describe('Message', () => {
         expect(screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
         expect(screen.queryByText('Test')).toBeFalsy();
     });
+    it('should handle isEditable when there is message content', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, content: "Test" }));
+        expect(screen.getByRole('textbox')).toBeTruthy();
+        expect(screen.getByRole('textbox')).toHaveValue('Test');
+        expect(screen.getByRole('button', { name: /Update/i })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
+    });
+    it('should handle isEditable when there is no message content', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true }));
+        expect(screen.getByRole('textbox')).toBeTruthy();
+        expect(screen.getByRole('textbox')).toHaveValue('');
+        expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Edit prompt message...');
+        expect(screen.getByRole('button', { name: /Update/i })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
+    });
+    it('should be able to change edit placeholder', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, editPlaceholder: "I am a placeholder" }));
+        expect(screen.getByRole('textbox')).toBeTruthy();
+        expect(screen.getByRole('textbox')).toHaveValue('');
+        expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'I am a placeholder');
+    });
+    it('should be able to change updateWord', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, updateWord: "Submit" }));
+        expect(screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
+    });
+    it('should be able to change cancelWord', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, cancelWord: "Don't submit" }));
+        expect(screen.getByRole('button', { name: /Don't submit/i })).toBeTruthy();
+    });
+    it('should be able to add onEditUpdate', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditUpdate: spy }));
+        yield userEvent.click(screen.getByRole('button', { name: /Update/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to add onEditCancel', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditCancel: spy }));
+        yield userEvent.click(screen.getByRole('button', { name: /Cancel/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to add  editFormProps', () => {
+        const { container } = render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, editFormProps: { className: 'test' } }));
+        const form = container.querySelector('form');
+        expect(form).toHaveClass('test');
+    });
 });

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormProps } from '@patternfly/react-core';
+export interface MessageInputProps extends FormProps {
+    /** Placeholder for edit input */
+    editPlaceholder?: string;
+    /** Label for the English word "Update" used in edit mode. */
+    updateWord?: string;
+    /** Label for the English word "Cancel" used in edit mode. */
+    cancelWord?: string;
+    /** Callback function for when edit mode update button is clicked */
+    onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
+    /** Callback functionf or when edit cancel update button is clicked */
+    onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Message text */
+    content?: string;
+}
+declare const MessageInput: React.FunctionComponent<MessageInputProps>;
+export default MessageInput;

package/dist/esm/Message/MessageInput.js

@@ -0,0 +1,29 @@
+// ============================================================================
+// Chatbot Main - Message Input
+// ============================================================================
+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 React from 'react';
+import { ActionGroup, Button, Form, TextArea } from '@patternfly/react-core';
+const MessageInput = (_a) => {
+    var { editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, content } = _a, props = __rest(_a, ["editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "content"]);
+    const [messageText, setMessageText] = React.useState(content !== null && content !== void 0 ? content : '');
+    const onChange = (event, value) => {
+        setMessageText(value);
+    };
+    return (React.createElement(Form, Object.assign({}, props),
+        React.createElement(TextArea, { placeholder: editPlaceholder, value: messageText, onChange: onChange, "aria-label": editPlaceholder, autoResize: true }),
+        React.createElement(ActionGroup, { className: "pf-chatbot__message-edit-buttons" },
+            React.createElement(Button, { variant: "primary", onClick: (event) => onEditUpdate && onEditUpdate(event, messageText) }, updateWord),
+            React.createElement(Button, { variant: "secondary", onClick: onEditCancel }, cancelWord))));
+};
+export default MessageInput;

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

@@ -5,7 +5,7 @@ export interface SourcesCardProps extends CardProps {
     className?: string;
     /** Flag indicating if the pagination is disabled. */
     isDisabled?: boolean;
-    /** Label for the English word "of". */
+    /** @deprecated ofWord has been deprecated. Label for the English word "of." */
     ofWord?: string;
     /** Accessible label for the pagination component. */
     paginationAriaLabel?: string;
@@ -15,6 +15,7 @@ export interface SourcesCardProps extends CardProps {
         link: string;
         body?: React.ReactNode | string;
         isExternal?: boolean;
+        hasShowMore?: boolean;
     }[];
     /** Label for the English word "source" */
     sourceWord?: string;
@@ -30,6 +31,10 @@ export interface SourcesCardProps extends CardProps {
     onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
     /** Function called when page is changed. */
     onSetPage?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => void;
+    /** Label for English words "show more" */
+    showMoreWords?: string;
+    /** Label for English words "show less" */
+    showLessWords?: string;
 }
 declare const SourcesCard: React.FunctionComponent<SourcesCardProps>;
 export default SourcesCard;

package/dist/esm/SourcesCard/SourcesCard.js

@@ -14,11 +14,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 // ============================================================================
 import React from 'react';
 // Import PatternFly components
-import { Button, ButtonVariant, Card, CardBody, CardFooter, CardTitle, Icon, pluralize, Truncate } from '@patternfly/react-core';
+import { Button, ButtonVariant, Card, CardBody, CardFooter, CardTitle, ExpandableSection, ExpandableSectionVariant, Icon, pluralize, Truncate } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 const SourcesCard = (_a) => {
-    var { className, isDisabled, ofWord = 'of', paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage } = _a, props = __rest(_a, ["className", "isDisabled", "ofWord", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage"]);
+    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' } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords"]);
     const [page, setPage] = React.useState(1);
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    const onToggle = (_event, isExpanded) => {
+        setIsExpanded(isExpanded);
+    };
     const handleNewPage = (_evt, newPage) => {
         setPage(newPage);
         onSetPage && onSetPage(_evt, newPage);
@@ -34,7 +38,10 @@ const SourcesCard = (_a) => {
         React.createElement(Card, Object.assign({ className: "pf-chatbot__sources-card" }, props),
             React.createElement(CardTitle, { className: "pf-chatbot__sources-card-title" },
                 React.createElement(Button, { component: "a", variant: ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? React.createElement(ExternalLinkSquareAltIcon, null) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined }, renderTitle(sources[page - 1].title))),
-            sources[page - 1].body && (React.createElement(CardBody, { className: `pf-chatbot__sources-card-body ${sources.length === 1 && 'pf-chatbot__sources-card-no-footer'}` }, sources[page - 1].body)),
+            sources[page - 1].body && (React.createElement(CardBody, { className: `pf-chatbot__sources-card-body` }, sources[page - 1].hasShowMore ? (
+            // prevents extra VO announcements of button text - parent Message has aria-live
+            React.createElement("div", { "aria-live": "off" },
+                React.createElement(ExpandableSection, { variant: ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2 }, sources[page - 1].body))) : (React.createElement("div", { className: "pf-chatbot__sources-card-body-text" }, sources[page - 1].body)))),
             sources.length > 1 && (React.createElement(CardFooter, { className: "pf-chatbot__sources-card-footer-container" },
                 React.createElement("div", { className: "pf-chatbot__sources-card-footer" },
                     React.createElement("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel },
@@ -46,6 +53,10 @@ const SourcesCard = (_a) => {
                             React.createElement(Icon, { iconSize: "lg" },
                                 React.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 280 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
                                     React.createElement("path", { d: "M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" })))),
+                        React.createElement("span", { "aria-hidden": "true" },
+                            page,
+                            "/",
+                            sources.length),
                         React.createElement(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === sources.length, "aria-label": toNextPageAriaLabel, "data-action": "next", onClick: (event) => {
                                 const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
                                 onNextClick && onNextClick(event, newPage);
@@ -53,12 +64,6 @@ const SourcesCard = (_a) => {
                             } },
                             React.createElement(Icon, { isInline: true, iconSize: "lg" },
                                 React.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
-                                    React.createElement("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" }))))),
-                    React.createElement("span", { "aria-hidden": "true" },
-                        page,
-                        " ",
-                        ofWord,
-                        " ",
-                        sources.length)))))));
+                                    React.createElement("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

@@ -19,7 +19,7 @@ describe('SourcesCard', () => {
         expect(screen.getByText('Source 1')).toBeTruthy();
         // no buttons or navigation when there is only 1 source
         expect(screen.queryByRole('button')).toBeFalsy();
-        expect(screen.queryByText('1 of 1')).toBeFalsy();
+        expect(screen.queryByText('1/1')).toBeFalsy();
     });
     it('should render card correctly if one source with a title is passed in', () => {
         render(React.createElement(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '' }] }));
@@ -44,7 +44,7 @@ describe('SourcesCard', () => {
             ] }));
         expect(screen.getByText('2 sources')).toBeTruthy();
         expect(screen.getByText('How to make an apple pie')).toBeTruthy();
-        expect(screen.getByText('1 of 2')).toBeTruthy();
+        expect(screen.getByText('1/2')).toBeTruthy();
         screen.getByRole('button', { name: /Go to previous page/i });
         screen.getByRole('button', { name: /Go to next page/i });
     });
@@ -54,12 +54,12 @@ describe('SourcesCard', () => {
                 { title: 'How to make cookies', link: '' }
             ] }));
         expect(screen.getByText('How to make an apple pie')).toBeTruthy();
-        expect(screen.getByText('1 of 2')).toBeTruthy();
+        expect(screen.getByText('1/2')).toBeTruthy();
         expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
         yield userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
         expect(screen.queryByText('How to make an apple pie')).toBeFalsy();
         expect(screen.getByText('How to make cookies')).toBeTruthy();
-        expect(screen.getByText('2 of 2')).toBeTruthy();
+        expect(screen.getByText('2/2')).toBeTruthy();
         expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeEnabled();
         expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
     }));
@@ -79,13 +79,6 @@ describe('SourcesCard', () => {
         expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
         expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
     });
-    it('should change ofWord appropriately', () => {
-        render(React.createElement(SourcesCard, { sources: [
-                { title: 'How to make an apple pie', link: '' },
-                { title: 'How to make cookies', link: '' }
-            ], ofWord: 'de' }));
-        expect(screen.getByText('1 de 2')).toBeTruthy();
-    });
     it('should render navigation aria label appropriately', () => {
         render(React.createElement(SourcesCard, { sources: [
                 { title: 'How to make an apple pie', link: '' },
@@ -155,4 +148,25 @@ describe('SourcesCard', () => {
         yield userEvent.click(screen.getByRole('button', { name: /Go to previous page/i }));
         expect(spy).toHaveBeenCalledTimes(2);
     }));
+    it('should handle showMore appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(SourcesCard, { sources: [
+                {
+                    title: 'Getting started with Red Hat OpenShift',
+                    link: '#',
+                    body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
+                    hasShowMore: true
+                },
+                {
+                    title: 'Azure Red Hat OpenShift documentation',
+                    link: '#',
+                    body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...'
+                },
+                {
+                    title: 'OKD Documentation: Home',
+                    link: '#',
+                    body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon ...'
+                }
+            ] }));
+        expect(screen.getByRole('region')).toHaveAttribute('class', 'pf-v6-c-expandable-section__content');
+    }));
 });

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.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.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/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/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.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.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/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": "2.2.0-prerelease.44",
+  "version": "2.2.0-prerelease.46",
   "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/examples/Messages/BotMessage.tsx

@@ -276,7 +276,7 @@ _Italic text, formatted with single underscores_
           <Radio
             isChecked={variant === 'error'}
             onChange={() => setVariant('error')}
-            name="bot-message-error"
+            name="bot-message-type"
             label="Error"
             id="error"
           />

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

@@ -14,7 +14,7 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with sources"
+        content="This example has a body description that's within the recommended limit of 2 lines:"
         sources={{
           sources: [
             {
@@ -43,7 +43,36 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with very long sources"
+        content="This example has a body description that's longer than the recommended limit of 2 lines, with a link to load the rest of the description:"
+        sources={{
+          sources: [
+            {
+              title: 'Getting started with Red Hat OpenShift',
+              link: '#',
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud.',
+              hasShowMore: true
+            },
+            {
+              title: 'Azure Red Hat OpenShift documentation',
+              link: '#',
+              body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure.',
+              hasShowMore: true
+            },
+            {
+              title: 'OKD Documentation: Home',
+              link: '#',
+              body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon.',
+              hasShowMore: true
+            }
+          ],
+          onSetPage
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="This example has a truncated title:"
         sources={{
           sources: [
             {
@@ -66,7 +95,7 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with only 1 source"
+        content="This example only includes 1 source:"
         sources={{
           sources: [
             {
@@ -83,7 +112,7 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with sources that include a title and link"
+        content="This example has a title and no body description:"
         sources={{
           sources: [
             { title: 'Getting started with Red Hat OpenShift', link: '#', isExternal: true },
@@ -105,7 +134,7 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with link-only sources (not recommended)"
+        content="This example displays the source as a link, without a title (not recommended)"
         sources={{
           sources: [
             {

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

@@ -144,7 +144,7 @@ If you are using Retrieval-Augmented Generation, you may want to display sources
 
 If a source will open outside of the ChatBot window, add an external link icon via `isExternal`.
 
-The API for a source requires a link at minimum, but we strongly recommend providing a more descriptive title and body description so users have enough context. The title is limited to 1 line and the body is limited to 2 lines.
+The API for a source requires a link at minimum, but we strongly recommend providing a more descriptive title and body description so users have enough context. For the best clarity and readability, we strongly recommend limiting the title to 1 line and the body to 2 lines. If the body description is more than 2 lines, use the "long sources" or "very long sources" variant.
 
 ```js file="./MessageWithSources.tsx"