@patternfly/chatbot 2.1.0-prerelease.17

package/dist/esm/MessageBox/MessageBox.js

@@ -0,0 +1,68 @@
+// ============================================================================
+// Chatbot Main - Messages
+// ============================================================================
+import React from 'react';
+import JumpButton from './JumpButton';
+const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', children, innerRef, className, position = 'top' }) => {
+    const [atTop, setAtTop] = React.useState(false);
+    const [atBottom, setAtBottom] = React.useState(true);
+    const [isOverflowing, setIsOverflowing] = React.useState(false);
+    const defaultRef = React.useRef(null);
+    let messageBoxRef;
+    if (innerRef) {
+        messageBoxRef = innerRef;
+    }
+    else {
+        messageBoxRef = defaultRef;
+    }
+    // Configure handlers
+    const handleScroll = React.useCallback(() => {
+        const element = messageBoxRef.current;
+        if (element) {
+            const { scrollTop, scrollHeight, clientHeight } = element;
+            setAtTop(scrollTop === 0);
+            setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
+        }
+    }, []);
+    const checkOverflow = React.useCallback(() => {
+        const element = messageBoxRef.current;
+        if (element) {
+            const { scrollHeight, clientHeight } = element;
+            setIsOverflowing(scrollHeight >= clientHeight);
+        }
+    }, []);
+    const scrollToTop = React.useCallback(() => {
+        const element = messageBoxRef.current;
+        if (element) {
+            element.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+    }, []);
+    const scrollToBottom = React.useCallback(() => {
+        const element = messageBoxRef.current;
+        if (element) {
+            element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
+        }
+    }, []);
+    // Detect scroll position
+    React.useEffect(() => {
+        const element = messageBoxRef.current;
+        if (element) {
+            // Listen for scroll events
+            element.addEventListener('scroll', handleScroll);
+            // Check initial position and overflow
+            handleScroll();
+            checkOverflow();
+            return () => {
+                element.removeEventListener('scroll', handleScroll);
+            };
+        }
+    }, [checkOverflow, handleScroll]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(JumpButton, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop }),
+        React.createElement("div", { role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className !== null && className !== void 0 ? className : ''}`, ref: innerRef !== null && innerRef !== void 0 ? innerRef : messageBoxRef },
+            children,
+            React.createElement("div", { className: "pf-chatbot__messagebox-announcement", "aria-live": "polite" }, announcement)),
+        React.createElement(JumpButton, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: scrollToBottom })));
+};
+export const MessageBox = React.forwardRef((props, ref) => (React.createElement(MessageBoxBase, Object.assign({ innerRef: ref }, props))));
+export default MessageBox;

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

@@ -0,0 +1,3 @@
+export { default } from './MessageBox';
+export * from './MessageBox';
+export * from './JumpButton';

package/dist/esm/MessageBox/index.js

@@ -0,0 +1,3 @@
+export { default } from './MessageBox';
+export * from './MessageBox';
+export * from './JumpButton';

package/dist/esm/PreviewAttachment/PreviewAttachment.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ChatbotDisplayMode } from '../Chatbot';
+export interface PreviewAttachmentProps {
+    /** Text shown in code editor */
+    code: string;
+    /** Filename, including extension, of file shown in modal */
+    fileName: string;
+    /** Function called when edit button is clicked */
+    onEdit: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Function called when dismiss button is clicked */
+    onDismiss?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Function called when modal is toggled */
+    handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Whether modal is open */
+    isModalOpen: boolean;
+    /** Title of modal */
+    title?: string;
+    /** Display mode for the Chatbot parent; this influences the styles applied */
+    displayMode?: ChatbotDisplayMode;
+}
+export declare const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps>;
+export default PreviewAttachment;

package/dist/esm/PreviewAttachment/PreviewAttachment.js

@@ -0,0 +1,18 @@
+// ============================================================================
+// Preview Attachment - Chatbot Code Snippet Viewer
+// ============================================================================
+import React from 'react';
+import CodeModal from '../CodeModal';
+import { ChatbotDisplayMode } from '../Chatbot';
+export const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOpen, onDismiss = undefined, onEdit, title = 'Preview attachment', displayMode = ChatbotDisplayMode.default }) => {
+    const handleEdit = (_event) => {
+        handleModalToggle(_event);
+        onEdit(_event);
+    };
+    const handleDismiss = (_event) => {
+        handleModalToggle(_event);
+        onDismiss && onDismiss(_event);
+    };
+    return (React.createElement(CodeModal, { codeEditorControlClassName: "pf-chatbot__code-modal--controls", code: code, fileName: fileName, handleModalToggle: handleModalToggle, isCopyEnabled: true, isLineNumbersVisible: false, isModalOpen: isModalOpen, onPrimaryAction: handleEdit, onSecondaryAction: handleDismiss, primaryActionBtn: "Edit", secondaryActionBtn: "Dismiss", title: title, isReadOnly: true, displayMode: displayMode }));
+};
+export default PreviewAttachment;

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

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

package/dist/esm/PreviewAttachment/index.js

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

package/dist/esm/ResponseActions/ResponseActionButton.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TooltipProps } from '@patternfly/react-core';
+export interface ResponseActionButtonProps {
+    /** Aria-label for the button. Defaults to the value of the tooltipContent if none provided */
+    ariaLabel?: string;
+    /** Icon for the button */
+    icon: React.ReactNode;
+    /** On-click handler for the button */
+    onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
+    /** Class name for the button */
+    className?: string;
+    /** Props to control if the attach button should be disabled */
+    isDisabled?: boolean;
+    /** Content shown in the tooltip */
+    tooltipContent?: string;
+    /** Props to control the PF Tooltip component */
+    tooltipProps?: TooltipProps;
+}
+export declare const ResponseActionButton: React.FunctionComponent<ResponseActionButtonProps>;
+export default ResponseActionButton;

package/dist/esm/ResponseActions/ResponseActionButton.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Button, Icon, Tooltip } from '@patternfly/react-core';
+export const ResponseActionButton = ({ ariaLabel, className, icon, isDisabled, onClick, tooltipContent, tooltipProps }) => (React.createElement(Tooltip, Object.assign({ id: `pf-chatbot__tooltip-response-action-${tooltipContent}`, content: tooltipContent, position: "bottom", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0 }, tooltipProps),
+    React.createElement(Button, { variant: "plain", className: `pf-chatbot__button--response-action ${className !== null && className !== void 0 ? className : ''}`, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : tooltipContent, icon: React.createElement(Icon, { isInline: true, size: "lg" }, icon), isDisabled: isDisabled, onClick: onClick, size: "sm" })));
+export default ResponseActionButton;

package/dist/esm/ResponseActions/ResponseActions.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { TooltipProps } from '@patternfly/react-core';
+export interface ActionProps {
+    /** Aria-label for the button */
+    ariaLabel?: string;
+    /** On-click handler for the button */
+    onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
+    /** Class name for the button */
+    className?: string;
+    /** Props to control if the attach button should be disabled */
+    isDisabled?: boolean;
+    /** Content shown in the tooltip */
+    tooltipContent?: string;
+    /** Props to control the PF Tooltip component */
+    tooltipProps?: TooltipProps;
+    /** Icon for custom response action */
+    icon?: React.ReactNode;
+}
+export interface ResponseActionProps {
+    /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
+    actions: Record<string, ActionProps | undefined> & {
+        positive?: ActionProps;
+        negative?: ActionProps;
+        copy?: ActionProps;
+        share?: ActionProps;
+        listen?: ActionProps;
+    };
+}
+export declare const ResponseActions: React.FunctionComponent<ResponseActionProps>;
+export default ResponseActions;

package/dist/esm/ResponseActions/ResponseActions.js

@@ -0,0 +1,29 @@
+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 { ExternalLinkAltIcon, VolumeUpIcon, OutlinedThumbsUpIcon, OutlinedThumbsDownIcon, OutlinedCopyIcon } from '@patternfly/react-icons';
+import ResponseActionButton from './ResponseActionButton';
+export const ResponseActions = ({ actions }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { positive, negative, copy, share, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "share", "listen"]);
+    return (React.createElement("div", { className: "pf-chatbot__response-actions" },
+        positive && (React.createElement(ResponseActionButton, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', onClick: positive.onClick, className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_b = positive.tooltipContent) !== null && _b !== void 0 ? _b : 'Good response', tooltipProps: positive.tooltipProps, icon: React.createElement(OutlinedThumbsUpIcon, null) })),
+        negative && (React.createElement(ResponseActionButton, { ariaLabel: (_c = negative.ariaLabel) !== null && _c !== void 0 ? _c : 'Bad response', onClick: negative.onClick, className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_d = negative.tooltipContent) !== null && _d !== void 0 ? _d : 'Bad response', tooltipProps: negative.tooltipProps, icon: React.createElement(OutlinedThumbsDownIcon, null) })),
+        copy && (React.createElement(ResponseActionButton, { ariaLabel: (_e = copy.ariaLabel) !== null && _e !== void 0 ? _e : 'Copy', onClick: copy.onClick, className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_f = copy.tooltipContent) !== null && _f !== void 0 ? _f : 'Copy', tooltipProps: copy.tooltipProps, icon: React.createElement(OutlinedCopyIcon, null) })),
+        share && (React.createElement(ResponseActionButton, { ariaLabel: (_g = share.ariaLabel) !== null && _g !== void 0 ? _g : 'Share', onClick: share.onClick, className: share.className, isDisabled: share.isDisabled, tooltipContent: (_h = share.tooltipContent) !== null && _h !== void 0 ? _h : 'Share', tooltipProps: share.tooltipProps, icon: React.createElement(ExternalLinkAltIcon, null) })),
+        listen && (React.createElement(ResponseActionButton, { ariaLabel: (_j = listen.ariaLabel) !== null && _j !== void 0 ? _j : 'Listen', onClick: listen.onClick, className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_k = listen.tooltipContent) !== null && _k !== void 0 ? _k : 'Listen', tooltipProps: listen.tooltipProps, icon: React.createElement(VolumeUpIcon, null) })),
+        Object.keys(additionalActions).map((action) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            return (React.createElement(ResponseActionButton, { key: action, ariaLabel: (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.ariaLabel, onClick: (_b = additionalActions[action]) === null || _b === void 0 ? void 0 : _b.onClick, className: (_c = additionalActions[action]) === null || _c === void 0 ? void 0 : _c.className, isDisabled: (_d = additionalActions[action]) === null || _d === void 0 ? void 0 : _d.isDisabled, tooltipContent: (_e = additionalActions[action]) === null || _e === void 0 ? void 0 : _e.tooltipContent, tooltipProps: (_f = additionalActions[action]) === null || _f === void 0 ? void 0 : _f.tooltipProps, icon: (_g = additionalActions[action]) === null || _g === void 0 ? void 0 : _g.icon }));
+        })));
+};
+export default ResponseActions;

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

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

package/dist/esm/ResponseActions/ResponseActions.test.js

@@ -0,0 +1,62 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ResponseActions from './ResponseActions';
+import userEvent from '@testing-library/user-event';
+const ALL_ACTIONS = [
+    { type: 'positive', label: 'Good response' },
+    { type: 'negative', label: 'Bad response' },
+    { type: 'copy', label: 'Copy' },
+    { type: 'share', label: 'Share' },
+    { type: 'listen', label: 'Listen' }
+];
+describe('ResponseActions', () => {
+    it('should render buttons correctly', () => {
+        ALL_ACTIONS.forEach(({ type, label }) => {
+            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn() } } }));
+            expect(screen.getByRole('button', { name: label })).toBeTruthy();
+        });
+    });
+    it('should be able to call onClick correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        ALL_ACTIONS.forEach((_a) => __awaiter(void 0, [_a], void 0, function* ({ type, label }) {
+            const spy = jest.fn();
+            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: spy } } }));
+            yield userEvent.click(screen.getByRole('button', { name: label }));
+            expect(spy).toHaveBeenCalledTimes(1);
+        }));
+    }));
+    it('should be able to change aria labels', () => {
+        const actions = [
+            { type: 'positive', ariaLabel: 'Thumbs up' },
+            { type: 'negative', ariaLabel: 'Thumbs down' },
+            { type: 'copy', ariaLabel: 'Copy the message' },
+            { type: 'share', ariaLabel: 'Share it with friends' },
+            { type: 'listen', ariaLabel: 'Listen up' }
+        ];
+        actions.forEach(({ type, ariaLabel }) => {
+            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn(), ariaLabel } } }));
+            expect(screen.getByRole('button', { name: ariaLabel })).toBeTruthy();
+        });
+    });
+    it('should be able to disable buttons', () => {
+        ALL_ACTIONS.forEach(({ type, label }) => {
+            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn(), isDisabled: true } } }));
+            expect(screen.getByRole('button', { name: label })).toBeDisabled();
+        });
+    });
+    it('should be able to add class to buttons', () => {
+        ALL_ACTIONS.forEach(({ type, label }) => {
+            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn(), className: 'test' } } }));
+            expect(screen.getByRole('button', { name: label })).toHaveClass('test');
+        });
+    });
+});

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

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

package/dist/esm/ResponseActions/index.js

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

package/dist/esm/SourceDetailsMenuItem/SourceDetailsMenuItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface SourceDetailsMenuItemProps extends React.HTMLProps<HTMLDivElement> {
+    /** Icon */
+    icon: React.ReactNode;
+    /** Name of source */
+    name: string;
+    /** Description of source */
+    type?: string;
+}
+export declare const SourceDetailsMenuItem: React.FunctionComponent<SourceDetailsMenuItemProps>;
+export default SourceDetailsMenuItem;

package/dist/esm/SourceDetailsMenuItem/SourceDetailsMenuItem.js

@@ -0,0 +1,24 @@
+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 { Icon, Flex, Stack, StackItem } from '@patternfly/react-core';
+export const SourceDetailsMenuItem = (_a) => {
+    var { icon, name, type } = _a, props = __rest(_a, ["icon", "name", "type"]);
+    return (React.createElement(Flex, Object.assign({ className: "pf-chatbot__source-details", gap: { default: 'gapSm' } }, props),
+        React.createElement(Flex, { justifyContent: { default: 'justifyContentCenter' }, alignItems: { default: 'alignItemsCenter' }, alignSelf: { default: 'alignSelfCenter' } },
+            React.createElement(Icon, { className: "pf-chatbot__source-details-icon" }, icon)),
+        React.createElement(Stack, { className: "pf-chatbot__source-details-text" },
+            React.createElement(StackItem, null,
+                React.createElement("span", { className: "pf-chatbot__source-details-heading" }, name)),
+            type && React.createElement(StackItem, { className: "pf-chatbot__source-details-subhead" }, type))));
+};
+export default SourceDetailsMenuItem;

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

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

package/dist/esm/SourceDetailsMenuItem/index.js

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

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { CardProps } from '@patternfly/react-core';
+export interface SourcesCardProps extends CardProps {
+    /** Additional classes for the pagination navigation container. */
+    className?: string;
+    /** Flag indicating if the pagination is disabled. */
+    isDisabled?: boolean;
+    /** Label for the English word "of". */
+    ofWord?: string;
+    /** Accessible label for the pagination component. */
+    paginationAriaLabel?: string;
+    /** Content rendered inside the paginated card */
+    sources: {
+        title?: string;
+        link: string;
+        body?: React.ReactNode | string;
+    }[];
+    /** Label for the English word "source" */
+    sourceWord?: string;
+    /** Plural for sourceWord */
+    sourceWordPlural?: string;
+    /** 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;
+}
+declare const SourcesCard: React.FunctionComponent<SourcesCardProps>;
+export default SourcesCard;

package/dist/esm/SourcesCard/SourcesCard.js

@@ -0,0 +1,63 @@
+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;
+};
+// ============================================================================
+// Chatbot Main - Messages - Sources Card
+// ============================================================================
+import React from 'react';
+// Import PatternFly components
+import { Button, ButtonVariant, Card, CardBody, CardFooter, CardTitle, Icon, pluralize, Truncate } from '@patternfly/react-core';
+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"]);
+    const [page, setPage] = React.useState(1);
+    const handleNewPage = (_evt, newPage) => {
+        setPage(newPage);
+        onSetPage && onSetPage(_evt, newPage);
+    };
+    const renderTitle = (title) => {
+        if (title) {
+            return React.createElement(Truncate, { content: title });
+        }
+        return `Source ${page}`;
+    };
+    return (React.createElement("div", { className: "pf-chatbot__source" },
+        React.createElement("span", null, pluralize(sources.length, sourceWord, sourceWordPlural)),
+        React.createElement(Card, Object.assign({ className: "pf-chatbot__sources-card" }, props),
+            React.createElement(CardTitle, { className: "pf-chatbot__sources-card-title" },
+                React.createElement("a", { href: sources[page - 1].link }, 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.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 },
+                        React.createElement(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
+                                const newPage = page >= 1 ? page - 1 : 1;
+                                onPreviousClick && onPreviousClick(event, newPage);
+                                handleNewPage(event, newPage);
+                            }, "aria-label": toPreviousPageAriaLabel },
+                            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(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);
+                                handleNewPage(event, newPage);
+                            } },
+                            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)))))));
+};
+export default SourcesCard;

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

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

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

@@ -0,0 +1,162 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import SourcesCard from './SourcesCard';
+describe('SourcesCard', () => {
+    it('should render card', () => {
+        const { container } = render(React.createElement(SourcesCard, { sources: [{ link: '' }] }));
+        expect(container).toMatchSnapshot();
+    });
+    it('should render card correctly if one source with only a link is passed in', () => {
+        render(React.createElement(SourcesCard, { sources: [{ link: '' }] }));
+        expect(screen.getByText('1 source')).toBeTruthy();
+        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();
+    });
+    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: '' }] }));
+        expect(screen.getByText('1 source')).toBeTruthy();
+        expect(screen.getByText('How to make an apple pie')).toBeTruthy();
+    });
+    it('should render card correctly if one source with a body is passed in', () => {
+        render(React.createElement(SourcesCard, { sources: [{ link: '', body: 'To make an apple pie, you must first...' }] }));
+        expect(screen.getByText('1 source')).toBeTruthy();
+        expect(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', () => {
+        render(React.createElement(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }] }));
+        expect(screen.getByText('1 source')).toBeTruthy();
+        expect(screen.getByText('How to make an apple pie')).toBeTruthy();
+        expect(screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
+    });
+    it('should render multiple cards correctly', () => {
+        render(React.createElement(SourcesCard, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ] }));
+        expect(screen.getByText('2 sources')).toBeTruthy();
+        expect(screen.getByText('How to make an apple pie')).toBeTruthy();
+        expect(screen.getByText('1 of 2')).toBeTruthy();
+        screen.getByRole('button', { name: /Go to previous page/i });
+        screen.getByRole('button', { name: /Go to next page/i });
+    });
+    it('should navigate between cards correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(SourcesCard, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { 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.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.getByRole('button', { name: /Go to previous page/i })).toBeEnabled();
+        expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
+    }));
+    it('should apply className appropriately', () => {
+        render(React.createElement(SourcesCard, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], className: "test" }));
+        const element = screen.getByRole('navigation');
+        expect(element).toHaveClass('test');
+    });
+    it('should disable pagination appropriately', () => {
+        render(React.createElement(SourcesCard, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], isDisabled: true }));
+        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: '' },
+                { title: 'How to make cookies', link: '' }
+            ] }));
+        expect(screen.getByRole('navigation', { name: /Pagination/i })).toBeTruthy();
+    });
+    it('should change paginationAriaLabel appropriately', () => {
+        render(React.createElement(SourcesCard, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], paginationAriaLabel: "Navegaci\u00F3n" }));
+        expect(screen.getByRole('navigation', { name: /Navegación/i })).toBeTruthy();
+    });
+    it('should change sourceWord appropriately', () => {
+        render(React.createElement(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '' }], sourceWord: 'fuente' }));
+        expect(screen.getByText('1 fuente')).toBeTruthy();
+    });
+    it('should sourceWordPlural appropriately', () => {
+        render(React.createElement(SourcesCard, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], sourceWordPlural: 'fuentes' }));
+        expect(screen.getByText('2 fuentes')).toBeTruthy();
+    });
+    it('should change toNextPageAriaLabel appropriately', () => {
+        render(React.createElement(SourcesCard, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], toNextPageAriaLabel: "Pase a la siguiente p\u00E1gina" }));
+        expect(screen.getByRole('button', { name: /Pase a la siguiente página/i })).toBeTruthy();
+    });
+    it('should change toPreviousPageAriaLabel appropriately', () => {
+        render(React.createElement(SourcesCard, { 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(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();
+        render(React.createElement(SourcesCard, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], onNextClick: spy }));
+        yield userEvent.click(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();
+        render(React.createElement(SourcesCard, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], onPreviousClick: spy }));
+        yield userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
+        yield userEvent.click(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();
+        render(React.createElement(SourcesCard, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], onSetPage: spy }));
+        yield userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+        yield userEvent.click(screen.getByRole('button', { name: /Go to previous page/i }));
+        expect(spy).toHaveBeenCalledTimes(2);
+    }));
+});

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

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

package/dist/esm/SourcesCard/index.js

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