@patternfly/chatbot 1.0.0

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -0,0 +1,421 @@
+// ============================================================================
+// Chatbot Header - Chatbot Conversation History Nav
+// ============================================================================
+import type { KeyboardEvent, FunctionComponent } from 'react';
+import { useRef, Fragment } from 'react';
+
+// Import PatternFly components
+import {
+  Button,
+  ButtonProps,
+  Divider,
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerPanelBody,
+  DrawerProps,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContentBody,
+  InputGroup,
+  InputGroupItem,
+  SearchInput,
+  Title,
+  DrawerPanelContentProps,
+  DrawerContentProps,
+  DrawerContentBodyProps,
+  DrawerHeadProps,
+  DrawerActionsProps,
+  DrawerCloseButtonProps,
+  DrawerPanelBodyProps,
+  SkeletonProps,
+  Icon,
+  TitleProps,
+  SearchInputProps,
+  MenuProps,
+  MenuListProps,
+  MenuList,
+  MenuGroup,
+  MenuItem,
+  Menu,
+  MenuContent,
+  MenuItemProps,
+  MenuGroupProps,
+  MenuContentProps
+} from '@patternfly/react-core';
+
+import { OutlinedClockIcon, OutlinedCommentAltIcon, PenToSquareIcon } from '@patternfly/react-icons';
+import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
+import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
+import LoadingState from './LoadingState';
+import HistoryEmptyState, { HistoryEmptyStateProps } from './EmptyState';
+
+export interface Conversation {
+  /** Conversation id */
+  id: string;
+  /** Conversation icon */
+  icon?: React.ReactNode;
+  /** Flag for no icon */
+  noIcon?: boolean;
+  /** Conversation */
+  text: string;
+  /** Dropdown items rendered in conversation settings dropdown */
+  menuItems?: React.ReactNode;
+  /** Optional classname applied to conversation settings dropdown */
+  menuClassName?: string;
+  /** Tooltip content and aria-label applied to conversation settings dropdown */
+  label?: string;
+  /** Callback for when user selects item. */
+  onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
+  /** Additional props passed to menu item */
+  additionalProps?: MenuItemProps;
+  /** Custom dropdown ID to ensure uniqueness across demo instances */
+  dropdownId?: string;
+}
+export interface ChatbotConversationHistoryNavProps extends DrawerProps {
+  /** Function called to toggle drawer */
+  onDrawerToggle: (event: React.KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
+  /** Flag to indicate whether drawer is open */
+  isDrawerOpen: boolean;
+  /** Function called to close drawer */
+  setIsDrawerOpen: (bool: boolean) => void;
+  /* itemId of the currently active item. */
+  activeItemId?: string | number;
+  /** Callback function for when an item is selected */
+  onSelectActiveItem?: (event?: React.MouseEvent, itemId?: string | number) => void;
+  /** Items shown in chat history */
+  conversations: Conversation[] | { [key: string]: Conversation[] };
+  /** Additional button props for new chat button. */
+  newChatButtonProps?: ButtonProps;
+  /** Additional props applied to conversation menu group. If conversations is an object, you should pass an object of MenuGroupProps for each group. */
+  menuGroupProps?: MenuGroupProps | { [key: string]: MenuGroupProps };
+  /** Additional props applied to conversation list. If conversations is an object, you should pass an object of MenuListProps for each group. */
+  menuListProps?: Omit<MenuListProps, 'children'> | { [key: string]: Omit<MenuListProps, 'children'> };
+  /** Text shown in blue button */
+  newChatButtonText?: string;
+  /** Callback function for when blue button is clicked. Omit to hide blue "new chat button" */
+  onNewChat?: () => void;
+  /** Content wrapped by conversation history nav */
+  drawerContent?: React.ReactNode;
+  /** Placeholder for search input */
+  searchInputPlaceholder?: string;
+  /** Aria label for search input */
+  searchInputAriaLabel?: string;
+  /** Additional props passed to search input */
+  searchInputProps?: SearchInputProps;
+  /** A callback for when the input value changes. Omit to hide input field */
+  handleTextInputChange?: (value: string) => void;
+  /** Display mode of chatbot */
+  displayMode: ChatbotDisplayMode;
+  /** Reverses the order of the drawer action buttons */
+  reverseButtonOrder?: boolean;
+  /** Custom test id for the drawer actions */
+  drawerActionsTestId?: string;
+  /** Additional props applied to menu  */
+  menuProps?: MenuProps;
+  /** Additional props applied to panel */
+  drawerPanelContentProps?: DrawerPanelContentProps;
+  /** Additional props applied to drawer content */
+  drawerContentProps?: Omit<DrawerContentProps, 'panelContent'>;
+  /** Additional props applied to drawer content body */
+  drawerContentBodyProps?: DrawerContentBodyProps;
+  /** Additional props applied to drawer head */
+  drawerHeadProps?: DrawerHeadProps;
+  /** Additional props applied to drawer actions */
+  drawerActionsProps?: DrawerActionsProps;
+  /** Additional props applied to drawer close button */
+  drawerCloseButtonProps?: DrawerCloseButtonProps;
+  /** Additional props appleid to drawer panel body */
+  drawerPanelBodyProps?: DrawerPanelBodyProps;
+  /** Flag indicating whether a divider should render between the drawer head and title. */
+  hasDrawerHeadDivider?: boolean;
+  /** Whether to show drawer loading state */
+  isLoading?: boolean;
+  /** Additional props for loading state */
+  loadingState?: SkeletonProps;
+  /** Content to show in error state. Error state will appear once content is passed in. */
+  errorState?: HistoryEmptyStateProps;
+  /** Content to show in empty state. Empty state will appear once content is passed in. */
+  emptyState?: HistoryEmptyStateProps;
+  /** Content to show in no results state. No results state will appear once content is passed in. */
+  noResultsState?: HistoryEmptyStateProps;
+  /** Sets drawer to compact styling. */
+  isCompact?: boolean;
+  /** Display title  */
+  title?: string;
+  /** Icon displayed in title */
+  navTitleIcon?: React.ReactNode;
+  /** Title header level */
+  navTitleProps?: Partial<TitleProps>;
+  /** Visually hidden text that gets announced by assistive technologies. Should be used to convey the result count when the search input value changes. */
+  searchInputScreenReaderText?: string;
+  /** Custom action rendered before the search input. */
+  searchActionStart?: React.ReactNode;
+  /** Custom action rendered after the search input. */
+  searchActionEnd?: React.ReactNode;
+  /** A custom search toolbar to render below the title. This will override the default search actions and/or search input. */
+  searchToolbar?: React.ReactNode;
+  /** Additional props passed to MenuContent */
+  menuContentProps?: Omit<MenuContentProps, 'ref'>;
+}
+
+export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps> = ({
+  onDrawerToggle,
+  isDrawerOpen,
+  setIsDrawerOpen,
+  activeItemId,
+  onSelectActiveItem,
+  conversations,
+  menuListProps,
+  newChatButtonText = 'New chat',
+  drawerContent,
+  onNewChat,
+  newChatButtonProps,
+  searchInputPlaceholder = 'Search previous conversations...',
+  searchInputAriaLabel = 'Search previous conversations',
+  searchInputProps,
+  handleTextInputChange,
+  displayMode,
+  reverseButtonOrder = false,
+  drawerActionsTestId = 'chatbot-nav-drawer-actions',
+  drawerPanelContentProps,
+  drawerContentProps,
+  drawerContentBodyProps,
+  drawerHeadProps,
+  drawerActionsProps,
+  drawerCloseButtonProps,
+  drawerPanelBodyProps,
+  hasDrawerHeadDivider,
+  isLoading,
+  loadingState,
+  errorState,
+  emptyState,
+  noResultsState,
+  isCompact,
+  title = 'Chat history',
+  navTitleProps,
+  navTitleIcon = <OutlinedClockIcon />,
+  searchInputScreenReaderText,
+  searchActionStart,
+  searchActionEnd,
+  searchToolbar,
+  menuProps,
+  menuGroupProps,
+  menuContentProps,
+  ...props
+}: ChatbotConversationHistoryNavProps) => {
+  const drawerRef = useRef<HTMLDivElement>(null);
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const isConversation = (item: any): item is Conversation =>
+    item && typeof item === 'object' && 'id' in item && 'text' in item;
+
+  const getNavItem = (conversation: Conversation) => (
+    <MenuItem
+      className={`pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`}
+      itemId={conversation.id}
+      {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
+      /* eslint-disable indent */
+      {...(conversation.menuItems
+        ? {
+            actions: (
+              <ConversationHistoryDropdown
+                menuClassName={conversation.menuClassName}
+                onSelect={conversation.onSelect}
+                menuItems={conversation.menuItems}
+                label={conversation.label}
+              />
+            )
+          }
+        : {})}
+      {...conversation.additionalProps}
+    >
+      {conversation.text}
+    </MenuItem>
+  );
+
+  const buildConversations = () => {
+    if (Array.isArray(conversations)) {
+      return (
+        <MenuList {...menuListProps}>
+          {conversations.map((conversation) => {
+            if (isConversation(conversation)) {
+              return <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>;
+            } else {
+              return conversation;
+            }
+          })}
+        </MenuList>
+      );
+    } else {
+      return (
+        <>
+          {Object.keys(conversations).map((navGroup) => (
+            <MenuGroup
+              className="pf-chatbot__menu-item-header"
+              label={navGroup}
+              key={navGroup}
+              labelHeadingLevel="h3"
+              {...menuGroupProps?.[navGroup]}
+            >
+              <MenuList {...menuListProps?.[navGroup]}>
+                {conversations[navGroup].map((conversation: Conversation) => (
+                  <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
+                ))}
+              </MenuList>
+            </MenuGroup>
+          ))}
+        </>
+      );
+    }
+  };
+
+  // Menu Content
+  // - Consumers should pass an array to <Chatbot> of the list of conversations
+  // - Groups could be optional, but items need to be ordered by date
+  const renderMenuContent = () => {
+    if (errorState) {
+      return <HistoryEmptyState {...errorState} />;
+    }
+
+    if (emptyState) {
+      return <HistoryEmptyState {...emptyState} />;
+    }
+
+    if (noResultsState) {
+      return <HistoryEmptyState {...noResultsState} />;
+    }
+    return (
+      <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId} {...menuProps}>
+        <MenuContent {...menuContentProps}>{buildConversations()}</MenuContent>
+      </Menu>
+    );
+  };
+
+  const renderDrawerContent = () => (
+    <>
+      <DrawerPanelBody {...drawerPanelBodyProps}>{renderMenuContent()}</DrawerPanelBody>
+    </>
+  );
+
+  const searchInputContainer = handleTextInputChange && (
+    <div className="pf-chatbot__input">
+      <SearchInput
+        aria-label={searchInputAriaLabel}
+        onChange={(_event, value) => handleTextInputChange(value)}
+        placeholder={searchInputPlaceholder}
+        {...searchInputProps}
+      />
+      {searchInputScreenReaderText && (
+        <div className="pf-chatbot__filter-announcement pf-chatbot-m-hidden">{searchInputScreenReaderText}</div>
+      )}
+    </div>
+  );
+
+  const renderSearchAndActions = () => {
+    if (searchToolbar) {
+      return searchToolbar;
+    }
+
+    return searchActionStart || searchActionEnd ? (
+      <div className="pf-chatbot__history-search-actions">
+        <InputGroup>
+          {searchActionStart && <InputGroupItem>{searchActionStart}</InputGroupItem>}
+          {searchInputContainer && <InputGroupItem isFill>{searchInputContainer}</InputGroupItem>}
+          {searchActionEnd && <InputGroupItem>{searchActionEnd}</InputGroupItem>}
+        </InputGroup>
+      </div>
+    ) : (
+      searchInputContainer
+    );
+  };
+
+  const renderPanelContent = () => {
+    const drawer = (
+      <>
+        <DrawerHead {...drawerHeadProps}>
+          <DrawerActions
+            data-testid={drawerActionsTestId}
+            className={reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : ''}
+            {...drawerActionsProps}
+          >
+            <DrawerCloseButton onClick={onDrawerToggle} {...drawerCloseButtonProps} />
+            {onNewChat && (
+              <Button
+                size={isCompact ? 'sm' : undefined}
+                onClick={onNewChat}
+                icon={<PenToSquareIcon />}
+                {...newChatButtonProps}
+              >
+                {newChatButtonText}
+              </Button>
+            )}
+          </DrawerActions>
+        </DrawerHead>
+        {hasDrawerHeadDivider && <Divider className="pf-chatbot__heading-divider" />}
+        <div className="pf-chatbot__heading-container">
+          <div className="pf-chatbot__title-container">
+            <Icon size="lg" className="pf-chatbot__title-icon">
+              {navTitleIcon}
+            </Icon>
+            <Title className="pf-chatbot__title" headingLevel="h2" {...navTitleProps}>
+              {title}
+            </Title>
+          </div>
+          {!isLoading && renderSearchAndActions()}
+        </div>
+        {isLoading ? <LoadingState {...loadingState} /> : renderDrawerContent()}
+      </>
+    );
+    return (
+      <DrawerPanelContent
+        aria-live="polite"
+        focusTrap={{ enabled: true }}
+        defaultSize="384px"
+        {...drawerPanelContentProps}
+      >
+        {drawer}
+      </DrawerPanelContent>
+    );
+  };
+
+  // An onKeyDown property must be passed to the Drawer component to handle closing
+  // the drawer panel and deactivating the focus trap via the Escape key.
+  const onEscape = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      // prevents using escape key on menu buttons from closing the panel, but I'm not sure if this is allowed
+      if (event.target instanceof HTMLInputElement && event.target.type !== 'button') {
+        setIsDrawerOpen(false);
+      }
+    }
+  };
+
+  return (
+    <Drawer
+      className={`pf-chatbot__history ${isCompact ? 'pf-m-compact' : ''}`}
+      isExpanded={isDrawerOpen}
+      onExpand={onExpand}
+      position="start"
+      onKeyDown={onEscape}
+      isInline={displayMode === ChatbotDisplayMode.fullscreen || displayMode === ChatbotDisplayMode.embedded}
+      {...props}
+    >
+      <DrawerContent panelContent={renderPanelContent()} {...drawerContentProps}>
+        <DrawerContentBody {...drawerContentBodyProps}>
+          <>
+            <div
+              className={`${isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked || displayMode === ChatbotDisplayMode.drawer) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} `}
+            ></div>
+            {drawerContent}
+          </>
+        </DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default ChatbotConversationHistoryNav;

package/src/ChatbotConversationHistoryNav/EmptyState.tsx

@@ -0,0 +1,44 @@
+import {
+  Button,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateProps
+} from '@patternfly/react-core';
+import type { FunctionComponent } from 'react';
+
+export interface HistoryEmptyStateProps extends EmptyStateProps {
+  onClick?: () => void;
+  bodyText?: string | React.ReactNode;
+  buttonText?: string;
+  buttonIcon?: React.ReactNode;
+  hasButton?: boolean;
+}
+
+export const HistoryEmptyState: FunctionComponent<HistoryEmptyStateProps> = ({
+  bodyText,
+  buttonIcon,
+  buttonText,
+  status,
+  titleText,
+  headingLevel,
+  onClick,
+  hasButton = false,
+  ...props
+}: HistoryEmptyStateProps) => (
+  <EmptyState status={status} titleText={titleText} headingLevel={headingLevel} {...props}>
+    <EmptyStateBody>{bodyText}</EmptyStateBody>
+    {hasButton && (
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button icon={buttonIcon} variant="secondary" onClick={onClick}>
+            {buttonText}
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    )}
+  </EmptyState>
+);
+
+export default HistoryEmptyState;

package/src/ChatbotConversationHistoryNav/LoadingState.tsx

@@ -0,0 +1,34 @@
+import { Skeleton, SkeletonProps } from '@patternfly/react-core';
+import type { FunctionComponent } from 'react';
+
+export const LoadingState: FunctionComponent<SkeletonProps> = ({ screenreaderText, ...rest }: SkeletonProps) => (
+  <div className="pf-chatbot__history-loading">
+    <div className="pf-chatbot__history-loading-block">
+      <Skeleton screenreaderText={screenreaderText ?? 'Loading chatbot chat history'} fontSize="3xl" {...rest} />
+    </div>
+    <div className="pf-chatbot__history-loading-block">
+      <Skeleton fontSize="sm" width="70%" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+    </div>
+    <div className="pf-chatbot__history-loading-block">
+      <Skeleton fontSize="sm" width="70%" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+    </div>
+    <div className="pf-chatbot__history-loading-block">
+      <Skeleton fontSize="sm" width="70%" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+    </div>
+    <div className="pf-chatbot__history-loading-block">
+      <Skeleton fontSize="sm" width="70%" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+    </div>
+  </div>
+);
+
+export default LoadingState;

package/src/ChatbotConversationHistoryNav/index.ts

@@ -0,0 +1,4 @@
+export { default } from './ChatbotConversationHistoryNav';
+
+export * from './ChatbotConversationHistoryNav';
+export * from './ChatbotConversationHistoryDropdown';

package/src/ChatbotFooter/ChatbotFooter.scss

@@ -0,0 +1,94 @@
+// Import related component scss files.
+@import './ChatbotFootnote';
+
+// ============================================================================
+// Chatbot Footer
+// ============================================================================
+.pf-chatbot__footer {
+  --pf-chatbot__footer--RowGap: var(--pf-t--global--spacer--md);
+  background-color: var(--pf-t--global--background--color--floating--secondary--default);
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--pf-chatbot__footer--RowGap);
+  position: relative; // this is so focus ring on parent chatbot doesn't include footer
+
+  &.pf-m-primary {
+    background-color: var(--pf-t--global--background--color--primary--default);
+  }
+}
+
+.pf-chatbot:not(.pf-chatnot--default) {
+  .pf-chatbot__footer {
+    background-color: var(--pf-t--global--background--color--secondary--default);
+
+    @at-root :where(.pf-v6-theme-glass) & {
+      background-color: var(--pf-t--global--background--color--glass--primary--default);
+    }
+  }
+}
+
+.pf-chatbot__footer-container {
+  padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg);
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  row-gap: var(--pf-chatbot__footer--RowGap);
+}
+
+// ============================================================================
+// Chatbot Display Mode - Fullscreen and Embedded
+// ============================================================================
+@media screen and (min-width: 64rem) {
+  .pf-chatbot--embedded,
+  .pf-chatbot--fullscreen {
+    .pf-chatbot__footer {
+      align-items: center;
+    }
+
+    .pf-chatbot__footer-container {
+      width: 90%;
+      max-width: 60rem;
+      padding: var(--pf-t--global--spacer--sm) 0;
+    }
+  }
+}
+
+// ============================================================================
+// Chatbot Display Mode - Docked
+// ============================================================================
+.pf-chatbot--docked {
+  .pf-chatbot__footer-container {
+    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);
+  }
+}
+
+.pf-chatbot__footer.pf-m-compact .pf-chatbot__footer-container {
+  padding: 0 var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
+  row-gap: var(--pf-t--global--spacer--sm);
+}
+
+// ============================================================================
+// High contrast
+// ============================================================================
+:root:where(.pf-v6-theme-high-contrast) {
+  // Chatbot Display Mode - Fullscreen and Embedded
+  @media screen and (min-width: 64rem) {
+    .pf-chatbot--embedded,
+    .pf-chatbot--fullscreen {
+      .pf-chatbot__footer {
+        .pf-v6-c-divider {
+          display: var(--pf-v6-hidden-visible--Display);
+        }
+      }
+    }
+  }
+}

package/src/ChatbotFooter/ChatbotFooter.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import ChatbotFooter from './ChatbotFooter';
+import '@testing-library/jest-dom';
+
+describe('ChatbotFooter', () => {
+  it('should render ChatbotFooter with children', () => {
+    render(<ChatbotFooter>Chatbot Content</ChatbotFooter>);
+    expect(screen.getByText('Chatbot Content')).toBeTruthy();
+  });
+
+  it('should render ChatbotFooter with custom classname', () => {
+    const { container } = render(<ChatbotFooter className="custom-class">Chatbot Content</ChatbotFooter>);
+    expect(container.querySelector('.custom-class')).toBeTruthy();
+  });
+
+  it('should handle isCompact', () => {
+    render(
+      <ChatbotFooter isCompact data-testid="footer">
+        Chatbot Content
+      </ChatbotFooter>
+    );
+    expect(screen.getByTestId('footer')).toHaveClass('pf-m-compact');
+  });
+
+  it('should handle isPrimary', () => {
+    render(
+      <ChatbotFooter isPrimary data-testid="footer">
+        Chatbot Content
+      </ChatbotFooter>
+    );
+    expect(screen.getByTestId('footer')).toHaveClass('pf-m-primary');
+  });
+});

package/src/ChatbotFooter/ChatbotFooter.tsx

@@ -0,0 +1,42 @@
+// ============================================================================
+// Chatbot Footer
+// ============================================================================
+
+// Global footer component
+// Supports:
+// - Message bar
+// - Footnote
+// - Footnote popover
+
+import type { HTMLProps, FunctionComponent } from 'react';
+
+import { Divider } from '@patternfly/react-core';
+
+export interface ChatbotFooterProps extends HTMLProps<HTMLDivElement> {
+  /** Children for the footer - supports MessageBar and FootNote components*/
+  children?: React.ReactNode;
+  /** Custom classname for the footer component */
+  className?: string;
+  /** Sets footer to compact styling. */
+  isCompact?: boolean;
+  /** Sets background color to primary */
+  isPrimary?: boolean;
+}
+
+export const ChatbotFooter: FunctionComponent<ChatbotFooterProps> = ({
+  children,
+  className,
+  isCompact,
+  isPrimary,
+  ...props
+}: ChatbotFooterProps) => (
+  <div
+    className={`pf-chatbot__footer ${isCompact ? 'pf-m-compact' : ''} ${isPrimary ? 'pf-m-primary' : ''} ${className ?? ''}`}
+    {...props}
+  >
+    <Divider />
+    <div className="pf-chatbot__footer-container">{children}</div>
+  </div>
+);
+
+export default ChatbotFooter;