@patternfly/chatbot 6.5.0-prerelease.3 → 6.5.0-prerelease.30

package/dist/cjs/ToolResponse/ToolResponse.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolResponse = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -7,12 +10,55 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // ============================================================================
 const react_core_1 = require("@patternfly/react-core");
 const react_1 = require("react");
-const ToolResponse = ({ body, cardProps, expandableSectionProps, subheading, cardBody, cardTitle, cardBodyProps, toggleContent, toolResponseCardBodyProps, toolResponseCardDividerProps, toolResponseCardProps, toolResponseCardTitleProps }) => {
-    const [isExpanded, setIsExpanded] = (0, react_1.useState)(true);
+const MarkdownContent_1 = __importDefault(require("../MarkdownContent"));
+const ToolResponse = ({ body, cardProps, expandableSectionProps, subheading, cardBody, cardTitle, cardBodyProps, toggleContent, isDefaultExpanded = true, toolResponseCardBodyProps, toolResponseCardDividerProps, toolResponseCardProps, toolResponseCardTitleProps, isToggleContentMarkdown, isSubheadingMarkdown, isBodyMarkdown, isCardBodyMarkdown, isCardTitleMarkdown, markdownContentProps, shouldRetainStyles = false }) => {
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(isDefaultExpanded);
     const onToggle = (_event, isExpanded) => {
         setIsExpanded(isExpanded);
     };
-    return ((0, jsx_runtime_1.jsx)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response" }, cardProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({}, cardBodyProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ toggleContent: toggleContent, onToggle: onToggle, isExpanded: isExpanded, isIndented: true, className: "pf-chatbot__tool-response-expandable-section" }, expandableSectionProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__tool-response-section", children: [subheading && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__tool-response-subheading", children: (0, jsx_runtime_1.jsx)("span", { children: subheading }) })), body && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__tool-response-body", children: body }), (cardTitle || cardBody) && ((0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response-card" }, toolResponseCardProps, { children: [cardTitle && (0, jsx_runtime_1.jsx)(react_core_1.CardTitle, Object.assign({}, toolResponseCardTitleProps, { children: cardTitle })), cardTitle && cardBody && (0, jsx_runtime_1.jsx)(react_core_1.Divider, Object.assign({}, toolResponseCardDividerProps)), cardBody && (0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({}, toolResponseCardBodyProps, { children: cardBody }))] })))] }) })) })) })));
+    const renderToggleContent = () => {
+        if (isToggleContentMarkdown && typeof toggleContent === 'string') {
+            return ((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: toggleContent }, markdownContentProps)));
+        }
+        return toggleContent;
+    };
+    const renderSubheading = () => {
+        if (!subheading) {
+            return null;
+        }
+        if (isSubheadingMarkdown) {
+            return (0, jsx_runtime_1.jsx)(MarkdownContent_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: subheading }, markdownContentProps));
+        }
+        return subheading;
+    };
+    const renderBody = () => {
+        if (!body) {
+            return null;
+        }
+        if (isBodyMarkdown && typeof body === 'string') {
+            return (0, jsx_runtime_1.jsx)(MarkdownContent_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: body }, markdownContentProps));
+        }
+        return body;
+    };
+    const renderCardTitle = () => {
+        if (!cardTitle) {
+            return null;
+        }
+        if (isCardTitleMarkdown && typeof cardTitle === 'string') {
+            return (0, jsx_runtime_1.jsx)(MarkdownContent_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: cardTitle }, markdownContentProps));
+        }
+        return cardTitle;
+    };
+    const renderCardBody = () => {
+        if (!cardBody) {
+            return null;
+        }
+        if (isCardBodyMarkdown && typeof cardBody === 'string') {
+            return (0, jsx_runtime_1.jsx)(MarkdownContent_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: cardBody }, markdownContentProps));
+        }
+        return cardBody;
+    };
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response" }, cardProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({}, cardBodyProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ toggleContent: renderToggleContent(), onToggle: onToggle, isExpanded: isExpanded, isIndented: true, className: "pf-chatbot__tool-response-expandable-section" }, expandableSectionProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__tool-response-section", children: [subheading && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__tool-response-subheading", children: (0, jsx_runtime_1.jsx)("span", { children: renderSubheading() }) })), body && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__tool-response-body", children: renderBody() }), (cardTitle || cardBody) && ((0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response-card" }, toolResponseCardProps, { children: [cardTitle && (0, jsx_runtime_1.jsx)(react_core_1.CardTitle, Object.assign({}, toolResponseCardTitleProps, { children: renderCardTitle() })), cardTitle && cardBody && (0, jsx_runtime_1.jsx)(react_core_1.Divider, Object.assign({}, toolResponseCardDividerProps)), cardBody && (0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({}, toolResponseCardBodyProps, { children: renderCardBody() }))] })))] }) })) })) })));
 };
 exports.ToolResponse = ToolResponse;
 exports.default = exports.ToolResponse;

package/dist/cjs/ToolResponse/ToolResponse.test.js

@@ -1,10 +1,20 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 const ToolResponse_1 = __importDefault(require("./ToolResponse"));
 describe('ToolResponse', () => {
@@ -81,4 +91,94 @@ describe('ToolResponse', () => {
         const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { cardBody: undefined })));
         expect(container.querySelector('.pf-v6-c-divider')).toBeFalsy();
     });
+    it('Renders expanded by default', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps)));
+        expect(react_1.screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+        expect(react_1.screen.getByText(defaultProps.cardTitle)).toBeVisible();
+        expect(react_1.screen.getByText(defaultProps.cardBody)).toBeVisible();
+    });
+    it('Renders collapsed when isDefaultExpanded is false', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({ isDefaultExpanded: false }, defaultProps)));
+        expect(react_1.screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'false');
+        expect(react_1.screen.getByText(defaultProps.cardTitle)).not.toBeVisible();
+        expect(react_1.screen.getByText(defaultProps.cardBody)).not.toBeVisible();
+    });
+    it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { isDefaultExpanded: false, expandableSectionProps: { isExpanded: true } })));
+        expect(react_1.screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+        expect(react_1.screen.getByText(defaultProps.cardTitle)).toBeVisible();
+        expect(react_1.screen.getByText(defaultProps.cardBody)).toBeVisible();
+    });
+    it('expandableSectionProps.onToggle overrides internal onToggle behavior', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = user_event_1.default.setup();
+        const customOnToggle = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { isDefaultExpanded: false, expandableSectionProps: { onToggle: customOnToggle } })));
+        const toggleButton = react_1.screen.getByRole('button', { name: defaultProps.toggleContent });
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        yield user.click(toggleButton);
+        expect(customOnToggle).toHaveBeenCalledTimes(1);
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        expect(react_1.screen.getByText(defaultProps.cardTitle)).not.toBeVisible();
+        expect(react_1.screen.getByText(defaultProps.cardBody)).not.toBeVisible();
+    }));
+    it('should render toggleContent as markdown when isToggleContentMarkdown is true', () => {
+        const toggleContent = '**Bold toggle**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { toggleContent: toggleContent, isToggleContentMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold toggle')).toBeTruthy();
+    });
+    it('should not render toggleContent as markdown when isToggleContentMarkdown is false', () => {
+        const toggleContent = '**Bold toggle**';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { toggleContent: toggleContent })));
+        expect(react_1.screen.getByText('**Bold toggle**')).toBeTruthy();
+    });
+    it('should render subheading as markdown when isSubheadingMarkdown is true', () => {
+        const subheading = '**Bold subheading**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { subheading: subheading, isSubheadingMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold subheading')).toBeTruthy();
+    });
+    it('should not render subheading as markdown when isSubheadingMarkdown is false', () => {
+        const subheading = '**Bold subheading**';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { subheading: subheading })));
+        expect(react_1.screen.getByText('**Bold subheading**')).toBeTruthy();
+    });
+    it('should render body as markdown when isBodyMarkdown is true', () => {
+        const body = '**Bold body**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { body: body, isBodyMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold body')).toBeTruthy();
+    });
+    it('should not render body as markdown when isBodyMarkdown is false', () => {
+        const body = '**Bold body**';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { body: body })));
+        expect(react_1.screen.getByText('**Bold body**')).toBeTruthy();
+    });
+    it('should render cardTitle as markdown when isCardTitleMarkdown is true', () => {
+        const cardTitle = '**Bold card title**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { cardTitle: cardTitle, isCardTitleMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold card title')).toBeTruthy();
+    });
+    it('should not render cardTitle as markdown when isCardTitleMarkdown is false', () => {
+        const cardTitle = '**Bold card title**';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { cardTitle: cardTitle })));
+        expect(react_1.screen.getByText('**Bold card title**')).toBeTruthy();
+    });
+    it('should render cardBody as markdown when isCardBodyMarkdown is true', () => {
+        const cardBody = '**Bold card body**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { cardBody: cardBody, isCardBodyMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold card body')).toBeTruthy();
+    });
+    it('should not render cardBody as markdown when isCardBodyMarkdown is false', () => {
+        const cardBody = '**Bold card body**';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { cardBody: cardBody })));
+        expect(react_1.screen.getByText('**Bold card body**')).toBeTruthy();
+    });
+    it('should pass markdownContentProps to MarkdownContent component', () => {
+        const body = '**Bold body**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { body: body, isBodyMarkdown: true, markdownContentProps: { isPrimary: true } })));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
 });

package/dist/cjs/__mocks__/monaco-editor.d.ts

@@ -0,0 +1,11 @@
+declare const mockEditor: {
+    layout: jest.Mock<any, any, any>;
+    focus: jest.Mock<any, any, any>;
+    dispose: jest.Mock<any, any, any>;
+    getModel: jest.Mock<any, any, any>;
+    updateOptions: jest.Mock<any, any, any>;
+};
+declare const mockModel: {
+    updateOptions: jest.Mock<any, any, any>;
+    dispose: jest.Mock<any, any, any>;
+};

package/dist/cjs/__mocks__/monaco-editor.js

@@ -0,0 +1,18 @@
+"use strict";
+const mockEditor = {
+    layout: jest.fn(),
+    focus: jest.fn(),
+    dispose: jest.fn(),
+    getModel: jest.fn(),
+    updateOptions: jest.fn()
+};
+const mockModel = {
+    updateOptions: jest.fn(),
+    dispose: jest.fn()
+};
+module.exports = {
+    editor: {
+        create: jest.fn(() => mockEditor),
+        getModels: jest.fn(() => [mockModel])
+    }
+};

package/dist/cjs/index.d.ts

@@ -40,6 +40,8 @@ export { default as ImagePreview } from './ImagePreview';
 export * from './ImagePreview';
 export { default as LoadingMessage } from './LoadingMessage';
 export * from './LoadingMessage';
+export { default as MarkdownContent } from './MarkdownContent';
+export * from './MarkdownContent';
 export { default as Message } from './Message';
 export * from './Message';
 export { default as MessageBar } from './MessageBar';
@@ -48,6 +50,8 @@ export { default as MessageBox } from './MessageBox';
 export * from './MessageBox';
 export { default as MessageDivider } from './MessageDivider';
 export * from './MessageDivider';
+export { default as Onboarding } from './Onboarding';
+export * from './Onboarding';
 export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 export { default as ResponseActions } from './ResponseActions';

package/dist/cjs/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tracking = exports.ToolResponse = exports.ToolCall = exports.TermsOfUse = exports.SourcesCardBase = exports.SourcesCard = exports.SourceDetailsMenuItem = exports.Settings = exports.ResponseActions = exports.PreviewAttachment = exports.MessageDivider = exports.MessageBox = exports.MessageBar = exports.Message = exports.LoadingMessage = exports.ImagePreview = exports.FilePreview = exports.FileDropZone = exports.FileDetailsLabel = exports.FileDetails = exports.DeepThinking = exports.Compare = exports.CodeModal = exports.ChatbotWelcomePrompt = exports.ChatbotToggle = exports.ChatbotPopover = exports.ChatbotModal = exports.ChatbotHeader = exports.ChatbotFooter = exports.ChatbotConversationHistoryNav = exports.ChatbotContent = exports.ChatbotAlert = exports.Chatbot = exports.AttachMenu = exports.AttachmentEdit = void 0;
+exports.tracking = exports.ToolResponse = exports.ToolCall = exports.TermsOfUse = exports.SourcesCardBase = exports.SourcesCard = exports.SourceDetailsMenuItem = exports.Settings = exports.ResponseActions = exports.PreviewAttachment = exports.Onboarding = exports.MessageDivider = exports.MessageBox = exports.MessageBar = exports.Message = exports.MarkdownContent = exports.LoadingMessage = exports.ImagePreview = exports.FilePreview = exports.FileDropZone = exports.FileDetailsLabel = exports.FileDetails = exports.DeepThinking = exports.Compare = exports.CodeModal = exports.ChatbotWelcomePrompt = exports.ChatbotToggle = exports.ChatbotPopover = exports.ChatbotModal = exports.ChatbotHeader = exports.ChatbotFooter = exports.ChatbotConversationHistoryNav = exports.ChatbotContent = exports.ChatbotAlert = exports.Chatbot = exports.AttachMenu = exports.AttachmentEdit = void 0;
 var AttachmentEdit_1 = require("./AttachmentEdit");
 Object.defineProperty(exports, "AttachmentEdit", { enumerable: true, get: function () { return __importDefault(AttachmentEdit_1).default; } });
 __exportStar(require("./AttachmentEdit"), exports);
@@ -82,6 +82,9 @@ __exportStar(require("./ImagePreview"), exports);
 var LoadingMessage_1 = require("./LoadingMessage");
 Object.defineProperty(exports, "LoadingMessage", { enumerable: true, get: function () { return __importDefault(LoadingMessage_1).default; } });
 __exportStar(require("./LoadingMessage"), exports);
+var MarkdownContent_1 = require("./MarkdownContent");
+Object.defineProperty(exports, "MarkdownContent", { enumerable: true, get: function () { return __importDefault(MarkdownContent_1).default; } });
+__exportStar(require("./MarkdownContent"), exports);
 var Message_1 = require("./Message");
 Object.defineProperty(exports, "Message", { enumerable: true, get: function () { return __importDefault(Message_1).default; } });
 __exportStar(require("./Message"), exports);
@@ -94,6 +97,9 @@ __exportStar(require("./MessageBox"), exports);
 var MessageDivider_1 = require("./MessageDivider");
 Object.defineProperty(exports, "MessageDivider", { enumerable: true, get: function () { return __importDefault(MessageDivider_1).default; } });
 __exportStar(require("./MessageDivider"), exports);
+var Onboarding_1 = require("./Onboarding");
+Object.defineProperty(exports, "Onboarding", { enumerable: true, get: function () { return __importDefault(Onboarding_1).default; } });
+__exportStar(require("./Onboarding"), exports);
 var PreviewAttachment_1 = require("./PreviewAttachment");
 Object.defineProperty(exports, "PreviewAttachment", { enumerable: true, get: function () { return __importDefault(PreviewAttachment_1).default; } });
 __exportStar(require("./PreviewAttachment"), exports);