@patternfly/chatbot 2.2.0-prerelease.2 → 2.2.0-prerelease.20

package/src/ChatbotHeader/ChatbotHeaderActions.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatbotHeaderActions from './ChatbotHeaderActions';
+
+describe('ChatbotHeaderActions', () => {
+  it('should render ChatbotHeaderActions with children', () => {
+    render(<ChatbotHeaderActions>Chatbot Header</ChatbotHeaderActions>);
+    expect(screen.getByText('Chatbot Header')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeaderActions with custom classname', () => {
+    const { container } = render(
+      <ChatbotHeaderActions className="custom-header-action-class">Chatbot Content</ChatbotHeaderActions>
+    );
+    expect(container.querySelector('.custom-header-action-class')).toBeTruthy();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderCloseButton } from './ChatbotHeaderCloseButton';
+
+describe('ChatbotHeaderCloseButton', () => {
+  it('should render ChatbotHeaderCloseButton', () => {
+    const { container } = render(
+      <ChatbotHeaderCloseButton className="custom-header-close-button" onClick={jest.fn()} />
+    );
+
+    expect(container.querySelector('.custom-header-close-button')).toBeTruthy();
+  });
+
+  it('should call onClick handler when close button is pressed', () => {
+    const onClick = jest.fn();
+    render(<ChatbotHeaderCloseButton className="custom-header-close-button" onClick={onClick} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { CloseIcon } from '@patternfly/react-icons';
+
+export interface ChatbotHeaderCloseButtonProps {
+  /** Callback function for when button is clicked */
+  onClick: () => 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>;
+  /** Content used in tooltip */
+  tooltipContent?: string;
+}
+
+const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseButtonProps> = ({
+  className,
+  onClick,
+  tooltipProps,
+  menuAriaLabel = 'Close',
+  innerRef,
+  tooltipContent = 'Close'
+}: ChatbotHeaderCloseButtonProps) => (
+  <div className={`pf-chatbot__menu ${className}`}>
+    <Tooltip
+      content={tooltipContent}
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
+      <Button
+        className="pf-chatbot__button--toggle-menu"
+        variant="plain"
+        onClick={onClick}
+        aria-label={menuAriaLabel}
+        ref={innerRef}
+        icon={
+          <Icon size="xl" isInline>
+            <CloseIcon />
+          </Icon>
+        }
+      />
+    </Tooltip>
+  </div>
+);
+
+export const ChatbotHeaderCloseButton = React.forwardRef(
+  (props: ChatbotHeaderCloseButtonProps, ref: React.Ref<HTMLButtonElement>) => (
+    <ChatbotHeaderCloseButtonBase innerRef={ref} {...props} />
+  )
+);

package/src/ChatbotHeader/ChatbotHeaderMain.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatbotHeaderMain from './ChatbotHeaderMain';
+
+describe('ChatbotHeaderMain', () => {
+  it('should render ChatbotHeaderMain with children', () => {
+    render(<ChatbotHeaderMain>Chatbot Header Main</ChatbotHeaderMain>);
+    expect(screen.getByText('Chatbot Header Main')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeaderMain with custom classname', () => {
+    const { container } = render(
+      <ChatbotHeaderMain className="custom-header-class">Chatbot Content</ChatbotHeaderMain>
+    );
+    expect(container.querySelector('.custom-header-class')).toBeTruthy();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderMenu } from './ChatbotHeaderMenu';
+
+describe('ChatbotHeaderMenu', () => {
+  it('should render ChatbotHeaderMenu with custom class', () => {
+    const { container } = render(<ChatbotHeaderMenu className="custom-header-menu" onMenuToggle={jest.fn()} />);
+
+    expect(container.querySelector('.custom-header-menu')).toBeTruthy();
+  });
+
+  it('should call onMenuToggle when ChatbotHeaderMenu button is clicked', () => {
+    const onMenuToggle = jest.fn();
+    render(<ChatbotHeaderMenu className="custom-header-menu" onMenuToggle={onMenuToggle} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Toggle menu' }));
+
+    expect(onMenuToggle).toHaveBeenCalled();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -14,6 +14,8 @@ export interface ChatbotHeaderMenuProps {
   menuAriaLabel?: string;
   /** Ref applied to menu */
   innerRef?: React.Ref<HTMLButtonElement>;
+  /** Content used in tooltip */
+  tooltipContent?: string;
 }
 
 const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = ({
@@ -21,10 +23,17 @@ const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = (
   onMenuToggle,
   tooltipProps,
   menuAriaLabel = 'Toggle menu',
-  innerRef
+  innerRef,
+  tooltipContent = 'Menu'
 }: ChatbotHeaderMenuProps) => (
   <div className={`pf-chatbot__menu ${className}`}>
-    <Tooltip content="Menu" position="bottom" {...tooltipProps}>
+    <Tooltip
+      content={tooltipContent}
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
       <Button
         className="pf-chatbot__button--toggle-menu"
         variant="plain"

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { DropdownItem } from '@patternfly/react-core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatbotHeaderOptionsDropdown } from './ChatbotHeaderOptionsDropdown';
+
+describe('ChatbotHeaderOptionsDropdown', () => {
+  const dropdownItems = (
+    <>
+      <DropdownItem>Option 1</DropdownItem>
+      <DropdownItem>Option 2</DropdownItem>
+      <DropdownItem>Option 3</DropdownItem>
+    </>
+  );
+
+  it('should render ChatbotHeaderOptionsDropdown', () => {
+    render(<ChatbotHeaderOptionsDropdown>{dropdownItems}</ChatbotHeaderOptionsDropdown>);
+
+    expect(screen.getByRole('button', { name: 'Chatbot options' })).toBeTruthy();
+  });
+
+  it('should call onselect handler when a dropdown item is clicked', async () => {
+    const onSelect = jest.fn();
+    const { container } = render(
+      <ChatbotHeaderOptionsDropdown className="custom-header-options-dropdown" onSelect={onSelect}>
+        {dropdownItems}
+      </ChatbotHeaderOptionsDropdown>
+    );
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'Chatbot options' }));
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.custom-header-options-dropdown')).toBeTruthy();
+
+      expect(screen.getByText('Option 1'));
+      expect(screen.getByText('Option 2'));
+      expect(screen.getByText('Option 3'));
+
+      fireEvent.click(screen.getByText('Option 3'));
+
+      expect(onSelect).toHaveBeenCalled();
+    });
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx

@@ -33,7 +33,14 @@ export const ChatbotHeaderOptionsDropdown: React.FunctionComponent<ChatbotHeader
   const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <Tooltip className="pf-chatbot__tooltip" content="Chatbot options" position="bottom" {...tooltipProps}>
+    <Tooltip
+      className="pf-chatbot__tooltip"
+      content="Chatbot options"
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
       <MenuToggle
         className="pf-chatbot__button--toggle-options"
         variant="plain"

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { DropdownItem } from '@patternfly/react-core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatbotHeaderSelectorDropdown } from './ChatbotHeaderSelectorDropdown';
+
+describe('ChatbotHeaderSelectorDropdown', () => {
+  const dropdownItems = (
+    <>
+      <DropdownItem>Option 1</DropdownItem>
+      <DropdownItem>Option 2</DropdownItem>
+      <DropdownItem>Option 3</DropdownItem>
+    </>
+  );
+
+  it('should render ChatbotHeaderSelectorDropdown', () => {
+    render(<ChatbotHeaderSelectorDropdown value="Option 1">{dropdownItems}</ChatbotHeaderSelectorDropdown>);
+
+    expect(screen.getByRole('button', { name: 'Chatbot selector' })).toBeTruthy();
+  });
+
+  it('should call onselect handler when a dropdown item is clicked', async () => {
+    const onSelect = jest.fn();
+    const { container } = render(
+      <ChatbotHeaderSelectorDropdown value="Option 1" className="custom-header-selector-dropdown" onSelect={onSelect}>
+        {dropdownItems}
+      </ChatbotHeaderSelectorDropdown>
+    );
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'Chatbot selector' }));
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.custom-header-selector-dropdown')).toBeTruthy();
+
+      expect(screen.getByText('Option 3'));
+
+      fireEvent.click(screen.getByText('Option 3'));
+
+      expect(onSelect).toHaveBeenCalled();
+    });
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx

@@ -31,7 +31,14 @@ export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeade
   const [defaultAriaLabel, setDefaultAriaLabel] = React.useState('Chatbot selector');
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <Tooltip className="pf-chatbot__tooltip" content={tooltipContent} position="bottom" {...tooltipProps}>
+    <Tooltip
+      className="pf-chatbot__tooltip"
+      content={tooltipContent}
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
       <MenuToggle
         variant="secondary"
         aria-label={menuToggleAriaLabel ?? defaultAriaLabel}

package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
+import ChatbotHeaderTitle from './ChatbotHeaderTitle';
+
+describe('ChatbotHeaderTitle', () => {
+  it('should render ChatbotHeaderTitle with children', () => {
+    render(<ChatbotHeaderTitle>Chatbot Header Title</ChatbotHeaderTitle>);
+    expect(screen.getByText('Chatbot Header Title')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeaderTitle with custom classname', () => {
+    const { container } = render(
+      <ChatbotHeaderTitle className="custom-header-class">Chatbot Header Title</ChatbotHeaderTitle>
+    );
+    expect(container.querySelector('.custom-header-class')).toBeTruthy();
+  });
+
+  it('should render title for default display mode', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.default} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for docked display mode', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDocked={'Docked header title'} />);
+    expect(screen.getByText('Docked header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when docked display mode title is not configured', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for embedded display mode', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnEmbedded={'Embedded header title'} />);
+    expect(screen.getByText('Embedded header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when embedded display mode title is not configured', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for fullscreen display mode', () => {
+    render(
+      <ChatbotHeaderTitle
+        displayMode={ChatbotDisplayMode.fullscreen}
+        showOnFullScreen={'Fullscreen header title'}
+        className="custom-header-class"
+      />
+    );
+    expect(screen.getByText('Fullscreen header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when fullscreen display mode title is not configured', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.fullscreen} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+});

package/src/ChatbotHeader/index.ts

@@ -7,3 +7,4 @@ export * from './ChatbotHeaderMenu';
 export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
+export * from './ChatbotHeaderCloseButton';

package/src/ChatbotModal/ChatbotModal.scss

@@ -16,7 +16,7 @@
   }
   .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-button--FontWeight: var(--pf-t--global--font--weight--body--bold);
   }
   .pf-v6-c-modal-box__footer {
     padding-block-start: var(--pf-t--global--spacer--xl);

package/src/ChatbotToggle/ChatbotToggle.tsx

@@ -65,7 +65,12 @@ const ChatbotToggleBase: React.FunctionComponent<ChatbotToggleProps> = ({
   const icon = isChatbotVisible ? <AngleDownIcon data-testid={openIconTestId} /> : closedIcon;
 
   return (
-    <Tooltip content={tooltipLabel} {...tooltipProps}>
+    <Tooltip
+      content={tooltipLabel}
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
       <Button
         className={`pf-chatbot__button ${isChatbotVisible ? 'pf-chatbot__button--active' : ''} ${isRound ? 'pf-chatbot__button--round' : ''} ${className ? className : ''}`}
         variant="plain"

package/src/CodeModal/CodeModal.scss

@@ -38,7 +38,7 @@
     border: none;
     --pf-v6-c-code-editor__tab--BorderStartEndRadius: 0;
     border-start-start-radius: var(--pf-t--global--border--radius--small);
-    --pf-t--global--font--weight--body--default: 500;
+    --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--body--bold);
   }
   .pf-v6-c-code-editor__tab-icon {
     display: none;
@@ -74,3 +74,11 @@
     }
   }
 }
+
+.pf-chatbot__code-modal-body {
+  flex: 1;
+}
+
+.pf-chatbot__code-modal--fullscreen {
+  height: inherit; // override shared modal so code editor works in full screen
+}

package/src/CodeModal/CodeModal.tsx

@@ -87,17 +87,6 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
     }
   };
 
-  /* eslint-disable indent */
-  const getHeight = (displayMode: ChatbotDisplayMode) => {
-    switch (displayMode) {
-      case ChatbotDisplayMode.docked:
-        return '100vh';
-      default:
-        return '45vh';
-    }
-  };
-  /* eslint-enable indent */
-
   const modal = (
     <ChatbotModal
       isOpen={isModalOpen}
@@ -114,7 +103,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
           <StackItem className="pf-chatbot__code-modal-file-details">
             <FileDetails fileName={fileName} />
           </StackItem>
-          <StackItem>
+          <StackItem className="pf-chatbot__code-modal-body">
             <CodeEditor
               isDarkTheme
               isLineNumbersVisible={isLineNumbersVisible}
@@ -126,7 +115,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
               onEditorDidMount={onEditorDidMount}
               onCodeChange={onCodeChange}
               className={codeEditorClassName}
-              height={getHeight(displayMode)}
+              isFullHeight
               options={{
                 glyphMargin: false,
                 folding: false

package/src/Compare/Compare.scss

@@ -0,0 +1,72 @@
+.pf-chatbot__compare-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+}
+.pf-chatbot__compare-toggle {
+  width: 100%;
+
+  .pf-v6-c-toggle-group__button {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+}
+.pf-chatbot__compare {
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  @media screen and (max-width: 900px) {
+    overflow-y: auto;
+  }
+
+  .pf-chatbot__compare-item:first-of-type {
+    border-right: 1px solid var(--pf-t--global--border--color--default);
+
+    @media screen and (max-width: 900px) {
+      border-right: 0px;
+    }
+  }
+}
+
+.pf-chatbot__compare-item {
+  flex: 1;
+
+  .pf-chatbot--embedded .pf-chatbot__messagebox {
+    width: 100%;
+  }
+
+  .pf-chatbot__content {
+    padding: 0;
+  }
+
+  .pf-chatbot.pf-chatbot--embedded {
+    @media screen and (max-width: 900px) {
+      height: 100%;
+    }
+  }
+}
+.pf-chatbot__compare-item-hidden {
+  display: block;
+
+  @media screen and (max-width: 900px) {
+    display: none;
+  }
+}
+
+.pf-chatbot__compare-mobile-controls {
+  padding: var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg) 0 var(--pf-t--global--spacer--lg);
+  display: none;
+  background-color: var(--pf-t--global--background--color--secondary--default);
+  position: sticky;
+  top: 0;
+  z-index: 9999;
+
+  @media screen and (max-width: 900px) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pf-t--global--spacer--md);
+  }
+}

package/src/Compare/Compare.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Compare from './Compare';
+
+const firstChild = (
+  <div>
+    <h1>Child 1</h1>
+  </div>
+);
+
+const secondChild = (
+  <div>
+    <h1>Child 2</h1>
+  </div>
+);
+
+describe('Compare', () => {
+  it('should render compare correctly', () => {
+    render(
+      <Compare
+        firstChildDisplayName="Child 1"
+        secondChildDisplayName="Child 2"
+        firstChild={firstChild}
+        secondChild={secondChild}
+      />
+    );
+    expect(screen.getByRole('heading', { name: /Child 1/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /Child 2/i })).toBeTruthy();
+  });
+});

package/src/Compare/Compare.tsx

@@ -0,0 +1,98 @@
+import React, { PropsWithChildren } from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+
+interface CompareProps {
+  /** First of two children to render */
+  firstChild: React.ReactNode;
+  /** Second of two children to render */
+  secondChild: React.ReactNode;
+  /** Display name for first child, used in mobile toggle */
+  firstChildDisplayName: string;
+  /** Display name for second child, used in mobile toggle */
+  secondChildDisplayName: string;
+  /** Aria label for mobile toggle group */
+  toggleGroupAriaLabel?: string;
+  /** Callback for when mobile toggle is used */
+  onToggleClick?: (event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>) => void;
+}
+
+export const Compare = ({
+  firstChild,
+  secondChild,
+  firstChildDisplayName,
+  secondChildDisplayName,
+  onToggleClick,
+  toggleGroupAriaLabel = 'Select which chatbot to display'
+}: PropsWithChildren<CompareProps>) => {
+  const [isSelected, setIsSelected] = React.useState('toggle-group-chatbot-1');
+  const [showFirstChatbot, setShowFirstChatbot] = React.useState(true);
+  const [showSecondChatbot, setShowSecondChatbot] = React.useState(false);
+
+  React.useEffect(() => {
+    // we want to show the first if we switch to the mobile toggle view
+    // and reset/switch back to normal otherwise
+    const updateChatbotVisibility = () => {
+      if (window.innerWidth >= 901) {
+        setShowFirstChatbot(true);
+        setShowSecondChatbot(true);
+      } else {
+        setShowFirstChatbot(true);
+        setShowSecondChatbot(false);
+        setIsSelected('toggle-group-chatbot-1');
+      }
+    };
+    window.addEventListener('resize', updateChatbotVisibility);
+
+    return () => {
+      window.removeEventListener('resize', updateChatbotVisibility);
+    };
+  }, []);
+
+  // this only happens on mobile
+  const handleChildToggleClick = (
+    event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>
+  ) => {
+    const id = event.currentTarget.id;
+    setIsSelected(id);
+    setShowSecondChatbot(!showSecondChatbot);
+    setShowFirstChatbot(!showFirstChatbot);
+    onToggleClick && onToggleClick(event);
+  };
+
+  return (
+    <>
+      <div className="pf-chatbot__compare-mobile-controls">
+        <ToggleGroup aria-label={toggleGroupAriaLabel}>
+          <ToggleGroupItem
+            className="pf-chatbot__compare-toggle"
+            text={firstChildDisplayName}
+            buttonId="toggle-group-chatbot-1"
+            isSelected={isSelected === 'toggle-group-chatbot-1'}
+            onChange={handleChildToggleClick}
+          />
+          <ToggleGroupItem
+            className="pf-chatbot__compare-toggle"
+            text={secondChildDisplayName}
+            buttonId="toggle-group-chatbot-2"
+            isSelected={isSelected === 'toggle-group-chatbot-2'}
+            onChange={handleChildToggleClick}
+          />
+        </ToggleGroup>
+      </div>
+      <div className="pf-chatbot__compare">
+        <div
+          className={`pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}`}
+        >
+          {firstChild}
+        </div>
+        <div
+          className={`pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}`}
+        >
+          {secondChild}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Compare;

package/src/Compare/index.ts

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

package/src/FileDetails/FileDetails.scss

@@ -2,7 +2,7 @@
   color: var(--pf-t--global--text--color--subtle);
   display: flex; // this is needed for when FileDetailsLabel is clickable
   font-size: var(--pf-t--global--icon--size--font--xs);
-  font-weight: 500;
+  font-weight: var(--pf-t--global--font--weight--body--bold);
 }
 
 .pf-chatbot__code-icon {

package/src/FileDropZone/__snapshots__/FileDropZone.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`FileDropZone should render file drop zone 1`] = `
   >
     <input
       multiple=""
-      style="display: none;"
+      style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
       type="file"
     />