@patternfly/chatbot 6.5.0-prerelease.3 → 6.5.0-prerelease.30

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSearchActions.tsx

@@ -0,0 +1,198 @@
+import { FunctionComponent, useState } from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import {
+  Button,
+  Checkbox,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  Tooltip
+} from '@patternfly/react-core';
+import { FilterIcon, SortAmountDownIcon } from '@patternfly/react-icons';
+
+const initialConversations: { [key: string]: Conversation[] } = {
+  Today: [{ id: '1', text: 'Red Hat products and services' }],
+  'This month': [
+    {
+      id: '2',
+      text: 'Enterprise Linux installation and setup'
+    },
+    { id: '3', text: 'Troubleshoot system crash' }
+  ],
+  March: [
+    { id: '4', text: 'Ansible security and updates' },
+    { id: '5', text: 'Red Hat certification' },
+    { id: '6', text: 'Lightspeed user documentation' }
+  ],
+  February: [
+    { id: '7', text: 'Crashing pod assistance' },
+    { id: '8', text: 'OpenShift AI pipelines' },
+    { id: '9', text: 'Updating subscription plan' },
+    { id: '10', text: 'Red Hat licensing options' }
+  ],
+  January: [
+    { id: '11', text: 'RHEL system performance' },
+    { id: '12', text: 'Manage user accounts' }
+  ]
+};
+
+export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(true);
+  const [hasDrawerHeadDivider, setHasDrawerHeadDivider] = useState(false);
+  const [showSearchActionStart, setShowSearchActionStart] = useState(false);
+  const [showSearchActionEnd, setShowSearchActionEnd] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSortSelectOpen, setIsSortSelectOpen] = useState(false);
+  const [selectedSort, setSelectedSort] = useState<string>('newest');
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
+    initialConversations
+  );
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  const sortLabels: { [key: string]: string } = {
+    newest: 'Date (newest first)',
+    oldest: 'Date (oldest first)',
+    'alphabetical-asc': 'Name (A-Z)',
+    'alphabetical-desc': 'Name (Z-A)'
+  };
+
+  const onSortSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    setSelectedSort(value as string);
+    setIsSortSelectOpen(false);
+  };
+
+  const findMatchingItems = (targetValue: string) => {
+    const filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => {
+      const filteredItems = items.filter((item) => item.text.toLowerCase().includes(targetValue.toLowerCase()));
+      if (filteredItems.length > 0) {
+        acc[key] = filteredItems;
+      }
+      return acc;
+    }, {});
+
+    return filteredConversations;
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isDrawerOpen}
+        onChange={() => setIsDrawerOpen(!isDrawerOpen)}
+        id="search-actions-drawer-visible"
+        name="drawer-visible"
+      />
+      <Checkbox
+        label="Show drawer head divider"
+        isChecked={hasDrawerHeadDivider}
+        onChange={() => setHasDrawerHeadDivider(!hasDrawerHeadDivider)}
+        id="search-actions-drawer-head-divider"
+        name="drawer-head-divider"
+      />
+      <Checkbox
+        label="Show search action start"
+        isChecked={showSearchActionStart}
+        onChange={() => setShowSearchActionStart(!showSearchActionStart)}
+        id="search-actions-show-search-action-start"
+        name="show-search-action-start"
+      />
+      <Checkbox
+        label="Show search action end"
+        isChecked={showSearchActionEnd}
+        onChange={() => setShowSearchActionEnd(!showSearchActionEnd)}
+        id="search-actions-show-search-action-end"
+        name="show-search-action-end"
+      />
+      <Checkbox
+        label="Show loading state"
+        isChecked={isLoading}
+        onChange={() => setIsLoading(!isLoading)}
+        id="search-actions-drawer-is-loading"
+        name="drawer-is-loading"
+      />
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => setIsDrawerOpen(!isDrawerOpen)}
+        isDrawerOpen={isDrawerOpen}
+        setIsDrawerOpen={setIsDrawerOpen}
+        // eslint-disable-next-line no-console
+        onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}
+        conversations={conversations}
+        onNewChat={() => {
+          setIsDrawerOpen(!isDrawerOpen);
+        }}
+        handleTextInputChange={(value: string) => {
+          if (value === '') {
+            setConversations(initialConversations);
+          } else {
+            const newConversations: { [key: string]: Conversation[] } = findMatchingItems(value);
+            setConversations(newConversations);
+          }
+        }}
+        drawerContent={<div>Drawer content</div>}
+        hasDrawerHeadDivider={hasDrawerHeadDivider}
+        isLoading={isLoading}
+        searchActionStart={
+          showSearchActionStart ? (
+            <Tooltip content="Filter options" aria="none" aria-live="off">
+              <Button
+                variant="control"
+                aria-label="Filter options"
+                // eslint-disable-next-line no-console
+                onClick={() => console.log('Filter button clicked')}
+                icon={<FilterIcon />}
+              />
+            </Tooltip>
+          ) : undefined
+        }
+        searchActionEnd={
+          showSearchActionEnd ? (
+            <Select
+              id="sort-select"
+              isOpen={isSortSelectOpen}
+              selected={selectedSort}
+              onSelect={onSortSelect}
+              shouldFocusToggleOnSelect
+              onOpenChange={(isOpen) => setIsSortSelectOpen(isOpen)}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <Tooltip aria="none" aria-live="off" content={`Sort - ${sortLabels[selectedSort]}`}>
+                  <MenuToggle
+                    ref={toggleRef}
+                    onClick={() => setIsSortSelectOpen(!isSortSelectOpen)}
+                    isExpanded={isSortSelectOpen}
+                    variant="plain"
+                    aria-label={`${sortLabels[selectedSort]}, Sort conversations`}
+                    icon={
+                      <SortAmountDownIcon
+                        style={{
+                          transform:
+                            selectedSort === 'oldest' || selectedSort === 'alphabetical-asc' ? 'scaleY(-1)' : 'none'
+                        }}
+                      />
+                    }
+                  />
+                </Tooltip>
+              )}
+            >
+              <SelectList>
+                {Object.keys(sortLabels).map((currentLabel) => (
+                  <SelectOption key={currentLabel} value={currentLabel}>
+                    {sortLabels[currentLabel]}
+                  </SelectOption>
+                ))}
+              </SelectList>
+            </Select>
+          ) : undefined
+        }
+      />
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarCustomActions.tsx

@@ -0,0 +1,190 @@
+import { useState, FunctionComponent, ReactNode } from 'react';
+import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
+import {
+  Divider,
+  DropdownItem,
+  DropdownList,
+  Label,
+  MenuToggle,
+  Select,
+  SelectList,
+  SelectOption
+} from '@patternfly/react-core';
+import { PlusIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
+import { useDropzone } from 'react-dropzone';
+
+export const ChatbotMessageBarCustomActionsExample: FunctionComponent = () => {
+  const [isFirstMenuOpen, setIsFirstMenuOpen] = useState<boolean>(false);
+  const [isSecondMenuOpen, setIsSecondMenuOpen] = useState<boolean>(false);
+  const [isModelSelectOpen, setIsModelSelectOpen] = useState<boolean>(false);
+  const [selectedModel, setSelectedModel] = useState<string>('GPT-4');
+  const [showCanvasLabel, setShowCanvasLabel] = useState<boolean>(true);
+
+  const handleSend = (message: string | number) => alert(message);
+
+  const { open, getInputProps } = useDropzone({
+    multiple: true,
+    // eslint-disable-next-line no-console
+    onDropAccepted: () => console.log('fileUploaded')
+  });
+
+  const onFirstMenuToggle = () => {
+    setIsFirstMenuOpen(!isFirstMenuOpen);
+  };
+
+  const onSecondMenuToggle = () => {
+    setIsSecondMenuOpen(!isSecondMenuOpen);
+  };
+
+  const onModelSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    setSelectedModel(value as string);
+    setIsModelSelectOpen(false);
+  };
+
+  const firstMenuItems: ReactNode = (
+    <DropdownList>
+      <DropdownItem value="Logs" id="logs" icon={<ClipboardIcon />}>
+        Logs
+      </DropdownItem>
+      <DropdownItem value="YAML - Status" id="yaml-status" icon={<CodeIcon />}>
+        YAML - Status
+      </DropdownItem>
+      <DropdownItem value="YAML - All contents" id="yaml-all" icon={<CodeIcon />}>
+        YAML - All contents
+      </DropdownItem>
+      <Divider key="divider" />
+      <DropdownItem value="Upload from computer" id="upload" icon={<UploadIcon />} onClick={open}>
+        Upload from computer
+      </DropdownItem>
+    </DropdownList>
+  );
+
+  const secondMenuItems: ReactNode = (
+    <DropdownList>
+      <DropdownItem value="canvas" id="canvas">
+        {showCanvasLabel ? 'Disable' : 'Enable'} Canvas
+      </DropdownItem>
+      <Divider key="divider-1" />
+      <DropdownItem value="Logs" id="logs" icon={<ClipboardIcon />}>
+        Logs
+      </DropdownItem>
+      <DropdownItem value="YAML - Status" id="yaml-status" icon={<CodeIcon />}>
+        YAML - Status
+      </DropdownItem>
+      <DropdownItem value="YAML - All contents" id="yaml-all" icon={<CodeIcon />}>
+        YAML - All contents
+      </DropdownItem>
+      <Divider key="divider-2" />
+      <DropdownItem value="Upload from computer" id="upload" icon={<UploadIcon />} onClick={open}>
+        Upload from computer
+      </DropdownItem>
+    </DropdownList>
+  );
+
+  const modelOptions = ['GPT-4', 'GPT-3.5', 'Claude', 'Llama 2'];
+
+  return (
+    <>
+      {/* This is required for react-dropzone to work in Safari and Firefox */}
+      <input {...getInputProps()} hidden />
+      <div style={{ marginBottom: '1rem' }}>
+        <h4 style={{ marginBottom: '0.5rem' }}>Custom attach menu with a PlusIcon at the start</h4>
+        <MessageBar
+          onSendMessage={handleSend}
+          attachButtonPosition="start"
+          attachMenuProps={{
+            isAttachMenuOpen: isFirstMenuOpen,
+            setIsAttachMenuOpen: setIsFirstMenuOpen,
+            attachMenuItems: firstMenuItems,
+            onAttachMenuSelect: (_ev, value) => {
+              // eslint-disable-next-line no-console
+              console.log('selected', value);
+              setIsFirstMenuOpen(false);
+            },
+            attachMenuInputPlaceholder: 'Search options...',
+            onAttachMenuToggleClick: onFirstMenuToggle,
+            onAttachMenuOnOpenChangeKeys: ['Escape', 'Tab']
+          }}
+          buttonProps={{
+            attach: {
+              icon: <PlusIcon />,
+              tooltipContent: 'Message actions',
+              'aria-label': 'Message actions'
+            }
+          }}
+        />
+      </div>
+
+      <div>
+        <h4 style={{ marginBottom: '0.5rem' }}>Custom attach menu with additional actions</h4>
+        <MessageBar
+          onSendMessage={handleSend}
+          attachButtonPosition="start"
+          attachMenuProps={{
+            isAttachMenuOpen: isSecondMenuOpen,
+            setIsAttachMenuOpen: setIsSecondMenuOpen,
+            attachMenuItems: secondMenuItems,
+            onAttachMenuOnOpenChangeKeys: ['Escape', 'Tab'],
+            onAttachMenuSelect: (_ev, value) => {
+              // eslint-disable-next-line no-console
+              console.log('selected', value);
+              if (value === 'canvas') {
+                setShowCanvasLabel(!showCanvasLabel);
+              }
+              setIsSecondMenuOpen(false);
+            },
+            onAttachMenuToggleClick: onSecondMenuToggle
+          }}
+          buttonProps={{
+            attach: {
+              icon: <PlusIcon />,
+              tooltipContent: 'Message actions',
+              'aria-label': 'Message actions'
+            }
+          }}
+          additionalActions={
+            <>
+              <Select
+                isOpen={isModelSelectOpen}
+                selected={selectedModel}
+                shouldFocusToggleOnSelect
+                onSelect={onModelSelect}
+                onOpenChange={(isOpen) => setIsModelSelectOpen(isOpen)}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    variant="plainText"
+                    onClick={() => setIsModelSelectOpen(!isModelSelectOpen)}
+                    isExpanded={isModelSelectOpen}
+                    aria-label={`${selectedModel}, Select a model`}
+                    style={{
+                      minWidth: '120px'
+                    }}
+                  >
+                    {selectedModel}
+                  </MenuToggle>
+                )}
+              >
+                <SelectList>
+                  {modelOptions.map((option) => (
+                    <SelectOption key={option} value={option}>
+                      {option}
+                    </SelectOption>
+                  ))}
+                </SelectList>
+              </Select>
+              {showCanvasLabel && (
+                <Label closeBtnAriaLabel="Remove Canvas mode" onClose={() => setShowCanvasLabel(false)}>
+                  Canvas
+                </Label>
+              )}
+            </>
+          }
+        />
+      </div>
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarIndicatorThinking.tsx

@@ -0,0 +1,15 @@
+import { FunctionComponent, useState } from 'react';
+import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
+
+export const ChatbotMessageBarIndicatorThinking: FunctionComponent = () => {
+  const [isThinking, setIsThinking] = useState(false);
+  const handleSend = (_message: string | number) => {
+    setIsThinking(true);
+
+    setTimeout(() => {
+      setIsThinking(false);
+    }, 10000);
+  };
+
+  return <MessageBar onSendMessage={handleSend} hasAiIndicator isThinking={isThinking} />;
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/CompactOnboarding.tsx

@@ -0,0 +1,141 @@
+import {
+  useRef,
+  useState,
+  FunctionComponent,
+  MouseEvent,
+  CSSProperties,
+  Ref,
+  MouseEvent as ReactMouseEvent
+} from 'react';
+import {
+  Button,
+  SkipToContent,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  Stack
+} from '@patternfly/react-core';
+import Onboarding from '@patternfly/chatbot/dist/dynamic/Onboarding';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+
+export const OnboardingExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default);
+  const chatbotRef = useRef<HTMLDivElement>(null);
+  const termsRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select display mode');
+
+  const handleSkipToContent = (e) => {
+    e.preventDefault();
+    if (!isModalOpen && chatbotRef.current) {
+      chatbotRef.current.focus();
+    }
+    if (isModalOpen && termsRef.current) {
+      termsRef.current.focus();
+    }
+  };
+
+  const handleModalToggle = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const onPrimaryAction = () => {
+    // eslint-disable-next-line no-console
+    console.log('Clicked primary action');
+  };
+
+  const onSecondaryAction = () => {
+    // eslint-disable-next-line no-console
+    console.log('Clicked secondary action');
+  };
+  const onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setSelected(value as string);
+    setIsOpen(false);
+    if (value === 'Default') {
+      setDisplayMode(ChatbotDisplayMode.default);
+    }
+    if (value === 'Docked') {
+      setDisplayMode(ChatbotDisplayMode.docked);
+    }
+    if (value === 'Fullscreen') {
+      setDisplayMode(ChatbotDisplayMode.fullscreen);
+    }
+    if (value === 'Embedded') {
+      setDisplayMode(ChatbotDisplayMode.embedded);
+    }
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as CSSProperties
+      }
+      aria-label={selected === 'Select display mode' ? 'Select display mode' : `Display mode, ${selected}`}
+    >
+      {selected}
+    </MenuToggle>
+  );
+
+  const body = 'Simplify your Red Hat journey with personalized assistance and seamless problem-solving.';
+
+  return (
+    <>
+      <SkipToContent style={{ zIndex: '999' }} onClick={handleSkipToContent} href="#">
+        Skip to chatbot
+      </SkipToContent>
+      <div
+        style={{
+          position: 'fixed',
+          padding: 'var(--pf-t--global--spacer--lg)',
+          zIndex: '601',
+          boxShadow: 'var(--pf-t--global--box-shadow--lg)'
+        }}
+      >
+        <Stack hasGutter>
+          <Select
+            id="single-select"
+            isOpen={isOpen}
+            selected={selected}
+            onSelect={onSelect}
+            onOpenChange={(isOpen) => setIsOpen(isOpen)}
+            toggle={toggle}
+            shouldFocusToggleOnSelect
+          >
+            <SelectList>
+              <SelectOption value="Default">Default</SelectOption>
+              <SelectOption value="Docked">Docked</SelectOption>
+              <SelectOption value="Fullscreen">Fullscreen</SelectOption>
+              <SelectOption value="Embedded">Embedded</SelectOption>
+            </SelectList>
+          </Select>
+          <Button onClick={handleModalToggle}>Toggle modal</Button>
+        </Stack>
+      </div>
+      <Chatbot ref={chatbotRef} displayMode={displayMode} isVisible isCompact></Chatbot>
+      <Onboarding
+        ref={termsRef}
+        displayMode={displayMode}
+        isModalOpen={isModalOpen}
+        handleModalToggle={handleModalToggle}
+        onPrimaryAction={onPrimaryAction}
+        onSecondaryAction={onSecondaryAction}
+        title="Redefine work in the age of AI"
+        isCompact
+      >
+        {body}
+      </Onboarding>
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/Onboarding.tsx

@@ -0,0 +1,151 @@
+import {
+  useRef,
+  useState,
+  FunctionComponent,
+  MouseEvent,
+  CSSProperties,
+  Ref,
+  MouseEvent as ReactMouseEvent
+} from 'react';
+import {
+  Button,
+  Checkbox,
+  SkipToContent,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  Stack
+} from '@patternfly/react-core';
+import Onboarding from '@patternfly/chatbot/dist/dynamic/Onboarding';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import onboardingHeader from './RH-Hat-Image.svg';
+
+export const OnboardingExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default);
+  const [hasImage, setHasImage] = useState(true);
+  const chatbotRef = useRef<HTMLDivElement>(null);
+  const termsRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select display mode');
+
+  const handleSkipToContent = (e) => {
+    e.preventDefault();
+    if (!isModalOpen && chatbotRef.current) {
+      chatbotRef.current.focus();
+    }
+    if (isModalOpen && termsRef.current) {
+      termsRef.current.focus();
+    }
+  };
+
+  const handleModalToggle = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const onPrimaryAction = () => {
+    // eslint-disable-next-line no-console
+    console.log('Clicked primary action');
+  };
+
+  const onSecondaryAction = () => {
+    // eslint-disable-next-line no-console
+    console.log('Clicked secondary action');
+  };
+  const onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setSelected(value as string);
+    setIsOpen(false);
+    if (value === 'Default') {
+      setDisplayMode(ChatbotDisplayMode.default);
+    }
+    if (value === 'Docked') {
+      setDisplayMode(ChatbotDisplayMode.docked);
+    }
+    if (value === 'Fullscreen') {
+      setDisplayMode(ChatbotDisplayMode.fullscreen);
+    }
+    if (value === 'Embedded') {
+      setDisplayMode(ChatbotDisplayMode.embedded);
+    }
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as CSSProperties
+      }
+      aria-label={selected === 'Select display mode' ? 'Select display mode' : `Display mode, ${selected}`}
+    >
+      {selected}
+    </MenuToggle>
+  );
+
+  const body = 'Simplify your Red Hat journey with personalized assistance and seamless problem-solving.';
+
+  return (
+    <>
+      <SkipToContent style={{ zIndex: '999' }} onClick={handleSkipToContent} href="#">
+        Skip to chatbot
+      </SkipToContent>
+      <div
+        style={{
+          position: 'fixed',
+          padding: 'var(--pf-t--global--spacer--lg)',
+          zIndex: '601',
+          boxShadow: 'var(--pf-t--global--box-shadow--lg)'
+        }}
+      >
+        <Stack hasGutter>
+          <Select
+            id="single-select"
+            isOpen={isOpen}
+            selected={selected}
+            onSelect={onSelect}
+            onOpenChange={(isOpen) => setIsOpen(isOpen)}
+            toggle={toggle}
+            shouldFocusToggleOnSelect
+          >
+            <SelectList>
+              <SelectOption value="Default">Default</SelectOption>
+              <SelectOption value="Docked">Docked</SelectOption>
+              <SelectOption value="Fullscreen">Fullscreen</SelectOption>
+              <SelectOption value="Embedded">Embedded</SelectOption>
+            </SelectList>
+          </Select>
+          <Checkbox
+            isChecked={hasImage}
+            id="toggle-header-image"
+            name="toggle-header-image"
+            label="Has image in header"
+            onChange={(_event, checked) => setHasImage(checked)}
+          ></Checkbox>
+          <Button onClick={handleModalToggle}>Toggle modal</Button>
+        </Stack>
+      </div>
+      <Chatbot ref={chatbotRef} displayMode={displayMode} isVisible></Chatbot>
+      <Onboarding
+        ref={termsRef}
+        displayMode={displayMode}
+        isModalOpen={isModalOpen}
+        handleModalToggle={handleModalToggle}
+        onPrimaryAction={onPrimaryAction}
+        onSecondaryAction={onSecondaryAction}
+        headerImage={hasImage ? onboardingHeader : undefined}
+        title="Redefine work in the age of AI"
+      >
+        {body}
+      </Onboarding>
+    </>
+  );
+};