@patternfly/chatbot 6.5.0-prerelease.17 → 6.5.0-prerelease.19

package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -1,7 +1,7 @@
 ---
 # Sidenav top-level section
 # should be the same for all markdown files
-section: Extensions
+section: extensions
 subsection: ChatBot
 # Sidenav secondary level section
 # should be the same for all markdown files
@@ -53,6 +53,7 @@ import FileDropZone from '@patternfly/chatbot/dist/dynamic/FileDropZone';
 import { PreviewAttachment } from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
 import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
 import TermsOfUse from '@patternfly/chatbot/dist/dynamic/TermsOfUse';
+import Onboarding from '@patternfly/chatbot/dist/dynamic/Onboarding';
 import {
 ChatbotHeader,
 ChatbotHeaderCloseButton,
@@ -85,6 +86,7 @@ import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import termsAndConditionsHeader from './PF-TermsAndConditionsHeader.svg';
+import onboardingHeader from './RH-Hat-Image.svg';
 import { CloseIcon, SearchIcon, OutlinedCommentsIcon } from '@patternfly/react-icons';
 import { FunctionComponent, FormEvent, useState, useRef, MouseEvent, isValidElement, cloneElement, Children, ReactNode, Ref, MouseEvent as ReactMouseEvent, CSSProperties, useEffect} from 'react';
 import FilePreview from '@patternfly/chatbot/dist/dynamic/FilePreview';
@@ -127,7 +129,7 @@ Your code structure should look like this:
 
 ### Welcome message
 
-To introduce users to the ChatBot experience, display a welcome message before they input their first message. This brief message should follow our [conversation design guidelines](/patternfly-ai/conversation-design) to welcome users to the ChatBot experience and encourage them to interact.
+To introduce users to the ChatBot experience, display a welcome message before they input their first message. This brief message should follow our [conversation design guidelines](/ai/conversation-design) to welcome users to the ChatBot experience and encourage them to interact.
 
 This message can be dismissed once a user sends their first message. To change the arrangement of the message within the message box, specify the `position` in the `<MessageBox>` component.
 
@@ -424,24 +426,6 @@ The drawer can also be used to display a list of basic menu items.
 
 ```
 
-### Terms of use
-
-Based on the [PatternFly modal](/components/modal), this modal adapts to the ChatBot display mode and is meant to display terms and conditions for using a ChatBot in your project. The image in the header can be toggled on or off depending on whether the `image` and `altText` props are provided.
-
-This example also includes an example of how to use [skip to content](/extensions/chatbot/ui#skip-to-content). When the terms of use modal is open, focus is placed on the terms of use container. When it is closed, focus is placed on the ChatBot. In a real example with a functioning ChatBot toggle, you would also want to place focus on the toggle when appropriate.
-
-```js file="./TermsOfUse.tsx" isFullscreen
-
-```
-
-### Compact terms of use
-
-To apply compact styling to the terms of use modal, pass `isCompact` to `<TermsOfUse>`. This will remove the header image and adjust the spacing of text, so that there is less white space in the modal.
-
-```js file="./TermsOfUseCompact.tsx" isFullscreen
-
-```
-
 ### Settings
 
 To contain user preference controls and other ChatBot setting options, you can create a separate settings page that can accept any number of buttons, dropdown menus, toggles, labels, and so on. This settings page will render all components appropriately within all 4 display modes.
@@ -469,3 +453,37 @@ Based on the [PatternFly modal](/components/modal), this modal adapts to the Cha
 ```js file="./ChatbotModal.tsx" isFullscreen
 
 ```
+
+### Onboarding
+
+You can use the onboarding modal to introduce users to your ChatBot and provide necessary information. The title, image, and body text are customizable.
+
+```js file="./Onboarding.tsx" isFullscreen
+
+```
+
+### Compact onboarding
+
+To make the onboarding modal compact, with less spacing, pass `isCompact` to the `<Onboarding>` component.
+
+```js file="./CompactOnboarding.tsx" isFullscreen
+
+```
+
+### Terms of use
+
+Based on the [PatternFly modal](/components/modal), this modal adapts to the ChatBot display mode and is meant to display terms and conditions for using a ChatBot in your project. The image in the header can be toggled on or off depending on whether the `image` and `altText` props are provided.
+
+This example also includes an example of how to use [skip to content](/extensions/chatbot/ui#skip-to-content). When the terms of use modal is open, focus is placed on the terms of use container. When it is closed, focus is placed on the ChatBot. In a real example with a functioning ChatBot toggle, you would also want to place focus on the toggle when appropriate.
+
+```js file="./TermsOfUse.tsx" isFullscreen
+
+```
+
+### Compact terms of use
+
+To apply compact styling to the terms of use modal, pass `isCompact` to `<TermsOfUse>`. This will remove the header image and adjust the spacing of text, so that there is less white space in the modal.
+
+```js file="./TermsOfUseCompact.tsx" isFullscreen
+
+```

package/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md

@@ -1,7 +1,7 @@
 ---
 # Sidenav top-level section
 # should be the same for all markdown files
-section: Extensions
+section: extensions
 subsection: ChatBot
 # Sidenav secondary level section
 # should be the same for all markdown files

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -1,7 +1,7 @@
 ---
 # Sidenav top-level section
 # should be the same for all markdown files
-section: Extensions
+section: extensions
 subsection: ChatBot
 # Sidenav secondary level section
 # should be the same for all markdown files
@@ -133,7 +133,7 @@ This demo displays a ChatBot in a static, inline drawer. This demo includes:
 
 ### Primary color background
 
-This demo displays an embedded ChatBot with a [primary background color](/design-foundations/colors#background-colors). This example includes the same features as the [Embedded ChatBot demo](/patternfly-ai/chatbot/overview/demo/#embedded-chatbot)—the only differences are that the background color is adjusted via the `isPrimary` prop and some of the sample Messages have changed. You can use the same logic to adjust the background color in any ChatBot layout.
+This demo displays an embedded ChatBot with a [primary background color](/design-foundations/colors#background-colors). This example includes the same features as the [Embedded ChatBot demo](/extensions/chatbot/overview/demo/#embedded-chatbot)—the only differences are that the background color is adjusted via the `isPrimary` prop and some of the sample Messages have changed. You can use the same logic to adjust the background color in any ChatBot layout.
 
 ```js file="./WhiteEmbeddedChatbot.tsx" isFullscreen
 

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

@@ -1,6 +1,6 @@
 // This module is shared between NodeJS and babelled ES5
 module.exports = {
-  sideNavItems: [{ section: 'Extensions' }],
+  sideNavItems: [{ section: 'extensions' }],
   topNavItems: [],
   hasThemeSwitcher: true,
   hasRTLSwitcher: true,

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -1,5 +1,5 @@
 import type { Ref, FunctionComponent } from 'react';
-import { forwardRef } 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';
@@ -30,21 +30,43 @@ const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
   tooltipContent = 'Chat history menu',
   isCompact,
   ...props
-}: ChatbotHeaderMenuProps) => (
-  <div className={`pf-chatbot__menu ${className}`}>
-    <Tooltip
-      content={tooltipContent}
-      position="bottom"
-      // prevents VO announcements of both aria label and tooltip
-      aria="none"
-      {...tooltipProps}
-    >
+}: 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}
+        ref={innerRef ?? buttonRef}
         icon={
           <Icon size={isCompact ? 'lg' : 'xl'} isInline>
             <BarsIcon />
@@ -53,9 +75,29 @@ const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
         size={isCompact ? 'sm' : undefined}
         {...props}
       />
-    </Tooltip>
-  </div>
-);
+    ),
+    // 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/ChatbotModal/ChatbotModal.scss

@@ -18,7 +18,10 @@
   .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);
   }

package/src/CodeModal/CodeModal.tsx

@@ -5,17 +5,17 @@
 import type { FunctionComponent, MouseEvent } from 'react';
 import { useState, useEffect, useRef } from 'react';
 import path from 'path-browserify';
-import * as monaco from 'monaco-editor';
-import { loader } from '@monaco-editor/react';
 
 // Import PatternFly components
 import { CodeEditor } from '@patternfly/react-code-editor';
 import {
+  Bullseye,
   Button,
   getResizeObserver,
   ModalBody,
   ModalFooter,
   ModalHeader,
+  Spinner,
   Stack,
   StackItem
 } from '@patternfly/react-core';
@@ -23,8 +23,16 @@ import FileDetails, { extensionToLanguage } from '../FileDetails';
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal from '../ChatbotModal/ChatbotModal';
 
-// Configure Monaco loader to use the npm package instead of CDN
-loader.config({ monaco });
+// Try to lazy load - some consumers need to be below a certain bundle size, but can't use the CDN and don't have webpack
+let monacoInstance: typeof import('monaco-editor') | null = null;
+const loadMonaco = async () => {
+  if (!monacoInstance) {
+    const [monaco, { loader }] = await Promise.all([import('monaco-editor'), import('@monaco-editor/react')]);
+    monacoInstance = monaco;
+    loader.config({ monaco });
+  }
+  return monacoInstance;
+};
 
 export interface CodeModalProps {
   /** Class applied to code editor */
@@ -63,6 +71,8 @@ export interface CodeModalProps {
   modalBodyClassName?: string;
   /** Class applied to modal footer */
   modalFooterClassName?: string;
+  /** Aria label applied to spinner when loading Monaco */
+  spinnerAriaLabel?: string;
 }
 
 export const CodeModal: FunctionComponent<CodeModalProps> = ({
@@ -84,13 +94,32 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
   modalHeaderClassName,
   modalBodyClassName,
   modalFooterClassName,
+  spinnerAriaLabel = 'Loading',
   ...props
 }: CodeModalProps) => {
   const [newCode, setNewCode] = useState(code);
-  const [editorInstance, setEditorInstance] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const [editorInstance, setEditorInstance] = useState<any>(null);
   const [isEditorReady, setIsEditorReady] = useState(false);
+  const [isMonacoLoading, setIsMonacoLoading] = useState(false);
+  const [isMonacoLoaded, setIsMonacoLoaded] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (isModalOpen && !isMonacoLoaded && !isMonacoLoading) {
+      setIsMonacoLoading(true);
+      loadMonaco()
+        .then(() => {
+          setIsMonacoLoaded(true);
+          setIsMonacoLoading(false);
+        })
+        .catch((error) => {
+          // eslint-disable-next-line no-console
+          console.error('Failed to load Monaco editor:', error);
+          setIsMonacoLoading(false);
+        });
+    }
+  }, [isModalOpen, isMonacoLoaded, isMonacoLoading]);
+
   useEffect(() => {
     if (!isModalOpen || !isEditorReady || !editorInstance || !containerRef.current) {
       return;
@@ -148,6 +177,42 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
     }
   };
 
+  const renderMonacoEditor = () => {
+    if (isMonacoLoading) {
+      return (
+        <Bullseye>
+          <Spinner aria-label={spinnerAriaLabel} />
+        </Bullseye>
+      );
+    }
+    if (isMonacoLoaded) {
+      return (
+        <CodeEditor
+          isDarkTheme
+          isLineNumbersVisible={isLineNumbersVisible}
+          isLanguageLabelVisible
+          isCopyEnabled={isCopyEnabled}
+          isReadOnly={isReadOnly}
+          code={newCode}
+          language={extensionToLanguage[path.extname(fileName).slice(1)]}
+          onEditorDidMount={onEditorDidMount}
+          onCodeChange={onCodeChange}
+          className={codeEditorClassName}
+          isFullHeight
+          options={{
+            glyphMargin: false,
+            folding: false,
+            // prevents Monaco from handling resizing itself
+            // was causing ResizeObserver issues
+            automaticLayout: false
+          }}
+          {...props}
+        />
+      );
+    }
+    return null;
+  };
+
   const modal = (
     <ChatbotModal
       isOpen={isModalOpen}
@@ -166,27 +231,7 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
             <FileDetails fileName={fileName} />
           </StackItem>
           <div className="pf-v6-l-stack__item pf-chatbot__code-modal-editor" ref={containerRef}>
-            <CodeEditor
-              isDarkTheme
-              isLineNumbersVisible={isLineNumbersVisible}
-              isLanguageLabelVisible
-              isCopyEnabled={isCopyEnabled}
-              isReadOnly={isReadOnly}
-              code={newCode}
-              language={extensionToLanguage[path.extname(fileName).slice(1)]}
-              onEditorDidMount={onEditorDidMount}
-              onCodeChange={onCodeChange}
-              className={codeEditorClassName}
-              isFullHeight
-              options={{
-                glyphMargin: false,
-                folding: false,
-                // prevents Monaco from handling resizing itself
-                // was causing ResizeObserver issues
-                automaticLayout: false
-              }}
-              {...props}
-            />
+            {renderMonacoEditor()}
           </div>
         </Stack>
       </ModalBody>

package/src/Onboarding/Onboarding.scss

@@ -0,0 +1,101 @@
+.pf-chatbot__onboarding-modal {
+  overflow-x: hidden;
+
+  .pf-chatbot__onboarding--title {
+    margin-block-end: var(--pf-t--global--spacer--md);
+  }
+
+  .pf-chatbot__onboarding--section {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+
+  .pf-chatbot__onboarding--modal-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pf-chatbot__onboarding--modal-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  .pf-v6-c-content {
+    font-size: var(--pf-t--global--font--size--body--lg);
+  }
+
+  .pf-chatbot__onboarding--header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    max-height: 65%;
+
+    img {
+      max-width: unset;
+      height: 100%;
+    }
+  }
+
+  .pf-chatbot__onboarding--title {
+    font-size: var(--pf-t--global--font--size--heading--h1);
+    font-family: var(--pf-t--global--font--family--heading);
+    font-weight: var(--pf-t--global--font--weight--heading--bold);
+  }
+
+  .pf-chatbot__onboarding--footer {
+    margin-block-start: var(--pf-t--global--spacer--md);
+  }
+
+  // for handling zoom conditions; zoom to 125% or higher to see this
+  @media screen and (max-height: 620px) {
+    .pf-v6-c-modal-box__body {
+      --pf-v6-c-modal-box__body--MinHeight: auto;
+      overflow: visible;
+    }
+  }
+}
+
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--docked.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--docked,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--fullscreen,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--embedded {
+  .pf-chatbot__onboarding--header {
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+}
+
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--fullscreen,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--embedded {
+  // override parent modal style
+  height: inherit !important;
+
+  .pf-chatbot__onboarding--title {
+    font-size: var(--pf-t--global--font--size--heading--2xl);
+  }
+}
+
+.pf-chatbot__onboarding-modal.pf-m-compact {
+  .pf-chatbot__onboarding--header {
+    gap: var(--pf-t--global--spacer--md);
+    align-items: flex-start;
+    margin-block-start: var(--pf-t--global--spacer--lg);
+  }
+
+  .pf-chatbot__onboarding--modal-header {
+    --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  }
+
+  .pf-chatbot__onboarding--modal-body {
+    --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  }
+}

package/src/Onboarding/Onboarding.test.tsx

@@ -0,0 +1,148 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import Onboarding from './Onboarding';
+
+const handleModalToggle = jest.fn();
+const onPrimaryAction = jest.fn();
+const onSecondaryAction = jest.fn();
+
+const body =
+  'Experience personalized assistance and seamless problem-solving, simplifying your journey with Red Hat every step of the way.';
+
+describe('Onboarding', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render modal correctly', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        ouiaId="Terms"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('heading', { name: /Onboarding/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Continue/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Skip/i })).toBeTruthy();
+    expect(screen.getByText(body)).toBeTruthy();
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal');
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal--default');
+  });
+  it('should handle image and altText props', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        headerImage="./image.png"
+        headerImageAltText="Test image"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('img')).toBeTruthy();
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
+  });
+  it('should handle className prop', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        className="test"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal');
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal--default');
+    expect(screen.getByRole('dialog')).toHaveClass('test');
+  });
+  it('should handle title prop', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        title="Updated title"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('heading', { name: /Updated title/i })).toBeTruthy();
+    expect(screen.queryByRole('heading', { name: /Onboarding/i })).toBeFalsy();
+  });
+  it('should handle primary button prop', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        primaryActionBtn="First"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('button', { name: /First/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Continue/i })).toBeFalsy();
+  });
+  it('should handle secondary button prop', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        secondaryActionBtn="Second"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('button', { name: /Second/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Skip/i })).toBeFalsy();
+  });
+  it('should handle primary button click', async () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onPrimaryAction={onPrimaryAction}
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+      >
+        {body}
+      </Onboarding>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Continue/i }));
+    expect(onPrimaryAction).toHaveBeenCalledTimes(1);
+    expect(handleModalToggle).toHaveBeenCalledTimes(1);
+  });
+  it('should handle secondary button click', async () => {
+    render(
+      <Onboarding isModalOpen onSecondaryAction={onSecondaryAction} handleModalToggle={handleModalToggle}>
+        {body}
+      </Onboarding>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Skip/i }));
+    expect(onSecondaryAction).toHaveBeenCalledTimes(1);
+    expect(handleModalToggle).not.toHaveBeenCalled();
+  });
+  it('should handle isCompact prop', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        isCompact={true}
+        headerImage="./image.png"
+        headerImageAltText="Test image"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('pf-m-compact');
+    expect(screen.queryByRole('img')).toBeFalsy();
+  });
+});