@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.20

package/dist/cjs/ResponseActions/ResponseActions.test.js

@@ -12,8 +12,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 const ResponseActions_1 = __importDefault(require("./ResponseActions"));
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
@@ -34,7 +34,7 @@ const CUSTOM_ACTIONS = [
             onClick: jest.fn(),
             tooltipContent: 'Regenerate',
             clickedTooltipContent: 'Regenerated',
-            icon: react_1.default.createElement(react_icons_1.RedoIcon, null)
+            icon: (0, jsx_runtime_1.jsx)(react_icons_1.RedoIcon, {})
         },
         download: {
             ariaLabel: 'Download',
@@ -42,45 +42,52 @@ const CUSTOM_ACTIONS = [
             onClick: jest.fn(),
             tooltipContent: 'Download',
             clickedTooltipContent: 'Downloaded',
-            icon: react_1.default.createElement(react_icons_1.DownloadIcon, null)
+            icon: (0, jsx_runtime_1.jsx)(react_icons_1.DownloadIcon, {})
         },
         info: {
             ariaLabel: 'Info',
             onClick: jest.fn(),
             tooltipContent: 'Info',
-            icon: react_1.default.createElement(react_icons_1.InfoCircleIcon, null)
+            icon: (0, jsx_runtime_1.jsx)(react_icons_1.InfoCircleIcon, {})
         }
     }
 ];
+const ALL_ACTIONS_DATA_TEST = [
+    { type: 'positive', label: 'Good response', dataTestId: 'positive' },
+    { type: 'negative', label: 'Bad response', dataTestId: 'negative' },
+    { type: 'copy', label: 'Copy', dataTestId: 'copy' },
+    { type: 'share', label: 'Share', dataTestId: 'share' },
+    { type: 'listen', label: 'Listen', dataTestId: 'listen' }
+];
 describe('ResponseActions', () => {
     afterEach(() => {
         jest.clearAllMocks();
     });
     it('should handle click within group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
                 positive: { onClick: jest.fn() },
                 negative: { onClick: jest.fn() },
                 copy: { onClick: jest.fn() },
                 share: { onClick: jest.fn() },
                 listen: { onClick: jest.fn() }
             } }));
-        const goodBtn = react_2.screen.getByRole('button', { name: 'Good response' });
-        const badBtn = react_2.screen.getByRole('button', { name: 'Bad response' });
-        const copyBtn = react_2.screen.getByRole('button', { name: 'Copy' });
-        const shareBtn = react_2.screen.getByRole('button', { name: 'Share' });
-        const listenBtn = react_2.screen.getByRole('button', { name: 'Listen' });
+        const goodBtn = react_1.screen.getByRole('button', { name: 'Good response' });
+        const badBtn = react_1.screen.getByRole('button', { name: 'Bad response' });
+        const copyBtn = react_1.screen.getByRole('button', { name: 'Copy' });
+        const shareBtn = react_1.screen.getByRole('button', { name: 'Share' });
+        const listenBtn = react_1.screen.getByRole('button', { name: 'Listen' });
         const buttons = [goodBtn, badBtn, copyBtn, shareBtn, listenBtn];
         buttons.forEach((button) => {
             expect(button).toBeTruthy();
         });
         yield user_event_1.default.click(goodBtn);
-        expect(react_2.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(react_1.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
         let unclickedButtons = buttons.filter((button) => button !== goodBtn);
         unclickedButtons.forEach((button) => {
             expect(button).not.toHaveClass('pf-chatbot__button--response-action-clicked');
         });
         yield user_event_1.default.click(badBtn);
-        expect(react_2.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(react_1.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
         unclickedButtons = buttons.filter((button) => button !== badBtn);
         unclickedButtons.forEach((button) => {
             expect(button).not.toHaveClass('pf-chatbot__button--response-action-clicked');
@@ -88,52 +95,52 @@ describe('ResponseActions', () => {
     }));
     it('should handle click outside of group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         // using message just so we have something outside the group that's rendered
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { name: "Bot", role: "bot", avatar: "", content: "I updated your account with those settings. You're ready to set up your first dashboard!", actions: {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Message_1.default, { name: "Bot", role: "bot", avatar: "", content: "I updated your account with those settings. You're ready to set up your first dashboard!", actions: {
                 positive: {},
                 negative: {}
             } }));
-        const goodBtn = react_2.screen.getByRole('button', { name: 'Good response' });
-        const badBtn = react_2.screen.getByRole('button', { name: 'Bad response' });
+        const goodBtn = react_1.screen.getByRole('button', { name: 'Good response' });
+        const badBtn = react_1.screen.getByRole('button', { name: 'Bad response' });
         expect(goodBtn).toBeTruthy();
         expect(badBtn).toBeTruthy();
         yield user_event_1.default.click(goodBtn);
-        expect(react_2.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(react_1.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
         expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
         yield user_event_1.default.click(badBtn);
-        expect(react_2.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(react_1.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
         expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
-        yield user_event_1.default.click(react_2.screen.getByText("I updated your account with those settings. You're ready to set up your first dashboard!"));
+        yield user_event_1.default.click(react_1.screen.getByText("I updated your account with those settings. You're ready to set up your first dashboard!"));
         expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
         expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     }));
     it('should render buttons correctly', () => {
         ALL_ACTIONS.forEach(({ type, label }) => {
-            (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
-            expect(react_2.screen.getByRole('button', { name: label })).toBeTruthy();
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
+            expect(react_1.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();
-            (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: { [type]: { onClick: spy } } }));
-            yield user_event_1.default.click(react_2.screen.getByRole('button', { name: label }));
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: spy } } }));
+            yield user_event_1.default.click(react_1.screen.getByRole('button', { name: label }));
             expect(spy).toHaveBeenCalledTimes(1);
         }));
     }));
     it('should swap clicked and non-clicked aria labels on click', () => __awaiter(void 0, void 0, void 0, function* () {
         ALL_ACTIONS.forEach((_a) => __awaiter(void 0, [_a], void 0, function* ({ type, label, clickedLabel }) {
-            (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
-            expect(react_2.screen.getByRole('button', { name: label })).toBeTruthy();
-            yield user_event_1.default.click(react_2.screen.getByRole('button', { name: label }));
-            expect(react_2.screen.getByRole('button', { name: clickedLabel })).toBeTruthy();
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
+            expect(react_1.screen.getByRole('button', { name: label })).toBeTruthy();
+            yield user_event_1.default.click(react_1.screen.getByRole('button', { name: label }));
+            expect(react_1.screen.getByRole('button', { name: clickedLabel })).toBeTruthy();
         }));
     }));
     it('should swap clicked and non-clicked tooltips on click', () => __awaiter(void 0, void 0, void 0, function* () {
         ALL_ACTIONS.forEach((_a) => __awaiter(void 0, [_a], void 0, function* ({ type, label, clickedLabel }) {
-            (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
-            expect(react_2.screen.getByRole('button', { name: label })).toBeTruthy();
-            yield user_event_1.default.click(react_2.screen.getByRole('button', { name: label }));
-            expect(react_2.screen.getByRole('tooltip', { name: clickedLabel })).toBeTruthy();
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
+            expect(react_1.screen.getByRole('button', { name: label })).toBeTruthy();
+            yield user_event_1.default.click(react_1.screen.getByRole('button', { name: label }));
+            expect(react_1.screen.getByRole('tooltip', { name: clickedLabel })).toBeTruthy();
         }));
     }));
     it('should be able to change aria labels', () => {
@@ -145,35 +152,43 @@ describe('ResponseActions', () => {
             { type: 'listen', ariaLabel: 'Listen up' }
         ];
         actions.forEach(({ type, ariaLabel }) => {
-            (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn(), ariaLabel } } }));
-            expect(react_2.screen.getByRole('button', { name: ariaLabel })).toBeTruthy();
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn(), ariaLabel } } }));
+            expect(react_1.screen.getByRole('button', { name: ariaLabel })).toBeTruthy();
         });
     });
     it('should be able to disable buttons', () => {
         ALL_ACTIONS.forEach(({ type, label }) => {
-            (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn(), isDisabled: true } } }));
-            expect(react_2.screen.getByRole('button', { name: label })).toBeDisabled();
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn(), isDisabled: true } } }));
+            expect(react_1.screen.getByRole('button', { name: label })).toBeDisabled();
         });
     });
     it('should be able to add class to buttons', () => {
         ALL_ACTIONS.forEach(({ type, label }) => {
-            (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn(), className: 'test' } } }));
-            expect(react_2.screen.getByRole('button', { name: label })).toHaveClass('test');
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn(), className: 'test' } } }));
+            expect(react_1.screen.getByRole('button', { name: label })).toHaveClass('test');
+        });
+    });
+    it('should be able to add custom attributes to buttons', () => {
+        ALL_ACTIONS_DATA_TEST.forEach(({ type, dataTestId }) => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn(), 'data-testid': dataTestId } } }));
+            expect(react_1.screen.getByTestId(dataTestId)).toBeTruthy();
         });
     });
     it('should be able to add custom actions', () => {
         CUSTOM_ACTIONS.forEach((action) => {
             const key = Object.keys(action)[0];
-            (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
                     [key]: {
                         tooltipContent: action[key].tooltipContent,
                         onClick: action[key].onClick,
                         // doing this just because it's easier to test without a regex for the button name
                         ariaLabel: action[key].ariaLabel.toLowerCase(),
-                        icon: action[key].icon
+                        icon: action[key].icon,
+                        'data-testid': action[key]
                     }
                 } }));
-            expect(react_2.screen.getByRole('button', { name: key })).toBeTruthy();
+            expect(react_1.screen.getByRole('button', { name: key })).toBeTruthy();
+            expect(react_1.screen.getByTestId(action[key])).toBeTruthy();
         });
     });
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 export interface SettingsFormProps {
     /** Class applied to form container */
     className?: string;
@@ -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 declare const SettingsForm: FunctionComponent<SettingsFormProps>;
 export default SettingsForm;

package/dist/cjs/Settings/SettingsForm.js

@@ -10,18 +10,12 @@ 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 });
 exports.SettingsForm = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const SettingsForm = (_a) => {
-    var { className, fields = [] } = _a, props = __rest(_a, ["className", "fields"]);
-    return (react_1.default.createElement("div", Object.assign({ className: `pf-chatbot__settings-form-container ${className}` }, props),
-        react_1.default.createElement("form", { className: "pf-chatbot__settings-form" }, fields.map((field) => (react_1.default.createElement("div", { className: "pf-chatbot__settings-form-row", key: field.label },
-            react_1.default.createElement("label", { className: "pf-chatbot__settings-label", htmlFor: field.id }, field.label),
-            field.field))))));
+    var { className, fields = [], isCompact } = _a, props = __rest(_a, ["className", "fields", "isCompact"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}` }, props, { children: (0, jsx_runtime_1.jsx)("form", { className: "pf-chatbot__settings-form", children: fields.map((field) => ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__settings-form-row", children: [(0, jsx_runtime_1.jsx)("label", { className: "pf-chatbot__settings-label", htmlFor: field.id, children: field.label }), field.field] }, field.label))) }) })));
 };
 exports.SettingsForm = SettingsForm;
 exports.default = exports.SettingsForm;

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

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

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

@@ -1,15 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
-const react_2 = require("@testing-library/react");
+const react_1 = require("@testing-library/react");
 const SettingsForm_1 = require("./SettingsForm");
+require("@testing-library/jest-dom");
 describe('SettingsForm', () => {
     it('should render settingsForm with custom classname', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(SettingsForm_1.SettingsForm, { className: "custom-settings" }));
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(SettingsForm_1.SettingsForm, { className: "custom-settings" }));
         expect(container.querySelector('.custom-settings')).toBeTruthy();
     });
     it('should render settingsForm with fields', () => {
@@ -17,10 +15,21 @@ describe('SettingsForm', () => {
             {
                 id: 'archived-chat',
                 label: 'Archive chat',
-                field: (react_1.default.createElement(react_core_1.Button, { id: "archived-chat", variant: "secondary" }, "Archive chat"))
+                field: ((0, jsx_runtime_1.jsx)(react_core_1.Button, { id: "archived-chat", variant: "secondary", children: "Archive chat" }))
             }
         ];
-        (0, react_2.render)(react_1.default.createElement(SettingsForm_1.SettingsForm, { fields: fields }));
-        expect(react_2.screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SettingsForm_1.SettingsForm, { fields: fields }));
+        expect(react_1.screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
+    });
+    it('should render settingsForm with isCompact', () => {
+        const fields = [
+            {
+                id: 'archived-chat',
+                label: 'Archive chat',
+                field: ((0, jsx_runtime_1.jsx)(react_core_1.Button, { id: "archived-chat", variant: "secondary", children: "Archive chat" }))
+            }
+        ];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SettingsForm_1.SettingsForm, { "data-testid": "settings-form", fields: fields, isCompact: true }));
+        expect(react_1.screen.getByTestId('settings-form')).toHaveClass('pf-m-compact');
     });
 });

package/dist/cjs/SourceDetailsMenuItem/SourceDetailsMenuItem.d.ts

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

package/dist/cjs/SourceDetailsMenuItem/SourceDetailsMenuItem.js

@@ -10,22 +10,13 @@ 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 });
 exports.SourceDetailsMenuItem = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
 const SourceDetailsMenuItem = (_a) => {
     var { icon, name, type } = _a, props = __rest(_a, ["icon", "name", "type"]);
-    return (react_1.default.createElement(react_core_1.Flex, Object.assign({ className: "pf-chatbot__source-details", gap: { default: 'gapSm' } }, props),
-        react_1.default.createElement(react_core_1.Flex, { justifyContent: { default: 'justifyContentCenter' }, alignItems: { default: 'alignItemsCenter' }, alignSelf: { default: 'alignSelfCenter' } },
-            react_1.default.createElement(react_core_1.Icon, { className: "pf-chatbot__source-details-icon" }, icon)),
-        react_1.default.createElement(react_core_1.Stack, { className: "pf-chatbot__source-details-text" },
-            react_1.default.createElement(react_core_1.StackItem, null,
-                react_1.default.createElement("span", { className: "pf-chatbot__source-details-heading" }, name)),
-            type && react_1.default.createElement(react_core_1.StackItem, { className: "pf-chatbot__source-details-subhead" }, type))));
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, Object.assign({ className: "pf-chatbot__source-details", gap: { default: 'gapSm' } }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Flex, { justifyContent: { default: 'justifyContentCenter' }, alignItems: { default: 'alignItemsCenter' }, alignSelf: { default: 'alignSelfCenter' }, children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { className: "pf-chatbot__source-details-icon", children: icon }) }), (0, jsx_runtime_1.jsxs)(react_core_1.Stack, { className: "pf-chatbot__source-details-text", children: [(0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__source-details-heading", children: name }) }), type && (0, jsx_runtime_1.jsx)(react_core_1.StackItem, { className: "pf-chatbot__source-details-subhead", children: type })] })] })));
 };
 exports.SourceDetailsMenuItem = SourceDetailsMenuItem;
 exports.default = exports.SourceDetailsMenuItem;

package/dist/cjs/SourcesCard/SourcesCard.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { CardProps } from '@patternfly/react-core';
 export interface SourcesCardProps extends CardProps {
     /** Additional classes for the pagination navigation container. */
@@ -36,5 +36,5 @@ export interface SourcesCardProps extends CardProps {
     /** Label for English words "show less" */
     showLessWords?: string;
 }
-declare const SourcesCard: React.FunctionComponent<SourcesCardProps>;
+declare const SourcesCard: FunctionComponent<SourcesCardProps>;
 export default SourcesCard;

package/dist/cjs/SourcesCard/SourcesCard.js

@@ -10,21 +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 });
-// ============================================================================
-// Chatbot Main - Messages - Sources Card
-// ============================================================================
-const react_1 = __importDefault(require("react"));
+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 SourcesCard = (_a) => {
-    var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less' } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords"]);
-    const [page, setPage] = react_1.default.useState(1);
-    const [isExpanded, setIsExpanded] = react_1.default.useState(false);
+    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] = (0, react_1.useState)(1);
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
     const onToggle = (_event, isExpanded) => {
         setIsExpanded(isExpanded);
     };
@@ -34,41 +29,20 @@ const SourcesCard = (_a) => {
     };
     const renderTitle = (title) => {
         if (title) {
-            return react_1.default.createElement(react_core_1.Truncate, { content: title });
+            return (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: title });
         }
         return `Source ${page}`;
     };
-    return (react_1.default.createElement("div", { className: "pf-chatbot__source" },
-        react_1.default.createElement("span", null, (0, react_core_1.pluralize)(sources.length, sourceWord, sourceWordPlural)),
-        react_1.default.createElement(react_core_1.Card, Object.assign({ className: "pf-chatbot__sources-card" }, props),
-            react_1.default.createElement(react_core_1.CardTitle, { className: "pf-chatbot__sources-card-title" },
-                react_1.default.createElement(react_core_1.Button, { component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? react_1.default.createElement(react_icons_1.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_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body` }, sources[page - 1].hasShowMore ? (
-            // prevents extra VO announcements of button text - parent Message has aria-live
-            react_1.default.createElement("div", { "aria-live": "off" },
-                react_1.default.createElement(react_core_1.ExpandableSection, { variant: react_core_1.ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2 }, sources[page - 1].body))) : (react_1.default.createElement("div", { className: "pf-chatbot__sources-card-body-text" }, sources[page - 1].body)))),
-            sources.length > 1 && (react_1.default.createElement(react_core_1.CardFooter, { className: "pf-chatbot__sources-card-footer-container" },
-                react_1.default.createElement("div", { className: "pf-chatbot__sources-card-footer" },
-                    react_1.default.createElement("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel },
-                        react_1.default.createElement(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 },
-                            react_1.default.createElement(react_core_1.Icon, { iconSize: "lg" },
-                                react_1.default.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 280 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
-                                    react_1.default.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_1.default.createElement("span", { "aria-hidden": "true" },
-                            page,
-                            "/",
-                            sources.length),
-                        react_1.default.createElement(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);
-                            } },
-                            react_1.default.createElement(react_core_1.Icon, { isInline: true, iconSize: "lg" },
-                                react_1.default.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
-                                    react_1.default.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" })))))))))));
+    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, { className: "pf-chatbot__sources-card-title", children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { 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, children: renderTitle(sources[page - 1].title) }) }), sources[page - 1].body && ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body`, 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.length > 1 && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { className: "pf-chatbot__sources-card-footer-container", 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 = SourcesCard;