@patternfly/chatbot 1.0.0

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -0,0 +1,104 @@
+import type { Ref, FunctionComponent } from 'react';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+
+import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+
+export interface ChatbotHeaderMenuProps extends ButtonProps {
+  /** Callback function to attach to menu toggle on top right of chatbot header. */
+  onMenuToggle: () => 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;
+  /** Sets menu to compact styling. */
+  isCompact?: boolean;
+}
+
+const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
+  className,
+  onMenuToggle,
+  tooltipProps,
+  menuAriaLabel = 'Chat history drawer',
+  innerRef,
+  tooltipContent = 'Chat history drawer',
+  isCompact,
+  ...props
+}: ChatbotHeaderMenuProps) => {
+  const [isDrawerAnimating, setIsDrawerAnimating] = useState(false);
+  // I'd like to use a prop here later if this works
+  const drawerState = props['aria-expanded'];
+  const isDrawerOpen = drawerState === true;
+  const prevDrawerStateRef = useRef<boolean | undefined>(isDrawerOpen);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    if (drawerState !== undefined) {
+      const wasDrawerOpen = prevDrawerStateRef.current === true;
+      const isDrawerClosing = wasDrawerOpen && !isDrawerOpen;
+
+      setIsDrawerAnimating(true);
+      const timeout = setTimeout(() => {
+        setIsDrawerAnimating(false);
+
+        if (isDrawerClosing) {
+          requestAnimationFrame(() => {
+            buttonRef.current?.focus();
+          });
+        }
+      }, 350);
+
+      prevDrawerStateRef.current = isDrawerOpen;
+      return () => clearTimeout(timeout);
+    }
+  }, [drawerState, isDrawerOpen]);
+
+  const button = useMemo(
+    () => (
+      <Button
+        className={`pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`}
+        variant="plain"
+        onClick={onMenuToggle}
+        aria-label={menuAriaLabel}
+        ref={innerRef ?? buttonRef}
+        icon={
+          <Icon size={isCompact ? 'lg' : 'xl'} isInline>
+            <BarsIcon />
+          </Icon>
+        }
+        size={isCompact ? 'sm' : undefined}
+        {...props}
+      />
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isCompact, menuAriaLabel, onMenuToggle, innerRef, buttonRef]
+  );
+
+  return (
+    <div className={`pf-chatbot__menu ${className}`}>
+      {isDrawerAnimating ? (
+        button
+      ) : (
+        <Tooltip
+          content={tooltipContent}
+          position="bottom"
+          // prevents VO announcements of both aria label and tooltip
+          aria="none"
+          {...tooltipProps}
+        >
+          {button}
+        </Tooltip>
+      )}
+    </div>
+  );
+};
+
+export const ChatbotHeaderMenu = forwardRef((props: ChatbotHeaderMenuProps, ref: Ref<HTMLButtonElement>) => (
+  <ChatbotHeaderMenuBase innerRef={ref} {...props} />
+));

package/src/ChatbotHeader/ChatbotHeaderNewChatButton.test.tsx

@@ -0,0 +1,25 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderNewChatButton } from './ChatbotHeaderNewChatButton';
+import '@testing-library/jest-dom';
+
+describe('ChatbotHeaderNewChatButton', () => {
+  it('should render ChatbotHeaderNewChatButton', () => {
+    const { container } = render(
+      <ChatbotHeaderNewChatButton className="custom-header-new-chat-button" onClick={jest.fn()} />
+    );
+
+    expect(container.querySelector('.custom-header-new-chat-button')).toBeTruthy();
+  });
+
+  it('should call onClick handler when new chat button is pressed', () => {
+    const onClick = jest.fn();
+    render(<ChatbotHeaderNewChatButton className="custom-header-new-chat-button" onClick={onClick} />);
+    fireEvent.click(screen.getByRole('button', { name: 'New chat' }));
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should render button with isCompact', () => {
+    render(<ChatbotHeaderNewChatButton data-testid="new-chat-button" onClick={jest.fn()} isCompact />);
+    expect(screen.getByTestId('new-chat-button')).toHaveClass('pf-m-compact');
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderNewChatButton.tsx

@@ -0,0 +1,64 @@
+import type { Ref, FunctionComponent } from 'react';
+import { forwardRef } from 'react';
+
+import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { PenToSquareIcon } from '@patternfly/react-icons/dist/esm/icons/pen-to-square-icon';
+
+export interface ChatbotHeaderNewChatButtonProps extends ButtonProps {
+  /** 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;
+  /** Sets button to compact styling. */
+  isCompact?: boolean;
+}
+
+const ChatbotHeaderNewChatButtonBase: FunctionComponent<ChatbotHeaderNewChatButtonProps> = ({
+  className,
+  onClick,
+  tooltipProps,
+  menuAriaLabel = 'New chat',
+  innerRef,
+  tooltipContent = 'New chat',
+  isCompact,
+  ...props
+}: ChatbotHeaderNewChatButtonProps) => (
+  <div className={`pf-chatbot__menu${className ? ` ${className}` : ''}`}>
+    <Tooltip
+      content={tooltipContent}
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
+      <Button
+        className={`pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`}
+        variant="plain"
+        onClick={onClick}
+        aria-label={menuAriaLabel}
+        ref={innerRef}
+        icon={
+          <Icon size={isCompact ? 'lg' : 'xl'} isInline>
+            <PenToSquareIcon />
+          </Icon>
+        }
+        size={isCompact ? 'sm' : undefined}
+        {...props}
+      />
+    </Tooltip>
+  </div>
+);
+
+export const ChatbotHeaderNewChatButton = forwardRef(
+  (props: ChatbotHeaderNewChatButtonProps, ref: Ref<HTMLButtonElement>) => (
+    <ChatbotHeaderNewChatButtonBase innerRef={ref} {...props} />
+  )
+);

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx

@@ -0,0 +1,59 @@
+import { DropdownItem } from '@patternfly/react-core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatbotHeaderOptionsDropdown } from './ChatbotHeaderOptionsDropdown';
+import '@testing-library/jest-dom';
+
+describe('ChatbotHeaderOptionsDropdown', () => {
+  const dropdownItems = (
+    <>
+      <DropdownItem>Option 1</DropdownItem>
+      <DropdownItem>Option 2</DropdownItem>
+      <DropdownItem>Option 3</DropdownItem>
+    </>
+  );
+
+  it('should render ChatbotHeaderOptionsDropdown', () => {
+    render(<ChatbotHeaderOptionsDropdown>{dropdownItems}</ChatbotHeaderOptionsDropdown>);
+
+    expect(screen.getByRole('button', { name: 'Chatbot options' })).toBeTruthy();
+  });
+
+  it('should call onselect handler when a dropdown item is clicked', async () => {
+    const onSelect = jest.fn();
+    const { container } = render(
+      <ChatbotHeaderOptionsDropdown className="custom-header-options-dropdown" onSelect={onSelect}>
+        {dropdownItems}
+      </ChatbotHeaderOptionsDropdown>
+    );
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'Chatbot options' }));
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.custom-header-options-dropdown')).toBeTruthy();
+
+      expect(screen.getByText('Option 1'));
+      expect(screen.getByText('Option 2'));
+      expect(screen.getByText('Option 3'));
+
+      fireEvent.click(screen.getByText('Option 3'));
+
+      expect(onSelect).toHaveBeenCalled();
+    });
+  });
+
+  it('should handle isCompact', () => {
+    render(<ChatbotHeaderOptionsDropdown isCompact>{dropdownItems}</ChatbotHeaderOptionsDropdown>);
+    expect(screen.getByRole('button', { name: 'Chatbot options' })).toHaveClass('pf-m-compact');
+  });
+
+  it('should handle toggleProps', () => {
+    render(
+      <ChatbotHeaderOptionsDropdown isCompact toggleProps={{ isDisabled: true }}>
+        {dropdownItems}
+      </ChatbotHeaderOptionsDropdown>
+    );
+    expect(screen.getByRole('button', { name: /Chatbot options/i })).toBeDisabled();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx

@@ -0,0 +1,90 @@
+import type { FunctionComponent, Ref } from 'react';
+import { useState } from 'react';
+
+import {
+  Tooltip,
+  TooltipProps,
+  Dropdown,
+  DropdownProps,
+  MenuToggle,
+  MenuToggleElement,
+  Icon,
+  MenuToggleProps
+} from '@patternfly/react-core';
+import RhUiEllipsisHorizontalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-horizontal-fill-icon';
+
+export interface ChatbotHeaderOptionsDropdownProps extends Omit<DropdownProps, 'toggle'> {
+  /** Content to be displayed in the chatbot header */
+  children: React.ReactNode;
+  /** 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 toggle */
+  menuToggleAriaLabel?: string;
+  /** Sets menu to compact styling. */
+  isCompact?: boolean;
+  /** Additional props passed to toggle */
+  toggleProps?: MenuToggleProps;
+}
+
+export const ChatbotHeaderOptionsDropdown: FunctionComponent<ChatbotHeaderOptionsDropdownProps> = ({
+  className,
+  children,
+  onSelect,
+  tooltipProps,
+  menuToggleAriaLabel = 'Chatbot options',
+  isCompact,
+  toggleProps,
+  ...props
+}: ChatbotHeaderOptionsDropdownProps) => {
+  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = useState(false);
+
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
+    <Tooltip
+      className="pf-chatbot__tooltip"
+      content="Chatbot options"
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
+      <MenuToggle
+        className={`pf-chatbot__button--toggle-options ${isCompact ? 'pf-m-compact' : ''}`}
+        variant="plain"
+        aria-label={menuToggleAriaLabel}
+        ref={toggleRef}
+        icon={
+          <Icon size={isCompact ? 'lg' : 'xl'} isInline>
+            <RhUiEllipsisHorizontalFillIcon />
+          </Icon>
+        }
+        isExpanded={isOptionsMenuOpen}
+        onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}
+        size={isCompact ? 'sm' : undefined}
+        {...toggleProps}
+      />
+    </Tooltip>
+  );
+
+  return (
+    <Dropdown
+      className={`pf-chatbot__options ${className ?? ''}`}
+      isOpen={isOptionsMenuOpen}
+      onSelect={(e, value) => {
+        onSelect && onSelect(e, value);
+        setIsOptionsMenuOpen(false);
+      }}
+      onOpenChange={(isOpen) => setIsOptionsMenuOpen(isOpen)}
+      popperProps={{ position: 'right', preventOverflow: true, appendTo: 'inline' }}
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
+      toggle={toggle}
+      {...props}
+    >
+      {children}
+    </Dropdown>
+  );
+};
+
+export default ChatbotHeaderOptionsDropdown;

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx

@@ -0,0 +1,61 @@
+import { DropdownItem } from '@patternfly/react-core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatbotHeaderSelectorDropdown } from './ChatbotHeaderSelectorDropdown';
+import '@testing-library/jest-dom';
+
+describe('ChatbotHeaderSelectorDropdown', () => {
+  const dropdownItems = (
+    <>
+      <DropdownItem>Option 1</DropdownItem>
+      <DropdownItem>Option 2</DropdownItem>
+      <DropdownItem>Option 3</DropdownItem>
+    </>
+  );
+
+  it('should render ChatbotHeaderSelectorDropdown', () => {
+    render(<ChatbotHeaderSelectorDropdown value="Option 1">{dropdownItems}</ChatbotHeaderSelectorDropdown>);
+
+    expect(screen.getByRole('button', { name: /Select model/i })).toBeTruthy();
+  });
+
+  it('should call onselect handler when a dropdown item is clicked', async () => {
+    const onSelect = jest.fn();
+    const { container } = render(
+      <ChatbotHeaderSelectorDropdown value="Option 1" className="custom-header-selector-dropdown" onSelect={onSelect}>
+        {dropdownItems}
+      </ChatbotHeaderSelectorDropdown>
+    );
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: /Select model/i }));
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.custom-header-selector-dropdown')).toBeTruthy();
+
+      expect(screen.getByText('Option 3'));
+
+      fireEvent.click(screen.getByText('Option 3'));
+
+      expect(onSelect).toHaveBeenCalled();
+    });
+  });
+
+  it('should handle isCompact', () => {
+    render(
+      <ChatbotHeaderSelectorDropdown value="Option 1" isCompact>
+        {dropdownItems}
+      </ChatbotHeaderSelectorDropdown>
+    );
+    expect(screen.getByRole('button', { name: /Select model/i })).toHaveClass('pf-m-compact');
+  });
+
+  it('should handle toggleProps', () => {
+    render(
+      <ChatbotHeaderSelectorDropdown value="Option 1" toggleProps={{ isDisabled: true }}>
+        {dropdownItems}
+      </ChatbotHeaderSelectorDropdown>
+    );
+    expect(screen.getByRole('button', { name: /Select model/i })).toBeDisabled();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx

@@ -0,0 +1,99 @@
+import type { FunctionComponent, Ref } from 'react';
+import { useState } from 'react';
+
+import {
+  Tooltip,
+  TooltipProps,
+  Dropdown,
+  DropdownProps,
+  MenuToggle,
+  MenuToggleElement,
+  MenuToggleProps
+} from '@patternfly/react-core';
+
+export interface ChatbotHeaderSelectorDropdownProps extends Omit<DropdownProps, 'toggle'> {
+  /** Value of the selected dropdown item */
+  value: string;
+  /** Content to be displayed in the chatbot header */
+  children: React.ReactNode;
+  /** 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 toggle */
+  menuToggleAriaLabel?: string;
+  /** Text displayed in Tooltip wrapping the display mode dropdown */
+  tooltipContent?: string;
+  /** Sets menu to compact styling. */
+  isCompact?: boolean;
+  /** Additional props passed to toggle */
+  toggleProps?: MenuToggleProps;
+  /** Custom width for the dropdown */
+  dropdownWidth?: string;
+}
+
+export const ChatbotHeaderSelectorDropdown: FunctionComponent<ChatbotHeaderSelectorDropdownProps> = ({
+  value,
+  className,
+  children,
+  onSelect,
+  tooltipProps,
+  tooltipContent = 'Select model',
+  menuToggleAriaLabel,
+  isCompact,
+  toggleProps,
+  dropdownWidth,
+  ...props
+}: ChatbotHeaderSelectorDropdownProps) => {
+  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = useState(false);
+  const [defaultAriaLabel, setDefaultAriaLabel] = useState('Select model');
+
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
+    <Tooltip
+      className="pf-chatbot__tooltip"
+      content={tooltipContent}
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
+      <MenuToggle
+        variant="secondary"
+        aria-label={menuToggleAriaLabel ?? defaultAriaLabel}
+        ref={toggleRef}
+        isExpanded={isOptionsMenuOpen}
+        onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}
+        size={isCompact ? 'sm' : undefined}
+        className={`${isCompact ? 'pf-m-compact' : ''}`}
+        {...toggleProps}
+        style={{
+          width: dropdownWidth
+        }}
+      >
+        {value}
+      </MenuToggle>
+    </Tooltip>
+  );
+
+  return (
+    <Dropdown
+      className={`pf-chatbot__selections ${className ?? ''}`}
+      isOpen={isOptionsMenuOpen}
+      onSelect={(e, value) => {
+        onSelect && onSelect(e, value);
+        setDefaultAriaLabel(`Select model: ${value}`);
+        setIsOptionsMenuOpen(false);
+      }}
+      onOpenChange={(isOpen) => setIsOptionsMenuOpen(isOpen)}
+      popperProps={{ position: 'right', appendTo: 'inline' }}
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
+      toggle={toggle}
+      {...props}
+    >
+      {children}
+    </Dropdown>
+  );
+};
+
+export default ChatbotHeaderSelectorDropdown;

package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx

@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/react';
+import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
+import ChatbotHeaderTitle from './ChatbotHeaderTitle';
+
+describe('ChatbotHeaderTitle', () => {
+  it('should render ChatbotHeaderTitle with children', () => {
+    render(<ChatbotHeaderTitle>Chatbot Header Title</ChatbotHeaderTitle>);
+    expect(screen.getByText('Chatbot Header Title')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeaderTitle with custom classname', () => {
+    const { container } = render(
+      <ChatbotHeaderTitle className="custom-header-class">Chatbot Header Title</ChatbotHeaderTitle>
+    );
+    expect(container.querySelector('.custom-header-class')).toBeTruthy();
+  });
+
+  it('should render title for default display mode', () => {
+    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" />);
+    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" />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for embedded display mode', () => {
+    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" />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for fullscreen display mode', () => {
+    render(
+      <ChatbotHeaderTitle
+        displayMode={ChatbotDisplayMode.fullscreen}
+        showOnFullScreen="Fullscreen header title"
+        className="custom-header-class"
+      />
+    );
+    expect(screen.getByText('Fullscreen header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when fullscreen display mode title is not configured', () => {
+    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

@@ -0,0 +1,62 @@
+import type { FunctionComponent } from 'react';
+
+import { SplitItem } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
+
+export interface ChatbotHeaderTitleProps {
+  /** Content to be displayed in the chatbot header */
+  children?: React.ReactNode;
+  /** Custom classname for the header component */
+  className?: string;
+  /** Display mode of chatbot, in case you want to conditionally show a title */
+  displayMode?: ChatbotDisplayMode;
+  /** Content to display on full screen */
+  showOnFullScreen?: React.ReactNode | string;
+  /** Content to display on docked screen */
+  showOnDocked?: React.ReactNode | string;
+  /** 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;
+}
+
+export const ChatbotHeaderTitle: FunctionComponent<ChatbotHeaderTitleProps> = ({
+  className,
+  children,
+  displayMode,
+  showOnFullScreen,
+  showOnDocked,
+  showOnEmbedded,
+  showOnDrawer,
+  showOnDefault
+}: ChatbotHeaderTitleProps) => {
+  const renderChildren = () => {
+    if (displayMode) {
+      /* eslint-disable indent */
+      switch (displayMode) {
+        case ChatbotDisplayMode.fullscreen:
+          return showOnFullScreen ?? showOnDefault;
+        case ChatbotDisplayMode.docked:
+          return showOnDocked ?? showOnDefault;
+        case ChatbotDisplayMode.embedded:
+          return showOnEmbedded ?? showOnDefault;
+        case ChatbotDisplayMode.drawer:
+          return showOnDrawer ?? showOnDefault;
+        default:
+          return showOnDefault;
+      }
+      /* eslint-enable indent */
+    } else {
+      return children;
+    }
+  };
+  return (
+    <SplitItem isFilled className={`pf-chatbot__title ${className || ''}`}>
+      {renderChildren()}
+    </SplitItem>
+  );
+};
+
+export default ChatbotHeaderTitle;

package/src/ChatbotHeader/index.ts

@@ -0,0 +1,11 @@
+export { default } from './ChatbotHeader';
+
+export * from './ChatbotHeader';
+export * from './ChatbotHeaderActions';
+export * from './ChatbotHeaderMain';
+export * from './ChatbotHeaderMenu';
+export * from './ChatbotHeaderTitle';
+export * from './ChatbotHeaderOptionsDropdown';
+export * from './ChatbotHeaderSelectorDropdown';
+export * from './ChatbotHeaderCloseButton';
+export * from './ChatbotHeaderNewChatButton';