@patternfly/chatbot 2.2.0-prerelease.15 → 2.2.0-prerelease.17

package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderCloseButton } from './ChatbotHeaderCloseButton';
+describe('ChatbotHeaderCloseButton', () => {
+    it('should render ChatbotHeaderCloseButton', () => {
+        const { container } = render(React.createElement(ChatbotHeaderCloseButton, { className: "custom-header-close-button", onClick: jest.fn() }));
+        expect(container.querySelector('.custom-header-close-button')).toBeTruthy();
+    });
+    it('should call onClick handler when close button is pressed', () => {
+        const onClick = jest.fn();
+        render(React.createElement(ChatbotHeaderCloseButton, { className: "custom-header-close-button", onClick: onClick }));
+        fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+        expect(onClick).toHaveBeenCalled();
+    });
+});

package/dist/esm/ChatbotHeader/ChatbotHeaderMain.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/ChatbotHeader/ChatbotHeaderMain.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatbotHeaderMain from './ChatbotHeaderMain';
+describe('ChatbotHeaderMain', () => {
+    it('should render ChatbotHeaderMain with children', () => {
+        render(React.createElement(ChatbotHeaderMain, null, "Chatbot Header Main"));
+        expect(screen.getByText('Chatbot Header Main')).toBeTruthy();
+    });
+    it('should render ChatbotHeaderMain with custom classname', () => {
+        const { container } = render(React.createElement(ChatbotHeaderMain, { className: "custom-header-class" }, "Chatbot Content"));
+        expect(container.querySelector('.custom-header-class')).toBeTruthy();
+    });
+});

package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderMenu } from './ChatbotHeaderMenu';
+describe('ChatbotHeaderMenu', () => {
+    it('should render ChatbotHeaderMenu with custom class', () => {
+        const { container } = render(React.createElement(ChatbotHeaderMenu, { className: "custom-header-menu", onMenuToggle: jest.fn() }));
+        expect(container.querySelector('.custom-header-menu')).toBeTruthy();
+    });
+    it('should call onMenuToggle when ChatbotHeaderMenu button is clicked', () => {
+        const onMenuToggle = jest.fn();
+        render(React.createElement(ChatbotHeaderMenu, { className: "custom-header-menu", onMenuToggle: onMenuToggle }));
+        fireEvent.click(screen.getByRole('button', { name: 'Toggle menu' }));
+        expect(onMenuToggle).toHaveBeenCalled();
+    });
+});

package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.js

@@ -0,0 +1,38 @@
+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 { DropdownItem } from '@patternfly/react-core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatbotHeaderOptionsDropdown } from './ChatbotHeaderOptionsDropdown';
+describe('ChatbotHeaderOptionsDropdown', () => {
+    const dropdownItems = (React.createElement(React.Fragment, null,
+        React.createElement(DropdownItem, null, "Option 1"),
+        React.createElement(DropdownItem, null, "Option 2"),
+        React.createElement(DropdownItem, null, "Option 3")));
+    it('should render ChatbotHeaderOptionsDropdown', () => {
+        render(React.createElement(ChatbotHeaderOptionsDropdown, null, dropdownItems));
+        expect(screen.getByRole('button', { name: 'Chatbot options' })).toBeTruthy();
+    });
+    it('should call onselect handler when a dropdown item is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onSelect = jest.fn();
+        const { container } = render(React.createElement(ChatbotHeaderOptionsDropdown, { className: "custom-header-options-dropdown", onSelect: onSelect }, dropdownItems));
+        act(() => {
+            fireEvent.click(screen.getByRole('button', { name: 'Chatbot options' }));
+        });
+        yield waitFor(() => {
+            expect(container.querySelector('.custom-header-options-dropdown')).toBeTruthy();
+            expect(screen.getByText('Option 1'));
+            expect(screen.getByText('Option 2'));
+            expect(screen.getByText('Option 3'));
+            fireEvent.click(screen.getByText('Option 3'));
+            expect(onSelect).toHaveBeenCalled();
+        });
+    }));
+});

package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js

@@ -0,0 +1,36 @@
+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 { DropdownItem } from '@patternfly/react-core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatbotHeaderSelectorDropdown } from './ChatbotHeaderSelectorDropdown';
+describe('ChatbotHeaderSelectorDropdown', () => {
+    const dropdownItems = (React.createElement(React.Fragment, null,
+        React.createElement(DropdownItem, null, "Option 1"),
+        React.createElement(DropdownItem, null, "Option 2"),
+        React.createElement(DropdownItem, null, "Option 3")));
+    it('should render ChatbotHeaderSelectorDropdown', () => {
+        render(React.createElement(ChatbotHeaderSelectorDropdown, { value: "Option 1" }, dropdownItems));
+        expect(screen.getByRole('button', { name: 'Chatbot selector' })).toBeTruthy();
+    });
+    it('should call onselect handler when a dropdown item is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onSelect = jest.fn();
+        const { container } = render(React.createElement(ChatbotHeaderSelectorDropdown, { value: "Option 1", className: "custom-header-selector-dropdown", onSelect: onSelect }, dropdownItems));
+        act(() => {
+            fireEvent.click(screen.getByRole('button', { name: 'Chatbot selector' }));
+        });
+        yield waitFor(() => {
+            expect(container.querySelector('.custom-header-selector-dropdown')).toBeTruthy();
+            expect(screen.getByText('Option 3'));
+            fireEvent.click(screen.getByText('Option 3'));
+            expect(onSelect).toHaveBeenCalled();
+        });
+    }));
+});

package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
+import ChatbotHeaderTitle from './ChatbotHeaderTitle';
+describe('ChatbotHeaderTitle', () => {
+    it('should render ChatbotHeaderTitle with children', () => {
+        render(React.createElement(ChatbotHeaderTitle, null, "Chatbot Header Title"));
+        expect(screen.getByText('Chatbot Header Title')).toBeTruthy();
+    });
+    it('should render ChatbotHeaderTitle with custom classname', () => {
+        const { container } = render(React.createElement(ChatbotHeaderTitle, { className: "custom-header-class" }, "Chatbot Header Title"));
+        expect(container.querySelector('.custom-header-class')).toBeTruthy();
+    });
+    it('should render title for default display mode', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.default, showOnDefault: 'Default header title' }));
+        expect(screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for docked display mode', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.docked, showOnDocked: 'Docked header title' }));
+        expect(screen.getByText('Docked header title')).toBeTruthy();
+    });
+    it('should fallback to default title when docked display mode title is not configured', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.docked, showOnDefault: 'Default header title' }));
+        expect(screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for embedded display mode', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.embedded, showOnEmbedded: 'Embedded header title' }));
+        expect(screen.getByText('Embedded header title')).toBeTruthy();
+    });
+    it('should fallback to default title when embedded display mode title is not configured', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.embedded, showOnDefault: 'Default header title' }));
+        expect(screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for fullscreen display mode', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.fullscreen, showOnFullScreen: 'Fullscreen header title', className: "custom-header-class" }));
+        expect(screen.getByText('Fullscreen header title')).toBeTruthy();
+    });
+    it('should fallback to default title when fullscreen display mode title is not configured', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.fullscreen, showOnDefault: 'Default header title' }));
+        expect(screen.getByText('Default header title')).toBeTruthy();
+    });
+});

package/dist/esm/Message/Message.js

@@ -15,7 +15,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Avatar, Label, Timestamp, Truncate } from '@patternfly/react-core';
+import { Avatar, ContentVariants, Label, Timestamp, Truncate } from '@patternfly/react-core';
 import MessageLoading from './MessageLoading';
 import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
 import TextMessage from './TextMessage/TextMessage';
@@ -51,11 +51,21 @@ export const MessageBase = (_a) => {
             React.createElement("div", { className: "pf-chatbot__message-response" },
                 React.createElement("div", { className: "pf-chatbot__message-and-actions" },
                     isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(Markdown, { components: {
-                            p: TextMessage,
-                            code: ({ children }) => React.createElement(CodeBlockMessage, Object.assign({}, codeBlockProps), children),
+                            p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
+                            code: (_a) => {
+                                var { children } = _a, props = __rest(_a, ["children"]);
+                                return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
+                            },
                             ul: UnorderedListMessage,
                             ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
-                            li: ListItemMessage
+                            li: ListItemMessage,
+                            h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
+                            h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
+                            h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
+                            h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
+                            h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
+                            h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
+                            blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props))
                         }, remarkPlugins: [remarkGfm] }, content)),
                     !isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
                     quickStarts && quickStarts.quickStart && (React.createElement(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),

package/dist/esm/Message/Message.test.js

@@ -72,6 +72,22 @@ const ORDERED_LIST_WITH_CODE = `
 
 3. Item 3
 `;
+const HEADING = `
+# h1 Heading
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+`;
+const BLOCK_QUOTES = `> Blockquotes can also be nested...
+>> ...by using additional greater-than signs (>) right next to each other...
+> > > ...or with spaces between each sign.`;
 const checkListItemsRendered = () => {
     const items = ['Item 1', 'Item 2', 'Item 3'];
     expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -307,12 +323,16 @@ describe('Message', () => {
         render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
         expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
         expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
-        expect(screen.getByText(/apiVersion: helm.openshift.io\/v1beta1/i)).toBeTruthy();
+        expect(screen.getByText(/yaml/)).toBeTruthy();
+        expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
+        expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
         expect(screen.getByText(/metadata:/i)).toBeTruthy();
-        expect(screen.getByText(/name: azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+        expect(screen.getByText(/name:/i)).toBeTruthy();
+        expect(screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
         expect(screen.getByText(/spec/i)).toBeTruthy();
         expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
-        expect(screen.getByText(/url: https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
+        expect(screen.getByText(/url:/i)).toBeTruthy();
+        expect(screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
     });
     it('can click copy code button', () => __awaiter(void 0, void 0, void 0, function* () {
         // need explicit setup since RTL stubs clipboard if you do this
@@ -378,4 +398,19 @@ describe('Message', () => {
             } }));
         expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
     }));
+    it('should handle block quote correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: BLOCK_QUOTES }));
+        expect(screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
+        expect(screen.getByText('...by using additional greater-than signs (>) right next to each other...')).toBeTruthy();
+        expect(screen.getByText(/...or with spaces between each sign./)).toBeTruthy();
+    });
+    it('should handle heading correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: HEADING }));
+        expect(screen.getByRole('heading', { name: /h1 Heading/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /h2 Heading/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /h3 Heading/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /h4 Heading/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /h5 Heading/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
+    });
 });

package/dist/esm/Message/TextMessage/TextMessage.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { ExtraProps } from 'react-markdown';
-declare const TextMessage: ({ children, ...props }: JSX.IntrinsicElements["p"] & ExtraProps) => React.JSX.Element;
+import { ContentProps } from '@patternfly/react-core';
+declare const TextMessage: ({ component, children, ...props }: ContentProps & ExtraProps) => React.JSX.Element;
 export default TextMessage;

package/dist/esm/Message/TextMessage/TextMessage.js

@@ -13,10 +13,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { Content, ContentVariants } from '@patternfly/react-core';
+import { Content } from '@patternfly/react-core';
 const TextMessage = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
+    var { component, children } = _a, props = __rest(_a, ["component", "children"]);
     return (React.createElement("span", { className: "pf-chatbot__message-text" },
-        React.createElement(Content, Object.assign({ component: ContentVariants.p }, props), children)));
+        React.createElement(Content, Object.assign({ component: component }, props), children)));
 };
 export default TextMessage;

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

@@ -7,14 +7,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import '@testing-library/jest-dom';
 import React from 'react';
+import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
+import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
-import { MessageBar } from './MessageBar';
-import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
 import SourceDetailsMenuItem from '../SourceDetailsMenuItem';
-import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
+import { MessageBar } from './MessageBar';
 const ATTACH_MENU_ITEMS = [
     React.createElement(DropdownList, { key: "list-1" },
         React.createElement(DropdownItem, { className: "pf-chatbot-source-details-dropdown-item", value: "auth-operator Pod", id: "0" },

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MessageBox } from './MessageBox';
+describe('MessageBox', () => {
+    it('should render Message box', () => {
+        render(React.createElement(MessageBox, null,
+            React.createElement(React.Fragment, null, "Chatbot Messages")));
+        expect(screen.getByText('Chatbot Messages')).toBeTruthy();
+    });
+    it('should assign ref to Message box', () => {
+        const ref = React.createRef();
+        render(React.createElement(MessageBox, { ref: ref },
+            React.createElement("div", null, "Test message content")));
+        expect(ref.current).not.toBeNull();
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    });
+});

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/PreviewAttachment/PreviewAttachment.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { PreviewAttachment } from './PreviewAttachment';
+describe('PreviewAttachment', () => {
+    it('should render PreviewAttachment', () => {
+        render(React.createElement(PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: jest.fn(), handleModalToggle: jest.fn() }));
+        expect(screen.getByText('Preview attachment')).toBeTruthy();
+        expect(screen.getByText('greetings')).toBeTruthy();
+        expect(screen.getAllByText('TEXT')).toBeTruthy();
+    });
+    it('should call onEdit handler when edit button is pressed', () => {
+        const onEdit = jest.fn();
+        render(React.createElement(PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: onEdit, handleModalToggle: jest.fn() }));
+        fireEvent.click(screen.getByText('Edit'));
+        expect(onEdit).toHaveBeenCalled();
+    });
+    it('should call onDismiss handler when dismiss button is pressed', () => {
+        const onDismiss = jest.fn();
+        render(React.createElement(PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: jest.fn(), handleModalToggle: onDismiss }));
+        fireEvent.click(screen.getByText('Dismiss'));
+        expect(onDismiss).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { render, screen } from '@testing-library/react';
+import { SettingsForm } from './SettingsForm';
+describe('SettingsForm', () => {
+    it('should render settingsForm with custom classname', () => {
+        const { container } = render(React.createElement(SettingsForm, { className: "custom-settings" }));
+        expect(container.querySelector('.custom-settings')).toBeTruthy();
+    });
+    it('should render settingsForm with fields', () => {
+        const fields = [
+            {
+                id: 'archived-chat',
+                label: 'Archive chat',
+                field: (React.createElement(Button, { id: "archived-chat", variant: "secondary" }, "Archive chat"))
+            }
+        ];
+        render(React.createElement(SettingsForm, { fields: fields }));
+        expect(screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
+    });
+});

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts"],"version":"5.6.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.15",
+  "version": "2.2.0-prerelease.17",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx

@@ -2,9 +2,39 @@ import React from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import squareImg from './PF-social-color-square.svg';
+import { Form, FormGroup, Radio } from '@patternfly/react-core';
 
 export const BotMessageExample: React.FunctionComponent = () => {
-  const markdown = `
+  const [variant, setVariant] = React.useState('code');
+
+  /* eslint-disable indent */
+  const renderContent = () => {
+    switch (variant) {
+      case 'code':
+        return code;
+      case 'heading':
+        return heading;
+      case 'emphasis':
+        return emphasis;
+      case 'blockQuotes':
+        return blockQuotes;
+      case 'orderedList':
+        return orderedList;
+      case 'unorderedList':
+        return unorderedList;
+      case 'moreComplexList':
+        return moreComplexList;
+      case 'inlineCode':
+        return inlineCode;
+      case 'link':
+        return link;
+      default:
+        return;
+    }
+  };
+  /* eslint-enable indent */
+
+  const code = `
 Here is some YAML code:
 
 ~~~yaml
@@ -35,6 +65,36 @@ export default MessageLoading;
 ~~~
 `;
 
+  const heading = `
+# h1 Heading
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+`;
+
+  const emphasis = `
+**Bold text, formatted with double asterisks**
+
+__Bold text, formatted with double underscores__
+
+*Italic text, formatted with single asterisks*
+
+_Italic text, formatted with single underscores_
+
+~~Strikethrough~~
+`;
+
+  const blockQuotes = `> Blockquotes can also be nested...
+>> ...by using additional greater-than signs (>) right next to each other...
+> > > ...or with spaces between each sign.`;
+
   const orderedList = `
   Here is an ordered list:
 
@@ -61,21 +121,13 @@ export default MessageLoading;
      Acquire 1 tablespoon of room temperature \`butter\`. Use \`knife\` to spread butter on \`toast\`. Bon appétit!
  `;
 
+  const link = `A paragraph with a URL: https://reactjs.org.`;
+
+  const inlineCode = `Here is an inline code - \`() => void\``;
+
   return (
     <>
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content={`Text-based message from a bot named "Bot"`} />
-      <Message
-        name="Bot"
-        role="bot"
-        avatar={patternflyAvatar}
-        content={`Text-based message from a bot named "Bot," with updated timestamp`}
-        timestamp="1 hour ago"
-      />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={markdown} />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={orderedList} />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={unorderedList} />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={moreComplexList} />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
       <Message role="bot" avatar={patternflyAvatar} content="Text-based message from a nameless bot" />
       <Message
         name="Default Openshift Container Platform Assistant That Can Help With Any Query You Might Need Help With"
@@ -90,6 +142,83 @@ export default MessageLoading;
         content="Text-based message from a bot with a square avatar. You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `<Message>` component via `avatarProps`."
         hasRoundAvatar={false}
       />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content={`Text-based message from a bot named "Bot," with updated timestamp`}
+        timestamp="1 hour ago"
+      />
+      <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
+
+      <Form>
+        <FormGroup role="radiogroup" isInline fieldId="bot-message-type" label="Message content type">
+          <Radio
+            isChecked={variant === 'code'}
+            onChange={() => setVariant('code')}
+            name="bot-message-type"
+            label="Code"
+            id="code"
+          />
+          <Radio
+            isChecked={variant === 'inlineCode'}
+            onChange={() => setVariant('inlineCode')}
+            name="bot-message-type"
+            label="Inline code"
+            id="inline-code"
+          />
+          <Radio
+            isChecked={variant === 'heading'}
+            onChange={() => setVariant('heading')}
+            name="bot-message-type"
+            label="Heading"
+            id="heading"
+          />
+          <Radio
+            isChecked={variant === 'blockQuotes'}
+            onChange={() => setVariant('blockQuotes')}
+            name="bot-message-type"
+            label="Block quote"
+            id="block-quotes"
+          />
+          <Radio
+            isChecked={variant === 'emphasis'}
+            onChange={() => setVariant('emphasis')}
+            name="bot-message-type"
+            label="Emphasis"
+            id="emphasis"
+          />
+          <Radio
+            isChecked={variant === 'link'}
+            onChange={() => setVariant('link')}
+            name="bot-message-type"
+            label="Link"
+            id="link"
+          />
+          <Radio
+            isChecked={variant === 'unorderedList'}
+            onChange={() => setVariant('unorderedList')}
+            name="bot-message-type"
+            label="Unordered list"
+            id="unordered-list"
+          />
+          <Radio
+            isChecked={variant === 'orderedList'}
+            onChange={() => setVariant('orderedList')}
+            name="bot-message-type"
+            label="Ordered list"
+            id="ordered-list"
+          />
+          <Radio
+            isChecked={variant === 'moreComplexList'}
+            onChange={() => setVariant('moreComplexList')}
+            name="bot-message-type"
+            label="More complex list"
+            id="more-complex-list"
+          />
+        </FormGroup>
+      </Form>
+      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={renderContent()} />
     </>
   );
 };