@patternfly/chatbot 2.2.0-prerelease.31 → 2.2.0-prerelease.33

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

@@ -0,0 +1,453 @@
+import React from 'react';
+
+import {
+  Brand,
+  DropdownList,
+  DropdownItem,
+  Page,
+  Masthead,
+  MastheadMain,
+  MastheadBrand,
+  MastheadLogo,
+  PageSidebarBody,
+  PageSidebar,
+  MastheadToggle,
+  PageToggleButton,
+  SkipToContent,
+  Drawer,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerPanelContent
+} 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, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import ChatbotHeader, {
+  ChatbotHeaderMenu,
+  ChatbotHeaderMain,
+  ChatbotHeaderTitle,
+  ChatbotHeaderActions,
+  ChatbotHeaderSelectorDropdown
+} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
+import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
+import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
+import { BarsIcon } from '@patternfly/react-icons';
+import userAvatar from '../Messages/user_avatar.svg';
+import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+
+const footnoteProps = {
+  label: 'ChatBot uses AI. Check for mistakes.',
+  popover: {
+    title: 'Verify accuracy',
+    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'
+    },
+    cta: {
+      label: 'Got it',
+      onClick: () => {
+        alert('Do something!');
+      }
+    },
+    link: {
+      label: 'Learn more',
+      url: 'https://www.redhat.com/'
+    }
+  }
+};
+
+const markdown = `A paragraph with *emphasis* and **strong importance**.
+
+> A block quote with ~strikethrough~ and a URL: https://reactjs.org.
+
+Here is an inline code - \`() => void\`
+
+Here is some YAML code:
+
+~~~yaml
+apiVersion: helm.openshift.io/v1beta1/
+kind: HelmChartRepository
+metadata:
+  name: azure-sample-repo0oooo00ooo
+spec:
+  connectionConfig:
+  url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
+~~~
+
+Here is some JavaScript code:
+
+~~~js
+import React from 'react';
+
+const MessageLoading = () => (
+  <div className="pf-chatbot__message-loading">
+    <span className="pf-chatbot__message-loading-dots">
+      <span className="pf-v6-screen-reader">Loading message</span>
+    </span>
+  </div>
+);
+
+export default MessageLoading;
+
+~~~
+`;
+
+// It's important to set a date and timestamp prop since the Message components re-render.
+// The timestamps re-render with them.
+const date = new Date();
+
+const initialMessages: MessageProps[] = [
+  {
+    id: '1',
+    role: 'user',
+    content: 'Hello, can you give me an example of what you can do?',
+    name: 'User',
+    avatar: userAvatar,
+    timestamp: date.toLocaleString(),
+    avatarProps: { isBordered: true }
+  },
+  {
+    id: '2',
+    role: 'bot',
+    content: markdown,
+    name: 'Bot',
+    avatar: patternflyAvatar,
+    timestamp: date.toLocaleString(),
+    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') }
+    }
+  }
+];
+
+const welcomePrompts = [
+  {
+    title: 'Topic 1',
+    message: 'Helpful prompt for Topic 1'
+  },
+  {
+    title: 'Topic 2',
+    message: 'Helpful prompt for Topic 2'
+  }
+];
+
+const initialConversations = {
+  Today: [{ id: '1', text: 'Hello, can you give me an example of what you can do?' }],
+  'This month': [
+    {
+      id: '2',
+      text: 'Enterprise Linux installation and setup'
+    },
+    { id: '3', text: 'Troubleshoot system crash' }
+  ],
+  March: [
+    { id: '4', text: 'Ansible security and updates' },
+    { id: '5', text: 'Red Hat certification' },
+    { id: '6', text: 'Lightspeed user documentation' }
+  ],
+  February: [
+    { id: '7', text: 'Crashing pod assistance' },
+    { id: '8', text: 'OpenShift AI pipelines' },
+    { id: '9', text: 'Updating subscription plan' },
+    { id: '10', text: 'Red Hat licensing options' }
+  ],
+  January: [
+    { id: '11', text: 'RHEL system performance' },
+    { id: '12', text: 'Manage user accounts' }
+  ]
+};
+
+export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
+  const [messages, setMessages] = React.useState<MessageProps[]>(initialMessages);
+  const [selectedModel, setSelectedModel] = React.useState('Granite 7B');
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
+  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+    initialConversations
+  );
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
+  const [announcement, setAnnouncement] = React.useState<string>();
+  const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
+  const historyRef = React.useRef<HTMLButtonElement>(null);
+  const drawerRef = React.useRef<HTMLDivElement>();
+
+  const displayMode = ChatbotDisplayMode.drawer;
+  const isExpanded = true;
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  // Auto-scrolls to the latest message
+  React.useEffect(() => {
+    // don't scroll the first load - in this demo, we know we start with two messages
+    if (messages.length > 2) {
+      scrollToBottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [messages]);
+
+  const onSelectModel = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    setSelectedModel(value as string);
+  };
+
+  // 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 = (message: string) => {
+    setIsSendButtonDisabled(true);
+    const newMessages: 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
+    messages.forEach((message) => newMessages.push(message));
+    // It's important to set a timestamp prop since the Message components re-render.
+    // The timestamps re-render with them.
+    const date = new Date();
+    newMessages.push({
+      id: generateId(),
+      role: 'user',
+      content: message,
+      name: 'User',
+      avatar: userAvatar,
+      timestamp: date.toLocaleString(),
+      avatarProps: { isBordered: true }
+    });
+    newMessages.push({
+      id: generateId(),
+      role: 'bot',
+      content: 'API response goes here',
+      name: 'Bot',
+      avatar: patternflyAvatar,
+      isLoading: true,
+      timestamp: date.toLocaleString()
+    });
+    setMessages(newMessages);
+    // make announcement to assistive devices that new messages have been added
+    setAnnouncement(`Message from User: ${message}. Message from Bot 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 goes here',
+        name: 'Bot',
+        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 Bot: API response goes here`);
+      setIsSendButtonDisabled(false);
+    }, 5000);
+  };
+
+  const findMatchingItems = (targetValue: string) => {
+    let filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => {
+      const filteredItems = items.filter((item) => item.text.toLowerCase().includes(targetValue.toLowerCase()));
+      if (filteredItems.length > 0) {
+        acc[key] = filteredItems;
+      }
+      return acc;
+    }, {});
+
+    // append message if no items are found
+    if (Object.keys(filteredConversations).length === 0) {
+      filteredConversations = [{ id: '13', noIcon: true, text: 'No results found' }];
+    }
+    return filteredConversations;
+  };
+
+  const iconLogo = (
+    <>
+      <Brand className="show-light" src={PFIconLogoColor} alt="PatternFly" />
+      <Brand className="show-dark" src={PFIconLogoReverse} alt="PatternFly" />
+    </>
+  );
+  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>
+  );
+
+  const skipToChatbot = (event: React.MouseEvent) => {
+    event.preventDefault();
+    if (historyRef.current) {
+      historyRef.current.focus();
+    }
+  };
+
+  const skipToContent = (
+    /* You can also add a SkipToContent for your main content here */
+    <SkipToContent href="#" onClick={skipToChatbot}>
+      Skip to chatbot
+    </SkipToContent>
+  );
+
+  const chatbot = (
+    <Chatbot displayMode={displayMode}>
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => {
+          setIsDrawerOpen(!isDrawerOpen);
+          setConversations(initialConversations);
+        }}
+        isDrawerOpen={isDrawerOpen}
+        setIsDrawerOpen={setIsDrawerOpen}
+        activeItemId="1"
+        // eslint-disable-next-line no-console
+        onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}
+        conversations={conversations}
+        onNewChat={() => {
+          setIsDrawerOpen(!isDrawerOpen);
+          setMessages([]);
+          setConversations(initialConversations);
+        }}
+        handleTextInputChange={(value: string) => {
+          if (value === '') {
+            setConversations(initialConversations);
+          }
+          // this is where you would perform search on the items in the drawer
+          // and update the state
+          const newConversations: { [key: string]: Conversation[] } = findMatchingItems(value);
+          setConversations(newConversations);
+        }}
+        drawerContent={
+          <>
+            <ChatbotHeader>
+              <ChatbotHeaderMain>
+                <ChatbotHeaderMenu
+                  ref={historyRef}
+                  aria-expanded={isDrawerOpen}
+                  onMenuToggle={() => setIsDrawerOpen(!isDrawerOpen)}
+                />
+                <ChatbotHeaderTitle>{iconLogo}</ChatbotHeaderTitle>
+              </ChatbotHeaderMain>
+              <ChatbotHeaderActions>
+                <ChatbotHeaderSelectorDropdown value={selectedModel} onSelect={onSelectModel}>
+                  <DropdownList>
+                    <DropdownItem value="Granite 7B" key="granite">
+                      Granite 7B
+                    </DropdownItem>
+                    <DropdownItem value="Llama 3.0" key="llama">
+                      Llama 3.0
+                    </DropdownItem>
+                    <DropdownItem value="Mistral 3B" key="mistral">
+                      Mistral 3B
+                    </DropdownItem>
+                  </DropdownList>
+                </ChatbotHeaderSelectorDropdown>
+              </ChatbotHeaderActions>
+            </ChatbotHeader>
+            <ChatbotContent>
+              {/* Update the announcement prop on MessageBox whenever a new message is sent
+                 so that users of assistive devices receive sufficient context  */}
+              <MessageBox announcement={announcement}>
+                <ChatbotWelcomePrompt
+                  title="Hello, Chatbot User"
+                  description="How may I help you today?"
+                  prompts={welcomePrompts}
+                />
+                {/* This code block enables scrolling to the top of the last message.
+                  You can instead choose to move the div with scrollToBottomRef on it below 
+                  the map of messages, so that users are forced to scroll to the bottom.
+                  If you are using streaming, you will want to take a different approach; 
+                  see: https://github.com/patternfly/chatbot/issues/201#issuecomment-2400725173 */}
+                {messages.map((message, index) => {
+                  if (index === messages.length - 1) {
+                    return (
+                      <>
+                        <div ref={scrollToBottomRef}></div>
+                        <Message key={message.id} {...message} />
+                      </>
+                    );
+                  }
+                  return <Message key={message.id} {...message} />;
+                })}
+              </MessageBox>
+            </ChatbotContent>
+            <ChatbotFooter>
+              <MessageBar onSendMessage={handleSend} hasMicrophoneButton isSendButtonDisabled={isSendButtonDisabled} />
+              <ChatbotFootnote {...footnoteProps} />
+            </ChatbotFooter>
+          </>
+        }
+      ></ChatbotConversationHistoryNav>
+    </Chatbot>
+  );
+
+  const panelContent = <DrawerPanelContent>{chatbot}</DrawerPanelContent>;
+
+  return (
+    <Drawer isExpanded={isExpanded} isInline onExpand={onExpand}>
+      <DrawerContent panelContent={panelContent}>
+        <DrawerContentBody>
+          <Page skipToContent={skipToContent} masthead={masthead} sidebar={sidebar} isContentFilled></Page>
+        </DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+};

package/src/Chatbot/Chatbot.scss

@@ -106,3 +106,22 @@
 .pf-chatbot-container--fullscreen {
   border-radius: unset;
 }
+
+// ============================================================================
+// Chatbot Display Mode - Drawer
+// ============================================================================
+.pf-chatbot--drawer {
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  box-shadow: none;
+  border-left: var(--pf-t--global--border--width--divider--default) solid;
+  border-color: var(--pf-t--global--border--color--default);
+
+  .pf-chatbot-container {
+    border-radius: var(--pf-t--global--border--radius--sharp);
+  }
+}

package/src/Chatbot/Chatbot.tsx

@@ -23,7 +23,8 @@ export enum ChatbotDisplayMode {
   default = 'default',
   embedded = 'embedded',
   docked = 'docked',
-  fullscreen = 'fullscreen'
+  fullscreen = 'fullscreen',
+  drawer = 'drawer'
 }
 
 const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({

package/src/ChatbotContent/ChatbotContent.scss

@@ -18,6 +18,7 @@
 // Chatbot Display Mode - Fullscreen and Embedded
 // ============================================================================
 @media screen and (min-width: 64rem) {
+  .pf-chatbot--drawer,
   .pf-chatbot--fullscreen,
   .pf-chatbot--embedded {
     .pf-chatbot__content {

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -155,6 +155,7 @@
 // ============================================================================
 // Chatbot Display Mode - Fullscreen
 // ============================================================================
+.pf-chatbot--drawer,
 .pf-chatbot--fullscreen {
   .pf-chatbot__history.pf-v6-c-drawer {
     height: 100vh;
@@ -181,6 +182,7 @@
 }
 
 .pf-chatbot--docked,
+.pf-chatbot--drawer,
 .pf-chatbot--embedded,
 .pf-chatbot--fullscreen {
   .pf-chatbot__history {

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -285,7 +285,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
         <DrawerContentBody {...drawerContentBodyProps}>
           <>
             <div
-              className={`${isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} `}
+              className={`${isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked || displayMode === ChatbotDisplayMode.drawer) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} `}
             ></div>
             {drawerContent}
           </>

package/src/ChatbotFooter/ChatbotFooter.scss

@@ -48,3 +48,12 @@
     padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
   }
 }
+
+// ============================================================================
+// Chatbot Display Mode - Drawer
+// ============================================================================
+.pf-chatbot--drawer {
+  .pf-chatbot__footer-container {
+    padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
+  }
+}

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -70,8 +70,9 @@
 }
 
 // ============================================================================
-// Chatbot Display Mode - Docked
+// Chatbot Display Mode - Docked and Drawer
 // ============================================================================
+.pf-chatbot--drawer,
 .pf-chatbot--docked {
   .pf-chatbot__header {
     background-color: var(--pf-t--chatbot--background);

package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx

@@ -17,27 +17,27 @@ describe('ChatbotHeaderTitle', () => {
   });
 
   it('should render title for default display mode', () => {
-    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.default} showOnDefault={'Default header title'} />);
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.default} showOnDefault="Default header title" />);
     expect(screen.getByText('Default header title')).toBeTruthy();
   });
 
   it('should render title for docked display mode', () => {
-    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDocked={'Docked header title'} />);
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDocked="Docked header title" />);
     expect(screen.getByText('Docked header title')).toBeTruthy();
   });
 
   it('should fallback to default title when docked display mode title is not configured', () => {
-    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDefault={'Default header title'} />);
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDefault="Default header title" />);
     expect(screen.getByText('Default header title')).toBeTruthy();
   });
 
   it('should render title for embedded display mode', () => {
-    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnEmbedded={'Embedded header title'} />);
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnEmbedded="Embedded header title" />);
     expect(screen.getByText('Embedded header title')).toBeTruthy();
   });
 
   it('should fallback to default title when embedded display mode title is not configured', () => {
-    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnDefault={'Default header title'} />);
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnDefault="Default header title" />);
     expect(screen.getByText('Default header title')).toBeTruthy();
   });
 
@@ -45,7 +45,7 @@ describe('ChatbotHeaderTitle', () => {
     render(
       <ChatbotHeaderTitle
         displayMode={ChatbotDisplayMode.fullscreen}
-        showOnFullScreen={'Fullscreen header title'}
+        showOnFullScreen="Fullscreen header title"
         className="custom-header-class"
       />
     );
@@ -53,7 +53,23 @@ describe('ChatbotHeaderTitle', () => {
   });
 
   it('should fallback to default title when fullscreen display mode title is not configured', () => {
-    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.fullscreen} showOnDefault={'Default header title'} />);
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.fullscreen} showOnDefault="Default header title" />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for drawer display mode', () => {
+    render(
+      <ChatbotHeaderTitle
+        displayMode={ChatbotDisplayMode.drawer}
+        showOnDrawer="Drawer header title"
+        className="custom-header-class"
+      />
+    );
+    expect(screen.getByText('Drawer header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when drawer display mode title is not configured', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.drawer} showOnDefault="Default header title" />);
     expect(screen.getByText('Default header title')).toBeTruthy();
   });
 });

package/src/ChatbotHeader/ChatbotHeaderTitle.tsx

@@ -14,8 +14,10 @@ export interface ChatbotHeaderTitleProps {
   showOnFullScreen?: React.ReactNode | string;
   /** Content to display on docked screen */
   showOnDocked?: React.ReactNode | string;
-  /** Content to display on overlay screen */
+  /** Content to display on embedded screen */
   showOnEmbedded?: React.ReactNode | string;
+  /** Content to display in drawer mode */
+  showOnDrawer?: React.ReactNode | string;
   /** Content to display by default; this will be shown if a case is not explicitly set */
   showOnDefault?: React.ReactNode | string;
 }
@@ -27,10 +29,11 @@ export const ChatbotHeaderTitle: React.FunctionComponent<ChatbotHeaderTitleProps
   showOnFullScreen,
   showOnDocked,
   showOnEmbedded,
+  showOnDrawer,
   showOnDefault
 }: ChatbotHeaderTitleProps) => {
   const renderChildren = () => {
-    if (displayMode && (showOnDefault || showOnFullScreen || showOnEmbedded || showOnDocked)) {
+    if (displayMode) {
       /* eslint-disable indent */
       switch (displayMode) {
         case ChatbotDisplayMode.fullscreen:
@@ -39,6 +42,8 @@ export const ChatbotHeaderTitle: React.FunctionComponent<ChatbotHeaderTitleProps
           return showOnDocked ?? showOnDefault;
         case ChatbotDisplayMode.embedded:
           return showOnEmbedded ?? showOnDefault;
+        case ChatbotDisplayMode.drawer:
+          return showOnDrawer ?? showOnDefault;
         default:
           return showOnDefault;
       }

package/src/Message/UserFeedback/UserFeedback.test.tsx

@@ -20,7 +20,6 @@ describe('UserFeedback', () => {
     expect(screen.getByRole('button', { name: /Resolved my issue/i })).toBeTruthy();
     expect(screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
     expect(screen.getByRole('button', { name: 'Close feedback for message received at 12/12/12' })).toBeTruthy();
-    expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
     expect(screen.queryByRole('textbox', { name: /Provide optional additional feedback/i })).toBeFalsy();
   });
   it('should render different title correctly', () => {
@@ -125,26 +124,6 @@ describe('UserFeedback', () => {
     );
     expect(screen.getByRole('button', { name: /Ima button/i })).toBeTruthy();
   });
-  it('should handle onClose correctly when cancel button is clicked', async () => {
-    const spy = jest.fn();
-    render(<UserFeedback onSubmit={jest.fn} quickResponses={MOCK_RESPONSES} onClose={spy} timestamp="12/12/12" />);
-    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
-    expect(cancelButton).toBeTruthy();
-    await userEvent.click(cancelButton);
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-  it('should change cancel word correctly', () => {
-    render(
-      <UserFeedback
-        onSubmit={jest.fn}
-        quickResponses={MOCK_RESPONSES}
-        onClose={jest.fn}
-        cancelWord="Exit"
-        timestamp="12/12/12"
-      />
-    );
-    expect(screen.getByRole('button', { name: 'Exit' })).toBeTruthy();
-  });
   it('should handle className', async () => {
     render(
       <UserFeedback