@patternfly/chatbot 2.1.0-prerelease.17

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+
+export interface ChatbotHeaderMenuProps {
+  /** 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>;
+}
+
+const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = ({
+  className,
+  onMenuToggle,
+  tooltipProps,
+  menuAriaLabel = 'Toggle menu',
+  innerRef
+}: ChatbotHeaderMenuProps) => (
+  <div className={`pf-chatbot__menu ${className}`}>
+    <Tooltip content="Menu" position="bottom" {...tooltipProps}>
+      <Button
+        className="pf-chatbot__button--toggle-menu"
+        variant="plain"
+        onClick={onMenuToggle}
+        aria-label={menuAriaLabel}
+        ref={innerRef}
+        icon={
+          <Icon size="xl" isInline>
+            <BarsIcon />
+          </Icon>
+        }
+      />
+    </Tooltip>
+  </div>
+);
+
+export const ChatbotHeaderMenu = React.forwardRef(
+  (props: ChatbotHeaderMenuProps, ref: React.Ref<HTMLButtonElement>) => (
+    <ChatbotHeaderMenuBase innerRef={ref} {...props} />
+  )
+);

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import {
+  Tooltip,
+  TooltipProps,
+  Dropdown,
+  DropdownProps,
+  MenuToggle,
+  MenuToggleElement,
+  Icon
+} from '@patternfly/react-core';
+import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-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;
+}
+
+export const ChatbotHeaderOptionsDropdown: React.FunctionComponent<ChatbotHeaderOptionsDropdownProps> = ({
+  className,
+  children,
+  onSelect,
+  tooltipProps,
+  menuToggleAriaLabel = 'Chatbot options',
+  ...props
+}: ChatbotHeaderOptionsDropdownProps) => {
+  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <Tooltip className="pf-chatbot__tooltip" content="Chatbot options" position="bottom" {...tooltipProps}>
+      <MenuToggle
+        className="pf-chatbot__button--toggle-options"
+        variant="plain"
+        aria-label={menuToggleAriaLabel}
+        ref={toggleRef}
+        icon={
+          <Icon iconSize="xl" isInline>
+            <EllipsisIcon />
+          </Icon>
+        }
+        isExpanded={isOptionsMenuOpen}
+        onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}
+      />
+    </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.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { Tooltip, TooltipProps, Dropdown, DropdownProps, MenuToggle, MenuToggleElement } 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;
+}
+
+export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeaderSelectorDropdownProps> = ({
+  value,
+  className,
+  children,
+  onSelect,
+  tooltipProps,
+  tooltipContent = 'Chatbot selector',
+  menuToggleAriaLabel,
+  ...props
+}: ChatbotHeaderSelectorDropdownProps) => {
+  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
+  const [defaultAriaLabel, setDefaultAriaLabel] = React.useState('Chatbot selector');
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <Tooltip className="pf-chatbot__tooltip" content={tooltipContent} position="bottom" {...tooltipProps}>
+      <MenuToggle
+        variant="secondary"
+        aria-label={menuToggleAriaLabel ?? defaultAriaLabel}
+        ref={toggleRef}
+        isExpanded={isOptionsMenuOpen}
+        onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}
+      >
+        {value}
+      </MenuToggle>
+    </Tooltip>
+  );
+
+  return (
+    <Dropdown
+      className={`pf-chatbot__selections ${className ?? ''}`}
+      isOpen={isOptionsMenuOpen}
+      onSelect={(e, value) => {
+        onSelect && onSelect(e, value);
+        setDefaultAriaLabel(`Chatbot selector: ${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.tsx

@@ -0,0 +1,57 @@
+import React 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 overlay screen */
+  showOnEmbedded?: 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: React.FunctionComponent<ChatbotHeaderTitleProps> = ({
+  className,
+  children,
+  displayMode,
+  showOnFullScreen,
+  showOnDocked,
+  showOnEmbedded,
+  showOnDefault
+}: ChatbotHeaderTitleProps) => {
+  const renderChildren = () => {
+    if (displayMode && (showOnDefault || showOnFullScreen || showOnEmbedded || showOnDocked)) {
+      /* eslint-disable indent */
+      switch (displayMode) {
+        case ChatbotDisplayMode.fullscreen:
+          return showOnFullScreen ?? showOnDefault;
+        case ChatbotDisplayMode.docked:
+          return showOnDocked ?? showOnDefault;
+        case ChatbotDisplayMode.embedded:
+          return showOnEmbedded ?? 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,9 @@
+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';

package/src/ChatbotModal/ChatbotModal.scss

@@ -0,0 +1,93 @@
+.pf-chatbot__chatbot-modal-backdrop {
+  position: static;
+}
+
+.pf-chatbot__chatbot-modal {
+  --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--medium);
+  position: fixed;
+  inset-block-end: var(--pf-t--global--spacer--800); // no associated semantic token
+  inset-inline-end: var(--pf-t--global--spacer--lg);
+  width: 30rem;
+  height: 70vh;
+  background-color: var(--pf-t--global--background--color--secondary--default);
+
+  .pf-v6-c-modal-box__title {
+    --pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--h3);
+  }
+  .pf-v6-c-button.pf-m-primary.pf-m-block,
+  .pf-v6-c-button.pf-m-link.pf-m-block {
+    --pf-v6-c-button--FontWeight: 500;
+  }
+  .pf-v6-c-modal-box__footer {
+    padding-block-start: var(--pf-t--global--spacer--xl);
+    padding-block-end: var(--pf-t--global--spacer--xl);
+  }
+  .pf-v6-c-modal-box__header {
+    padding-block-end: var(--pf-t--global--spacer--lg);
+  }
+}
+
+// ============================================================================
+// Chatbot Display Mode - Fullscreen and Embedded
+// ============================================================================
+@media screen and (max-width: 600px) {
+  .pf-chatbot__chatbot-modal--embedded,
+  .pf-chatbot__chatbot-modal--fullscreen {
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    width: 100%;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+@media screen and (min-width: 601px) {
+  .pf-chatbot__chatbot-modal--embedded,
+  .pf-chatbot__chatbot-modal--fullscreen {
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    width: 50%;
+    height: fit-content;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+// ============================================================================
+// Chatbot Display Mode - Default
+// ============================================================================
+.pf-chatbot__chatbot-modal--default {
+  box-shadow: unset;
+}
+
+// ============================================================================
+// Chatbot Display Mode - Docked
+// ============================================================================
+.pf-chatbot__chatbot-modal--docked {
+  height: 100vh;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  border-radius: 0;
+  --pf-v6-c-modal-box--MaxHeight: 100vh;
+  box-shadow: unset;
+}
+
+// ============================================================================
+// Dark theme
+// ============================================================================
+.pf-v6-theme-dark {
+  .pf-v6-c-modal-box.pf-chatbot__chatbot-modal {
+    .pf-v6-c-modal-box__title {
+      color: #fff;
+    }
+  }
+}
+
+// ============================================================================
+// Backdrop
+// ============================================================================
+.pf-v6-c-backdrop.pf-chatbot__backdrop {
+  position: absolute;
+}

package/src/ChatbotModal/ChatbotModal.tsx

@@ -0,0 +1,43 @@
+// ============================================================================
+// Code Modal - Chatbot Modal with Code Editor
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import { Modal, ModalProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+
+export interface ChatbotModalProps extends Omit<ModalProps, 'ref'> {
+  /** Display mode for the Chatbot parent; this influences the styles applied */
+  displayMode?: ChatbotDisplayMode;
+  className?: string;
+}
+
+export const ChatbotModal: React.FunctionComponent<ChatbotModalProps> = ({
+  children,
+  displayMode = ChatbotDisplayMode.default,
+  className,
+  isOpen,
+  ...props
+}: ChatbotModalProps) => {
+  const modal = (
+    <Modal
+      isOpen={isOpen}
+      ouiaId="ChatbotModal"
+      aria-labelledby="chatbot-modal-title"
+      aria-describedby="chatbot-modal"
+      className={`pf-chatbot__chatbot-modal pf-chatbot__chatbot-modal--${displayMode} ${className}`}
+      backdropClassName="pf-chatbot__chatbot-modal-backdrop"
+      {...props}
+    >
+      {children}
+    </Modal>
+  );
+
+  if ((displayMode === ChatbotDisplayMode.fullscreen || displayMode === ChatbotDisplayMode.embedded) && isOpen) {
+    return <div className="pf-v6-c-backdrop pf-chatbot__backdrop">{modal}</div>;
+  }
+  return modal;
+};
+
+export default ChatbotModal;

package/src/ChatbotModal/index.ts

@@ -0,0 +1,3 @@
+export { default } from './ChatbotModal';
+
+export * from './ChatbotModal';

package/src/ChatbotPopover/ChatbotPopover.scss

@@ -0,0 +1,27 @@
+// ============================================================================
+// Chatbot Popover
+// ============================================================================
+.pf-chatbot__popover {
+  .pf-v6-c-popover__arrow { display: none; }
+
+  // Footnote popover
+  &--footnote.pf-chatbot__popover {
+
+    // Contents
+    img { border-radius: var(--pf-t--global--border--radius--small); }
+    .pf-v6-c-content--h3 { font-weight: var(--pf-t--global--font--weight--body--bold); }
+    .pf-v6-c-content--p {
+      font-size: var(--pf-t--global--font--size--body--lg);
+    }
+
+    // Actions
+    .pf-v6-c-button {
+      font-weight: var(--pf-t--global--font--weight--body--bold);
+      font-size: var(--pf-t--global--font--size--body--lg);
+    }
+    .pf-v6-c-content--a {
+      font-size: var(--pf-t--global--font--size--body--lg);
+    }
+  }
+
+}

package/src/ChatbotPopover/ChatbotPopover.tsx

@@ -0,0 +1,15 @@
+// ============================================================================
+// Chatbot Popover
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import { Popover, PopoverProps } from '@patternfly/react-core';
+
+export const ChatbotPopover: React.FunctionComponent<PopoverProps> = ({ children, className, ...props }) => (
+  <Popover className={`pf-chatbot__popover ${className ?? ''}`} showClose={false} {...props}>
+    {children}
+  </Popover>
+);
+
+export default ChatbotPopover;

package/src/ChatbotPopover/index.ts

@@ -0,0 +1,3 @@
+export { default } from './ChatbotPopover';
+
+export * from './ChatbotPopover';

package/src/ChatbotToggle/ChatbotToggle.scss

@@ -0,0 +1,26 @@
+// ============================================================================
+// Toggle Chatbot
+// ============================================================================
+.pf-v6-c-button.pf-chatbot__button {
+  position: fixed;
+  inset-block-end: var(--pf-t--global--spacer--md);
+  inset-inline-end: var(--pf-t--global--spacer--md);
+  background-color: var(--pf-t--global--background--color--inverse--default);
+  border-radius: var(--pf-t--global--border--radius--pill);
+  --pf-v6-c-button__icon--Color: var(--pf-t--chatbot-toggle--color);
+  padding: var(--pf-t--global--spacer--md);
+  width: 3rem;
+  height: 3rem;
+
+  &:hover, &:focus {
+    background-color: var(--pf-t--chatbot-toggle--background--hover);
+  }
+
+  .pf-v6-c-button__icon {
+    display: contents;
+  }
+
+  // Icon
+  svg { width: var(--pf-t--global--spacer--lg); height: var(--pf-t--global--spacer--lg); }
+}
+

package/src/ChatbotToggle/ChatbotToggle.tsx

@@ -0,0 +1,80 @@
+// ============================================================================
+// Chatbot Toggle
+// ============================================================================
+import React from 'react';
+import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
+import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
+
+export interface ChatbotToggleProps extends ButtonProps {
+  /** Contents of the tooltip applied to the toggle button */
+  toolTipLabel?: React.ReactNode;
+  /** Props spread to the PF Tooltip component */
+  tooltipProps?: Omit<TooltipProps, 'content'>;
+  /** Flag indicating visibility of the chatbot appended to the toggle */
+  isChatbotVisible?: boolean;
+  /** Callback fired when toggle button is clicked */
+  onToggleChatbot?: () => void;
+  /** Accessible label for the toggle button */
+  toggleButtonLabel?: string;
+  /** An image displayed in the chatbot toggle when it is closed */
+  closedToggleIcon?: () => JSX.Element;
+  /** Ref applied to toggle */
+  innerRef?: React.Ref<HTMLButtonElement>;
+}
+
+const ChatIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <path
+      fill="var(--pf-t--global--icon--color--inverse)"
+      stroke="var(--pf-t--global--icon--color--inverse)"
+      strokeLinejoin="round"
+      strokeWidth=".75"
+      d="M3.577 14.382c0 .198.12.38.31.46l.19.04a.492.492 0 0 0 .349-.143l3.028-3.028h8.513a.489.489 0 0 0 .492-.492V2.491A.489.489 0 0 0 15.967 2H1.691a.489.489 0 0 0-.492.491v8.728c0 .135.056.262.143.349a.498.498 0 0 0 .349.143h1.878v2.663h.008v.008ZM2.19 10.72V2.983h13.278v7.729H7.24a.512.512 0 0 0-.35.143l-2.322 2.322v-1.974a.498.498 0 0 0-.142-.348.492.492 0 0 0-.35-.143H2.19v.008Z"
+    />
+    <path
+      fill="var(--pf-t--global--text--color--inverse)"
+      stroke="var(--pf-t--global--text--color--inverse)"
+      strokeLinejoin="round"
+      strokeWidth=".75"
+      d="M22.301 9.135h-3.963a.489.489 0 0 0-.492.491c0 .27.222.492.492.492h3.472v7.737h-1.88a.404.404 0 0 0-.348.134.492.492 0 0 0-.143.35v1.973l-2.322-2.323a.492.492 0 0 0-.349-.142H8.532v-4.265a.489.489 0 0 0-.492-.492.494.494 0 0 0-.491.492v4.756c0 .277.222.492.491.492h8.514l3.028 3.028a.492.492 0 0 0 .349.142l.19-.04a.502.502 0 0 0 .31-.459V18.83h1.878c.111-.008.262-.048.349-.135a.491.491 0 0 0 .142-.349v-8.72a.489.489 0 0 0-.491-.491h-.008Z"
+    />
+  </svg>
+);
+
+const ChatbotToggleBase: React.FunctionComponent<ChatbotToggleProps> = ({
+  toolTipLabel,
+  isChatbotVisible,
+  onToggleChatbot,
+  tooltipProps,
+  toggleButtonLabel,
+  closedToggleIcon: ClosedToggleIcon,
+  innerRef,
+  ...props
+}: ChatbotToggleProps) => {
+  // Configure icon
+  const closedIcon = ClosedToggleIcon ? <ClosedToggleIcon /> : <ChatIcon />;
+  const icon = isChatbotVisible ? <AngleDownIcon /> : closedIcon;
+
+  return (
+    <Tooltip content={toolTipLabel} {...tooltipProps}>
+      <Button
+        className={`pf-chatbot__button ${isChatbotVisible ? 'pf-chatbot__button--active' : ''}`}
+        variant="plain"
+        aria-label={toggleButtonLabel || `${toolTipLabel} toggle`}
+        onClick={onToggleChatbot}
+        aria-expanded={isChatbotVisible}
+        icon={<Icon isInline>{icon}</Icon>}
+        ref={innerRef}
+        {...props}
+      >
+        {/* Notification dot placeholder */}
+      </Button>
+    </Tooltip>
+  );
+};
+
+const ChatbotToggle = React.forwardRef((props: ChatbotToggleProps, ref: React.Ref<any>) => (
+  <ChatbotToggleBase innerRef={ref} {...props} />
+));
+
+export default ChatbotToggle;

package/src/ChatbotToggle/index.ts

@@ -0,0 +1,3 @@
+export { default } from './ChatbotToggle';
+
+export * from './ChatbotToggle';

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss

@@ -0,0 +1,48 @@
+// ============================================================================
+// Chatbot Layout - Chat - Welcome
+// ============================================================================
+.pf-chatbot--layout--welcome {
+  padding-block-end: var(--pf-t--global--spacer--lg);
+  flex-direction: column;
+  display: flex;
+  gap: var(--pf-t--global--spacer--lg);
+
+  .pf-v6-c-content--h1 {
+    --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--3xl); // larger than any of our semantic tokens
+    --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--400);
+    --pf-v6-c-content--h1--MarginBlockEnd: 0;
+  }
+
+  .pf-chatbot__hello {
+    color: var(--pf-t--global--color--brand--default);
+  }
+
+  .pf-chatbot__question {
+    color: var(--pf-t--global--text--color--subtle);
+  }
+
+  .pf-chatbot__prompt-suggestions {
+    flex-direction: column;
+    display: flex;
+    gap: var(--pf-t--global--spacer--lg);
+  }
+
+  .pf-chatbot__prompt-suggestions > * {
+    flex: 1;
+  }
+}
+
+// ============================================================================
+// Chatbot Display Mode - Fullscreen and Embedded
+// ============================================================================
+@media screen and (min-width: 64rem) {
+  .pf-chatbot--fullscreen,
+  .pf-chatbot--embedded {
+    .pf-chatbot--layout--welcome {
+      .pf-chatbot__prompt-suggestions {
+        flex-direction: row;
+        align-items: baseline;
+      }
+    }
+  }
+}

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ChatbotWelcomePrompt from './ChatbotWelcomePrompt';
+import userEvent from '@testing-library/user-event';
+
+describe('ChatbotWelcomePrompt', () => {
+  it('should render welcome prompt', () => {
+    const { container } = render(
+      <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render correctly', () => {
+    render(<ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />);
+    expect(screen.getByText('Hello, Chatbot User')).toBeTruthy();
+    expect(screen.getByText('How may I help you today?')).toBeTruthy();
+  });
+  it('should render prompts with titles correctly', () => {
+    render(
+      <ChatbotWelcomePrompt
+        title="Hello, Chatbot User"
+        description="How may I help you today?"
+        prompts={[{ title: 'Topic 1' }]}
+      />
+    );
+    expect(screen.getByText('Topic 1')).toBeTruthy();
+  });
+  it('should render prompts with messages correctly', () => {
+    render(
+      <ChatbotWelcomePrompt
+        title="Hello, Chatbot User"
+        description="How may I help you today?"
+        prompts={[{ title: 'Topic 1', message: 'Helpful prompt for Topic 1' }]}
+      />
+    );
+    expect(screen.getByText('Helpful prompt for Topic 1')).toBeTruthy();
+  });
+  it('should render prompts with onClick correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <ChatbotWelcomePrompt
+        title="Hello, Chatbot User"
+        description="How may I help you today?"
+        prompts={[{ title: 'Topic 1', message: 'Helpful prompt for Topic 1', onClick: spy }]}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Topic 1/i }));
+    expect(spy).toHaveBeenCalled();
+  });
+  it('should apply className appropriately', () => {
+    render(
+      <ChatbotWelcomePrompt
+        title="Hello, Chatbot User"
+        description="How may I help you today?"
+        className="test"
+        testId="welcome-prompt"
+      />
+    );
+    const element = screen.getByTestId('welcome-prompt');
+    expect(element).toHaveClass('test');
+  });
+});