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

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -37,6 +37,7 @@ import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import Compare from '@patternfly/chatbot/dist/dynamic/Compare';
 import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
 
 import ChatbotHeader, {
 ChatbotHeaderMain,
@@ -48,11 +49,31 @@ ChatbotHeaderOptionsDropdown,
 ChatbotHeaderCloseButton,
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 
-import { RhUiExpandIcon, RhUiOpenDrawerRightIcon, RhUiMenuBarsIcon, RhUiRestoreWindowIcon } from '@patternfly/react-icons';
-import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import { RhUiBuildFillIcon, RhUiCopyFillIcon } from '@patternfly/react-icons';
+import { RhUiExpandIcon, RhUiOpenDrawerRightIcon, RhUiMenuBarsIcon, RhUiRestoreWindowIcon, RhUiAiEditIcon } from '@patternfly/react-icons';
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+import { useDropzone } from 'react-dropzone';
+import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
+import RhUiClipboardIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clipboard-icon';
+import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
+import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
+import RhUiBuildFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-build-fill-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
+import RhUiImageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-image-fill-icon';
+import RhUiEditFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-edit-fill-icon';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import {
 Button,
+Divider,
+Drawer,
+DrawerActions,
+DrawerCloseButton,
+DrawerContent,
+DrawerContentBody,
+DrawerHead,
+DrawerPanelContent,
+DropdownItem,
+DropdownList,
 DescriptionList,
 DescriptionListDescription,
 DescriptionListGroup,
@@ -61,7 +82,12 @@ ExpandableSection,
 ExpandableSectionVariant,
 Flex,
 FlexItem,
-Label
+Label,
+MenuToggle,
+Select,
+SelectList,
+SelectOption,
+Title
 } from '@patternfly/react-core';
 import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
@@ -70,7 +96,7 @@ import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import { getTrackingProviders } from "@patternfly/chatbot/dist/dynamic/tracking";
-import { useEffect,useCallback, useRef, useState, FunctionComponent, MouseEvent, MouseEvent as ReactMouseEvent } from 'react';
+import { useEffect,useCallback, useRef, useState, FunctionComponent, MouseEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import saveAs from 'file-saver';
 
 ### Basic ChatBot
@@ -166,6 +192,14 @@ This demo showcases how the ChatBot can be rendered in different display modes t
 
 ```
 
+### Fullscreen ChatBot with docked navigation
+
+This demo shows a headerless fullscreen ChatBot with a vertical navigation rail for switching between chat history, a new chat, and settings.
+
+```js file="./FullscreenDockedNav.tsx" isFullscreen
+
+```
+
 ### Comparing ChatBots
 
 To let users compare how different ChatBots respond to the same prompt, you can add multiple ChatBots within the same window. The following demo illustrates a comparison view pattern that allows users to toggle between different conversations in a single ChatBot window.

package/patternfly-docs/content/extensions/chatbot/examples/demos/FullscreenDockedNav.tsx

@@ -0,0 +1,385 @@
+import { FunctionComponent, ReactNode, useEffect, useRef, useState } from 'react';
+import {
+  Avatar,
+  Brand,
+  Button,
+  Divider,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadLogo,
+  MastheadMain,
+  MastheadToggle,
+  Flex,
+  MenuToggle,
+  Nav,
+  NavItem,
+  NavList,
+  PageToggleButton,
+  Switch,
+  Title,
+  Tooltip
+} from '@patternfly/react-core';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotContent from '@patternfly/chatbot/dist/dynamic/ChatbotContent';
+import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
+import ChatbotFooter, { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
+import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
+import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
+import Message, { MessageProps } from '@patternfly/chatbot/dist/dynamic/Message';
+import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { RhUiEditFillIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-edit-fill-icon';
+import { RhUiSettingsFillIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
+import { RhMicronsCloseIcon } from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
+import userAvatar from '../Messages/user_avatar.svg';
+import '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/chatbot/dist/css/main.css';
+
+const initialMessages: MessageProps[] = [
+  {
+    id: '1',
+    role: 'user',
+    content: 'Show me how a fullscreen chatbot can use docked navigation.',
+    name: 'You',
+    avatar: userAvatar,
+    timestamp: new Date().toLocaleString(),
+    avatarProps: { isBordered: true }
+  },
+  {
+    id: '2',
+    role: 'bot',
+    content: 'Use the rail on the left to switch between the conversation, history, and a new chat.',
+    name: 'Bot',
+    timestamp: new Date().toLocaleString()
+  }
+];
+
+const welcomePrompts = [
+  {
+    title: 'Topic 1',
+    message: 'Helpful prompt for Topic 1'
+  },
+  {
+    title: 'Topic 2',
+    message: 'Helpful prompt for Topic 2'
+  }
+];
+
+const conversations = [
+  { id: '1', text: 'Fullscreen chatbot navigation' },
+  { id: '2', text: 'Review deployment options' }
+];
+
+interface PlainTextSettingsFormProps {
+  fields: { id: string; label: string; field: ReactNode }[];
+}
+
+const PlainTextSettingsForm = ({ fields }: PlainTextSettingsFormProps) => (
+  <div className="pf-chatbot__settings-form-container">
+    <form className="pf-chatbot__settings-form">
+      {fields.map(({ id, label, field }) => (
+        <div className="pf-chatbot__settings-form-row" key={id}>
+          <div className="pf-chatbot__settings-label" id={`${id}-label`}>
+            {label}
+          </div>
+          {field}
+        </div>
+      ))}
+    </form>
+  </div>
+);
+
+const hamburgerHoverStyles = `
+  .pf-chatbot__canvas-docked-nav .pf-v6-c-masthead__logo.pf-m-compact {
+    display: revert;
+  }
+
+  .pf-chatbot__canvas-docked-nav .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text {
+    display: none;
+  }
+
+  .pf-chatbot__canvas-history-toggle.pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
+    --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
+    --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
+    --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+    --pf-v6-c-button__icon--TransitionDelay: 0s;
+    --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+  }
+
+  .pf-chatbot__canvas-history-toggle.pf-v6-c-button.pf-m-hamburger[aria-expanded="true"]:is(:hover, :focus-visible) {
+    --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
+  }
+`;
+
+const SettingsPanel = ({ onClose }) => {
+  const [openDropdown, setOpenDropdown] = useState<string>();
+  const [theme, setTheme] = useState('System');
+  const [language, setLanguage] = useState('Auto-detect');
+  const [voice, setVoice] = useState('Bot');
+  const [isAnalyticsShared, setIsAnalyticsShared] = useState(true);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    window.requestAnimationFrame(() => closeButtonRef.current?.focus());
+  }, []);
+
+  const dropdownField = (id, label, value, options, onSelect) => (
+    <Dropdown
+      isOpen={openDropdown === id}
+      onSelect={(_event, selectedValue) => {
+        onSelect(String(selectedValue));
+        setOpenDropdown(undefined);
+      }}
+      onOpenChange={(isOpen: boolean) => setOpenDropdown(isOpen ? id : undefined)}
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
+      toggle={(toggleRef) => (
+        <MenuToggle
+          id={id}
+          ref={toggleRef}
+          onClick={() => setOpenDropdown(openDropdown === id ? undefined : id)}
+          isExpanded={openDropdown === id}
+          aria-label={`${value}, ${label}`}
+        >
+          {value}
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>
+        {options.map((option) => (
+          <DropdownItem value={option} key={option}>
+            {option}
+          </DropdownItem>
+        ))}
+      </DropdownList>
+    </Dropdown>
+  );
+
+  const fields = [
+    {
+      id: 'theme',
+      label: 'Theme',
+      field: dropdownField('theme', 'Theme', theme, ['System', 'Light', 'Dark'], setTheme)
+    },
+    {
+      id: 'language',
+      label: 'Language',
+      field: dropdownField('language', 'Language', language, ['Auto-detect', 'English'], setLanguage)
+    },
+    { id: 'voice', label: 'Voice', field: dropdownField('voice', 'Voice', voice, ['Bot', 'User'], setVoice) },
+    {
+      id: 'analytics',
+      label: 'Share analytics',
+      field: (
+        <Switch
+          id="analytics"
+          aria-labelledby="analytics-label"
+          isChecked={isAnalyticsShared}
+          onChange={(_event, checked) => setIsAnalyticsShared(checked)}
+        />
+      )
+    },
+    { id: 'archived-chat', label: 'Archived chats', field: <Button id="archived-chat">Manage</Button> },
+    { id: 'archive-all', label: 'Archived all chats', field: <Button id="archive-all">Archive all</Button> },
+    {
+      id: 'delete-all',
+      label: 'Delete all chats',
+      field: (
+        <Button id="delete-all" variant="danger">
+          Delete all
+        </Button>
+      )
+    }
+  ];
+
+  return (
+    <div className="pf-v6-u-w-100">
+      <div className="pf-v6-u-w-100 pf-v6-u-mx-auto" style={{ maxWidth: '60rem' }}>
+        <Flex
+          justifyContent={{ default: 'justifyContentSpaceBetween' }}
+          alignItems={{ default: 'alignItemsCenter' }}
+          className="pf-v6-u-p-lg"
+        >
+          <Title headingLevel="h1" size="2xl">
+            Settings
+          </Title>
+          <Tooltip triggerRef={closeButtonRef} content="Close settings" position="bottom" aria="none" />
+          <Button
+            ref={closeButtonRef}
+            variant="plain"
+            icon={<RhMicronsCloseIcon />}
+            aria-label="Close settings"
+            onClick={onClose}
+          />
+        </Flex>
+        <Divider />
+        <PlainTextSettingsForm fields={fields} />
+      </div>
+    </div>
+  );
+};
+
+export const FullscreenDockedNav: FunctionComponent = () => {
+  const [messages, setMessages] = useState<MessageProps[]>(initialMessages);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [areSettingsOpen, setAreSettingsOpen] = useState(false);
+  const [announcement, setAnnouncement] = useState<string>();
+  const newChatRef = useRef<HTMLAnchorElement>(null);
+  const settingsRef = useRef<HTMLAnchorElement>(null);
+
+  const closeSettings = () => {
+    setAreSettingsOpen(false);
+    window.requestAnimationFrame(() => settingsRef.current?.focus());
+  };
+
+  const startNewChat = () => {
+    setMessages([]);
+    setIsDrawerOpen(false);
+    setAreSettingsOpen(false);
+  };
+
+  const sendMessage = (content: string) => {
+    const message: MessageProps = {
+      id: Date.now().toString(),
+      role: 'user',
+      content,
+      name: 'You',
+      avatar: userAvatar,
+      timestamp: new Date().toLocaleString(),
+      avatarProps: { isBordered: true }
+    };
+    setMessages((currentMessages) => [...currentMessages, message]);
+    setAnnouncement(`Message from You: ${content}`);
+  };
+
+  const dockedNav = (
+    <>
+      <style>{hamburgerHoverStyles}</style>
+      <div className="pf-chatbot__canvas-docked-nav pf-v6-u-h-100 pf-v6-u-p-sm">
+        <Masthead variant="docked">
+          <MastheadMain>
+            <MastheadToggle>
+              <PageToggleButton
+                className="pf-chatbot__canvas-history-toggle"
+                aria-label="Chat history"
+                isHamburgerButton
+                isSidebarOpen={isDrawerOpen}
+                onSidebarToggle={() => setIsDrawerOpen((open) => !open)}
+              />
+            </MastheadToggle>
+            <MastheadBrand>
+              <MastheadLogo isCompact>
+                <Brand src={PFIconLogoColor} alt="PatternFly" heights={{ default: '37px' }} />
+              </MastheadLogo>
+            </MastheadBrand>
+          </MastheadMain>
+          <MastheadContent>
+            <Divider />
+            <Nav
+              variant="docked"
+              aria-label="Chatbot navigation"
+              className="pf-v6-u-flex-1 pf-v6-u-align-content-space-between"
+            >
+              <NavList>
+                <NavItem
+                  itemId="new-chat"
+                  aria-label="New chat"
+                  icon={<RhUiEditFillIcon />}
+                  component="button"
+                  preventDefault
+                  anchorRef={newChatRef}
+                  onClick={startNewChat}
+                >
+                  New chat
+                </NavItem>
+              </NavList>
+              <NavList className="pf-v6-u-mt-auto">
+                <NavItem
+                  itemId="settings"
+                  aria-label="Settings"
+                  icon={<RhUiSettingsFillIcon />}
+                  component="button"
+                  preventDefault
+                  anchorRef={settingsRef}
+                  onClick={() => {
+                    setIsDrawerOpen(false);
+                    setAreSettingsOpen(true);
+                  }}
+                >
+                  Settings
+                </NavItem>
+              </NavList>
+            </Nav>
+            <Tooltip aria="none" aria-live="off" triggerRef={newChatRef} content="New chat" />
+            <Tooltip aria="none" aria-live="off" triggerRef={settingsRef} content="Settings" />
+            <Avatar
+              className="pf-v6-u-mt-md pf-v6-u-mb-md pf-v6-u-mx-auto"
+              src={userAvatar}
+              alt="User profile"
+              size="md"
+              isBordered
+            />
+          </MastheadContent>
+        </Masthead>
+      </div>
+    </>
+  );
+
+  return (
+    <Chatbot displayMode={ChatbotDisplayMode.fullscreen} dockedNav={dockedNav}>
+      <div className="pf-chatbot__canvas">
+        <ChatbotConversationHistoryNav
+          displayMode={ChatbotDisplayMode.fullscreen}
+          isDrawerOpen={isDrawerOpen}
+          setIsDrawerOpen={setIsDrawerOpen}
+          onDrawerToggle={() => setIsDrawerOpen((open) => !open)}
+          conversations={{ Today: conversations }}
+          activeItemId="1"
+          onNewChat={startNewChat}
+          drawerCloseButtonProps={{ 'aria-label': 'Close chat history' }}
+          drawerContent={
+            <div className="pf-chatbot__canvas">
+              {areSettingsOpen ? (
+                <SettingsPanel onClose={closeSettings} />
+              ) : (
+                <div className="pf-chatbot__canvas-column">
+                  <ChatbotContent>
+                    <MessageBox
+                      ariaLabel="Scrollable message log for ChatBot"
+                      announcement={announcement}
+                      position="bottom"
+                    >
+                      <ChatbotWelcomePrompt
+                        title="Hello, Chatbot User"
+                        description="How may I help you today?"
+                        prompts={welcomePrompts}
+                      />
+                      {messages.map((message) => (
+                        <Message key={message.id} {...message} />
+                      ))}
+                    </MessageBox>
+                  </ChatbotContent>
+                  <ChatbotFooter>
+                    <MessageBar onSendMessage={sendMessage} attachButtonPosition="start" alwayShowSendButton />
+                    <ChatbotFootnote
+                      label="Always review AI-generated content prior to use."
+                      popover={{
+                        title: 'AI-generated content',
+                        description: 'Always review AI-generated content prior to use.',
+                        showClose: true
+                      }}
+                    />
+                  </ChatbotFooter>
+                </div>
+              )}
+            </div>
+          }
+        />
+      </div>
+    </Chatbot>
+  );
+};

package/patternfly-docs/patternfly-docs.config.js

@@ -1,6 +1,6 @@
 // This module is shared between NodeJS and babelled ES5
 module.exports = {
-  sideNavItems: [{ section: 'extensions' }],
+  sideNavItems: [{ section: 'extensions' }, { section: 'patterns' }],
   topNavItems: [],
   hasThemeSwitcher: true,
   hasRTLSwitcher: true,

package/src/Canvas/Canvas.scss

@@ -0,0 +1,150 @@
+// ============================================================================
+// Canvas
+// ============================================================================
+.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);
+}
+
+// Drawer
+// ----------------------------------------------------------------------------
+.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-v6-c-drawer__main,
+  > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
+  > .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);
+}
+
+// Panel
+// ----------------------------------------------------------------------------
+.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-v6-c-drawer__panel-main {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+  }
+
+  .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-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-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-v6-c-button {
+        border-radius: var(--pf-t--global--border--radius--pill);
+        justify-content: center;
+        align-items: center;
+
+        &::before {
+          border-radius: inherit;
+        }
+      }
+    }
+  }
+}
+
+.pf-chatbot__canvas-editor {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+
+  .pf-v6-c-code-editor {
+    --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  }
+}

package/src/Chatbot/Chatbot.scss

@@ -141,6 +141,19 @@
   }
 }
 
+// ============================================================================
+// Chatbot With Docked Nav
+// ============================================================================
+.pf-chatbot--docked-nav {
+  .pf-chatbot-container {
+    flex-direction: row;
+  }
+
+  .pf-chatbot__header-container {
+    display: none;
+  }
+}
+
 .pf-chatbot-container--embedded {
   min-height: 100%;
 }
@@ -180,4 +193,3 @@
     border: unset;
   }
 }
-

package/src/Chatbot/Chatbot.test.tsx

@@ -36,4 +36,15 @@ describe('Chatbot', () => {
     );
     expect(screen.getByTestId('chatbot')).toHaveClass('pf-m-compact');
   });
+
+  it('should render docked navigation and apply the docked navigation class', () => {
+    render(
+      <Chatbot data-testid="chatbot" dockedNav={<nav aria-label="Chatbot navigation">Navigation</nav>}>
+        Chatbot Content
+      </Chatbot>
+    );
+
+    expect(screen.getByTestId('chatbot')).toHaveClass('pf-chatbot--docked-nav');
+    expect(screen.getByRole('navigation', { name: 'Chatbot navigation' })).toBeInTheDocument();
+  });
 });

package/src/Chatbot/Chatbot.tsx

@@ -20,6 +20,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 enum ChatbotDisplayMode {
@@ -38,10 +40,11 @@ const ChatbotBase: FunctionComponent<ChatbotProps> = ({
   innerRef,
   ariaLabel,
   isCompact,
+  dockedNav,
   ...props
 }: ChatbotProps) => (
   <div
-    className={`pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : 'pf-chatbot--visible'}  ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
+    className={`pf-chatbot pf-chatbot--${displayMode} ${dockedNav ? 'pf-chatbot--docked-nav' : ''} ${!isVisible ? 'pf-chatbot--hidden' : 'pf-chatbot--visible'}  ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
     {...props}
   >
     {/* Ref is intended for use with skip to chatbot links, etc. */}
@@ -52,6 +55,7 @@ const ChatbotBase: FunctionComponent<ChatbotProps> = ({
         tabIndex={-1}
         ref={innerRef}
       >
+        {dockedNav && <aside className="pf-chatbot__docked-nav">{dockedNav}</aside>}
         {children}
       </section>
     ) : undefined}