@patternfly/chatbot 6.3.0-prerelease.1 → 6.3.0-prerelease.10

package/dist/cjs/MessageBox/MessageBox.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,7 +20,8 @@ exports.MessageBox = void 0;
 // ============================================================================
 const react_1 = __importDefault(require("react"));
 const JumpButton_1 = __importDefault(require("./JumpButton"));
-const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', children, innerRef, className, position = 'top' }) => {
+const MessageBoxBase = (_a) => {
+    var { announcement, ariaLabel = 'Scrollable message log', children, innerRef, className, position = 'top', onScrollToTopClick, onScrollToBottomClick } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "innerRef", "className", "position", "onScrollToTopClick", "onScrollToBottomClick"]);
     const [atTop, setAtTop] = react_1.default.useState(false);
     const [atBottom, setAtBottom] = react_1.default.useState(true);
     const [isOverflowing, setIsOverflowing] = react_1.default.useState(false);
@@ -42,12 +54,14 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
         if (element) {
             element.scrollTo({ top: 0, behavior: 'smooth' });
         }
+        onScrollToTopClick && onScrollToTopClick();
     }, [messageBoxRef]);
     const scrollToBottom = react_1.default.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
         }
+        onScrollToBottomClick && onScrollToBottomClick();
     }, [messageBoxRef]);
     // Detect scroll position
     react_1.default.useEffect(() => {
@@ -65,7 +79,7 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
     }, [checkOverflow, handleScroll, messageBoxRef]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(JumpButton_1.default, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop }),
-        react_1.default.createElement("div", { role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className !== null && className !== void 0 ? className : ''}`, ref: innerRef !== null && innerRef !== void 0 ? innerRef : messageBoxRef },
+        react_1.default.createElement("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className !== null && className !== void 0 ? className : ''}`, ref: innerRef !== null && innerRef !== void 0 ? innerRef : messageBoxRef }, props),
             children,
             react_1.default.createElement("div", { className: "pf-chatbot__messagebox-announcement", "aria-live": "polite" }, announcement)),
         react_1.default.createElement(JumpButton_1.default, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: scrollToBottom })));

package/dist/cjs/MessageBox/MessageBox.test.js

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

package/dist/cjs/PreviewAttachment/PreviewAttachment.d.ts

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

package/dist/cjs/PreviewAttachment/PreviewAttachment.js

@@ -10,7 +10,7 @@ exports.PreviewAttachment = void 0;
 const react_1 = __importDefault(require("react"));
 const CodeModal_1 = __importDefault(require("../CodeModal"));
 const Chatbot_1 = require("../Chatbot");
-const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOpen, onDismiss = undefined, onEdit, title = 'Preview attachment', displayMode = Chatbot_1.ChatbotDisplayMode.default }) => {
+const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOpen, onDismiss = undefined, onEdit, title = 'Preview attachment', displayMode = Chatbot_1.ChatbotDisplayMode.default, isCompact }) => {
     const handleEdit = (_event) => {
         handleModalToggle(_event);
         onEdit(_event);
@@ -19,7 +19,7 @@ const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOpen, onD
         handleModalToggle(_event);
         onDismiss && onDismiss(_event);
     };
-    return (react_1.default.createElement(CodeModal_1.default, { codeEditorControlClassName: "pf-chatbot__code-modal--controls", code: code, fileName: fileName, handleModalToggle: handleModalToggle, isCopyEnabled: true, isLineNumbersVisible: false, isModalOpen: isModalOpen, onPrimaryAction: handleEdit, onSecondaryAction: handleDismiss, primaryActionBtn: "Edit", secondaryActionBtn: "Dismiss", title: title, isReadOnly: true, displayMode: displayMode }));
+    return (react_1.default.createElement(CodeModal_1.default, { codeEditorControlClassName: "pf-chatbot__code-modal--controls", code: code, fileName: fileName, handleModalToggle: handleModalToggle, isCopyEnabled: true, isLineNumbersVisible: false, isModalOpen: isModalOpen, onPrimaryAction: handleEdit, onSecondaryAction: handleDismiss, primaryActionBtn: "Edit", secondaryActionBtn: "Dismiss", title: title, isReadOnly: true, displayMode: displayMode, isCompact: isCompact }));
 };
 exports.PreviewAttachment = PreviewAttachment;
 exports.default = exports.PreviewAttachment;

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

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

package/dist/cjs/Settings/SettingsForm.js

@@ -17,8 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsForm = void 0;
 const react_1 = __importDefault(require("react"));
 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),
+    var { className, fields = [], isCompact } = _a, props = __rest(_a, ["className", "fields", "isCompact"]);
+    return (react_1.default.createElement("div", Object.assign({ className: `pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${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))))));

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

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

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

@@ -7,6 +7,7 @@ const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const react_2 = 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" }));
@@ -23,4 +24,15 @@ describe('SettingsForm', () => {
         (0, react_2.render)(react_1.default.createElement(SettingsForm_1.SettingsForm, { fields: fields }));
         expect(react_2.screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
     });
+    it('should render settingsForm with isCompact', () => {
+        const fields = [
+            {
+                id: 'archived-chat',
+                label: 'Archive chat',
+                field: (react_1.default.createElement(react_core_1.Button, { id: "archived-chat", variant: "secondary" }, "Archive chat"))
+            }
+        ];
+        (0, react_2.render)(react_1.default.createElement(SettingsForm_1.SettingsForm, { "data-testid": "settings-form", fields: fields, isCompact: true }));
+        expect(react_2.screen.getByTestId('settings-form')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/cjs/SourcesCard/SourcesCard.js

@@ -22,7 +22,7 @@ const react_1 = __importDefault(require("react"));
 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"]);
+    var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less', isCompact } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact"]);
     const [page, setPage] = react_1.default.useState(1);
     const [isExpanded, setIsExpanded] = react_1.default.useState(false);
     const onToggle = (_event, isExpanded) => {
@@ -40,7 +40,7 @@ const SourcesCard = (_a) => {
     };
     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.Card, Object.assign({ isCompact: isCompact, 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 ? (

package/dist/cjs/TermsOfUse/TermsOfUse.d.ts

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

package/dist/cjs/TermsOfUse/TermsOfUse.js

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

package/dist/css/main.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .pf-chatbot__menu.pf-v6-c-menu {
   --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -159,6 +160,10 @@
   border-radius: var(--pf-t--global--border--radius--sharp);
 }
 
+.pf-chatbot.pf-m-compact {
+  font-size: var(--pf-t--global--font--size--sm);
+}
+
 .pf-chatbot__alert {
   position: sticky;
   top: var(--pf-t--global--spacer--lg);
@@ -191,8 +196,8 @@
   border-radius: var(--pf-t--global--border--radius--medium);
 }
 .pf-chatbot__history .pf-chatbot__input {
-  padding-inline-start: var(--pf-t--global--spacer--xl);
-  padding-inline-end: var(--pf-t--global--spacer--xl);
+  padding-inline-start: var(--pf-t--global--spacer--lg);
+  padding-inline-end: var(--pf-t--global--spacer--lg);
 }
 .pf-chatbot__history .pf-v6-c-menu {
   --pf-v6-c-menu--PaddingBlockStart: 0;
@@ -280,7 +285,6 @@
   border-radius: var(--pf-t--global--border--radius--pill);
   justify-content: center;
   align-items: center;
-  border-radius: var(--pf-t--global--border--radius--small);
 }
 .pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__body {
   --pf-v6-c-drawer__panel__body--PaddingBlockStart: 0;
@@ -341,6 +345,33 @@
   align-self: stretch;
 }
 
+.pf-chatbot__history.pf-m-compact .pf-v6-c-drawer__main .pf-v6-c-drawer__panel {
+  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--md);
+}
+.pf-chatbot__history.pf-m-compact .pf-v6-c-drawer__main .pf-v6-c-drawer__body {
+  --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+}
+.pf-chatbot__history.pf-m-compact .pf-chatbot__menu-item {
+  font-size: var(--pf-t--global--font--size--body--md);
+}
+.pf-chatbot__history.pf-m-compact .pf-v6-c-drawer__head {
+  --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+}
+.pf-chatbot__history.pf-m-compact .pf-v6-c-drawer__close .pf-v6-c-button {
+  width: 2rem;
+  height: 2rem;
+  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+}
+
 .pf-chatbot__footnote {
   align-self: center;
 }
@@ -390,6 +421,11 @@
   padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
 }
 
+.pf-chatbot__footer.pf-m-compact .pf-chatbot__footer-container {
+  padding: 0 var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
+  row-gap: var(--pf-t--global--spacer--sm);
+}
+
 .pf-chatbot__header-container {
   display: grid;
 }
@@ -507,6 +543,25 @@
   display: inline-flex;
 }
 
+.pf-chatbot.pf-m-compact .pf-chatbot__header {
+  gap: var(--pf-t--global--spacer--sm);
+  padding: var(--pf-t--global--spacer--sm);
+}
+.pf-chatbot.pf-m-compact .pf-chatbot__header .pf-chatbot__title img {
+  max-height: 24px;
+  vertical-align: middle;
+}
+
+.pf-v6-c-menu-toggle.pf-chatbot__button--toggle-options.pf-m-compact,
+.pf-chatbot__button--toggle-menu.pf-m-compact {
+  width: 2rem;
+  height: 2rem;
+}
+
+.pf-chatbot__header .pf-chatbot__actions .pf-v6-c-menu-toggle.pf-m-secondary.pf-m-compact {
+  width: initial;
+}
+
 .pf-chatbot__chatbot-modal-backdrop {
   position: static !important;
 }
@@ -523,10 +578,6 @@
 .pf-chatbot__chatbot-modal .pf-v6-c-modal-box__title {
   --pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--h3);
 }
-.pf-chatbot__chatbot-modal .pf-v6-c-button.pf-m-primary.pf-m-block,
-.pf-chatbot__chatbot-modal .pf-v6-c-button.pf-m-link.pf-m-block {
-  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--bold);
-}
 .pf-chatbot__chatbot-modal .pf-v6-c-modal-box__footer {
   padding-block-start: var(--pf-t--global--spacer--xl);
   padding-block-end: var(--pf-t--global--spacer--xl);
@@ -580,6 +631,14 @@
   position: absolute;
 }
 
+.pf-chatbot__chatbot-modal.pf-m-compact .pf-v6-c-modal-box__header {
+  padding-block-end: 0;
+}
+.pf-chatbot__chatbot-modal.pf-m-compact .pf-v6-c-modal-box__footer {
+  padding-block-start: var(--pf-t--global--spacer--lg);
+  padding-block-end: var(--pf-t--global--spacer--lg);
+}
+
 .pf-chatbot__popover .pf-v6-c-popover__arrow {
   display: none;
 }
@@ -632,7 +691,6 @@
   gap: var(--pf-t--global--spacer--lg);
 }
 .pf-chatbot--layout--welcome .pf-v6-c-content--h1 {
-  --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--3xl);
   --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--400);
   --pf-v6-c-content--h1--MarginBlockEnd: 0;
 }
@@ -653,6 +711,14 @@
   height: 100%;
 }
 
+.pf-chatbot--layout--welcome.pf-m-compact {
+  gap: var(--pf-t--global--spacer--md);
+  padding-block-end: var(--pf-t--global--spacer--md);
+}
+.pf-chatbot--layout--welcome.pf-m-compact .pf-chatbot__prompt-suggestions {
+  gap: var(--pf-t--global--spacer--md);
+}
+
 @media screen and (min-width: 64rem) {
   .pf-chatbot--fullscreen .pf-chatbot--layout--welcome .pf-chatbot__prompt-suggestions,
   .pf-chatbot--embedded .pf-chatbot--layout--welcome .pf-chatbot__prompt-suggestions {
@@ -722,8 +788,8 @@
 .pf-chatbot__code-modal .pf-v6-c-code-editor__header-main {
   display: none;
 }
-.pf-chatbot__code-modal .pf-chatbot__code-modal-file-details {
-  padding-inline-start: var(--pf-t--global--spacer--md);
+.pf-chatbot__code-modal .pf-v6-c-modal-box__close .pf-v6-c-button.pf-m-plain {
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
 }
 
 .pf-v6-theme-dark .pf-chatbot__code-modal .pf-v6-c-code-editor__controls > div > button {
@@ -731,7 +797,7 @@
   --pf-v6-c-button--hover__icon--Color: #c7c7c7;
 }
 
-.pf-chatbot__code-modal-body {
+.pf-chatbot__code-modal-editor {
   flex: 1;
 }
 
@@ -739,6 +805,10 @@
   height: inherit !important;
 }
 
+.pf-chatbot__code-modal.pf-m-compact .pf-chatbot__code-modal-body {
+  gap: var(--pf-t--global--spacer--md);
+}
+
 .pf-chatbot__compare-container {
   display: flex;
   flex-direction: column;
@@ -1180,6 +1250,39 @@
   color: var(--pf-t--global--text--color--on-brand--default);
 }
 
+.pf-chatbot.pf-m-compact .pf-chatbot__message-text .pf-v6-c-button.pf-m-link {
+  font-size: var(--pf-t--global--font--size--sm);
+}
+.pf-chatbot.pf-m-compact .pf-chatbot__message-text .pf-v6-c-content,
+.pf-chatbot.pf-m-compact .pf-chatbot__message-text .pf-v6-c-content--small,
+.pf-chatbot.pf-m-compact .pf-chatbot__message-text .pf-v6-c-content--blockquote,
+.pf-chatbot.pf-m-compact .pf-chatbot__message-text p,
+.pf-chatbot.pf-m-compact .pf-chatbot__message-text a {
+  --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--sm);
+}
+.pf-chatbot.pf-m-compact .pf-chatbot__message-text .pf-v6-c-content--blockquote {
+  --pf-v6-c-content--blockquote--PaddingBlockStart: 0;
+  --pf-v6-c-content--blockquote--PaddingBlockEnd: 0;
+}
+
+.pf-chatbot.pf-m-compact .pf-chatbot__message {
+  gap: var(--pf-t--global--spacer--md);
+  padding-bottom: var(--pf-t--global--spacer--sm);
+}
+.pf-chatbot.pf-m-compact .pf-chatbot__message .pf-chatbot__message-contents  {
+  gap: var(--pf-t--global--spacer--xs);
+}
+.pf-chatbot.pf-m-compact .pf-chatbot__message-name {
+  font-size: var(--pf-t--global--font--size--xs);
+}
+.pf-chatbot.pf-m-compact .pf-chatbot__message-avatar.pf-chatbot__message-avatar--round.pf-v6-c-avatar {
+  --pf-v6-c-avatar--Width: 2rem;
+  --pf-v6-c-avatar--Height: 2rem;
+}
+.pf-chatbot.pf-m-compact .pf-chatbot__message-contents {
+  gap: var(--pf-t--global--spacer--xs);
+}
+
 .pf-chatbot__message-code-block {
   width: 100%;
   background-color: var(--pf-t--color--gray--80);
@@ -1299,6 +1402,21 @@
   color: var(--pf-t--global--text--color--on-brand--default);
 }
 
+.pf-chatbot.pf-m-compact .pf-chatbot__message-text .pf-v6-c-button.pf-m-link {
+  font-size: var(--pf-t--global--font--size--sm);
+}
+.pf-chatbot.pf-m-compact .pf-chatbot__message-text .pf-v6-c-content,
+.pf-chatbot.pf-m-compact .pf-chatbot__message-text .pf-v6-c-content--small,
+.pf-chatbot.pf-m-compact .pf-chatbot__message-text .pf-v6-c-content--blockquote,
+.pf-chatbot.pf-m-compact .pf-chatbot__message-text p,
+.pf-chatbot.pf-m-compact .pf-chatbot__message-text a {
+  --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--sm);
+}
+.pf-chatbot.pf-m-compact .pf-chatbot__message-text .pf-v6-c-content--blockquote {
+  --pf-v6-c-content--blockquote--PaddingBlockStart: 0;
+  --pf-v6-c-content--blockquote--PaddingBlockEnd: 0;
+}
+
 .pf-chatbot__message-ordered-list,
 .pf-chatbot__message-unordered-list {
   width: fit-content;
@@ -1445,6 +1563,7 @@
   flex-direction: column;
   gap: var(--pf-t--global--spacer--lg);
   align-items: center;
+  text-align: center;
 }
 
 .pf-chatbot__feedback-complete-text {
@@ -1463,10 +1582,6 @@
   justify-content: center;
 }
 
-.pf-chatbot__feedback-complete-body {
-  text-align: center;
-}
-
 .pf-chatbot__feedback-complete-title {
   font-family: var(--pf-t--global--font--family--heading);
   font-size: var(--pf-t--global--font--size--lg);
@@ -1489,6 +1604,20 @@
   font-weight: initial;
 }
 
+.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card .pf-chatbot__feedback-card-form.pf-m-compact {
+  --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--md);
+}
+
+.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card.pf-chatbot__feedback-card-complete div.pf-chatbot__feedback-complete-body {
+  gap: var(--pf-t--global--spacer--sm);
+}
+.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card.pf-chatbot__feedback-card-complete .pf-chatbot__feedback-complete-image {
+  width: 40px;
+}
+.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card.pf-chatbot__feedback-card-complete .pf-chatbot__feedback-card-complete-empty-header .pf-v6-c-card__header:first-child {
+  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+}
+
 .pf-v6-c-button.pf-chatbot__button--attach {
   border-radius: var(--pf-t--global--border--radius--pill);
   padding: var(--pf-t--global--spacer--md);
@@ -1511,6 +1640,13 @@
   color: var(--pf-t--global--icon--color--inverse);
 }
 
+.pf-v6-c-button.pf-chatbot__button--attach.pf-m-compact {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: var(--pf-t--global--spacer--sm);
+  align-items: center;
+}
+
 .pf-v6-c-button.pf-chatbot__button--microphone {
   border-radius: var(--pf-t--global--border--radius--pill);
   padding: var(--pf-t--global--spacer--md);
@@ -1542,6 +1678,13 @@
     box-shadow: 0 0 0 16px rgba(0, 102, 204, 0);
   }
 }
+.pf-v6-c-button.pf-chatbot__button--microphone.pf-m-compact {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: var(--pf-t--global--spacer--sm);
+  align-items: center;
+}
+
 .pf-v6-c-button.pf-chatbot__button--send {
   border-radius: var(--pf-t--global--border--radius--pill);
   padding: var(--pf-t--global--spacer--md);
@@ -1584,6 +1727,13 @@
     transform: translate3d(0, 0, 0);
   }
 }
+.pf-v6-c-button.pf-chatbot__button--send.pf-m-compact {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: var(--pf-t--global--spacer--sm);
+  align-items: center;
+}
+
 .pf-v6-c-button.pf-chatbot__button--stop {
   background-color: var(--pf-t--global--color--brand--default);
   border-radius: var(--pf-t--global--border--radius--pill);
@@ -1610,6 +1760,13 @@
   color: var(--pf-t--global--icon--color--on-brand--default);
 }
 
+.pf-v6-c-button.pf-chatbot__button--stop.pf-m-compact {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: var(--pf-t--global--spacer--sm);
+  align-items: center;
+}
+
 .pf-chatbot__message-bar {
   --pf-chatbot__message-bar-child--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-chatbot__message-bar-child--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
@@ -1701,6 +1858,18 @@
   }
 }
 
+.pf-chatbot__message-bar-input.pf-m-compact {
+  padding-block-start: 0;
+  padding-block-end: 0;
+}
+.pf-chatbot__message-bar-input.pf-m-compact .pf-chatbot__message-textarea {
+  font-size: var(--pf-t--global--font--size--sm) !important;
+}
+.pf-chatbot__message-bar-input.pf-m-compact .pf-chatbot__message-bar-actions {
+  padding-block-start: var(--pf-t--global--spacer--md);
+  padding-block-end: var(--pf-t--global--spacer--md);
+}
+
 .pf-chatbot__jump {
   position: absolute !important;
   inset-inline-start: 75% !important;
@@ -1781,6 +1950,10 @@
     width: 100%;
   }
 }
+.pf-chatbot.pf-m-compact .pf-chatbot__messagebox {
+  padding: var(--pf-t--global--spacer--md);
+}
+
 .pf-chatbot__jump {
   position: absolute !important;
   inset-inline-start: 75% !important;
@@ -1882,6 +2055,15 @@
   text-align: center;
 }
 
+.pf-chatbot__settings-form-container.pf-m-compact .pf-chatbot__settings-form-row {
+  padding: var(--pf-t--global--spacer--md);
+  font-size: var(--pf-t--global--font--size--body--md);
+}
+
+.pf-chatbot__header.pf-m-compact {
+  padding-inline-start: var(--pf-t--global--spacer--md);
+}
+
 .pf-chatbot__source {
   display: flex;
   flex-direction: column;
@@ -1950,6 +2132,11 @@
   color: var(--pf-t--global--icon--color--subtle);
 }
 
+.pf-v6-c-card.pf-m-compact.pf-chatbot__sources-card .pf-v6-c-card__footer.pf-chatbot__sources-card-footer-container {
+  border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
+  padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--xs) !important;
+}
+
 .pf-chatbot__source-details-subhead {
   color: var(--pf-t--global--text--color--subtle);
   font-size: var(--pf-t--global--icon--size--font--xs);
@@ -2037,6 +2224,22 @@
   font-size: var(--pf-t--global--font--size--heading--2xl);
 }
 
+.pf-chatbot__terms-of-use-modal.pf-m-compact .pf-chatbot__terms-of-use--header {
+  gap: var(--pf-t--global--spacer--md);
+  align-items: flex-start;
+  margin-block-start: var(--pf-t--global--spacer--lg);
+}
+.pf-chatbot__terms-of-use-modal.pf-m-compact .pf-chatbot__terms-of-use--modal-header {
+  --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+}
+.pf-chatbot__terms-of-use-modal.pf-m-compact .pf-chatbot__terms-of-use--modal-body {
+  --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+}
+
 :where(:root) {
   --pf-t--chatbot--heading--font-family: var(
     --pf-v6-c-content--heading--FontFamily,