@patternfly/chatbot 1.0.0

package/src/MessageDivider/MessageDivider.scss

@@ -0,0 +1,43 @@
+// ============================================================================
+// Chatbot Main - Message Divider
+// ============================================================================
+.pf-chatbot__message-divider {
+  display: grid;
+  padding-block-end: var(--pf-t--global--spacer--xl);
+
+  .pf-v6-c-divider,
+  .pf-v6-c-label {
+    grid-row: 1 / 1;
+    grid-column: 1 / 1;
+  }
+
+  .pf-v6-c-label {
+    --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--default);
+    --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
+    --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
+
+    .pf-v6-c-label__text {
+      font-weight: var(--pf-t--global--font--weight--body--bold);
+      text-align: center;
+    }
+  }
+
+  &.pf-m-divider {
+    .pf-v6-c-label {
+      --pf-v6-c-label--MaxWidth: 75%;
+
+      justify-self: center;
+    }
+
+    .pf-v6-c-divider {
+      align-self: center;
+    }
+  }
+
+  &.pf-m-wrap {
+    .pf-v6-c-label,
+    .pf-v6-c-label__text {
+      white-space: normal;
+    }
+  }
+}

package/src/MessageDivider/MessageDivider.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import MessageDivider from './MessageDivider';
+
+describe('MessageDivider', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render default correctly with variant = date and content = new Date().toLocaleDateString()', () => {
+    render(<MessageDivider data-testid="message-divider" />);
+    expect(screen.getByText(new Date().toLocaleDateString())).toBeInTheDocument();
+    expect(screen.getByTestId('message-divider')).toHaveClass('pf-m-divider');
+  });
+  it('should render inset variant correctly', () => {
+    render(<MessageDivider variant="inset" content="test" data-testid="message-divider" />);
+    expect(screen.getByText('test')).toBeInTheDocument();
+    expect(screen.getByTestId('message-divider')).toHaveClass('pf-m-divider');
+  });
+  it('should render fullWidth variant correctly', () => {
+    render(<MessageDivider variant="fullWidth" content="test" data-testid="message-divider" />);
+    expect(screen.getByText('test')).toBeInTheDocument();
+    expect(screen.getByTestId('message-divider')).not.toHaveClass('pf-m-divider');
+  });
+});

package/src/MessageDivider/MessageDivider.tsx

@@ -0,0 +1,35 @@
+// ============================================================================
+// Chatbot Main - Message Divider
+// ============================================================================
+import type { FunctionComponent } from 'react';
+import { Divider, Label } from '@patternfly/react-core';
+
+export interface MessageDividerProps {
+  /** Variant of the divider */
+  variant?: 'inset' | 'fullWidth';
+  /** Content of the message divider */
+  content?: string;
+}
+
+const MessageDivider: FunctionComponent<MessageDividerProps> = ({
+  variant = 'inset',
+  content = new Date().toLocaleDateString(),
+  ...props
+}: MessageDividerProps) => {
+  if (variant === 'inset') {
+    return (
+      <div className="pf-chatbot__message-divider pf-m-divider pf-m-wrap" {...props}>
+        <Divider />
+        <Label>{content}</Label>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pf-chatbot__message-divider pf-m-wrap" {...props}>
+      <Label>{content}</Label>
+    </div>
+  );
+};
+
+export default MessageDivider;

package/src/MessageDivider/index.ts

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

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();
+  });
+});

package/src/Onboarding/Onboarding.tsx

@@ -0,0 +1,126 @@
+// ============================================================================
+// Terms of Use Modal - Chatbot Modal Extension
+// ============================================================================
+import type { FunctionComponent, MouseEvent as ReactMouseEvent, Ref } from 'react';
+import { forwardRef } from 'react';
+import { Button, Content, ModalBody, ModalFooter, ModalProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal/ChatbotModal';
+
+export interface OnboardingProps extends ModalProps {
+  /** Class applied to modal */
+  className?: string;
+  /** Action assigned to primary modal button */
+  onPrimaryAction?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Action assigned to secondary modal button */
+  onSecondaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Name of primary modal button */
+  primaryActionBtn?: string;
+  /** Name of secondary modal button */
+  secondaryActionBtn?: string;
+  /** Function that handles modal toggle */
+  handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Whether modal is open */
+  isModalOpen: boolean;
+  /** Title of modal */
+  title?: string;
+  /** Display mode for the Chatbot parent; this influences the styles applied */
+  displayMode?: ChatbotDisplayMode;
+  /** Optional image displayed in header */
+  headerImage?: string;
+  /** Alt text for optional image displayed in header */
+  headerImageAltText?: string;
+  /** Ref applied to modal */
+  innerRef?: React.Ref<HTMLDivElement>;
+  /** OuiaID applied to modal */
+  ouiaId?: string;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
+}
+
+export const OnboardingBase: FunctionComponent<OnboardingProps> = ({
+  handleModalToggle,
+  isModalOpen,
+  onPrimaryAction,
+  onSecondaryAction,
+  primaryActionBtn = 'Continue',
+  secondaryActionBtn = 'Skip',
+  title = 'Onboarding',
+  headerImage,
+  headerImageAltText = '',
+  displayMode = ChatbotDisplayMode.default,
+  className,
+  children,
+  innerRef,
+  ouiaId = 'Onboarding',
+  isCompact,
+  ...props
+}: OnboardingProps) => {
+  const handlePrimaryAction = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onPrimaryAction && onPrimaryAction(_event);
+  };
+
+  const handleSecondaryAction = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
+    onSecondaryAction(_event);
+  };
+
+  const modal = (
+    <ChatbotModal
+      isOpen={isModalOpen}
+      ouiaId={ouiaId}
+      aria-labelledby="onboarding-title"
+      aria-describedby="onboarding-modal"
+      className={`pf-chatbot__onboarding-modal pf-chatbot__onboarding-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`}
+      displayMode={displayMode}
+      onClose={handleModalToggle}
+      {...props}
+    >
+      {/* This is a workaround since the PatternFly modal doesn't have ref forwarding */}
+      <section className={`pf-chatbot__onboarding--section`} aria-label={title} tabIndex={-1} ref={innerRef}>
+        <>
+          <ModalBody className="pf-chatbot__onboarding--modal-body">
+            {!isCompact && headerImage && (
+              <div className="pf-chatbot__onboarding--header">
+                <img src={headerImage} className="pf-chatbot__onboarding--image" alt={headerImageAltText} />
+              </div>
+            )}
+            <div className="pf-chatbot__onboarding--modal-text">
+              <h1 className="pf-chatbot__onboarding--title">{title}</h1>
+              <Content>{children}</Content>
+            </div>
+          </ModalBody>
+          <ModalFooter className="pf-chatbot__onboarding--footer">
+            <Button
+              isBlock
+              key="onboarding-modal-primary"
+              variant="primary"
+              onClick={handlePrimaryAction}
+              form="onboarding-form"
+              size="lg"
+            >
+              {primaryActionBtn}
+            </Button>
+            <Button
+              isBlock
+              key="onboarding-modal-secondary"
+              variant="secondary"
+              onClick={handleSecondaryAction}
+              size="lg"
+            >
+              {secondaryActionBtn}
+            </Button>
+          </ModalFooter>
+        </>
+      </section>
+    </ChatbotModal>
+  );
+
+  return modal;
+};
+
+const Onboarding = forwardRef((props: OnboardingProps, ref: Ref<HTMLDivElement>) => (
+  <OnboardingBase innerRef={ref} {...props} />
+));
+
+export default Onboarding;

package/src/Onboarding/index.ts

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

package/src/PreviewAttachment/PreviewAttachment.test.tsx

@@ -0,0 +1,93 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { PreviewAttachment } from './PreviewAttachment';
+
+describe('PreviewAttachment', () => {
+  it('should render PreviewAttachment', () => {
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={jest.fn()}
+      />
+    );
+    expect(screen.getByText('Preview attachment')).toBeTruthy();
+    expect(screen.getByText('greetings')).toBeTruthy();
+    expect(screen.getAllByText('TEXT')).toBeTruthy();
+  });
+
+  it('should call onEdit handler when edit button is pressed', () => {
+    const onEdit = jest.fn();
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={onEdit}
+        handleModalToggle={jest.fn()}
+      />
+    );
+    fireEvent.click(screen.getByText('Edit'));
+
+    expect(onEdit).toHaveBeenCalled();
+  });
+  it('should call onDismiss handler when dismiss button is pressed', () => {
+    const onDismiss = jest.fn();
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={onDismiss}
+      />
+    );
+    fireEvent.click(screen.getByText('Dismiss'));
+
+    expect(onDismiss).toHaveBeenCalled();
+  });
+
+  it('should render custom button text for footer actions buttons', () => {
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Edit"
+        secondaryActionButtonText="Close"
+      />
+    );
+
+    screen.getByText('Edit');
+    screen.getByText('Close');
+  });
+
+  it('should render PreviewAttachment with custom classNames', async () => {
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Edit"
+        secondaryActionButtonText="Close"
+        modalHeaderClassName="custom-header-class"
+        modalBodyClassName="custom-body-class"
+        modalFooterClassName="custom-footer-class"
+      ></PreviewAttachment>
+    );
+
+    const modal = screen.getByRole('dialog');
+    const modalHeader = within(modal).getByRole('banner');
+    expect(modalHeader).toHaveClass('custom-header-class');
+    const modalBody = modal.querySelector('#code-modal-body');
+    expect(modalBody).toHaveClass('custom-body-class');
+    const modalfooter = within(modal).getByRole('contentinfo');
+    expect(modalfooter).toHaveClass('custom-footer-class');
+  });
+});

package/src/PreviewAttachment/PreviewAttachment.tsx

@@ -0,0 +1,89 @@
+// ============================================================================
+// Preview Attachment - Chatbot Code Snippet Viewer
+// ============================================================================
+import type { FunctionComponent, MouseEvent } from 'react';
+import CodeModal from '../CodeModal';
+import { ChatbotDisplayMode } from '../Chatbot';
+
+export interface PreviewAttachmentProps {
+  /** Text shown in code editor */
+  code: string;
+  /** Filename, including extension, of file shown in modal */
+  fileName: string;
+  /** Function called when edit button is clicked */
+  onEdit: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Function called when dismiss button is clicked */
+  onDismiss?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Function called when modal is toggled */
+  handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Whether modal is open */
+  isModalOpen: boolean;
+  /** Title of modal */
+  title?: string;
+  /** Display mode for the Chatbot parent; this influences the styles applied */
+  displayMode?: ChatbotDisplayMode;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
+  /** Primary action button text */
+  primaryActionButtonText?: string;
+  /** Secondary action button text */
+  secondaryActionButtonText?: string;
+  /** Class applied to modal header */
+  modalHeaderClassName?: string;
+  /** Class applied to modal body */
+  modalBodyClassName?: string;
+  /** Class applied to modal footer */
+  modalFooterClassName?: string;
+}
+
+export const PreviewAttachment: FunctionComponent<PreviewAttachmentProps> = ({
+  fileName,
+  code,
+  handleModalToggle,
+  isModalOpen,
+  onDismiss = undefined,
+  onEdit,
+  title = 'Preview attachment',
+  primaryActionButtonText = 'Edit',
+  secondaryActionButtonText = 'Dismiss',
+  displayMode = ChatbotDisplayMode.default,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
+  isCompact
+}: PreviewAttachmentProps) => {
+  const handleEdit = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onEdit(_event);
+  };
+
+  const handleDismiss = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onDismiss && onDismiss(_event);
+  };
+
+  return (
+    <CodeModal
+      codeEditorControlClassName="pf-chatbot__code-modal--controls"
+      code={code}
+      fileName={fileName}
+      handleModalToggle={handleModalToggle}
+      isCopyEnabled
+      isLineNumbersVisible={false}
+      isModalOpen={isModalOpen}
+      onPrimaryAction={handleEdit}
+      onSecondaryAction={handleDismiss}
+      primaryActionBtn={primaryActionButtonText}
+      secondaryActionBtn={secondaryActionButtonText}
+      title={title}
+      isReadOnly
+      displayMode={displayMode}
+      isCompact={isCompact}
+      modalHeaderClassName={modalHeaderClassName}
+      modalBodyClassName={modalBodyClassName}
+      modalFooterClassName={modalFooterClassName}
+    />
+  );
+};
+
+export default PreviewAttachment;

package/src/PreviewAttachment/index.ts

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