@patternfly/chatbot 6.4.1 → 6.5.0-prerelease.10

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

@@ -0,0 +1,451 @@
+import { useEffect, useRef, useState, FunctionComponent, MouseEvent } from 'react';
+
+import {
+  Bullseye,
+  Brand,
+  DropdownList,
+  DropdownItem,
+  Page,
+  Masthead,
+  MastheadMain,
+  MastheadBrand,
+  MastheadLogo,
+  PageSidebarBody,
+  PageSidebar,
+  MastheadToggle,
+  PageToggleButton,
+  SkipToContent
+} 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 PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
+import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
+import { BarsIcon } from '@patternfly/react-icons';
+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';
+
+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;
+
+~~~
+
+Here is a table:
+
+ | Version | GA date | User role 
+ |-|-|-|
+ | 2.5 | September 30, 2024 | Administrator |
+ | 2.5 | June 27, 2023 | Editor |
+ | 3.0 | April 1, 2025 | Administrator
+`;
+
+// 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 },
+    isPrimary: 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
+      download: { onClick: () => console.log('Download') },
+      // eslint-disable-next-line no-console
+      listen: { onClick: () => console.log('Listen') }
+    },
+    isPrimary: true,
+    attachments: [{ name: 'auth-operator.yml', id: '1' }]
+  }
+];
+
+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.'
+  }
+];
+
+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: FunctionComponent = () => {
+  const [messages, setMessages] = useState<MessageProps[]>(initialMessages);
+  const [selectedModel, setSelectedModel] = useState('Granite 7B');
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
+    initialConversations
+  );
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [announcement, setAnnouncement] = useState<string>();
+  const scrollToBottomRef = useRef<HTMLDivElement>(null);
+  const historyRef = useRef<HTMLButtonElement>(null);
+
+  const displayMode = ChatbotDisplayMode.embedded;
+  // 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);
+  };
+
+  // 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 },
+      isPrimary: true
+    });
+    newMessages.push({
+      id: generateId(),
+      role: 'bot',
+      content: 'API response goes here',
+      name: 'Bot',
+      avatar: patternflyAvatar,
+      isLoading: true,
+      timestamp: date.toLocaleString(),
+      isPrimary: true
+    });
+    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
+          download: { onClick: () => console.log('Download') },
+          // eslint-disable-next-line no-console
+          listen: { onClick: () => console.log('Listen') }
+        },
+        timestamp: date.toLocaleString(),
+        isPrimary: true
+      });
+      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 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: 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>
+  );
+
+  return (
+    <Page skipToContent={skipToContent} masthead={masthead} sidebar={sidebar} isContentFilled>
+      <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>{horizontalLogo}</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 isPrimary>
+                {/* 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 isPrimary>
+                <MessageBar
+                  isPrimary
+                  onSendMessage={handleSend}
+                  hasMicrophoneButton
+                  isSendButtonDisabled={isSendButtonDisabled}
+                />
+                <ChatbotFootnote {...footnoteProps} />
+              </ChatbotFooter>
+            </>
+          }
+        ></ChatbotConversationHistoryNav>
+      </Chatbot>
+    </Page>
+  );
+};

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

@@ -4,5 +4,6 @@ module.exports = {
   topNavItems: [],
   hasThemeSwitcher: true,
   hasRTLSwitcher: true,
+  hasHighContrastSwitcher: true,
   port: 8006
 };

package/src/AttachMenu/AttachMenu.tsx

@@ -11,14 +11,17 @@ import {
   DropdownProps,
   Dropdown,
   DropdownToggleProps,
-  PopperOptions
+  PopperOptions,
+  MenuSearchInputProps,
+  SearchInputProps,
+  MenuSearchProps
 } from '@patternfly/react-core';
 
 export interface AttachMenuProps extends DropdownProps {
   /** Items in menu */
   filteredItems: React.ReactNode;
   /** A callback for when the input value changes. */
-  handleTextInputChange: (value: string) => void;
+  handleTextInputChange?: (value: string) => void;
   /** Flag to indicate if menu is opened. */
   isOpen: boolean;
   /** Additional properties to pass to the Popper */
@@ -35,6 +38,12 @@ export interface AttachMenuProps extends DropdownProps {
   searchInputAriaLabel?: string;
   /** Toggle to be rendered */
   toggle: DropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode);
+  /** Additional props passed to MenuSearch component */
+  menuSearchProps?: Omit<MenuSearchProps, 'ref'>;
+  /** Additional props passed to MenuSearchInput component */
+  menuSearchInputProps?: Omit<MenuSearchInputProps, 'ref'>;
+  /** Additional props passed to SearchInput component */
+  searchInputProps?: SearchInputProps;
 }
 
 export const AttachMenu: FunctionComponent<AttachMenuProps> = ({
@@ -49,6 +58,9 @@ export const AttachMenu: FunctionComponent<AttachMenuProps> = ({
   searchInputPlaceholder,
   searchInputAriaLabel = 'Filter menu items',
   toggle,
+  menuSearchProps,
+  menuSearchInputProps,
+  searchInputProps,
   ...props
 }: AttachMenuProps) => (
   <Dropdown
@@ -61,15 +73,18 @@ export const AttachMenu: FunctionComponent<AttachMenuProps> = ({
     onSelect={onSelect}
     {...props}
   >
-    <MenuSearch>
-      <MenuSearchInput>
-        <SearchInput
-          aria-label={searchInputAriaLabel}
-          onChange={(_event, value) => handleTextInputChange(value)}
-          placeholder={searchInputPlaceholder}
-        />
-      </MenuSearchInput>
-    </MenuSearch>
+    {handleTextInputChange && (
+      <MenuSearch {...menuSearchProps}>
+        <MenuSearchInput {...menuSearchInputProps}>
+          <SearchInput
+            aria-label={searchInputAriaLabel}
+            onChange={(_event, value) => handleTextInputChange(value)}
+            placeholder={searchInputPlaceholder}
+            {...searchInputProps}
+          />
+        </MenuSearchInput>
+      </MenuSearch>
+    )}
     {filteredItems}
   </Dropdown>
 );

package/src/Chatbot/Chatbot.scss

@@ -28,6 +28,9 @@
     opacity: 1;
     transform: translateY(0);
   }
+  // for high contrast support
+  border: var(--pf-t--global--border--width--high-contrast--regular) solid
+    var(--pf-t--global--border--color--high-contrast);
 
   // 32 rem is the width of the overlay chatbot plus the insets
   // if the screen is smaller, we want to be 100%
@@ -46,6 +49,10 @@
 // Chatbot Display Mode - Docked
 // ============================================================================
 .pf-chatbot--docked {
+  // for high contrast support
+  border: unset;
+  border-left: var(--pf-t--global--border--width--high-contrast--regular) solid
+    var(--pf-t--global--border--color--high-contrast);
   inset-block-end: 0;
   inset-inline-end: 0;
   padding: 0;
@@ -65,6 +72,8 @@
 // Chatbot Display Mode - Fullscreen
 // ============================================================================
 .pf-chatbot--fullscreen {
+  // for high contrast support
+  border: unset;
   inset-block-end: 0;
   inset-inline-end: 0;
   padding: 0;
@@ -78,6 +87,8 @@
 // Chatbot Display Mode - Embedded
 // ============================================================================
 .pf-chatbot--embedded {
+  // for high contrast support
+  border: unset;
   position: static;
   width: 100%;
   min-height: 100%;
@@ -125,12 +136,23 @@
   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);
   }
+
+  @media screen and (min-width: 768px) {
+    // only want if drawer open - drawer closes/stops being inline on mobile
+    border-left: var(--pf-t--global--border--width--divider--default) solid;
+  }
+}
+
+// for high contrast support
+:root:where(.pf-v6-theme-high-contrast) {
+  .pf-chatbot--drawer {
+    border: unset;
+  }
 }
 
 // ============================================================================

package/src/ChatbotContent/ChatbotContent.scss

@@ -12,6 +12,10 @@
   @media screen and (max-height: 518px) {
     overflow: unset;
   }
+
+  &.pf-m-primary {
+    background-color: var(--pf-t--global--background--color--primary--default);
+  }
 }
 
 // ============================================================================

package/src/ChatbotContent/ChatbotContent.test.tsx

@@ -11,4 +11,9 @@ describe('ChatbotContent', () => {
     const { container } = render(<ChatbotContent className="custom-class">Chatbot Content</ChatbotContent>);
     expect(container.querySelector('.custom-class')).toBeTruthy();
   });
+
+  it('should render ChatbotContent with primary class', () => {
+    const { container } = render(<ChatbotContent isPrimary>Chatbot Content</ChatbotContent>);
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
 });

package/src/ChatbotContent/ChatbotContent.tsx

@@ -8,14 +8,17 @@ export interface ChatbotContentProps extends HTMLProps<HTMLDivElement> {
   children: React.ReactNode;
   /** Custom classname for the ChatbotContent component */
   className?: string;
+  /** Sets background color to primary */
+  isPrimary?: boolean;
 }
 
 export const ChatbotContent: FunctionComponent<ChatbotContentProps> = ({
   children,
   className,
+  isPrimary,
   ...props
 }: ChatbotContentProps) => (
-  <div className={`pf-chatbot__content ${className ?? ''}`} {...props}>
+  <div className={`pf-chatbot__content ${isPrimary ? 'pf-m-primary' : ''} ${className ?? ''}`} {...props}>
     {children}
   </div>
 );

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx

@@ -78,4 +78,9 @@ describe('ChatbotConversationHistoryDropdown', () => {
       expect(screen.queryByText('Actions dropdown')).toBeInTheDocument();
     });
   });
+
+  it('should be able to set a custom aria-label', () => {
+    render(<ChatbotConversationHistoryDropdown menuItems={menuItems} aria-label="Custom conversation options" />);
+    expect(screen.queryByRole('menuitem', { name: /Custom conversation options/i })).toBeInTheDocument();
+  });
 });

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -15,8 +15,10 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
   menuItems: React.ReactNode;
   /** Optional classname applied to conversation settings dropdown */
   menuClassName?: string;
-  /** Tooltip content and aria-label applied to conversation settings dropdown */
+  /** Tooltip content applied to conversation settings dropdown */
   label?: string;
+  /** Aria-label applied to conversation settings dropdown */
+  'aria-label'?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
   /** Id applied to dropdown menu toggle */
@@ -27,7 +29,8 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
   menuItems,
   menuClassName,
   onSelect,
-  label,
+  label = 'Conversation options',
+  'aria-label': ariaLabel,
   id
 }: ChatbotConversationHistoryDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -35,7 +38,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
   const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <Tooltip
       className="pf-chatbot__tooltip"
-      content={label ?? 'Conversation options'}
+      content={label}
       position="bottom"
       // prevents VO announcements of both aria label and tooltip
       aria="none"
@@ -43,7 +46,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
       <MenuToggle
         className="pf-chatbot__history-actions"
         variant="plain"
-        aria-label={label ?? 'Conversation options'}
+        aria-label={ariaLabel ?? label}
         ref={toggleRef}
         isExpanded={isOpen}
         onClick={() => setIsOpen(!isOpen)}