@patternfly/chatbot 6.9.0-prerelease.1 → 6.9.0-prerelease.11

package/dist/cjs/Chatbot/Chatbot.d.ts

@@ -13,6 +13,8 @@ export interface ChatbotProps {
     ariaLabel?: string;
     /** Density of information within the ChatBot */
     isCompact?: boolean;
+    /** Optional navigation rail displayed before the chatbot content */
+    dockedNav?: React.ReactNode;
 }
 export declare enum ChatbotDisplayMode {
     default = "default",

package/dist/cjs/Chatbot/Chatbot.js

@@ -23,8 +23,8 @@ var ChatbotDisplayMode;
     ChatbotDisplayMode["drawer"] = "drawer";
 })(ChatbotDisplayMode || (exports.ChatbotDisplayMode = ChatbotDisplayMode = {}));
 const ChatbotBase = (_a) => {
-    var { children, displayMode = ChatbotDisplayMode.default, isVisible = true, className, innerRef, ariaLabel, isCompact } = _a, props = __rest(_a, ["children", "displayMode", "isVisible", "className", "innerRef", "ariaLabel", "isCompact"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : 'pf-chatbot--visible'}  ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}` }, props, { children: isVisible ? ((0, jsx_runtime_1.jsx)("section", { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Chatbot', className: `pf-chatbot-container pf-chatbot-container--${displayMode} ${!isVisible ? 'pf-chatbot-container--hidden' : ''}`, tabIndex: -1, ref: innerRef, children: children })) : undefined })));
+    var { children, displayMode = ChatbotDisplayMode.default, isVisible = true, className, innerRef, ariaLabel, isCompact, dockedNav } = _a, props = __rest(_a, ["children", "displayMode", "isVisible", "className", "innerRef", "ariaLabel", "isCompact", "dockedNav"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `pf-chatbot pf-chatbot--${displayMode} ${dockedNav ? 'pf-chatbot--docked-nav' : ''} ${!isVisible ? 'pf-chatbot--hidden' : 'pf-chatbot--visible'}  ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}` }, props, { children: isVisible ? ((0, jsx_runtime_1.jsxs)("section", { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Chatbot', className: `pf-chatbot-container pf-chatbot-container--${displayMode} ${!isVisible ? 'pf-chatbot-container--hidden' : ''}`, tabIndex: -1, ref: innerRef, children: [dockedNav && (0, jsx_runtime_1.jsx)("aside", { className: "pf-chatbot__docked-nav", children: dockedNav }), children] })) : undefined })));
 };
 const Chatbot = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(ChatbotBase, Object.assign({ innerRef: ref }, props))));
 exports.default = Chatbot;

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -188,7 +188,7 @@ const ChatbotConversationHistoryNav = (_a) => {
     };
     const renderPanelContent = () => {
         const drawer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DrawerHead, Object.assign({}, drawerHeadProps, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ size: isCompact ? 'sm' : undefined, onClick: onNewChat, icon: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiEditFillIcon, {}) }, newChatButtonProps, { children: newChatButtonText })))] })) })), hasDrawerHeadDivider && (0, jsx_runtime_1.jsx)(react_core_1.Divider, { className: "pf-chatbot__heading-divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__heading-container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__title-container", children: [(0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: "lg", className: "pf-chatbot__title-icon", children: navTitleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, Object.assign({ className: "pf-chatbot__title", headingLevel: "h2" }, navTitleProps, { children: title }))] }), !isLoading && renderSearchAndActions()] }), isLoading ? (0, jsx_runtime_1.jsx)(LoadingState_1.default, Object.assign({}, loadingState)) : renderDrawerContent()] }));
-        return ((0, jsx_runtime_1.jsx)(react_core_1.DrawerPanelContent, Object.assign({ "aria-live": "polite", focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps, { children: drawer })));
+        return ((0, jsx_runtime_1.jsx)(react_core_1.DrawerPanelContent, Object.assign({ "aria-live": "polite", focusTrap: { enabled: true }, defaultSize: "384px", isNoPlainOnGlass: true }, drawerPanelContentProps, { children: drawer })));
     };
     // An onKeyDown property must be passed to the Drawer component to handle closing
     // the drawer panel and deactivating the focus trap via the Escape key.

package/dist/cjs/ChatbotFooter/ChatbotFootnote.js

@@ -23,7 +23,7 @@ const ChatbotPopover_1 = __importDefault(require("../ChatbotPopover/ChatbotPopov
 const ChatbotFootnote = (_a) => {
     var _b, _c, _d, _e, _f;
     var { label, popover, className } = _a, props = __rest(_a, ["label", "popover", "className"]);
-    if (!(popover === null || popover === void 0 ? void 0 : popover.cta) && !(popover === null || popover === void 0 ? void 0 : popover.showClose)) {
+    if (popover && !popover.cta && !popover.showClose) {
         // eslint-disable-next-line no-console
         console.error('ChatbotFootnote: You must provide either the popover.cta or popover.showClose props in order to render a button that can close the popover.');
     }

package/dist/cjs/ChatbotModal/ChatbotModal.js

@@ -18,7 +18,7 @@ const react_core_1 = require("@patternfly/react-core");
 const Chatbot_1 = require("../Chatbot");
 const ChatbotModal = (_a) => {
     var { children, displayMode = Chatbot_1.ChatbotDisplayMode.default, className, isOpen, isCompact } = _a, props = __rest(_a, ["children", "displayMode", "className", "isOpen", "isCompact"]);
-    const modal = ((0, jsx_runtime_1.jsx)(react_core_1.Modal, Object.assign({ isOpen: isOpen, ouiaId: "ChatbotModal", "aria-labelledby": "chatbot-modal-title", "aria-describedby": "chatbot-modal", className: `pf-chatbot__chatbot-modal pf-chatbot__chatbot-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className}`, backdropClassName: "pf-chatbot__chatbot-modal-backdrop" }, props, { children: children })));
+    const modal = ((0, jsx_runtime_1.jsx)(react_core_1.Modal, Object.assign({ isOpen: isOpen, ouiaId: "ChatbotModal", "aria-labelledby": "chatbot-modal-title", "aria-describedby": "chatbot-modal", className: `pf-chatbot__chatbot-modal pf-chatbot__chatbot-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className}`, backdropClassName: "pf-chatbot__chatbot-modal-backdrop", hasAnimations: false }, props, { children: children })));
     if ((displayMode === Chatbot_1.ChatbotDisplayMode.fullscreen || displayMode === Chatbot_1.ChatbotDisplayMode.embedded) && isOpen) {
         return (0, jsx_runtime_1.jsx)("div", { className: "pf-v6-c-backdrop pf-chatbot__backdrop", children: modal });
     }

package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.js

@@ -20,7 +20,7 @@ const ChatbotWelcomePrompt = (_a) => {
                                 onClickAction: prompt.onClick,
                                 selectableActionId: `welcome-prompt-input-${index}`,
                                 selectableActionAriaLabelledby: `welcome-prompt-title-${index}`
-                            }, children: (0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { id: `welcome-prompt-title-${index}`, children: prompt.title }) }), prompt.message && (0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: prompt.message })] }, `welcome-prompt-${index}`))) }))] })));
+                            }, children: (0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { className: "pf-chatbot__prompt-suggestion-title", id: `welcome-prompt-title-${index}`, children: prompt.title }) }), prompt.message && (0, jsx_runtime_1.jsx)(react_core_1.CardBody, { className: "pf-chatbot__prompt-suggestion-body", children: prompt.message })] }, `welcome-prompt-${index}`))) }))] })));
 };
 exports.ChatbotWelcomePrompt = ChatbotWelcomePrompt;
 exports.default = exports.ChatbotWelcomePrompt;

package/dist/cjs/MessageBar/MessageBar.d.ts

@@ -11,7 +11,7 @@ export interface MessageBarWithAttachMenuProps {
     /** Items in menu */
     attachMenuItems: React.ReactNode;
     /** A callback for when the attachment menu toggle is clicked */
-    onAttachMenuToggleClick: () => void;
+    onAttachMenuToggleClick?: () => void;
     /** A callback for when the input value in the menu changes. */
     onAttachMenuInputChange?: (value: string) => void;
     /** Function callback called when user selects item in menu. */

package/dist/cjs/MessageBar/MessageBar.js

@@ -206,8 +206,9 @@ const MessageBarBase = (_a) => {
         setIsComposing(false);
     }, []);
     const handleAttachMenuToggle = () => {
+        var _a;
         (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(!(attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.isAttachMenuOpen)));
-        attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuToggleClick();
+        (_a = attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuToggleClick) === null || _a === void 0 ? void 0 : _a.call(attachMenuProps);
     };
     const handleSpeechRecognition = (message) => {
         setMessage(message);
@@ -219,7 +220,7 @@ const MessageBarBase = (_a) => {
             return ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _a === void 0 ? void 0 : _a.tooltipContent, inputTestId: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _b === void 0 ? void 0 : _b.inputTestId, isCompact: isCompact, tooltipProps: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props)));
         }
         if (attachMenuProps) {
-            return ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, isCompact: isCompact, tooltipProps: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach)));
+            return ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, isCompact: isCompact, tooltipProps: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach, { isClicked: attachMenuProps.isAttachMenuOpen, "aria-expanded": attachMenuProps.isAttachMenuOpen })));
         }
     };
     const isAttachButtonAtStart = attachButtonPosition === 'start';
@@ -238,7 +239,7 @@ const MessageBarBase = (_a) => {
                 (_a = attachButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(isAttachMenuOpen);
                 (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange(isAttachMenuOpen));
-            }, onOpenChangeKeys: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOnOpenChangeKeys, onSelect: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuSelect }, (attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange }), { popperProps: { direction: 'up', distance: 8 }, searchInputPlaceholder: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuInputPlaceholder }, attachMenuProps)));
+            }, onOpenChangeKeys: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOnOpenChangeKeys, onSelect: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuSelect }, (attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange }), { popperProps: { direction: 'up', distance: 8 }, searchInputPlaceholder: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuInputPlaceholder, menuSearchProps: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.menuSearchProps, menuSearchInputProps: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.menuSearchInputProps, searchInputProps: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.searchInputProps })));
     }
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, react_styles_1.css)('pf-chatbot__message-bar', isPrimary && 'pf-m-primary', isMultiline && 'pf-m-multiline', className), children: messageBarContents }));
 };

package/dist/cjs/MessageBar/SendButton.js

@@ -15,12 +15,12 @@ exports.SendButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
-const paper_plane_icon_1 = require("@patternfly/react-icons/dist/esm/icons/paper-plane-icon");
+const rh_ui_send_fill_icon_1 = require("@patternfly/react-icons/dist/esm/icons/rh-ui-send-fill-icon");
 const SendButton = (_a) => {
     var { className, onClick, tooltipProps, tooltipContent = 'Send', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent", "isCompact"]);
     return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--send", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
         // prevents VO announcements of both aria label and tooltip
-        aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Send', onClick: onClick, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(paper_plane_icon_1.PaperPlaneIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })));
+        aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Send', onClick: onClick, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(rh_ui_send_fill_icon_1.RhUiSendFillIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })));
 };
 exports.SendButton = SendButton;
 exports.default = exports.SendButton;

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

@@ -35,6 +35,8 @@ export interface SourcesCardProps extends CardProps {
         footer?: React.ReactNode;
         /** Additional props passed to Truncate component */
         truncateProps?: TruncateProps;
+        /** Additional content applied to the beginning of the sources card header, such as a label */
+        headerContent?: React.ReactNode;
     }[];
     /** Label for the English word "source" */
     sourceWord?: string;

package/dist/cjs/SourcesCardBase/SourcesCardBase.d.ts

@@ -35,6 +35,8 @@ export interface SourcesCardBaseProps extends CardProps {
         footer?: React.ReactNode;
         /** Additional props passed to Truncate component */
         truncateProps?: TruncateProps;
+        /** Additional content applied to the beginning of the sources card header, such as a label */
+        headerContent?: React.ReactNode;
     }[];
     /** Accessible label for the button which moves to the next page. */
     toNextPageAriaLabel?: string;

package/dist/cjs/SourcesCardBase/SourcesCardBase.js

@@ -36,14 +36,14 @@ const SourcesCardBase = (_a) => {
     };
     const renderUncontrolledSourceCard = (source, index) => {
         var _a;
-        return ((0, jsx_runtime_1.jsx)("li", { className: "pf-chatbot__sources-list-item", style: { '--pf-chatbot-sources-card-max-width': cardMaxWidth }, children: (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isFullHeight: true, isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, Object.assign({ className: "pf-chatbot__sources-card-title" }, cardTitleProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__sources-card-title-container", children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: react_core_1.ButtonVariant.link, href: source.link, icon: source.isExternal ? (0, jsx_runtime_1.jsx)(react_icons_1.RhMicronsExternalLinkIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: source.isExternal ? 'noreferrer' : undefined, target: source.isExternal ? '_blank' : undefined, onClick: (_a = source.onClick) !== null && _a !== void 0 ? _a : undefined }, source.titleProps, { children: renderTitle(source.title, index, source.truncateProps) })), source.subtitle && (0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__sources-card-subtitle", children: source.subtitle })] }) })), source.body && ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({ className: `pf-chatbot__sources-card-body ${source.footer ? 'pf-chatbot__compact-sources-card-body' : undefined}` }, cardBodyProps, { children: source.hasShowMore ? (
+        return ((0, jsx_runtime_1.jsx)("li", { className: "pf-chatbot__sources-list-item", style: { '--pf-chatbot-sources-card-max-width': cardMaxWidth }, children: (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isFullHeight: true, isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CardTitle, Object.assign({ className: "pf-chatbot__sources-card-title" }, cardTitleProps, { children: [source.headerContent && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-header-content-container", children: source.headerContent })), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__sources-card-title-container", children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: react_core_1.ButtonVariant.link, href: source.link, icon: source.isExternal ? (0, jsx_runtime_1.jsx)(react_icons_1.RhMicronsExternalLinkIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: source.isExternal ? 'noreferrer' : undefined, target: source.isExternal ? '_blank' : undefined, onClick: (_a = source.onClick) !== null && _a !== void 0 ? _a : undefined }, source.titleProps, { children: renderTitle(source.title, index, source.truncateProps) })), source.subtitle && (0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__sources-card-subtitle", children: source.subtitle })] })] })), source.body && ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({ className: `pf-chatbot__sources-card-body ${source.footer ? 'pf-chatbot__compact-sources-card-body' : undefined}` }, cardBodyProps, { children: source.hasShowMore ? (
                         // prevents extra VO announcements of button text - parent Message has aria-live
                         (0, jsx_runtime_1.jsx)("div", { "aria-live": "off", children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, { variant: react_core_1.ExpandableSectionVariant.truncate, toggleTextCollapsed: showMoreWords, toggleTextExpanded: showLessWords, truncateMaxLines: 2, children: source.body }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-body-text", children: source.body })) }))), source.footer && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer" }, cardFooterProps, { children: source.footer })))] })) }, index));
     };
     if (layout === 'wrap') {
         return ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-base pf-m-wrap", children: (0, jsx_runtime_1.jsx)("ul", { className: "pf-chatbot__sources-list", role: "list", children: sources.map((source, index) => renderUncontrolledSourceCard(source, index)) }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-base", children: (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, Object.assign({ className: "pf-chatbot__sources-card-title" }, cardTitleProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__sources-card-title-container", children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? (0, jsx_runtime_1.jsx)(react_icons_1.RhMicronsExternalLinkIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, onClick: (_b = sources[page - 1].onClick) !== null && _b !== void 0 ? _b : undefined }, sources[page - 1].titleProps, { children: renderTitle(sources[page - 1].title, undefined, sources[page - 1].truncateProps) })), sources[page - 1].subtitle && ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__sources-card-subtitle", children: sources[page - 1].subtitle }))] }) })), sources[page - 1].body && ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({ className: `pf-chatbot__sources-card-body ${sources[page - 1].footer ? 'pf-chatbot__compact-sources-card-body' : undefined}` }, cardBodyProps, { children: sources[page - 1].hasShowMore ? (
+    return ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-base", children: (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CardTitle, Object.assign({ className: "pf-chatbot__sources-card-title" }, cardTitleProps, { children: [sources[page - 1].headerContent && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-header-content-container", children: sources[page - 1].headerContent })), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__sources-card-title-container", children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? (0, jsx_runtime_1.jsx)(react_icons_1.RhMicronsExternalLinkIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, onClick: (_b = sources[page - 1].onClick) !== null && _b !== void 0 ? _b : undefined }, sources[page - 1].titleProps, { children: renderTitle(sources[page - 1].title, undefined, sources[page - 1].truncateProps) })), sources[page - 1].subtitle && ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__sources-card-subtitle", children: sources[page - 1].subtitle }))] })] })), sources[page - 1].body && ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({ className: `pf-chatbot__sources-card-body ${sources[page - 1].footer ? 'pf-chatbot__compact-sources-card-body' : undefined}` }, cardBodyProps, { children: sources[page - 1].hasShowMore ? (
                     // prevents extra VO announcements of button text - parent Message has aria-live
                     (0, jsx_runtime_1.jsx)("div", { "aria-live": "off", children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, { variant: react_core_1.ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) }))), sources[page - 1].footer ? ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer" }, cardFooterProps, { children: sources[page - 1].footer }))) : (sources.length > 1 && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer-container" }, cardFooterProps, { children: (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-footer", children: (0, jsx_runtime_1.jsxs)("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, isCircle: true, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
                                         const newPage = page >= 1 ? page - 1 : 1;

package/dist/css/main.css

@@ -161,6 +161,13 @@
   }
 }
 
+.pf-chatbot--docked-nav .pf-chatbot-container {
+  flex-direction: row;
+}
+.pf-chatbot--docked-nav .pf-chatbot__header-container {
+  display: none;
+}
+
 .pf-chatbot-container--embedded {
   min-height: 100%;
 }
@@ -360,19 +367,21 @@
 }
 
 .pf-chatbot__history.pf-v6-c-drawer {
-  --pf-v6-c-drawer__panel--MinWidth: 24rem;
-  --pf-v6-c-drawer__panel--xl--MinWidth: 24rem;
   height: 70vh;
 }
-.pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__panel {
+.pf-chatbot__history.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+  --pf-v6-c-drawer__panel--MinWidth: 24rem;
+  --pf-v6-c-drawer__panel--xl--MinWidth: 24rem;
   --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
   overflow-x: hidden;
   overflow-y: hidden;
 }
-.pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__head {
+.pf-chatbot__history.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__head {
   --pf-v6-c-drawer__head--PaddingBlockStart: 0;
   --pf-v6-c-drawer__head--PaddingBlockEnd: 0;
   --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
@@ -382,7 +391,7 @@
   justify-content: space-between;
   height: var(--pf-t--global--spacer--2xl);
 }
-.pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__actions {
+.pf-chatbot__history.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__actions {
   --pf-v6-c-drawer__actions--MarginBlockStart: 0;
   --pf-v6-c-drawer__actions--MarginInlineEnd: 0;
   display: flex;
@@ -392,17 +401,17 @@
   width: 100%;
   height: 100%;
 }
-.pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__actions--reversed {
+.pf-chatbot__history.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__actions--reversed {
   flex-direction: row-reverse;
 }
-.pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__close .pf-v6-c-button {
+.pf-chatbot__history.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__close .pf-v6-c-button {
   width: var(--pf-t--global--spacer--2xl);
   height: var(--pf-t--global--spacer--2xl);
   border-radius: var(--pf-t--global--border--radius--pill);
   justify-content: center;
   align-items: center;
 }
-.pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__body {
+.pf-chatbot__history.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__body {
   --pf-v6-c-drawer__panel__body--PaddingBlockStart: 0;
   --pf-v6-c-drawer__panel__body--PaddingBlockEnd: 0;
   --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
@@ -412,9 +421,15 @@
   flex-direction: column;
   height: 70vh;
 }
-.pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__panel.pf-m-resizable .pf-v6-c-drawer__panel-main {
+.pf-chatbot__history.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable .pf-v6-c-drawer__panel-main {
   row-gap: var(--pf-v6-c-drawer__panel--RowGap);
 }
+.pf-chatbot__history.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  height: 70vh;
+}
 
 .pf-chatbot--docked .pf-chatbot__history.pf-v6-c-drawer {
   height: 100vh;
@@ -424,19 +439,22 @@
 .pf-chatbot--fullscreen .pf-chatbot__history.pf-v6-c-drawer {
   height: 100vh;
 }
-.pf-chatbot--drawer .pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__body,
-.pf-chatbot--fullscreen .pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__body {
+.pf-chatbot--drawer .pf-chatbot__history.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content > .pf-v6-c-drawer__body,
+.pf-chatbot--drawer .pf-chatbot__history.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__body,
+.pf-chatbot--fullscreen .pf-chatbot__history.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content > .pf-v6-c-drawer__body,
+.pf-chatbot--fullscreen .pf-chatbot__history.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__body {
   width: 100%;
 }
 
 .pf-chatbot--embedded .pf-chatbot__history.pf-v6-c-drawer {
   height: 100%;
 }
-.pf-chatbot--embedded .pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__body {
+.pf-chatbot--embedded .pf-chatbot__history.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content > .pf-v6-c-drawer__body,
+.pf-chatbot--embedded .pf-chatbot__history.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__body {
   width: 100%;
   height: 100%;
 }
-.pf-chatbot--embedded .pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__panel {
+.pf-chatbot--embedded .pf-chatbot__history.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
   height: 100%;
 }
 
@@ -461,25 +479,22 @@
   align-self: stretch;
 }
 
-.pf-chatbot__history.pf-m-compact .pf-v6-c-drawer__main .pf-v6-c-drawer__panel {
+.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-chatbot__history.pf-m-compact > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .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-chatbot__history.pf-m-compact > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .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 {
+.pf-chatbot__history.pf-m-compact > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .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);
@@ -487,6 +502,9 @@
   --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
 }
+.pf-chatbot__history.pf-m-compact .pf-chatbot__menu-item {
+  font-size: var(--pf-t--global--font--size--body--md);
+}
 
 .pf-chatbot__footnote {
   align-self: center;
@@ -705,11 +723,8 @@
   padding-block-end: var(--pf-t--global--spacer--sm);
 }
 
-:root:where(.pf-v6-theme-glass) .pf-chatbot__chatbot-modal {
-  --pf-v6-c-modal-box--BackgroundColor: var(
-    --pf-t--global--background--color--glass--primary--default,
-    var(--pf-t--global--background--color--secondary--default)
-  );
+:root:where(.pf-v6-theme-glass) .pf-chatbot__code-modal {
+  --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
 }
 
 @media screen and (max-width: 600px) {
@@ -784,6 +799,7 @@
   position: fixed;
   inset-block-end: var(--pf-t--global--spacer--md);
   inset-inline-end: var(--pf-t--global--spacer--md);
+  --pf-v6-c-button--BorderRadius: 0;
   --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
   --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--floating--clicked);
@@ -818,8 +834,8 @@
   --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--secondary--clicked);
 }
 
-.pf-chatbot__button--round {
-  border-radius: var(--pf-t--global--border--radius--pill);
+.pf-chatbot__button.pf-chatbot__button--round {
+  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
   width: 3rem;
   height: 3rem;
 }
@@ -849,6 +865,13 @@
   flex: 1;
   overflow: visible;
   height: 100%;
+  min-width: 0;
+}
+.pf-chatbot--layout--welcome .pf-chatbot__prompt-suggestion-body {
+  overflow-wrap: anywhere;
+}
+.pf-chatbot--layout--welcome .pf-chatbot__prompt-suggestion-title {
+  --pf-v6-c-card__title-text--OverflowWrap: anywhere;
 }
 
 .pf-chatbot--layout--welcome.pf-m-compact {
@@ -866,6 +889,140 @@
     align-items: baseline;
   }
 }
+.pf-chatbot__canvas {
+  --pf-chatbot__canvas--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-chatbot__canvas--Padding: var(--pf-t--global--spacer--lg);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  background-color: var(--pf-chatbot__canvas--BackgroundColor);
+}
+
+:where(.pf-v6-theme-glass) .pf-chatbot__canvas {
+  --pf-chatbot__canvas--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
+}
+
+.pf-chatbot__canvas-docked-nav {
+  border-inline-end: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--subtle);
+}
+
+.pf-chatbot__canvas-drawer {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  background-color: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--Opacity: 1;
+  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+}
+.pf-chatbot__canvas-drawer > .pf-v6-c-drawer__main,
+.pf-chatbot__canvas-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
+.pf-chatbot__canvas-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__panel-main {
+  background-color: var(--pf-chatbot__canvas--BackgroundColor);
+}
+
+@media screen and (min-width: 48rem) {
+  .pf-v6-c-drawer.pf-m-inline.pf-chatbot__canvas-drawer {
+    --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+    --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  }
+}
+.pf-chatbot__canvas-body {
+  height: 100%;
+}
+
+.pf-chatbot__canvas-column {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.pf-chatbot__canvas-chat-content {
+  padding-block-start: var(--pf-t--global--spacer--lg);
+}
+
+.pf-chatbot__canvas-chat-footer {
+  padding-block-end: var(--pf-t--global--spacer--md);
+}
+
+.pf-chatbot__canvas-section {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+}
+
+.pf-chatbot__canvas-panel {
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--PaddingBlockStart: 0;
+  --pf-v6-c-drawer__panel--PaddingBlockEnd: 0;
+  --pf-v6-c-drawer__panel--RowGap: 0;
+}
+.pf-chatbot__canvas-panel .pf-v6-c-drawer__panel-main {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+.pf-chatbot__canvas-panel .pf-chatbot__canvas-panel-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  padding-block-end: var(--pf-chatbot__canvas--Padding);
+  padding-inline: var(--pf-chatbot__canvas--Padding);
+  box-sizing: border-box;
+  background-color: var(--pf-chatbot__canvas--BackgroundColor);
+}
+.pf-chatbot__canvas-panel .pf-chatbot__canvas-head {
+  width: 100%;
+  grid-template-columns: minmax(0, 1fr) max-content;
+  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-chatbot__canvas--Padding);
+  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-chatbot__canvas--Padding);
+  --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-chatbot__canvas--Padding);
+}
+.pf-chatbot__canvas-panel .pf-chatbot__canvas-head .pf-v6-c-drawer__actions {
+  grid-column: 2;
+  justify-self: end;
+  align-self: start;
+  width: max-content;
+  --pf-v6-c-drawer__actions--MarginBlockStart: 0;
+  --pf-v6-c-drawer__actions--MarginInlineEnd: 0;
+}
+.pf-chatbot__canvas-panel .pf-chatbot__canvas-head .pf-v6-c-drawer__actions .pf-v6-c-button {
+  border-radius: var(--pf-t--global--border--radius--pill);
+  justify-content: center;
+  align-items: center;
+}
+.pf-chatbot__canvas-panel .pf-chatbot__canvas-head .pf-v6-c-drawer__actions .pf-v6-c-button::before {
+  border-radius: inherit;
+}
+
+.pf-chatbot__canvas-editor {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+.pf-chatbot__canvas-editor .pf-v6-c-code-editor {
+  --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+}
+
 .pf-chatbot__code-modal .pf-v6-c-code-editor {
   --pf-v6-c-code-editor__main--BackgroundColor: #1f1f1f;
   --pf-v6-c-code-editor__main--BorderEndStartRadius: 0;
@@ -1318,10 +1475,15 @@
   gap: var(--pf-t--global--spacer--sm);
 }
 .pf-chatbot__message-meta .pf-chatbot__message-name {
+  display: flex;
   font-family: var(--pf-v6-c-content--heading--FontFamily, redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif);
   font-weight: 600;
   font-size: var(--pf-t--global--font--size--sm);
 }
+.pf-chatbot__message-meta .pf-chatbot__message-name::after {
+  content: "";
+  flex: 0 0 1px;
+}
 .pf-chatbot__message-meta .pf-v6-c-label {
   --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--xs);
   font-weight: var(--pf-t--global--font--weight--body--bold);
@@ -2159,20 +2321,11 @@ li[id*=user-content-fn-]:has(> span > span > .pf-chatbot__message-text + .pf-cha
   width: 3rem;
   height: 3rem;
 }
-.pf-v6-c-button.pf-chatbot__button--attach .pf-v6-c-button__icon {
-  color: var(--pf-t--global--icon--color--subtle);
-}
-.pf-v6-c-button.pf-chatbot__button--attach:hover .pf-v6-c-button__icon {
-  color: var(--pf-t--global--icon--color--regular);
-}
-.pf-v6-c-button.pf-chatbot__button--attach:active, .pf-v6-c-button.pf-chatbot__button--attach:focus {
+.pf-v6-c-button.pf-chatbot__button--attach.pf-m-clicked, .pf-v6-c-button.pf-chatbot__button--attach.pf-m-clicked:hover, .pf-v6-c-button.pf-chatbot__button--attach.pf-m-clicked:focus {
   background-color: var(--pf-t--global--color--brand--clicked);
 }
-.pf-v6-c-button.pf-chatbot__button--attach:active .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--attach:focus .pf-v6-c-button__icon {
-  color: var(--pf-t--global--icon--color--inverse);
-}
-.pf-v6-c-button.pf-chatbot__button--attach:active:hover .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--attach:active:focus .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--attach:focus:hover .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--attach:focus:focus .pf-v6-c-button__icon {
-  color: var(--pf-t--global--icon--color--inverse);
+.pf-v6-c-button.pf-chatbot__button--attach.pf-m-clicked .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--attach.pf-m-clicked:hover .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--attach.pf-m-clicked:focus .pf-v6-c-button__icon {
+  color: var(--pf-t--global--icon--color--on-brand--default);
 }
 
 .pf-v6-c-button.pf-chatbot__button--attach.pf-m-compact {
@@ -2223,31 +2376,7 @@ li[id*=user-content-fn-]:has(> span > span > .pf-chatbot__message-text + .pf-cha
   padding: var(--pf-t--global--spacer--md);
   width: 3rem;
   height: 3rem;
-}
-.pf-v6-c-button.pf-chatbot__button--send .pf-v6-c-button__icon {
-  --pf-v6-c-button__icon--Color: var(--pf-t--global--color--brand--default);
-}
-.pf-v6-c-button.pf-chatbot__button--send:hover, .pf-v6-c-button.pf-chatbot__button--send:focus {
-  background-color: rgba(146, 197, 249, 0.25);
-  color: var(--pf-t--global--color--brand--hover);
-}
-.pf-v6-c-button.pf-chatbot__button--send:hover .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--send:focus .pf-v6-c-button__icon {
-  color: var(--pf-t--global--color--brand--hover);
-}
-
-.pf-v6-theme-dark .pf-v6-c-button.pf-chatbot__button--send {
-  background-color: var(--pf-t--global--color--brand--default);
-}
-.pf-v6-theme-dark .pf-v6-c-button.pf-chatbot__button--send .pf-v6-c-button__icon {
-  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--inverse);
-}
-.pf-v6-theme-dark .pf-v6-c-button:disabled.pf-chatbot__button--send:disabled {
-  --pf-v6-c-button--disabled--Color: var(--pf-t--global--icon--color--disabled);
-  background-color: var(--pf-t--global--background--color--disabled--default);
-}
-.pf-v6-theme-dark .pf-v6-c-button.pf-chatbot__button--send:hover,
-.pf-v6-theme-dark .pf-v6-c-button.pf-chatbot__button--send:focus {
-  background-color: rgba(146, 197, 249, 0.25);
+  --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--color--brand--default);
 }
 
 @keyframes motionSendButton {
@@ -2324,11 +2453,11 @@ li[id*=user-content-fn-]:has(> span > span > .pf-chatbot__message-text + .pf-cha
   transition: border-color var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm), border-width var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm);
 }
 .pf-chatbot__message-bar:hover::after {
-  border-color: var(--pf-t--global--border--color--control--hover);
+  border-color: var(--pf-t--global--border--color--hover);
   border-width: var(--pf-t--global--border--width--control--hover);
 }
 .pf-chatbot__message-bar:focus-within::after {
-  border-color: var(--pf-t--global--border--color--control--clicked);
+  border-color: var(--pf-t--global--border--color--clicked);
   border-width: var(--pf-t--global--border--width--control--clicked);
 }
 .pf-chatbot__message-bar-actions {
@@ -2808,6 +2937,12 @@ li[id*=user-content-fn-]:has(> span > span > .pf-chatbot__message-text + .pf-cha
   text-overflow: ellipsis;
 }
 
+.pf-chatbot__sources-header-content-container {
+  display: inline-flex;
+  width: fit-content;
+  margin-block-end: var(--pf-t--global--spacer--sm);
+}
+
 .pf-chatbot__sources-card-title-container {
   display: flex;
   flex-direction: column;