@patternfly/chatbot 6.3.0 → 6.4.0-prerelease.2

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

@@ -0,0 +1,565 @@
+import { useEffect, useRef, useState, FunctionComponent, MouseEvent } from 'react';
+import { Bullseye, Brand, DropdownList, DropdownItem, DropdownGroup, SkipToContent } from '@patternfly/react-core';
+
+import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
+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,
+  ChatbotHeaderOptionsDropdown
+} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
+
+import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
+import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
+import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
+
+import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
+import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
+import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
+import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
+import userAvatar from '../Messages/user_avatar.svg';
+import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/chatbot/dist/css/main.css';
+import saveAs from 'file-saver';
+
+const footnoteProps = {
+  label: 'ChatBot uses AI. Check for mistakes.',
+  popover: {
+    title: 'Verify information',
+    description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
+    bannerImage: {
+      src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
+      alt: 'Example image for footnote popover'
+    },
+    cta: {
+      label: 'Dismiss',
+      onClick: () => {
+        alert('Do something!');
+      }
+    },
+    link: {
+      label: 'View AI policy',
+      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
+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();
+
+// Generate a file with individual message content
+const downloadMessageContent = (message: MessageProps, selectedModel: string) => {
+  const currentDate = new Date();
+  const dateStr = currentDate.toISOString().split('T')[0]; // YYYY-MM-DD
+  const timeStr = currentDate.toTimeString().split(' ')[0]; // HH:MM:SS
+
+  const messageContent = `# AI Chat Transcript
+
+**Date:** ${dateStr}
+**Time:** ${timeStr}
+**Location:** PatternFly Chatbot Demo Platform
+
+---
+
+## Participants:
+**User:** User
+**AI:** ${selectedModel}
+
+---
+
+## Conversation Log
+
+${message.timestamp ? `**${message.timestamp?.toLocaleString()} AI:**` : `**AI:**`} ${message.content}
+
+---
+
+## Notes:
+**Downloaded:** ${dateStr} at ${timeStr}
+`;
+
+  const blob = new Blob([messageContent], { type: 'text/plain;charset=utf-8' });
+  const fileName = `message-${message.role}-${message.id}-${dateStr}.md`;
+  saveAs(blob, fileName);
+};
+
+// Generate transcript for a specific conversation
+const generateConversationTranscript = (conversationText: string, selectedModel: string) => {
+  const currentDate = new Date();
+  const dateStr = currentDate.toISOString().split('T')[0]; // YYYY-MM-DD
+  const timeStr = currentDate.toTimeString().split(' ')[0]; // HH:MM:SS
+
+  const transcript = `# AI Chat Transcript
+
+**Conversation Title:** ${conversationText}
+
+**Date:** ${dateStr}
+**Time:** ${timeStr}
+**Location:** PatternFly Chatbot Demo Platform
+
+---
+
+## Participants:
+**User:** User
+**AI:** ${selectedModel}
+
+---
+
+## Conversation Log
+
+**[${timeStr}] User:** ${conversationText}
+**[${timeStr}] AI:** ${markdown}
+
+---
+
+## Notes:
+
+This is a sample conversation from your chat history. In a real implementation, this would contain the actual messages from this specific conversation.
+
+**Downloaded:** ${dateStr} at ${timeStr}
+`;
+
+  return transcript;
+};
+
+const welcomePrompts = [
+  {
+    title: 'Set up account',
+    message: 'Choose the necessary settings and preferences for your account.'
+  },
+  {
+    title: 'Troubleshoot issue',
+    message: 'Find documentation and instructions to resolve your issue.'
+  }
+];
+
+export const ChatbotDemo: FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = useState<boolean>(true);
+  const [displayMode, setDisplayMode] = useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
+  const [selectedModel, setSelectedModel] = useState('Granite 7B');
+
+  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: {
+        download: {
+          onClick: () =>
+            downloadMessageContent(
+              {
+                id: '2',
+                role: 'bot',
+                content: markdown,
+                name: 'Bot',
+                avatar: patternflyAvatar,
+                timestamp: date.toLocaleString()
+              },
+              selectedModel
+            )
+        }
+      }
+    }
+  ];
+  const [messages, setMessages] = useState<MessageProps[]>(initialMessages);
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  const initialConversations = {
+    Today: [
+      {
+        id: '1',
+        text: 'Hello, can you give me an example of what you can do?',
+        menuItems: (
+          <DropdownList key={`list-1`}>
+            <DropdownItem
+              value="Download"
+              id={`Download-1`}
+              onClick={() => {
+                const transcriptContent = generateConversationTranscript(
+                  'Hello, can you give me an example of what you can do?',
+                  selectedModel
+                );
+                const blob = new Blob([transcriptContent], { type: 'text/plain;charset=utf-8' });
+                const fileName = `conversation-1-${new Date().toISOString().split('T')[0]}.md`;
+                saveAs(blob, fileName);
+              }}
+            >
+              Download transcript
+            </DropdownItem>
+          </DropdownList>
+        )
+      }
+    ]
+  };
+
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
+    initialConversations
+  );
+  const [announcement, setAnnouncement] = useState<string>();
+  const scrollToBottomRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const chatbotRef = useRef<HTMLDivElement>(null);
+  const historyRef = useRef<HTMLButtonElement>(null);
+
+  // Auto-scrolls to the latest message
+  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: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setSelectedModel(value as string);
+  };
+
+  const onSelectDisplayMode = (
+    _event: MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    setDisplayMode(value as ChatbotDisplayMode);
+  };
+
+  // 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',
+      isLoading: true,
+      avatar: patternflyAvatar,
+      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();
+      const id = generateId();
+      const timestamp = date.toLocaleString();
+      const avatar = patternflyAvatar;
+      const name = 'Bot';
+      const content = 'API response goes here';
+      const role = 'bot';
+      loadedMessages.push({
+        id,
+        role,
+        content,
+        name,
+        isLoading: false,
+        avatar,
+        timestamp,
+        actions: {
+          download: {
+            onClick: () =>
+              downloadMessageContent(
+                {
+                  id,
+                  role,
+                  content,
+                  name,
+                  avatar,
+                  timestamp
+                },
+                selectedModel
+              )
+          }
+        }
+      });
+      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 horizontalLogo = (
+    <Bullseye>
+      <Brand className="show-light" src={PFHorizontalLogoColor} alt="PatternFly" />
+      <Brand className="show-dark" src={PFHorizontalLogoReverse} alt="PatternFly" />
+    </Bullseye>
+  );
+
+  const iconLogo = (
+    <>
+      <Brand className="show-light" src={PFIconLogoColor} alt="PatternFly" />
+      <Brand className="show-dark" src={PFIconLogoReverse} alt="PatternFly" />
+    </>
+  );
+
+  const handleSkipToContent = (e) => {
+    e.preventDefault();
+    /* eslint-disable indent */
+    switch (displayMode) {
+      case ChatbotDisplayMode.default:
+        if (!chatbotVisible && toggleRef.current) {
+          toggleRef.current.focus();
+        }
+        if (chatbotVisible && chatbotRef.current) {
+          chatbotRef.current.focus();
+        }
+        break;
+
+      case ChatbotDisplayMode.docked:
+        if (chatbotRef.current) {
+          chatbotRef.current.focus();
+        }
+        break;
+      default:
+        if (historyRef.current) {
+          historyRef.current.focus();
+        }
+        break;
+    }
+    /* eslint-enable indent */
+  };
+
+  return (
+    <>
+      <SkipToContent onClick={handleSkipToContent} href="#">
+        Skip to chatbot
+      </SkipToContent>
+      <ChatbotToggle
+        tooltipLabel="Chatbot"
+        isChatbotVisible={chatbotVisible}
+        onToggleChatbot={function () {
+          setChatbotVisible(!chatbotVisible);
+        }}
+        id="chatbot-toggle"
+        ref={toggleRef}
+      />
+      <Chatbot isVisible={chatbotVisible} displayMode={displayMode} ref={chatbotRef}>
+        <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
+                    displayMode={displayMode}
+                    showOnFullScreen={horizontalLogo}
+                    showOnDefault={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>
+                  <ChatbotHeaderOptionsDropdown onSelect={onSelectDisplayMode}>
+                    <DropdownGroup label="Display mode">
+                      <DropdownList>
+                        <DropdownItem
+                          value={ChatbotDisplayMode.default}
+                          key="switchDisplayOverlay"
+                          icon={<OutlinedWindowRestoreIcon aria-hidden />}
+                          isSelected={displayMode === ChatbotDisplayMode.default}
+                        >
+                          <span>Overlay</span>
+                        </DropdownItem>
+                        <DropdownItem
+                          value={ChatbotDisplayMode.docked}
+                          key="switchDisplayDock"
+                          icon={<OpenDrawerRightIcon aria-hidden />}
+                          isSelected={displayMode === ChatbotDisplayMode.docked}
+                        >
+                          <span>Dock to window</span>
+                        </DropdownItem>
+                        <DropdownItem
+                          value={ChatbotDisplayMode.fullscreen}
+                          key="switchDisplayFullscreen"
+                          icon={<ExpandIcon aria-hidden />}
+                          isSelected={displayMode === ChatbotDisplayMode.fullscreen}
+                        >
+                          <span>Fullscreen</span>
+                        </DropdownItem>
+                      </DropdownList>
+                    </DropdownGroup>
+                  </ChatbotHeaderOptionsDropdown>
+                </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="Hi, ChatBot User!"
+                    description="How can 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>
+    </>
+  );
+};

package/src/Chatbot/Chatbot.scss

@@ -9,7 +9,7 @@
   flex-direction: column;
   width: 30rem;
   height: 70vh;
-  background-color: var(--pf-t--chatbot--background);
+  background-color: var(--pf-t--global--background--color--secondary--default);
   border-radius: var(--pf-t--global--border--radius--medium);
   box-shadow: var(--pf-t--global--box-shadow--lg);
   font-size: var(--pf-t--global--font--size--md);

package/src/ChatbotContent/ChatbotContent.scss

@@ -3,7 +3,7 @@
 // ============================================================================
 .pf-chatbot__content {
   position: relative;
-  background-color: var(--pf-t--chatbot--background);
+  background-color: var(--pf-t--global--background--color--secondary--default);
   overflow-y: auto;
   overflow: hidden; // needed in Red Hat Developer Hub workspace
   flex: 1; // needed in Composer AI

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -9,10 +9,22 @@
   // Drawer input
   // ----------------------------------------------------------------------------
   .pf-chatbot__input {
+  }
+  // Drawer title
+  // ----------------------------------------------------------------------------
+  .pf-chatbot__title-container {
     padding-inline-start: var(--pf-t--global--spacer--lg);
     padding-inline-end: var(--pf-t--global--spacer--lg);
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--pf-t--global--spacer--sm);
+  }
+  // Drawer title icon
+  // ----------------------------------------------------------------------------
+  .pf-chatbot__title-icon {
+    padding-inline-end: var(--pf-t--global--spacer--md);
+    padding-inline-start: var(--pf-t--global--spacer--sm);
   }
-
   // Drawer menu
   // ----------------------------------------------------------------------------
   .pf-v6-c-menu {
@@ -75,7 +87,7 @@
     --pf-v6-c-drawer__panel--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--lg);
+    --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
     overflow-x: hidden;
     overflow-y: hidden;
   }

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -104,6 +104,23 @@ describe('ChatbotConversationHistoryNav', () => {
     expect(screen.getByTestId('chatbot-nav-drawer-actions')).toHaveClass('pf-v6-c-drawer__actions--reversed');
   });
 
+  it('should disable new chat button', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder
+        conversations={initialConversations}
+        newChatButtonProps={{ isDisabled: true }}
+        onNewChat={jest.fn()}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: 'New chat' })).toBeDisabled();
+  });
+
   it('should not apply the reversed class when reverseButtonOrder is false', () => {
     render(
       <ChatbotConversationHistoryNav
@@ -433,4 +450,45 @@ describe('ChatbotConversationHistoryNav', () => {
     );
     expect(screen.getByTestId('drawer')).toHaveClass('pf-m-compact');
   });
+
+  it('should display the default title', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+      />
+    );
+    expect(screen.getByText('Chat history')).toBeInTheDocument();
+  });
+
+  it('should display the custom title', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        title="PatternFly history"
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+      />
+    );
+    expect(screen.getByText('PatternFly history')).toBeInTheDocument();
+  });
+
+  it('should display the clock icon', () => {
+    const { container } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+      />
+    );
+    const iconElement = container.querySelector('.pf-chatbot__title-icon');
+    expect(iconElement).toBeInTheDocument();
+  });
 });