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

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

@@ -42,10 +42,10 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 const footnoteProps = {
-  label: 'Lightspeed uses AI. Check for mistakes.',
+  label: 'ChatBot uses AI. Check for mistakes.',
   popover: {
     title: 'Verify accuracy',
-    description: `While Lightspeed strives for accuracy, there's always a possibility of errors. It's a good practice to verify critical information from reliable sources, especially if it's crucial for decision-making or actions.`,
+    description: `While ChatBot strives for accuracy, there's always a possibility of errors. It's a good practice to verify critical information from reliable sources, especially if it's crucial for decision-making or actions.`,
     bannerImage: {
       src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
       alt: 'Example image for footnote popover'

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

@@ -0,0 +1,206 @@
+import React from 'react';
+
+import {
+  Page,
+  Masthead,
+  MastheadMain,
+  MastheadBrand,
+  MastheadLogo,
+  PageSidebarBody,
+  PageSidebar,
+  MastheadToggle,
+  PageToggleButton
+} 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 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 ChatbotHeader, { ChatbotHeaderMain } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
+import Compare from '@patternfly/chatbot/dist/dynamic/Compare';
+import { BarsIcon } from '@patternfly/react-icons';
+import userAvatar from '../Messages/user_avatar.svg';
+import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+
+export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled }) => {
+  const [messages, setMessages] = React.useState<MessageProps[]>([]);
+  const [announcement, setAnnouncement] = React.useState<string>();
+  const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  // you will likely want to come up with your own unique id function; this is for demo purposes only
+  const generateId = () => {
+    const id = Date.now() + Math.random();
+    return id.toString();
+  };
+
+  const handleSend = (input: string) => {
+    const date = new Date();
+    const newMessages: MessageProps[] = [];
+    messages.forEach((message) => newMessages.push(message));
+    newMessages.push({
+      avatar: userAvatar,
+      avatarProps: { isBordered: true },
+      id: generateId(),
+      name: 'You',
+      role: 'user',
+      content: input,
+      timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`
+    });
+    newMessages.push({
+      avatar: patternflyAvatar,
+      id: generateId(),
+      name,
+      role: 'bot',
+      timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`,
+      isLoading: true
+    });
+    setMessages(newMessages);
+    // make announcement to assistive devices that new messages have been added
+    setAnnouncement(`Message from You: ${input}. Message from ${name} is loading.`);
+
+    // this is for demo purposes only; in a real situation, there would be an API response we would wait for
+    setTimeout(() => {
+      const loadedMessages: MessageProps[] = [];
+      // we can't use structuredClone since messages contains functions, but we can't mutate
+      // items that are going into state or the UI won't update correctly
+      newMessages.forEach((message) => loadedMessages.push(message));
+      loadedMessages.pop();
+      loadedMessages.push({
+        id: generateId(),
+        role: 'bot',
+        content: `API response from ${name} goes here`,
+        name,
+        avatar: patternflyAvatar,
+        isLoading: false,
+        actions: {
+          // eslint-disable-next-line no-console
+          positive: { onClick: () => console.log('Good response') },
+          // eslint-disable-next-line no-console
+          negative: { onClick: () => console.log('Bad response') },
+          // eslint-disable-next-line no-console
+          copy: { onClick: () => console.log('Copy') },
+          // eslint-disable-next-line no-console
+          share: { onClick: () => console.log('Share') },
+          // eslint-disable-next-line no-console
+          listen: { onClick: () => console.log('Listen') }
+        },
+        timestamp: date.toLocaleString()
+      });
+      setMessages(loadedMessages);
+      // make announcement to assistive devices that new message has loaded
+      setAnnouncement(`Message from ${name}: API response goes here`);
+      setIsSendButtonDisabled(false);
+    }, 5000);
+  };
+
+  React.useEffect(() => {
+    if (input) {
+      handleSend(input);
+    }
+  }, [hasNewInput]);
+
+  // Auto-scrolls to the latest message
+  React.useEffect(() => {
+    // don't scroll the first load, but scroll if there's a current stream or a new source has popped up
+    if (messages.length > 0) {
+      scrollToBottomRef.current?.scrollIntoView();
+    }
+  }, [messages]);
+
+  return (
+    <Chatbot displayMode={displayMode}>
+      <ChatbotHeader>
+        <ChatbotHeaderMain>{name}</ChatbotHeaderMain>
+      </ChatbotHeader>
+      <ChatbotContent>
+        <MessageBox ariaLabel={`Scrollable message log for ${name}`} announcement={announcement}>
+          <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+          {messages.map((message) => (
+            <Message key={message.id} {...message} />
+          ))}
+          <div ref={scrollToBottomRef}></div>
+        </MessageBox>
+      </ChatbotContent>
+    </Chatbot>
+  );
+};
+
+export const EmbeddedComparisonChatbotDemo: React.FunctionComponent = () => {
+  const [input, setInput] = React.useState<string>();
+  const [hasNewInput, setHasNewInput] = React.useState(false);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
+
+  const handleSend = (value: string) => {
+    setInput(value);
+    setHasNewInput(!hasNewInput);
+    setIsSendButtonDisabled(true);
+  };
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)}
+            id="fill-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="fill-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page masthead={masthead} sidebar={sidebar} isContentFilled>
+      <div className="pf-chatbot__compare-container">
+        <Compare
+          firstChild={
+            <CompareChild
+              input={input}
+              hasNewInput={hasNewInput}
+              name="ChatBot 1"
+              setIsSendButtonDisabled={setIsSendButtonDisabled}
+            />
+          }
+          secondChild={
+            <CompareChild
+              input={input}
+              hasNewInput={hasNewInput}
+              name="ChatBot 2"
+              setIsSendButtonDisabled={setIsSendButtonDisabled}
+            />
+          }
+          firstChildDisplayName="ChatBot 1"
+          secondChildDisplayName="ChatBot 2"
+        />
+        <ChatbotFooter>
+          <MessageBar
+            onSendMessage={handleSend}
+            hasAttachButton={false}
+            alwayShowSendButton
+            isSendButtonDisabled={isSendButtonDisabled}
+          />
+        </ChatbotFooter>
+      </div>
+    </Page>
+  );
+};

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -44,10 +44,23 @@
     color: var(--pf-t--global--text--color--regular);
     font-size: var(--pf-t--global--font--size--body--lg);
     font-weight: var(--pf-t--global--font--weight--body--default);
+    border-radius: var(--pf-t--global--border--radius--small);
+  }
+  // allows focus state to have border radius
+  .pf-v6-c-menu__list-item.pf-chatbot__menu-item {
+    overflow: hidden;
   }
   .pf-chatbot__history-actions {
     transform: rotate(90deg);
   }
+
+  .pf-chatbot__menu-item--active {
+    background-color: var(--pf-t--global--background--color--action--plain--clicked);
+  }
+
+  button.pf-chatbot__menu-item--active {
+    background-color: initial;
+  }
 }
 
 // Chatbot Header - Drawer
@@ -105,6 +118,7 @@
       border-radius: var(--pf-t--global--border--radius--pill);
       justify-content: center;
       align-items: center;
+      border-radius: var(--pf-t--global--border--radius--small);
     }
   }
 

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -11,7 +11,7 @@ describe('ChatbotConversationHistoryNav', () => {
   const initialConversations: Conversation[] = [
     {
       id: '1',
-      text: 'Lightspeed documentation'
+      text: 'ChatBot documentation'
     }
   ];
 
@@ -25,7 +25,7 @@ describe('ChatbotConversationHistoryNav', () => {
         conversations={initialConversations}
       />
     );
-    expect(screen.queryByText('Lightspeed documentation')).toBeInTheDocument();
+    expect(screen.queryByText('ChatBot documentation')).toBeInTheDocument();
   });
 
   it('should display the conversations for grouped conversations', () => {
@@ -120,7 +120,116 @@ describe('ChatbotConversationHistoryNav', () => {
     });
 
     waitFor(() => {
-      expect(screen.queryByText('Lightspeed documentation')).not.toBeInTheDocument();
+      expect(screen.queryByText('ChatBot documentation')).not.toBeInTheDocument();
     });
   });
+
+  it('should be resizable', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        drawerPanelContentProps={{ isResizable: true, minSize: '200px' }}
+      />
+    );
+    expect(screen.getByRole('dialog', { name: /Resize/i })).toBeTruthy();
+    expect(screen.getByRole('separator', { name: /Resize/i })).toBeTruthy();
+    expect(screen.getByRole('dialog', { name: /Resize/i })).toHaveAttribute(
+      'style',
+      '--pf-v6-c-drawer__panel--md--FlexBasis: 384px; --pf-v6-c-drawer__panel--md--FlexBasis--min: 200px;'
+    );
+  });
+
+  it('should accept drawerContentProps', () => {
+    const { container } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        drawerContentProps={{ className: 'test' }}
+      />
+    );
+    const element = container.querySelector('.test');
+    expect(element).toBeInTheDocument();
+  });
+
+  it('should accept drawerContentBodyProps', () => {
+    const { container } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        drawerContentBodyProps={{ className: 'test' }}
+      />
+    );
+    const element = container.querySelector('.test');
+    expect(element).toBeInTheDocument();
+  });
+
+  it('should accept drawerHeadProps', () => {
+    const { container } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        drawerHeadProps={{ className: 'test' }}
+      />
+    );
+    const element = container.querySelector('.test');
+    expect(element).toBeInTheDocument();
+  });
+
+  it('should accept drawerActionsProps', () => {
+    const { container } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        drawerActionsProps={{ className: 'test' }}
+      />
+    );
+    const element = container.querySelector('.test');
+    expect(element).toBeInTheDocument();
+  });
+
+  it('should accept drawerCloseButtonProps', () => {
+    const { container } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        drawerCloseButtonProps={{ className: 'test' }}
+      />
+    );
+    const element = container.querySelector('.test');
+    expect(element).toBeInTheDocument();
+  });
+
+  it('should accept drawerPanelBodyProps', () => {
+    const { container } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        drawerPanelBodyProps={{ className: 'test' }}
+      />
+    );
+    const element = container.querySelector('.test');
+    expect(element).toBeInTheDocument();
+  });
 });

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -20,7 +20,16 @@ import {
   MenuList,
   MenuGroup,
   MenuItem,
-  MenuContent
+  MenuContent,
+  MenuItemProps,
+  MenuProps,
+  DrawerPanelContentProps,
+  DrawerContentProps,
+  DrawerContentBodyProps,
+  DrawerHeadProps,
+  DrawerActionsProps,
+  DrawerCloseButtonProps,
+  DrawerPanelBodyProps
 } from '@patternfly/react-core';
 
 import { OutlinedCommentAltIcon } from '@patternfly/react-icons';
@@ -44,6 +53,8 @@ export interface Conversation {
   label?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
+  /** Additional props passed to conversation menu item */
+  additionalProps?: MenuItemProps;
 }
 export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   /** Function called to toggle drawer */
@@ -76,6 +87,22 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   reverseButtonOrder?: boolean;
   /** Custom test id for the drawer actions */
   drawerActionsTestId?: string;
+  /** Additional props applied to menu  */
+  menuProps?: MenuProps;
+  /** Additional props applied to panel */
+  drawerPanelContentProps?: DrawerPanelContentProps;
+  /** Additional props applied to drawer content */
+  drawerContentProps?: Omit<DrawerContentProps, 'panelContent'>;
+  /** Additional props applied to drawer content body */
+  drawerContentBodyProps?: DrawerContentBodyProps;
+  /** Additional props applied to drawer head */
+  drawerHeadProps?: DrawerHeadProps;
+  /** Additional props applied to drawer actions */
+  drawerActionsProps?: DrawerActionsProps;
+  /** Additional props applied to drawer close button */
+  drawerCloseButtonProps?: DrawerCloseButtonProps;
+  /** Additional props appleid to drawer panel body */
+  drawerPanelBodyProps?: DrawerPanelBodyProps;
 }
 
 export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -94,6 +121,14 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   displayMode,
   reverseButtonOrder = false,
   drawerActionsTestId = 'chatbot-nav-drawer-actions',
+  menuProps,
+  drawerPanelContentProps,
+  drawerContentProps,
+  drawerContentBodyProps,
+  drawerHeadProps,
+  drawerActionsProps,
+  drawerCloseButtonProps,
+  drawerPanelBodyProps,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = React.useRef<HTMLDivElement>(null);
@@ -104,7 +139,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
 
   const getNavItem = (conversation: Conversation) => (
     <MenuItem
-      className="pf-chatbot__menu-item"
+      className={`pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`}
       itemId={conversation.id}
       key={conversation.id}
       {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
@@ -121,6 +156,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
             )
           }
         : {})}
+      {...conversation.additionalProps}
       /* eslint-enable indent */
     >
       {conversation.text}
@@ -159,19 +195,20 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   // - Consumers should pass an array to <Chatbot> of the list of conversations
   // - Groups could be optional, but items need to be ordered by date
   const menuContent = (
-    <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId}>
+    <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId} {...menuProps}>
       <MenuContent>{buildMenu()}</MenuContent>
     </Menu>
   );
 
   const panelContent = (
-    <DrawerPanelContent focusTrap={{ enabled: true }} minSize="384px" maxSize="384px">
-      <DrawerHead>
+    <DrawerPanelContent focusTrap={{ enabled: true }} defaultSize="384px" {...drawerPanelContentProps}>
+      <DrawerHead {...drawerHeadProps}>
         <DrawerActions
           data-testid={drawerActionsTestId}
           className={reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : ''}
+          {...drawerActionsProps}
         >
-          <DrawerCloseButton onClick={onDrawerToggle} />
+          <DrawerCloseButton onClick={onDrawerToggle} {...drawerCloseButtonProps} />
           {onNewChat && <Button onClick={onNewChat}>{newChatButtonText}</Button>}
         </DrawerActions>
       </DrawerHead>
@@ -184,7 +221,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
           />
         </div>
       )}
-      <DrawerPanelBody>{menuContent}</DrawerPanelBody>
+      <DrawerPanelBody {...drawerPanelBodyProps}>{menuContent}</DrawerPanelBody>
     </DrawerPanelContent>
   );
 
@@ -209,8 +246,8 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
       isInline={displayMode === ChatbotDisplayMode.fullscreen || displayMode === ChatbotDisplayMode.embedded}
       {...props}
     >
-      <DrawerContent panelContent={panelContent}>
-        <DrawerContentBody>
+      <DrawerContent panelContent={panelContent} {...drawerContentProps}>
+        <DrawerContentBody {...drawerContentBodyProps}>
           <>
             <div
               className={`${isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} `}

package/src/ChatbotFooter/ChatbotFooter.scss

@@ -33,7 +33,8 @@
       }
     }
     .pf-chatbot__footer-container {
-      width: 60rem;
+      width: 90%;
+      max-width: 60rem;
       padding: var(--pf-t--global--spacer--sm) 0;
     }
   }

package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { CloseIcon } from '@patternfly/react-icons';
+
+export interface ChatbotHeaderCloseButtonProps {
+  /** Callback function for when button is clicked */
+  onClick: () => void;
+  /** Custom classname for the header component */
+  className?: string;
+  /** Props spread to the PF Tooltip component wrapping the display mode dropdown */
+  tooltipProps?: TooltipProps;
+  /** Aria label for menu */
+  menuAriaLabel?: string;
+  /** Ref applied to menu */
+  innerRef?: React.Ref<HTMLButtonElement>;
+  /** Content used in tooltip */
+  tooltipContent?: string;
+}
+
+const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseButtonProps> = ({
+  className,
+  onClick,
+  tooltipProps,
+  menuAriaLabel = 'Close',
+  innerRef,
+  tooltipContent = 'Close'
+}: ChatbotHeaderCloseButtonProps) => (
+  <div className={`pf-chatbot__menu ${className}`}>
+    <Tooltip content={tooltipContent} position="bottom" {...tooltipProps}>
+      <Button
+        className="pf-chatbot__button--toggle-menu"
+        variant="plain"
+        onClick={onClick}
+        aria-label={menuAriaLabel}
+        ref={innerRef}
+        icon={
+          <Icon size="xl" isInline>
+            <CloseIcon />
+          </Icon>
+        }
+      />
+    </Tooltip>
+  </div>
+);
+
+export const ChatbotHeaderCloseButton = React.forwardRef(
+  (props: ChatbotHeaderCloseButtonProps, ref: React.Ref<HTMLButtonElement>) => (
+    <ChatbotHeaderCloseButtonBase innerRef={ref} {...props} />
+  )
+);

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -14,6 +14,8 @@ export interface ChatbotHeaderMenuProps {
   menuAriaLabel?: string;
   /** Ref applied to menu */
   innerRef?: React.Ref<HTMLButtonElement>;
+  /** Content used in tooltip */
+  tooltipContent?: string;
 }
 
 const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = ({
@@ -21,10 +23,11 @@ const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = (
   onMenuToggle,
   tooltipProps,
   menuAriaLabel = 'Toggle menu',
-  innerRef
+  innerRef,
+  tooltipContent = 'Menu'
 }: ChatbotHeaderMenuProps) => (
   <div className={`pf-chatbot__menu ${className}`}>
-    <Tooltip content="Menu" position="bottom" {...tooltipProps}>
+    <Tooltip content={tooltipContent} position="bottom" {...tooltipProps}>
       <Button
         className="pf-chatbot__button--toggle-menu"
         variant="plain"

package/src/ChatbotHeader/index.ts

@@ -7,3 +7,4 @@ export * from './ChatbotHeaderMenu';
 export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
+export * from './ChatbotHeaderCloseButton';

package/src/CodeModal/CodeModal.scss

@@ -74,3 +74,11 @@
     }
   }
 }
+
+.pf-chatbot__code-modal-body {
+  flex: 1;
+}
+
+.pf-chatbot__code-modal--fullscreen {
+  height: inherit; // override shared modal so code editor works in full screen
+}

package/src/CodeModal/CodeModal.tsx

@@ -87,17 +87,6 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
     }
   };
 
-  /* eslint-disable indent */
-  const getHeight = (displayMode: ChatbotDisplayMode) => {
-    switch (displayMode) {
-      case ChatbotDisplayMode.docked:
-        return '100vh';
-      default:
-        return '45vh';
-    }
-  };
-  /* eslint-enable indent */
-
   const modal = (
     <ChatbotModal
       isOpen={isModalOpen}
@@ -114,7 +103,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
           <StackItem className="pf-chatbot__code-modal-file-details">
             <FileDetails fileName={fileName} />
           </StackItem>
-          <StackItem>
+          <StackItem className="pf-chatbot__code-modal-body">
             <CodeEditor
               isDarkTheme
               isLineNumbersVisible={isLineNumbersVisible}
@@ -126,7 +115,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
               onEditorDidMount={onEditorDidMount}
               onCodeChange={onCodeChange}
               className={codeEditorClassName}
-              height={getHeight(displayMode)}
+              isFullHeight
               options={{
                 glyphMargin: false,
                 folding: false