@patternfly/chatbot 1.0.0

package/src/ChatbotModal/ChatbotModal.scss

@@ -0,0 +1,98 @@
+.pf-chatbot__chatbot-modal-backdrop {
+  position: static !important;
+}
+
+.pf-chatbot__chatbot-modal {
+  --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--medium) !important;
+  position: fixed !important;
+  inset-block-end: var(--pf-t--global--spacer--800); // no associated semantic token
+  inset-inline-end: var(--pf-t--global--spacer--lg);
+  width: 30rem !important;
+  height: 70vh;
+
+  .pf-v6-c-modal-box__title {
+    --pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--h3);
+  }
+
+  .pf-v6-c-modal-box__footer {
+    padding-block-start: var(--pf-t--global--spacer--xl);
+    padding-block-end: var(--pf-t--global--spacer--xl);
+    border-top: var(--pf-t--global--border--width--high-contrast--regular) solid
+      var(--pf-t--global--border--color--high-contrast);
+  }
+
+  .pf-v6-c-modal-box__header {
+    padding-block-end: var(--pf-t--global--spacer--sm);
+  }
+}
+
+// ============================================================================
+// 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% !important;
+    height: fit-content !important;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+// ============================================================================
+// Chatbot Display Mode - Docked
+// ============================================================================
+.pf-chatbot__chatbot-modal--docked {
+  height: 100vh;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  border-radius: 0 !important;
+  --pf-v6-c-modal-box--MaxHeight: 100vh !important;
+}
+
+// ============================================================================
+// 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;
+}
+
+// ============================================================================
+// Compact
+// ============================================================================
+.pf-chatbot__chatbot-modal.pf-m-compact {
+  .pf-v6-c-modal-box__header {
+    padding-block-end: 0;
+  }
+
+  .pf-v6-c-modal-box__footer {
+    padding-block-start: var(--pf-t--global--spacer--lg);
+    padding-block-end: var(--pf-t--global--spacer--lg);
+  }
+}

package/src/ChatbotModal/ChatbotModal.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react';
+import ChatbotModal from './ChatbotModal';
+import '@testing-library/jest-dom';
+import { ModalBody, ModalHeader } from '@patternfly/react-core';
+
+describe('ChatbotModal', () => {
+  it('should render compact modal', () => {
+    render(
+      <ChatbotModal data-testid="modal" isCompact isOpen>
+        <ModalHeader
+          title="Modal with description"
+          labelId="modal-with-description-title"
+          description="A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body."
+        />
+        <ModalBody tabIndex={0} id="modal-box-body-with-description">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Semper auctor neque vitae
+          tempus. Diam donec adipiscing tristique risus. Augue eget arcu dictum varius duis. Ut enim blandit volutpat
+          maecenas volutpat blandit aliquam. Sit amet mauris commodo quis imperdiet massa tincidunt. Habitant morbi
+          tristique senectus et netus. Fames ac turpis egestas sed tempus urna. Neque laoreet suspendisse interdum
+          consectetur libero id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Porta nibh venenatis cras
+          sed felis eget velit. Nullam non nisi est sit amet facilisis. Nunc mi ipsum faucibus vitae. Lorem sed risus
+          ultricies tristique nulla aliquet enim tortor at. Egestas sed tempus urna et pharetra pharetra massa massa
+          ultricies. Lacinia quis vel eros donec ac odio tempor orci. Malesuada fames ac turpis egestas integer eget
+          aliquet.
+          <br />
+          <br />
+          Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Molestie at elementum eu facilisis sed odio
+          morbi. Elit pellentesque habitant morbi tristique. Consequat nisl vel pretium lectus quam id leo in vitae.
+          Quis varius quam quisque id diam vel quam elementum. Viverra nam libero justo laoreet sit amet cursus.
+          Sollicitudin tempor id eu nisl nunc. Orci nulla pellentesque dignissim enim sit amet venenatis. Dignissim enim
+          sit amet venenatis urna cursus eget. Iaculis at erat pellentesque adipiscing commodo elit. Faucibus pulvinar
+          elementum integer enim neque volutpat. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Nunc mattis
+          enim ut tellus elementum sagittis vitae. Blandit cursus risus at ultrices. Tellus mauris a diam maecenas sed
+          enim. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla.
+          <br />
+          <br />
+          Nulla pharetra diam sit amet nisl suscipit adipiscing. Ac tortor vitae purus faucibus ornare suspendisse sed
+          nisi. Sed felis eget velit aliquet sagittis id consectetur purus. Tincidunt tortor aliquam nulla facilisi cras
+          fermentum. Volutpat est velit egestas dui id ornare arcu odio. Pharetra magna ac placerat vestibulum. Ultrices
+          sagittis orci a scelerisque purus semper eget duis at. Nisi est sit amet facilisis magna etiam tempor orci eu.
+          Convallis tellus id interdum velit. Facilisis sed odio morbi quis commodo odio aenean sed.
+          <br />
+          <br />
+          Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Facilisi etiam dignissim diam quis enim
+          lobortis scelerisque fermentum. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Magna
+          etiam tempor orci eu lobortis elementum. Quis auctor elit sed vulputate mi sit. Eleifend quam adipiscing vitae
+          proin sagittis nisl rhoncus mattis rhoncus. Erat velit scelerisque in dictum non. Sit amet nulla facilisi
+          morbi tempus iaculis urna. Enim ut tellus elementum sagittis vitae et leo duis ut. Lectus arcu bibendum at
+          varius vel pharetra vel turpis. Morbi tristique senectus et netus et. Eget aliquet nibh praesent tristique
+          magna sit amet purus gravida. Nisl purus in mollis nunc sed id semper risus. Id neque aliquam vestibulum
+          morbi. Mauris a diam maecenas sed enim ut sem. Egestas tellus rutrum tellus pellentesque.
+        </ModalBody>
+      </ChatbotModal>
+    );
+    expect(screen.getByTestId('modal')).toHaveClass('pf-m-compact');
+  });
+});

package/src/ChatbotModal/ChatbotModal.tsx

@@ -0,0 +1,47 @@
+// ============================================================================
+// Code Modal - Chatbot Modal with Code Editor
+// ============================================================================
+import type { FunctionComponent } 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;
+  /** Additional className applied to modal */
+  className?: string;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
+}
+
+export const ChatbotModal: FunctionComponent<ChatbotModalProps> = ({
+  children,
+  displayMode = ChatbotDisplayMode.default,
+  className,
+  isOpen,
+  isCompact,
+  ...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} ${isCompact ? 'pf-m-compact' : ''} ${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,31 @@
+// ============================================================================
+// 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 type { FunctionComponent } from 'react';
+
+// Import PatternFly components
+import { Popover, PopoverProps } from '@patternfly/react-core';
+
+export const ChatbotPopover: 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,49 @@
+// ============================================================================
+// 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);
+  --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
+  --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--floating--clicked);
+  --pf-v6-c-button--m-plain--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-button--m-plain--hover--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-button--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-button--m-plain--BorderWidth: 1px;
+  --pf-v6-c-button--m-plain--hover--BorderWidth: 1px;
+  --pf-v6-c-button--m-plain--m-clicked--BorderWidth: 1px;
+  padding: var(--pf-t--global--spacer--md);
+  box-shadow: var(--pf-t--global--box-shadow--sm);
+
+  .pf-v6-c-button__icon {
+    display: contents;
+  }
+
+  // Icon
+  svg {
+    width: var(--pf-t--global--spacer--lg);
+    height: var(--pf-t--global--spacer--lg);
+  }
+
+  &--active {
+    --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--floating--clicked);
+  }
+
+  &--secondary {
+    --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+    --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+    --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--secondary--clicked);
+
+    &.pf-chatbot__button--active {
+      --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--secondary--clicked);
+    }
+  }
+}
+
+.pf-chatbot__button--round {
+  border-radius: var(--pf-t--global--border--radius--pill);
+  width: 3rem;
+  height: 3rem;
+}

package/src/ChatbotToggle/ChatbotToggle.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import ChatbotToggle from './ChatbotToggle';
+
+describe('ChatbotToggle', () => {
+  it('should render tooltipLabel correctly', async () => {
+    render(<ChatbotToggle tooltipLabel="Tooltip" />);
+    await userEvent.click(screen.getByRole('button', { name: /Tooltip toggle/i }));
+    expect(screen.getByRole('tooltip', { name: /Tooltip/i })).toBeTruthy();
+  });
+  it('should render toggleButtonLabel correctly', async () => {
+    render(<ChatbotToggle tooltipLabel="Chatbot" toggleButtonLabel="Button" />);
+    expect(screen.getByRole('button', { name: /Button/i })).toBeTruthy();
+  });
+  it('should call onToggleChatbot when clicked', async () => {
+    const spy = jest.fn();
+    render(<ChatbotToggle tooltipLabel="Chatbot" onToggleChatbot={spy} />);
+    await userEvent.click(screen.getByRole('button'));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should handle isChatbotVisible correctly when true', () => {
+    render(<ChatbotToggle tooltipLabel="Chatbot" isChatbotVisible openIconTestId="Open" />);
+    expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+    expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button--active');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByTestId('Open')).toBeTruthy();
+  });
+  it('should handle isChatbotVisible correctly when false', () => {
+    render(<ChatbotToggle tooltipLabel="Chatbot" isChatbotVisible={false} openIconTestId="Open" />);
+    expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+    expect(screen.getByRole('button')).not.toHaveClass('pf-chatbot__button--active');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByTestId('Open')).toBeFalsy();
+  });
+  it('should handle isRound correctly', () => {
+    render(<ChatbotToggle tooltipLabel="Chatbot" isRound />);
+    expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+    expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button--round');
+  });
+  it('should handle className correctly', () => {
+    render(<ChatbotToggle tooltipLabel="Chatbot" className="test" />);
+    expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+    expect(screen.getByRole('button')).toHaveClass('test');
+  });
+  it('should handle colorVariant secondary correctly', () => {
+    render(<ChatbotToggle tooltipLabel="Chatbot" colorVariant="secondary" />);
+    expect(screen.getByRole('button')).toHaveClass('pf-chatbot__button--secondary');
+  });
+});

package/src/ChatbotToggle/ChatbotToggle.tsx

@@ -0,0 +1,96 @@
+// ============================================================================
+// Chatbot Toggle
+// ============================================================================
+import type { Ref, FunctionComponent } from 'react';
+
+import { forwardRef } from 'react';
+import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-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>;
+  /** Whether toggle is a circle */
+  isRound?: boolean;
+  /** Class name applied to toggle */
+  className?: string;
+  /** Test id applied to default open icon */
+  openIconTestId?: string;
+  /** Color variant applied to the toggle button */
+  colorVariant?: 'default' | 'secondary';
+}
+
+const ChatIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="33" height="31" viewBox="0 0 33 31" fill="none">
+    <g clipPath="url(#clip0_11685_20917)">
+      <path
+        d="M29.7 11.0714H17.6V7.75H19.525C20.2834 7.75 20.9 7.12939 20.9 6.36607V1.38393C20.9 0.620609 20.2834 0 19.525 0H13.475C12.7166 0 12.1 0.620609 12.1 1.38393V6.36607C12.1 7.12939 12.7166 7.75 13.475 7.75H15.4V11.0714H3.3C1.48027 11.0714 0 12.5613 0 14.3929V27.6786C0 29.5101 1.48027 31 3.3 31H29.7C31.5197 31 33 29.5101 33 27.6786V14.3929C33 12.5613 31.5197 11.0714 29.7 11.0714ZM14.3 2.21429H18.7V5.53571H14.3V2.21429ZM30.8 27.6786C30.8 28.2894 30.3069 28.7857 29.7 28.7857H3.3C2.6936 28.7857 2.2 28.2894 2.2 27.6786V14.3929C2.2 13.7825 2.6936 13.2857 3.3 13.2857H29.7C30.3069 13.2857 30.8 13.7825 30.8 14.3929V27.6786ZM8.525 17.7143V19.9286C8.525 20.387 8.15547 20.7589 7.7 20.7589H5.5C5.04453 20.7589 4.675 20.387 4.675 19.9286V17.7143C4.675 17.2559 5.04453 16.8839 5.5 16.8839H7.7C8.15547 16.8839 8.525 17.2559 8.525 17.7143ZM28.325 17.7143V19.9286C28.325 20.387 27.9555 20.7589 27.5 20.7589H25.3C24.8445 20.7589 24.475 20.387 24.475 19.9286V17.7143C24.475 17.2559 24.8445 16.8839 25.3 16.8839H27.5C27.9555 16.8839 28.325 17.2559 28.325 17.7143ZM20.5691 22.6683C20.8893 23.0965 20.8033 23.703 20.3779 24.0241C19.2521 24.8761 17.9115 25.3259 16.5 25.3259C15.0885 25.3259 13.7473 24.8761 12.6215 24.0241C12.1961 23.703 12.1107 23.0965 12.4298 22.6683C12.7494 22.2391 13.3536 22.1526 13.7774 22.4759C15.3576 23.6695 17.6408 23.6695 19.2221 22.4759C19.6475 22.1515 20.2512 22.2402 20.5691 22.6683Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_11685_20917">
+        <rect width="33" height="31" fill="currentColor" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+const ChatbotToggleBase: FunctionComponent<ChatbotToggleProps> = ({
+  tooltipLabel,
+  isChatbotVisible,
+  onToggleChatbot,
+  tooltipProps,
+  toggleButtonLabel,
+  closedToggleIcon: ClosedToggleIcon,
+  innerRef,
+  isRound = true,
+  className,
+  openIconTestId,
+  colorVariant = 'default',
+  ...props
+}: ChatbotToggleProps) => {
+  // Configure icon
+  const closedIcon = ClosedToggleIcon ? <ClosedToggleIcon /> : <ChatIcon />;
+  const icon = isChatbotVisible ? <RhMicronsCaretDownIcon data-testid={openIconTestId} /> : closedIcon;
+
+  return (
+    <Tooltip
+      content={tooltipLabel}
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
+      <Button
+        className={`pf-chatbot__button ${colorVariant === 'secondary' ? 'pf-chatbot__button--secondary' : ''} ${isChatbotVisible ? 'pf-chatbot__button--active' : ''} ${isRound ? 'pf-chatbot__button--round' : ''} ${className ? className : ''}`}
+        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 = forwardRef((props: ChatbotToggleProps, ref: 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,58 @@
+// ============================================================================
+// 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--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;
+    overflow: visible;
+    height: 100%;
+  }
+}
+
+.pf-chatbot--layout--welcome.pf-m-compact {
+  gap: var(--pf-t--global--spacer--md);
+  padding-block-end: var(--pf-t--global--spacer--md);
+
+  .pf-chatbot__prompt-suggestions {
+    gap: var(--pf-t--global--spacer--md);
+  }
+}
+
+// ============================================================================
+// 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,84 @@
+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="Hi, ChatBot User!" description="How can I help you today?" />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render correctly', () => {
+    render(<ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />);
+    expect(screen.getByText('Hi, ChatBot User!')).toBeTruthy();
+    expect(screen.getByText('How can I help you today?')).toBeTruthy();
+  });
+  it('should render prompts with titles correctly', () => {
+    render(
+      <ChatbotWelcomePrompt
+        title="Hi, ChatBot User!"
+        description="How can I help you today?"
+        prompts={[{ title: 'Set up account' }]}
+      />
+    );
+    expect(screen.getByText('Set up account')).toBeTruthy();
+  });
+  it('should render prompts with messages correctly', () => {
+    render(
+      <ChatbotWelcomePrompt
+        title="Hi, ChatBot User!"
+        description="How can I help you today?"
+        prompts={[
+          { title: 'Set up account', message: 'Choose the necessary settings and preferences for your account.' }
+        ]}
+      />
+    );
+    expect(screen.getByText('Choose the necessary settings and preferences for your account.')).toBeTruthy();
+  });
+  it('should render prompts with onClick correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <ChatbotWelcomePrompt
+        title="Hi, ChatBot User!"
+        description="How can I help you today?"
+        prompts={[
+          {
+            title: 'Set up account',
+            message: 'Choose the necessary settings and preferences for your account.',
+            onClick: spy
+          }
+        ]}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Set up account/i }));
+    expect(spy).toHaveBeenCalled();
+  });
+  it('should apply className appropriately', () => {
+    render(
+      <ChatbotWelcomePrompt
+        title="Hi, ChatBot User!"
+        description="How can I help you today?"
+        className="test"
+        testId="welcome-prompt"
+      />
+    );
+    const element = screen.getByTestId('welcome-prompt');
+    expect(element).toHaveClass('test');
+  });
+
+  it('should handle isCompact', () => {
+    render(
+      <ChatbotWelcomePrompt
+        title="Hi, ChatBot User!"
+        description="How can I help you today?"
+        className="test"
+        testId="welcome-prompt"
+        isCompact
+      />
+    );
+    expect(screen.getByTestId('welcome-prompt')).toHaveClass('pf-m-compact');
+  });
+});