@patternfly/chatbot 2.2.1 → 6.3.0-prerelease.10

package/dist/esm/MessageBar/MicrophoneButton.js

@@ -18,7 +18,7 @@ import { Button, Tooltip, Icon } from '@patternfly/react-core';
 // Import FontAwesome icons
 import { MicrophoneIcon } from '@patternfly/react-icons/dist/esm/icons/microphone-icon';
 export const MicrophoneButton = (_a) => {
-    var { isListening, onIsListeningChange, onSpeechRecognition, className, tooltipProps, tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' }, language = 'en-US' } = _a, props = __rest(_a, ["isListening", "onIsListeningChange", "onSpeechRecognition", "className", "tooltipProps", "tooltipContent", "language"]);
+    var { isListening, onIsListeningChange, onSpeechRecognition, className, tooltipProps, tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' }, language = 'en-US', isCompact } = _a, props = __rest(_a, ["isListening", "onIsListeningChange", "onSpeechRecognition", "className", "tooltipProps", "tooltipContent", "language", "isCompact"]);
     // Microphone
     // --------------------------------------------------------------------------
     const [speechRecognition, setSpeechRecognition] = React.useState();
@@ -58,12 +58,12 @@ export const MicrophoneButton = (_a) => {
             };
             setSpeechRecognition(recognition);
         }
-    }, [onSpeechRecognition]);
+    }, [onSpeechRecognition, language, onIsListeningChange]);
     if (!speechRecognition) {
         return null;
     }
     return (React.createElement(Tooltip, Object.assign({ aria: "none", "aria-live": "polite", id: "pf-chatbot__tooltip--use-microphone", content: isListening ? tooltipContent.active : tooltipContent.inactive, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', 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, Object.assign({ variant: "plain", className: `pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Microphone button', onClick: isListening ? stopListening : startListening, icon: React.createElement(Icon, { iconSize: "xl", isInline: true },
-                React.createElement(MicrophoneIcon, null)) }, props))));
+        React.createElement(Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Microphone button', onClick: isListening ? stopListening : startListening, icon: React.createElement(Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
+                React.createElement(MicrophoneIcon, null)), size: isCompact ? 'sm' : undefined }, props))));
 };
 export default MicrophoneButton;

package/dist/esm/MessageBar/SendButton.d.ts

@@ -9,6 +9,7 @@ export interface SendButtonProps extends ButtonProps {
     tooltipProps?: Omit<TooltipProps, 'content'>;
     /** English text "Send" used in the tooltip */
     tooltipContent?: string;
+    isCompact?: boolean;
 }
 export declare const SendButton: React.FunctionComponent<SendButtonProps>;
 export default SendButton;

package/dist/esm/MessageBar/SendButton.js

@@ -17,11 +17,11 @@ import React from 'react';
 import { Button, Tooltip, Icon } from '@patternfly/react-core';
 import { PaperPlaneIcon } from '@patternfly/react-icons/dist/esm/icons/paper-plane-icon';
 export const SendButton = (_a) => {
-    var { className, onClick, tooltipProps, tooltipContent = 'Send' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
+    var { className, onClick, tooltipProps, tooltipContent = 'Send', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent", "isCompact"]);
     return (React.createElement(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--send", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', 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, 
         // prevents VO announcements of both aria label and tooltip
         aria: "none" }, tooltipProps),
-        React.createElement(Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--send ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Send button', onClick: onClick, icon: React.createElement(Icon, { iconSize: "xl", isInline: true },
-                React.createElement(PaperPlaneIcon, null)) }, props))));
+        React.createElement(Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Send button', onClick: onClick, icon: React.createElement(Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
+                React.createElement(PaperPlaneIcon, null)), size: isCompact ? 'sm' : undefined }, props))));
 };
 export default SendButton;

package/dist/esm/MessageBar/SendButton.test.js

@@ -46,4 +46,8 @@ describe('Send button', () => {
         yield userEvent.click(screen.getByRole('button', { name: 'Send button' }));
         expect(screen.getByRole('tooltip', { name: 'Send' })).toHaveAttribute('id', 'test');
     }));
+    it('should handle isCompact', () => {
+        renderSend({ 'data-testid': 'button', isCompact: true });
+        expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/esm/MessageBar/StopButton.d.ts

@@ -9,6 +9,7 @@ export interface StopButtonProps extends ButtonProps {
     tooltipProps?: Omit<TooltipProps, 'content'>;
     /** English text "Stop" used in the tooltip */
     tooltipContent?: string;
+    isCompact?: boolean;
 }
 export declare const StopButton: React.FunctionComponent<StopButtonProps>;
 export default StopButton;

package/dist/esm/MessageBar/StopButton.js

@@ -16,12 +16,12 @@ import React from 'react';
 // Import PatternFly components
 import { Button, Tooltip, Icon } from '@patternfly/react-core';
 export const StopButton = (_a) => {
-    var { className, onClick, tooltipProps, tooltipContent = 'Stop' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
+    var { className, onClick, tooltipProps, tooltipContent = 'Stop', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent", "isCompact"]);
     return (React.createElement(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--stop", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', 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, 
         // prevents VO announcements of both aria label and tooltip
         aria: "none" }, tooltipProps),
-        React.createElement(Button, Object.assign({ className: `pf-chatbot__button--stop ${className !== null && className !== void 0 ? className : ''}`, variant: "link", "aria-label": props['aria-label'] || 'Stop button', onClick: onClick, icon: React.createElement(Icon, { iconSize: "xl", isInline: true },
+        React.createElement(Button, Object.assign({ className: `pf-chatbot__button--stop ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, variant: "link", "aria-label": props['aria-label'] || 'Stop button', onClick: onClick, icon: React.createElement(Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
                 React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    React.createElement("path", { d: "M0.5 3C0.5 1.62109 1.62109 0.5 3 0.5H13C14.3789 0.5 15.5 1.62109 15.5 3V13C15.5 14.3789 14.3789 15.5 13 15.5H3C1.62109 15.5 0.5 14.3789 0.5 13V3Z", fill: "currentColor" }))) }, props))));
+                    React.createElement("path", { d: "M0.5 3C0.5 1.62109 1.62109 0.5 3 0.5H13C14.3789 0.5 15.5 1.62109 15.5 3V13C15.5 14.3789 14.3789 15.5 13 15.5H3C1.62109 15.5 0.5 14.3789 0.5 13V3Z", fill: "currentColor" }))), size: isCompact ? 'sm' : undefined }, props))));
 };
 export default StopButton;

package/dist/esm/MessageBar/StopButton.test.js

@@ -46,4 +46,8 @@ describe('Stop button', () => {
         yield userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
         expect(screen.getByRole('tooltip', { name: 'Stop' })).toHaveAttribute('id', 'test');
     }));
+    it('should handle isCompact', () => {
+        renderStop({ 'data-testid': 'button', isCompact: true });
+        expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
+    });
 });

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

@@ -12,6 +12,10 @@ export interface MessageBoxProps extends React.HTMLProps<HTMLDivElement> {
     innerRef?: React.Ref<HTMLDivElement>;
     /** Modifier that controls how content in MessageBox is positioned within the container */
     position?: 'top' | 'bottom';
+    /** Click handler for additional logic for when scroll to top jump button is clicked */
+    onScrollToTopClick?: () => void;
+    /** Click handler for additional logic for when scroll to bottom jump button is clicked */
+    onScrollToBottomClick?: () => void;
 }
 export declare const MessageBox: React.ForwardRefExoticComponent<Omit<MessageBoxProps, "ref"> & React.RefAttributes<any>>;
 export default MessageBox;

package/dist/esm/MessageBox/MessageBox.js

@@ -1,9 +1,21 @@
+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
 // ============================================================================
 import React from 'react';
 import JumpButton from './JumpButton';
-const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', children, innerRef, className, position = 'top' }) => {
+const MessageBoxBase = (_a) => {
+    var { announcement, ariaLabel = 'Scrollable message log', children, innerRef, className, position = 'top', onScrollToTopClick, onScrollToBottomClick } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "innerRef", "className", "position", "onScrollToTopClick", "onScrollToBottomClick"]);
     const [atTop, setAtTop] = React.useState(false);
     const [atBottom, setAtBottom] = React.useState(true);
     const [isOverflowing, setIsOverflowing] = React.useState(false);
@@ -23,26 +35,28 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
             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
         }
-    }, []);
+    }, [messageBoxRef]);
     const checkOverflow = React.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             const { scrollHeight, clientHeight } = element;
             setIsOverflowing(scrollHeight >= clientHeight);
         }
-    }, []);
+    }, [messageBoxRef]);
     const scrollToTop = React.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: 0, behavior: 'smooth' });
         }
-    }, []);
+        onScrollToTopClick && onScrollToTopClick();
+    }, [messageBoxRef]);
     const scrollToBottom = React.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
         }
-    }, []);
+        onScrollToBottomClick && onScrollToBottomClick();
+    }, [messageBoxRef]);
     // Detect scroll position
     React.useEffect(() => {
         const element = messageBoxRef.current;
@@ -56,10 +70,10 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
                 element.removeEventListener('scroll', handleScroll);
             };
         }
-    }, [checkOverflow, handleScroll]);
+    }, [checkOverflow, handleScroll, messageBoxRef]);
     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 },
+        React.createElement("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className !== null && className !== void 0 ? className : ''}`, ref: innerRef !== null && innerRef !== void 0 ? innerRef : messageBoxRef }, props),
             children,
             React.createElement("div", { className: "pf-chatbot__messagebox-announcement", "aria-live": "polite" }, announcement)),
         React.createElement(JumpButton, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: scrollToBottom })));

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

@@ -1,6 +1,16 @@
+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 { render, screen, waitFor } from '@testing-library/react';
 import { MessageBox } from './MessageBox';
+import userEvent from '@testing-library/user-event';
 describe('MessageBox', () => {
     it('should render Message box', () => {
         render(React.createElement(MessageBox, null,
@@ -14,4 +24,37 @@ describe('MessageBox', () => {
         expect(ref.current).not.toBeNull();
         expect(ref.current).toBeInstanceOf(HTMLDivElement);
     });
+    it('should call onScrollToBottomClick when scroll to top button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(MessageBox, { onScrollToBottomClick: spy },
+            React.createElement("div", null, "Test message content")));
+        // this forces button to show
+        const region = screen.getByRole('region');
+        Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(region, 'clientHeight', { configurable: true, value: 500 });
+        Object.defineProperty(region, 'scrollTop', { configurable: true, value: 0 });
+        region.dispatchEvent(new Event('scroll'));
+        yield waitFor(() => {
+            userEvent.click(screen.getByRole('button', { name: /Jump bottom button/i }));
+            expect(spy).toHaveBeenCalled();
+        });
+    }));
+    it('should call onScrollToTopClick when scroll to top button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(MessageBox, { onScrollToTopClick: spy },
+            React.createElement("div", null, "Test message content")));
+        // this forces button to show
+        const region = screen.getByRole('region');
+        Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(region, 'clientHeight', { configurable: true, value: 500 });
+        Object.defineProperty(region, 'scrollTop', {
+            configurable: true,
+            value: 500
+        });
+        region.dispatchEvent(new Event('scroll'));
+        yield waitFor(() => {
+            userEvent.click(screen.getByRole('button', { name: /Jump top button/i }));
+            expect(spy).toHaveBeenCalled();
+        });
+    }));
 });

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

@@ -17,6 +17,8 @@ export interface PreviewAttachmentProps {
     title?: string;
     /** Display mode for the Chatbot parent; this influences the styles applied */
     displayMode?: ChatbotDisplayMode;
+    /** Sets modal to compact styling. */
+    isCompact?: boolean;
 }
 export declare const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps>;
 export default PreviewAttachment;

package/dist/esm/PreviewAttachment/PreviewAttachment.js

@@ -4,7 +4,7 @@
 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 }) => {
+export const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOpen, onDismiss = undefined, onEdit, title = 'Preview attachment', displayMode = ChatbotDisplayMode.default, isCompact }) => {
     const handleEdit = (_event) => {
         handleModalToggle(_event);
         onEdit(_event);
@@ -13,6 +13,6 @@ export const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOp
         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 }));
+    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, isCompact: isCompact }));
 };
 export default PreviewAttachment;

package/dist/esm/Settings/SettingsForm.d.ts

@@ -8,6 +8,8 @@ export interface SettingsFormProps {
         label: string;
         field: React.ReactElement;
     }[];
+    /** Sets form to compact styling. */
+    isCompact?: boolean;
 }
 export declare const SettingsForm: React.FunctionComponent<SettingsFormProps>;
 export default SettingsForm;

package/dist/esm/Settings/SettingsForm.js

@@ -11,8 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 export const SettingsForm = (_a) => {
-    var { className, fields = [] } = _a, props = __rest(_a, ["className", "fields"]);
-    return (React.createElement("div", Object.assign({ className: `pf-chatbot__settings-form-container ${className}` }, props),
+    var { className, fields = [], isCompact } = _a, props = __rest(_a, ["className", "fields", "isCompact"]);
+    return (React.createElement("div", Object.assign({ className: `pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}` }, props),
         React.createElement("form", { className: "pf-chatbot__settings-form" }, fields.map((field) => (React.createElement("div", { className: "pf-chatbot__settings-form-row", key: field.label },
             React.createElement("label", { className: "pf-chatbot__settings-label", htmlFor: field.id }, field.label),
             field.field))))));

package/dist/esm/Settings/SettingsForm.test.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/dist/esm/Settings/SettingsForm.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button } from '@patternfly/react-core';
 import { render, screen } from '@testing-library/react';
 import { SettingsForm } from './SettingsForm';
+import '@testing-library/jest-dom';
 describe('SettingsForm', () => {
     it('should render settingsForm with custom classname', () => {
         const { container } = render(React.createElement(SettingsForm, { className: "custom-settings" }));
@@ -18,4 +19,15 @@ describe('SettingsForm', () => {
         render(React.createElement(SettingsForm, { fields: fields }));
         expect(screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
     });
+    it('should render settingsForm with isCompact', () => {
+        const fields = [
+            {
+                id: 'archived-chat',
+                label: 'Archive chat',
+                field: (React.createElement(Button, { id: "archived-chat", variant: "secondary" }, "Archive chat"))
+            }
+        ];
+        render(React.createElement(SettingsForm, { "data-testid": "settings-form", fields: fields, isCompact: true }));
+        expect(screen.getByTestId('settings-form')).toHaveClass('pf-m-compact');
+    });
 });

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;
@@ -14,6 +14,8 @@ export interface SourcesCardProps extends CardProps {
         title?: string;
         link: string;
         body?: React.ReactNode | string;
+        isExternal?: boolean;
+        hasShowMore?: boolean;
     }[];
     /** Label for the English word "source" */
     sourceWord?: string;
@@ -29,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,10 +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', isCompact } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact"]);
     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);
@@ -30,10 +35,13 @@ const SourcesCard = (_a) => {
     };
     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(Card, Object.assign({ isCompact: isCompact, 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)),
+                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[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 },
@@ -45,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);
@@ -52,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

@@ -13,17 +13,13 @@ 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();
+        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: '' }] }));
@@ -48,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 });
     });
@@ -58,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();
     }));
@@ -83,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: '' },
@@ -159,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/esm/TermsOfUse/TermsOfUse.d.ts

@@ -28,6 +28,8 @@ export interface TermsOfUseProps extends ModalProps {
     innerRef?: React.Ref<HTMLDivElement>;
     /** OuiaID applied to modal */
     ouiaId?: string;
+    /** Sets modal to compact styling. */
+    isCompact?: boolean;
 }
 export declare const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps>;
 declare const TermsOfUse: React.ForwardRefExoticComponent<Omit<TermsOfUseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/TermsOfUse/TermsOfUse.js

@@ -17,7 +17,7 @@ import { Button, Content, ModalBody, ModalFooter, ModalHeader } from '@patternfl
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal from '../ChatbotModal/ChatbotModal';
 export const TermsOfUseBase = (_a) => {
-    var { handleModalToggle, isModalOpen, onPrimaryAction, onSecondaryAction, primaryActionBtn = 'Accept', secondaryActionBtn = 'Decline', title = 'Terms of use', image, altText, displayMode = ChatbotDisplayMode.default, className, children, innerRef, ouiaId = 'TermsOfUse' } = _a, props = __rest(_a, ["handleModalToggle", "isModalOpen", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "image", "altText", "displayMode", "className", "children", "innerRef", "ouiaId"]);
+    var { handleModalToggle, isModalOpen, onPrimaryAction, onSecondaryAction, primaryActionBtn = 'Accept', secondaryActionBtn = 'Decline', title = 'Terms of use', image, altText, displayMode = ChatbotDisplayMode.default, className, children, innerRef, ouiaId = 'TermsOfUse', isCompact } = _a, props = __rest(_a, ["handleModalToggle", "isModalOpen", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "image", "altText", "displayMode", "className", "children", "innerRef", "ouiaId", "isCompact"]);
     const handlePrimaryAction = (_event) => {
         handleModalToggle(_event);
         onPrimaryAction && onPrimaryAction(_event);
@@ -25,13 +25,13 @@ export const TermsOfUseBase = (_a) => {
     const handleSecondaryAction = (_event) => {
         onSecondaryAction(_event);
     };
-    const modal = (React.createElement(ChatbotModal, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "terms-of-use-title", "aria-describedby": "terms-of-use-modal", className: `pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${className ? className : ''}`, displayMode: displayMode }, props),
+    const modal = (React.createElement(ChatbotModal, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "terms-of-use-title", "aria-describedby": "terms-of-use-modal", className: `pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`, displayMode: displayMode }, props),
         React.createElement("section", { className: `pf-chatbot__terms-of-use--section`, "aria-label": title, tabIndex: -1, ref: innerRef },
-            React.createElement(ModalHeader, null,
+            React.createElement(ModalHeader, { className: "pf-chatbot__terms-of-use--modal-header" },
                 React.createElement("div", { className: "pf-chatbot__terms-of-use--header" },
-                    image && altText && React.createElement("img", { src: image, className: "pf-chatbot__terms-of-use--image", alt: altText }),
+                    !isCompact && image && altText && (React.createElement("img", { src: image, className: "pf-chatbot__terms-of-use--image", alt: altText })),
                     React.createElement("h1", { className: "pf-chatbot__terms-of-use--title" }, title))),
-            React.createElement(ModalBody, null,
+            React.createElement(ModalBody, { className: "pf-chatbot__terms-of-use--modal-body" },
                 React.createElement(Content, null, children)),
             React.createElement(ModalFooter, { className: "pf-chatbot__terms-of-use--footer" },
                 React.createElement(Button, { isBlock: true, key: "terms-of-use-modal-primary", variant: "primary", onClick: handlePrimaryAction, form: "terms-of-use-form", size: "lg" }, primaryActionBtn),

package/dist/esm/tracking/console_tracking_provider.d.ts

@@ -1,10 +1,9 @@
-import { TrackingSpi } from './tracking_spi';
+import { InitProps, TrackingSpi } from './tracking_spi';
 import { TrackingApi, TrackingEventProperties } from './tracking_api';
 export declare class ConsoleTrackingProvider implements TrackingSpi, TrackingApi {
+    private verbose;
     trackPageView(url: string | undefined): void;
-    registerProvider(): void;
-    initialize(): void;
-    identify(userID: string): void;
+    initialize(props: InitProps): void;
+    identify(userID: string, userProperties?: TrackingEventProperties): void;
     trackSingleItem(item: string, properties?: TrackingEventProperties): void;
-    getKey(): string;
 }

package/dist/esm/tracking/console_tracking_provider.js

@@ -1,23 +1,30 @@
 export class ConsoleTrackingProvider {
+    constructor() {
+        this.verbose = false;
+    }
     trackPageView(url) {
-        // eslint-disable-next-line no-console
-        console.log('ConsoleProvider pageView', url);
+        if (this.verbose) {
+            // eslint-disable-next-line no-console
+            console.log('ConsoleProvider pageView ', url);
+        }
     }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    registerProvider() { }
-    initialize() {
-        // eslint-disable-next-line no-console
-        console.log('ConsoleProvider initialize');
+    initialize(props) {
+        this.verbose = props.verbose;
+        if (this.verbose) {
+            // eslint-disable-next-line no-console
+            console.log('ConsoleProvider initialize');
+        }
     }
-    identify(userID) {
-        // eslint-disable-next-line no-console
-        console.log('ConsoleProvider identify', userID);
+    identify(userID, userProperties = {}) {
+        if (this.verbose) {
+            // eslint-disable-next-line no-console
+            console.log('ConsoleProvider identify ', userID, userProperties);
+        }
     }
     trackSingleItem(item, properties) {
-        // eslint-disable-next-line no-console
-        console.log('ConsoleProvider: ' + item, properties);
-    }
-    getKey() {
-        return 'console';
+        if (this.verbose) {
+            // eslint-disable-next-line no-console
+            console.log('ConsoleProvider: ' + item, properties);
+        }
     }
 }

package/dist/esm/tracking/posthog_tracking_provider.d.ts

@@ -1,9 +1,9 @@
 import { TrackingApi, TrackingEventProperties } from './tracking_api';
 import { InitProps, TrackingSpi } from './tracking_spi';
 export declare class PosthogTrackingProvider implements TrackingSpi, TrackingApi {
-    getKey(): string;
+    private verbose;
     initialize(props: InitProps): void;
-    identify(userID: string): void;
+    identify(userID: string, userProperties?: TrackingEventProperties): void;
     trackPageView(url: string | undefined): void;
     trackSingleItem(item: string, properties?: TrackingEventProperties): void;
 }