@patternfly/chatbot 6.4.0-prerelease.23 → 6.4.0-prerelease.25

package/dist/cjs/Message/Message.d.ts

@@ -158,6 +158,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     remarkGfmProps?: Options;
     /** Props for a tool call message */
     toolCall?: ToolCallProps;
+    /** Whether user messages default to stripping out images in markdown */
+    hasNoImagesInUserMessages?: boolean;
 }
 export declare const MessageBase: FunctionComponent<MessageProps>;
 declare const Message: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/Message/Message.js

@@ -55,7 +55,7 @@ const DeepThinking_1 = __importDefault(require("../DeepThinking"));
 const SuperscriptMessage_1 = __importDefault(require("./SuperscriptMessage/SuperscriptMessage"));
 const ToolCall_1 = __importDefault(require("../ToolCall"));
 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 = [], additionalRemarkPlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse, deepThinking, remarkGfmProps, toolCall } = _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", "additionalRemarkPlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse", "deepThinking", "remarkGfmProps", "toolCall"]);
+    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 = [], additionalRemarkPlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse, deepThinking, remarkGfmProps, toolCall, hasNoImagesInUserMessages = true } = _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", "additionalRemarkPlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse", "deepThinking", "remarkGfmProps", "toolCall", "hasNoImagesInUserMessages"]);
     const [messageText, setMessageText] = (0, react_1.useState)(content);
     (0, react_1.useEffect)(() => {
         setMessageText(content);
@@ -77,6 +77,10 @@ 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 disallowedElements = role === 'user' && hasNoImagesInUserMessages ? ['img'] : [];
+    if (reactMarkdownProps && reactMarkdownProps.disallowedElements) {
+        disallowedElements.push(...reactMarkdownProps.disallowedElements);
+    }
     const handleMarkdown = () => {
         if (isMarkdownDisabled) {
             return ((0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props, { children: messageText })));
@@ -198,7 +202,7 @@ const MessageBase = (_a) => {
                 }
             }, remarkPlugins: [[remark_gfm_1.default, Object.assign({}, remarkGfmProps)], ...additionalRemarkPlugins], rehypePlugins: rehypePlugins }, reactMarkdownProps, { remarkRehypeOptions: Object.assign({ 
                 // removes sr-only class from footnote labels applied by default
-                footnoteLabelProperties: { className: [''] } }, reactMarkdownProps === null || reactMarkdownProps === void 0 ? void 0 : reactMarkdownProps.remarkRehypeOptions), children: messageText })));
+                footnoteLabelProperties: { className: [''] } }, reactMarkdownProps === null || reactMarkdownProps === void 0 ? void 0 : reactMarkdownProps.remarkRehypeOptions), disallowedElements: disallowedElements, children: messageText })));
     };
     const renderMessage = () => {
         if (isLoading) {

package/dist/cjs/Message/Message.test.js

@@ -705,12 +705,16 @@ describe('Message', () => {
         expect(react_2.screen.getByTestId('after-main-content')).toContainHTML('<strong>Bold after content</strong>');
         expect(react_2.screen.getByTestId('end-main-content')).toContainHTML('<strong>Bold end content</strong>');
     });
-    it('should handle image correctly', () => {
+    it('should handle image correctly for user', () => {
         (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: IMAGE }));
+        expect(react_2.screen.queryByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeFalsy();
+    });
+    it('should handle image correctly for bot', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: IMAGE }));
         expect(react_2.screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
     });
     it('inline image parent should have class pf-chatbot__message-and-actions', () => {
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: INLINE_IMAGE }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: INLINE_IMAGE }));
         expect(react_2.screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
         expect(react_2.screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i }).parentElement).toHaveClass('pf-chatbot__message-and-actions');
     });
@@ -804,6 +808,17 @@ describe('Message', () => {
         // code block isn't rendering
         expect(react_2.screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
     });
+    it('should disable images and additional tags for user messages', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: `${IMAGE} ${CODE_MESSAGE}`, reactMarkdownProps: { disallowedElements: ['code'] } }));
+        expect(react_2.screen.getByText('Here is some YAML code:')).toBeTruthy();
+        // code block isn't rendering
+        expect(react_2.screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
+        expect(react_2.screen.queryByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeFalsy();
+    });
+    it('can override image tag removal default for user messages', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: IMAGE, hasNoImagesInUserMessages: false }));
+        expect(react_2.screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+    });
     it('should render deep thinking section correctly', () => {
         (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "", deepThinking: DEEP_THINKING }));
         expect(react_2.screen.getByRole('button', { name: /Show thinking/i })).toBeTruthy();

package/dist/cjs/SourcesCard/SourcesCard.js

@@ -10,40 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
-const react_icons_1 = require("@patternfly/react-icons");
+const SourcesCardBase_1 = __importDefault(require("../SourcesCardBase"));
 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, 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] = (0, react_1.useState)(1);
-    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
-    const onToggle = (_event, isExpanded) => {
-        setIsExpanded(isExpanded);
-    };
-    const handleNewPage = (_evt, newPage) => {
-        setPage(newPage);
-        onSetPage && onSetPage(_evt, newPage);
-    };
-    const renderTitle = (title, truncateProps) => {
-        if (title) {
-            return (0, jsx_runtime_1.jsx)(react_core_1.Truncate, Object.assign({ content: title }, truncateProps));
-        }
-        return `Source ${page}`;
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__source", children: [(0, jsx_runtime_1.jsx)("span", { children: (0, react_core_1.pluralize)(sources.length, sourceWord, sourceWordPlural) }), (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, Object.assign({ className: "pf-chatbot__sources-card-title" }, cardTitleProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__sources-card-title-container", children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? (0, jsx_runtime_1.jsx)(react_icons_1.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 && ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__sources-card-subtitle", children: sources[page - 1].subtitle }))] }) })), sources[page - 1].body && ((0, jsx_runtime_1.jsx)(react_core_1.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
-                        (0, jsx_runtime_1.jsx)("div", { "aria-live": "off", children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, { variant: react_core_1.ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) }))), sources[page - 1].footer ? ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer" }, cardFooterProps, { children: sources[page - 1].footer }))) : (sources.length > 1 && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer-container" }, cardFooterProps, { children: (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-footer", children: (0, jsx_runtime_1.jsxs)("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: react_core_1.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);
-                                        }, "aria-label": toPreviousPageAriaLabel, children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: "lg", children: (0, jsx_runtime_1.jsx)("svg", { className: "pf-v6-svg", viewBox: "0 0 280 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: (0, jsx_runtime_1.jsx)("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" }) }) }) }), (0, jsx_runtime_1.jsxs)("span", { "aria-hidden": "true", children: [page, "/", sources.length] }), (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: react_core_1.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);
-                                            handleNewPage(event, newPage);
-                                        }, children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { isInline: true, iconSize: "lg", children: (0, jsx_runtime_1.jsx)("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: (0, jsx_runtime_1.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" }) }) }) })] }) }) }))))] }))] }));
+    var { sources, sourceWord = 'source', sourceWordPlural = 'sources' } = _a, props = __rest(_a, ["sources", "sourceWord", "sourceWordPlural"]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__source", children: [(0, jsx_runtime_1.jsx)("span", { children: (0, react_core_1.pluralize)(sources.length, sourceWord, sourceWordPlural) }), (0, jsx_runtime_1.jsx)(SourcesCardBase_1.default, Object.assign({ sources: sources }, props))] }));
 };
 exports.default = SourcesCard;

package/dist/cjs/SourcesCard/SourcesCard.test.js

@@ -1,48 +1,19 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@testing-library/react");
-const user_event_1 = __importDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 const SourcesCard_1 = __importDefault(require("./SourcesCard"));
 describe('SourcesCard', () => {
-    it('should render card correctly if one source with only a link is passed in', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ link: '' }] }));
-        expect(react_1.screen.getByText('1 source')).toBeTruthy();
-        expect(react_1.screen.getByText('Source 1')).toBeTruthy();
-        // no buttons or navigation when there is only 1 source
-        expect(react_1.screen.queryByRole('button')).toBeFalsy();
-        expect(react_1.screen.queryByText('1/1')).toBeFalsy();
-    });
-    it('should render card correctly if one source with a title is passed in', () => {
+    it('should render sources correctly if one source is passed in', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '' }] }));
         expect(react_1.screen.getByText('1 source')).toBeTruthy();
         expect(react_1.screen.getByText('How to make an apple pie')).toBeTruthy();
     });
-    it('should render card correctly if one source with a body is passed in', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ link: '', body: 'To make an apple pie, you must first...' }] }));
-        expect(react_1.screen.getByText('1 source')).toBeTruthy();
-        expect(react_1.screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
-    });
-    it('should render card correctly if one source with a title and body is passed in', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }] }));
-        expect(react_1.screen.getByText('1 source')).toBeTruthy();
-        expect(react_1.screen.getByText('How to make an apple pie')).toBeTruthy();
-        expect(react_1.screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
-    });
-    it('should render multiple cards correctly', () => {
+    it('should render sources correctly when there is more than one', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
                 { title: 'How to make an apple pie', link: '' },
                 { title: 'How to make cookies', link: '' }
@@ -53,184 +24,4 @@ describe('SourcesCard', () => {
         react_1.screen.getByRole('button', { name: /Go to previous page/i });
         react_1.screen.getByRole('button', { name: /Go to next page/i });
     });
-    it('should navigate between cards correctly', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
-                { title: 'How to make an apple pie', link: '' },
-                { title: 'How to make cookies', link: '' }
-            ] }));
-        expect(react_1.screen.getByText('How to make an apple pie')).toBeTruthy();
-        expect(react_1.screen.getByText('1/2')).toBeTruthy();
-        expect(react_1.screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
-        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Go to next page/i }));
-        expect(react_1.screen.queryByText('How to make an apple pie')).toBeFalsy();
-        expect(react_1.screen.getByText('How to make cookies')).toBeTruthy();
-        expect(react_1.screen.getByText('2/2')).toBeTruthy();
-        expect(react_1.screen.getByRole('button', { name: /Go to previous page/i })).toBeEnabled();
-        expect(react_1.screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
-    }));
-    it('should apply className appropriately', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
-                { title: 'How to make an apple pie', link: '' },
-                { title: 'How to make cookies', link: '' }
-            ], className: "test" }));
-        const element = react_1.screen.getByRole('navigation');
-        expect(element).toHaveClass('test');
-    });
-    it('should disable pagination appropriately', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
-                { title: 'How to make an apple pie', link: '' },
-                { title: 'How to make cookies', link: '' }
-            ], isDisabled: true }));
-        expect(react_1.screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
-        expect(react_1.screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
-    });
-    it('should render navigation aria label appropriately', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
-                { title: 'How to make an apple pie', link: '' },
-                { title: 'How to make cookies', link: '' }
-            ] }));
-        expect(react_1.screen.getByRole('navigation', { name: /Pagination/i })).toBeTruthy();
-    });
-    it('should change paginationAriaLabel appropriately', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
-                { title: 'How to make an apple pie', link: '' },
-                { title: 'How to make cookies', link: '' }
-            ], paginationAriaLabel: "Navegaci\u00F3n" }));
-        expect(react_1.screen.getByRole('navigation', { name: /Navegación/i })).toBeTruthy();
-    });
-    it('should change sourceWord appropriately', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '' }], sourceWord: 'fuente' }));
-        expect(react_1.screen.getByText('1 fuente')).toBeTruthy();
-    });
-    it('should sourceWordPlural appropriately', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
-                { title: 'How to make an apple pie', link: '' },
-                { title: 'How to make cookies', link: '' }
-            ], sourceWordPlural: 'fuentes' }));
-        expect(react_1.screen.getByText('2 fuentes')).toBeTruthy();
-    });
-    it('should change toNextPageAriaLabel appropriately', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
-                { title: 'How to make an apple pie', link: '' },
-                { title: 'How to make cookies', link: '' }
-            ], toNextPageAriaLabel: "Pase a la siguiente p\u00E1gina" }));
-        expect(react_1.screen.getByRole('button', { name: /Pase a la siguiente página/i })).toBeTruthy();
-    });
-    it('should change toPreviousPageAriaLabel appropriately', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
-                { title: 'How to make an apple pie', link: '' },
-                { title: 'How to make cookies', link: '' }
-            ], toPreviousPageAriaLabel: "Presione para regresar a la p\u00E1gina anterior" }));
-        expect(react_1.screen.getByRole('button', { name: /Presione para regresar a la página anterior/i })).toBeTruthy();
-    });
-    it('should call onNextClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
-        const spy = jest.fn();
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
-                { title: 'How to make an apple pie', link: '' },
-                { title: 'How to make cookies', link: '' }
-            ], onNextClick: spy }));
-        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Go to next page/i }));
-        expect(spy).toHaveBeenCalled();
-    }));
-    it('should call onPreviousClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
-        const spy = jest.fn();
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
-                { title: 'How to make an apple pie', link: '' },
-                { title: 'How to make cookies', link: '' }
-            ], onPreviousClick: spy }));
-        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Go to next page/i }));
-        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Go to previous page/i }));
-        expect(spy).toHaveBeenCalled();
-    }));
-    it('should call onSetPage appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
-        const spy = jest.fn();
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
-                { title: 'How to make an apple pie', link: '' },
-                { title: 'How to make cookies', link: '' }
-            ], onSetPage: spy }));
-        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Go to next page/i }));
-        expect(spy).toHaveBeenCalledTimes(1);
-        yield user_event_1.default.click(react_1.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* () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { 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(react_1.screen.getByRole('region')).toHaveAttribute('class', 'pf-v6-c-expandable-section__content');
-    }));
-    it('should call onClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
-        const spy = jest.fn();
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', onClick: spy }] }));
-        yield user_event_1.default.click(react_1.screen.getByRole('link', { name: /How to make an apple pie/i }));
-        expect(spy).toHaveBeenCalled();
-    }));
-    it('should apply titleProps appropriately', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', titleProps: { className: 'test' } }] }));
-        expect(react_1.screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
-    });
-    it('should apply cardTitleProps appropriately', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { cardTitleProps: { 'data-testid': 'card-title', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '' }] }));
-        expect(react_1.screen.getByTestId('card-title')).toHaveClass('test');
-    });
-    it('should apply cardBodyProps appropriately', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { 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(react_1.screen.getByTestId('card-body')).toHaveClass('test');
-    });
-    it('should apply cardFooterProps appropriately', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { cardFooterProps: { 'data-testid': 'card-footer', className: 'test' }, sources: [
-                { title: 'How to make an apple pie', link: '' },
-                { title: 'How to make cookies', link: '' }
-            ] }));
-        expect(react_1.screen.getByTestId('card-footer')).toHaveClass('test');
-    });
-    it('should apply truncateProps appropriately', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
-                {
-                    title: 'How to make an apple pie',
-                    link: '',
-                    truncateProps: { 'data-testid': 'card-truncate', className: 'test' }
-                }
-            ] }));
-        expect(react_1.screen.getByTestId('card-truncate')).toHaveClass('test');
-    });
-    it('should apply custom footer appropriately when there is one source', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "I am a custom footer" }) }] }));
-        expect(react_1.screen.getByText('I am a custom footer'));
-        expect(react_1.screen.queryByText('1/1')).toBeFalsy();
-    });
-    it('should apply custom footer appropriately when are multiple sources', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
-                { title: 'How to make an apple pie', link: '', footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "I am a custom footer" }) },
-                { title: 'How to bake bread', link: '' }
-            ] }));
-        expect(react_1.screen.getByText('I am a custom footer'));
-        // does not show navigation bar
-        expect(react_1.screen.queryByText('1/2')).toBeFalsy();
-    });
-    it('should apply footer props to custom footer appropriately', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { cardFooterProps: { 'data-testid': 'card-footer', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '', footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "I am a custom footer" }) }] }));
-        expect(react_1.screen.getByText('I am a custom footer'));
-        expect(react_1.screen.getByTestId('card-footer')).toHaveClass('test');
-    });
-    it('should apply subtitle appropriately', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', subtitle: 'You must first create the universe' }] }));
-        expect(react_1.screen.getByText('How to make an apple pie'));
-        expect(react_1.screen.getByText('You must first create the universe'));
-    });
 });

package/dist/cjs/SourcesCardBase/SourcesCardBase.d.ts

@@ -0,0 +1,57 @@
+import type { FunctionComponent } from 'react';
+import { ButtonProps, CardBodyProps, CardFooterProps, CardProps, CardTitleProps, TruncateProps } from '@patternfly/react-core';
+export interface SourcesCardBaseProps extends CardProps {
+    /** Additional classes for the pagination navigation container. */
+    className?: string;
+    /** Flag indicating if the pagination is disabled. */
+    isDisabled?: boolean;
+    /** @deprecated ofWord has been deprecated. Label for the English word "of." */
+    ofWord?: string;
+    /** Accessible label for the pagination component. */
+    paginationAriaLabel?: string;
+    /** Content rendered inside the paginated card */
+    sources: {
+        /** Title of sources card */
+        title?: string;
+        /** Subtitle of sources card */
+        subtitle?: string;
+        /** Link to source */
+        link: string;
+        /** Body of sources card */
+        body?: React.ReactNode | string;
+        /** Whether link is external */
+        isExternal?: boolean;
+        /** Whether sources card is expandable */
+        hasShowMore?: boolean;
+        /** onClick event applied to the title of the Sources card */
+        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;
+    }[];
+    /** Accessible label for the button which moves to the next page. */
+    toNextPageAriaLabel?: string;
+    /** Accessible label for the button which moves to the previous page. */
+    toPreviousPageAriaLabel?: string;
+    /** Function called when user clicks to navigate to next page. */
+    onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+    /** Function called when user clicks to navigate to previous page. */
+    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;
+    /** 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 SourcesCardBase: FunctionComponent<SourcesCardBaseProps>;
+export default SourcesCardBase;

package/dist/cjs/SourcesCardBase/SourcesCardBase.js

@@ -0,0 +1,49 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// Import PatternFly components
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+const SourcesCardBase = (_a) => {
+    var _b;
+    var { className, isDisabled, paginationAriaLabel = 'Pagination', 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", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact", "cardTitleProps", "cardBodyProps", "cardFooterProps"]);
+    const [page, setPage] = (0, react_1.useState)(1);
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const onToggle = (_event, isExpanded) => {
+        setIsExpanded(isExpanded);
+    };
+    const handleNewPage = (_evt, newPage) => {
+        setPage(newPage);
+        onSetPage && onSetPage(_evt, newPage);
+    };
+    const renderTitle = (title, truncateProps) => {
+        if (title) {
+            return (0, jsx_runtime_1.jsx)(react_core_1.Truncate, Object.assign({ content: title }, truncateProps));
+        }
+        return `Source ${page}`;
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-base", children: (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, Object.assign({ className: "pf-chatbot__sources-card-title" }, cardTitleProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__sources-card-title-container", children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? (0, jsx_runtime_1.jsx)(react_icons_1.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 && ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__sources-card-subtitle", children: sources[page - 1].subtitle }))] }) })), sources[page - 1].body && ((0, jsx_runtime_1.jsx)(react_core_1.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
+                    (0, jsx_runtime_1.jsx)("div", { "aria-live": "off", children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, { variant: react_core_1.ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) }))), sources[page - 1].footer ? ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer" }, cardFooterProps, { children: sources[page - 1].footer }))) : (sources.length > 1 && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer-container" }, cardFooterProps, { children: (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-footer", children: (0, jsx_runtime_1.jsxs)("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: react_core_1.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);
+                                    }, "aria-label": toPreviousPageAriaLabel, children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: "lg", children: (0, jsx_runtime_1.jsx)("svg", { className: "pf-v6-svg", viewBox: "0 0 280 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: (0, jsx_runtime_1.jsx)("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" }) }) }) }), (0, jsx_runtime_1.jsxs)("span", { "aria-hidden": "true", children: [page, "/", sources.length] }), (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: react_core_1.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);
+                                        handleNewPage(event, newPage);
+                                    }, children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { isInline: true, iconSize: "lg", children: (0, jsx_runtime_1.jsx)("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: (0, jsx_runtime_1.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" }) }) }) })] }) }) }))))] })) }));
+};
+exports.default = SourcesCardBase;

package/dist/cjs/SourcesCardBase/SourcesCardBase.test.d.ts

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