@patternfly/chatbot 1.0.0

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

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileDetails should render file details 1`] = `
+<div>
+  <div
+    class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details "
+  >
+    <div
+      class="pf-v6-l-flex pf-m-align-items-center pf-m-align-self-center pf-m-justify-content-center pf-chatbot__code-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z"
+          fill="currentColor"
+        />
+        <g
+          clip-path="url(#clip0_3280_27505)"
+        >
+          <path
+            d="M13.8204 5.63002C13.3954 5.50752 12.9529 5.75502 12.8304 6.18002L9.63035 17.38C9.50785 17.805 9.75535 18.2475 10.1804 18.37C10.6054 18.4925 11.0479 18.245 11.1704 17.82L14.3704 6.62002C14.4929 6.19502 14.2454 5.75252 13.8204 5.63002ZM15.8354 8.63252C15.5229 8.94502 15.5229 9.45252 15.8354 9.76502L18.0679 12L15.8329 14.235C15.5204 14.5475 15.5204 15.055 15.8329 15.3675C16.1454 15.68 16.6529 15.68 16.9654 15.3675L19.7654 12.5675C20.0779 12.255 20.0779 11.7475 19.7654 11.435L16.9654 8.63502C16.6529 8.32252 16.1454 8.32252 15.8329 8.63502L15.8354 8.63252ZM8.16785 8.63252C7.85535 8.32002 7.34785 8.32002 7.03535 8.63252L4.23535 11.4325C3.92285 11.745 3.92285 12.2525 4.23535 12.565L7.03535 15.365C7.34785 15.6775 7.85535 15.6775 8.16785 15.365C8.48035 15.0525 8.48035 14.545 8.16785 14.2325L5.93285 12L8.16785 9.76502C8.48035 9.45252 8.48035 8.94502 8.16785 8.63252Z"
+            fill="white"
+          />
+        </g>
+        <defs>
+          <clippath>
+            <rect
+              fill="white"
+              height="12.8"
+              transform="translate(4 5.60001)"
+              width="16"
+            />
+          </clippath>
+        </defs>
+      </svg>
+    </div>
+    <div
+      class="pf-v6-l-flex pf-m-gap-xs"
+    >
+      <div
+        class=""
+      >
+        <div
+          class="pf-v6-l-flex pf-m-column pf-m-gap-none"
+        >
+          <div
+            class=""
+          >
+            <span
+              class="pf-chatbot__code-fileName"
+            >
+              <span
+                class="pf-v6-c-truncate"
+                tabindex="0"
+              >
+                <span
+                  class="pf-v6-c-truncate__start"
+                >
+                  test
+                </span>
+              </span>
+            </span>
+          </div>
+          <div
+            class="pf-chatbot__code-language"
+          >
+            TEXT
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/FileDetails/index.ts

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

package/src/FileDetailsLabel/FileDetailsLabel.scss

@@ -0,0 +1,71 @@
+.pf-chatbot__file-label-contents {
+  display: flex;
+  gap: var(--pf-t--global--spacer--md);
+  justify-content: center;
+  align-items: center;
+}
+
+.pf-chatbot__file-label {
+  padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--sm)
+    var(--pf-t--global--spacer--md) !important;
+  gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --pf-v6-c-label--MaxWidth: 12rem !important;
+  .pf-v6-c-truncate {
+    max-width: 9ch;
+  }
+
+  .pf-v6-c-label__content,
+  .pf-v6-c-label__text {
+    --pf-v6-c-label__content--MaxWidth: 100%;
+    --pf-v6-c-label__text--MaxWidth: 100%;
+  }
+}
+
+.pf-v6-c-label.pf-chatbot__file-label {
+  --pf-v6-c-label--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-label--Color: var(--pf-t--global--text--color--regular);
+
+  .pf-chatbot__file-label > .pf-v6-c-label__content {
+    --pf-v6-c-label--Color: var(--pf-t--global--background--color--primary--default);
+  }
+
+  @at-root :where(.pf-v6-theme-glass) & {
+    --pf-v6-c-label--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+    --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  }
+}
+
+.pf-v6-theme-dark {
+  .pf-v6-c-label.pf-chatbot__file-label {
+    --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
+  }
+
+  .pf-chatbot__file-label > .pf-v6-c-label__actions > .pf-v6-c-button.pf-m-plain > .pf-v6-c-button__icon {
+    --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
+  }
+}
+
+.pf-chatbot__file-label.pf-m-clickable:hover,
+.pf-chatbot__file-label.pf-m-clickable:focus-within {
+  --pf-v6-c-label--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+
+  .pf-chatbot__code-icon {
+    color: var(--pf-t--global--icon--color--status--custom--hover);
+  }
+}
+
+.pf-chatbot__file-label-loading {
+  .pf-v6-c-truncate {
+    max-width: 6ch;
+  }
+}
+
+.pf-chatbot--embedded,
+.pf-chatbot--fullscreen {
+  .pf-chatbot__file-label {
+    --pf-v6-c-label--MaxWidth: 14rem;
+  }
+}

package/src/FileDetailsLabel/FileDetailsLabel.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FileDetailsLabel from './FileDetailsLabel';
+import userEvent from '@testing-library/user-event';
+import { BellIcon } from '@patternfly/react-icons';
+
+describe('FileDetailsLabel', () => {
+  it('should render file details label', () => {
+    const { container } = render(<FileDetailsLabel fileName="test.txt" />);
+    expect(container).toMatchSnapshot();
+  });
+  it('should render file details correctly if an extension we support is passed in', () => {
+    render(<FileDetailsLabel fileName="test.txt" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.getByText('TEXT')).toBeTruthy();
+  });
+  it('should skip language if we do not support an extension', () => {
+    render(<FileDetailsLabel fileName="test.joke" languageTestId="language" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.queryByTestId('language')).toBeFalsy();
+  });
+  it('should pass file size down', () => {
+    render(<FileDetailsLabel fileName="test.svg" fileSize="100MB" />);
+    expect(screen.getByText('100MB')).toBeTruthy();
+  });
+  it('should pass truncation prop down as true by default', () => {
+    render(<FileDetailsLabel fileName="test.svg" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.queryByText('test.svg')).toBeFalsy();
+  });
+  it('should pass truncation prop down when false', () => {
+    render(<FileDetailsLabel fileName="test.svg" hasTruncation={false} />);
+    expect(screen.getByText('test.svg')).toBeTruthy();
+  });
+  it('should not show spinner by default', () => {
+    render(<FileDetailsLabel fileName="test.txt" spinnerTestId="spinner" />);
+    expect(screen.queryByTestId('spinner')).toBeFalsy();
+  });
+  it('should show spinner if loading', () => {
+    render(<FileDetailsLabel fileName="test.txt" isLoading spinnerTestId="spinner" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.getByText('TEXT')).toBeTruthy();
+    expect(screen.queryByTestId('spinner')).toBeTruthy();
+  });
+  it('should call onClick prop', async () => {
+    const spy = jest.fn();
+    render(<FileDetailsLabel fileName="test.txt" onClick={spy} />);
+    await userEvent.click(screen.getByRole('button'));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should call onClose prop', async () => {
+    const spy = jest.fn();
+    render(<FileDetailsLabel fileName="test.txt" onClose={spy} />);
+    await userEvent.click(screen.getByRole('button', { name: /Close test.txt/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should use closeButtonAriaLabel prop appropriately', () => {
+    render(<FileDetailsLabel fileName="test.txt" onClose={jest.fn()} closeButtonAriaLabel="Delete file" />);
+    expect(screen.getByRole('button', { name: /Delete file/i })).toBeTruthy();
+  });
+  it('should support custom close icon', () => {
+    render(
+      <FileDetailsLabel fileName="test.txt" onClose={jest.fn()} closeButtonIcon={<BellIcon data-testid="bell" />} />
+    );
+    expect(screen.getByTestId('bell')).toBeTruthy();
+  });
+});

package/src/FileDetailsLabel/FileDetailsLabel.tsx

@@ -0,0 +1,79 @@
+import { PropsWithChildren } from 'react';
+import { Button, Label, LabelProps } from '@patternfly/react-core';
+import FileDetails from '../FileDetails';
+import { Spinner } from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
+
+export interface FileDetailsLabelProps extends Omit<LabelProps, 'onClose' | 'onClick'> {
+  /** Name of file, including extension */
+  fileName: string;
+  /** Unique id of file */
+  fileId?: string | number;
+  /** Whether to display loading icon */
+  isLoading?: boolean;
+  /** Callback function for when label is clicked */
+  onClick?: (event: React.MouseEvent, fileName: string, fileId?: string | number) => void;
+  /** Callback function for when close button is clicked */
+  onClose?: (event: React.MouseEvent, fileName: string, fileId?: string | number) => void;
+  /** Aria label for close button */
+  closeButtonAriaLabel?: string;
+  /** Custom test id for the component-generated language */
+  languageTestId?: string;
+  /** Custom test id for the loading spinner in the component */
+  spinnerTestId?: string;
+  /** File size */
+  fileSize?: string;
+  /** Whether to truncate file name */
+  hasTruncation?: boolean;
+  /** Icon used for close button */
+  closeButtonIcon?: React.ReactNode;
+}
+
+export const FileDetailsLabel = ({
+  fileName,
+  fileId,
+  isLoading,
+  onClick,
+  onClose,
+  closeButtonAriaLabel,
+  languageTestId,
+  spinnerTestId,
+  fileSize,
+  hasTruncation = true,
+  closeButtonIcon = <TimesIcon />,
+  ...props
+}: PropsWithChildren<FileDetailsLabelProps>) => {
+  const handleClose = (event) => {
+    onClose && onClose(event, fileName, fileId);
+  };
+  return (
+    <Label
+      className="pf-chatbot__file-label"
+      {...(onClose && { onClose: (event) => onClose(event, fileName, fileId) })}
+      closeBtn={
+        <Button
+          type="button"
+          variant="plain"
+          aria-label={closeButtonAriaLabel ?? `Close ${fileName}`}
+          icon={closeButtonIcon}
+          onClick={handleClose}
+        />
+      }
+      {...(onClick && { onClick: (event) => onClick(event, fileName, fileId) })}
+      {...props}
+    >
+      <div className="pf-chatbot__file-label-contents">
+        <FileDetails
+          className={isLoading ? 'pf-chatbot__file-label-loading' : undefined}
+          fileName={fileName}
+          languageTestId={languageTestId}
+          fileSize={fileSize}
+          hasTruncation={hasTruncation}
+        />
+        {isLoading && <Spinner data-testid={spinnerTestId} size="sm" />}
+      </div>
+    </Label>
+  );
+};
+
+export default FileDetailsLabel;

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

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileDetailsLabel should render file details label 1`] = `
+<div>
+  <span
+    class="pf-v6-c-label pf-m-filled pf-chatbot__file-label"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        <div
+          class="pf-chatbot__file-label-contents"
+        >
+          <div
+            class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details "
+          >
+            <div
+              class="pf-v6-l-flex pf-m-align-items-center pf-m-align-self-center pf-m-justify-content-center pf-chatbot__code-icon"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z"
+                  fill="currentColor"
+                />
+                <g
+                  clip-path="url(#clip0_3280_27505)"
+                >
+                  <path
+                    d="M13.8204 5.63002C13.3954 5.50752 12.9529 5.75502 12.8304 6.18002L9.63035 17.38C9.50785 17.805 9.75535 18.2475 10.1804 18.37C10.6054 18.4925 11.0479 18.245 11.1704 17.82L14.3704 6.62002C14.4929 6.19502 14.2454 5.75252 13.8204 5.63002ZM15.8354 8.63252C15.5229 8.94502 15.5229 9.45252 15.8354 9.76502L18.0679 12L15.8329 14.235C15.5204 14.5475 15.5204 15.055 15.8329 15.3675C16.1454 15.68 16.6529 15.68 16.9654 15.3675L19.7654 12.5675C20.0779 12.255 20.0779 11.7475 19.7654 11.435L16.9654 8.63502C16.6529 8.32252 16.1454 8.32252 15.8329 8.63502L15.8354 8.63252ZM8.16785 8.63252C7.85535 8.32002 7.34785 8.32002 7.03535 8.63252L4.23535 11.4325C3.92285 11.745 3.92285 12.2525 4.23535 12.565L7.03535 15.365C7.34785 15.6775 7.85535 15.6775 8.16785 15.365C8.48035 15.0525 8.48035 14.545 8.16785 14.2325L5.93285 12L8.16785 9.76502C8.48035 9.45252 8.48035 8.94502 8.16785 8.63252Z"
+                    fill="white"
+                  />
+                </g>
+                <defs>
+                  <clippath>
+                    <rect
+                      fill="white"
+                      height="12.8"
+                      transform="translate(4 5.60001)"
+                      width="16"
+                    />
+                  </clippath>
+                </defs>
+              </svg>
+            </div>
+            <div
+              class="pf-v6-l-flex pf-m-gap-xs"
+            >
+              <div
+                class=""
+              >
+                <div
+                  class="pf-v6-l-flex pf-m-column pf-m-gap-none"
+                >
+                  <div
+                    class=""
+                  >
+                    <span
+                      class="pf-chatbot__code-fileName"
+                    >
+                      <span
+                        class="pf-v6-c-truncate"
+                        tabindex="0"
+                      >
+                        <span
+                          class="pf-v6-c-truncate__start"
+                        >
+                          test
+                        </span>
+                      </span>
+                    </span>
+                  </div>
+                  <div
+                    class="pf-chatbot__code-language"
+                  >
+                    TEXT
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </span>
+    </span>
+  </span>
+</div>
+`;

package/src/FileDetailsLabel/index.ts

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

package/src/FileDropZone/FileDropZone.scss

@@ -0,0 +1,56 @@
+.pf-chatbot__dropzone {
+  gap: unset; // default PF value causes alignment issues when this is used to wrap other components, notably in the footer
+  flex: 1;
+}
+
+.pf-chatbot__dropzone--invisible {
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: 1fr auto;
+
+  // allows for zoom conditions; try zooming to 200% to see
+  @media screen and (max-height: 518px) {
+    overflow-y: auto;
+  }
+}
+
+.pf-chatbot__dropzone--visible.pf-chatbot__dropzone {
+  margin-block-start: var(--pf-t--global--spacer--lg);
+  margin-block-end: var(--pf-t--global--spacer--lg);
+  margin-inline-start: var(--pf-t--global--spacer--lg);
+  margin-inline-end: var(--pf-t--global--spacer--lg);
+
+  .pf-v6-c-multiple-file-upload__main {
+    --pf-v6-c-multiple-file-upload__main--BorderWidth: var(--pf-t--global--border--width--regular);
+    --pf-v6-c-multiple-file-upload__main--BorderStyle: dashed;
+    --pf-v6-c-multiple-file-upload__main--BorderColor: var(--pf-t--global--border--color--default);
+    --pf-v6-c-multiple-file-upload__main--BorderRadius: var(--pf-t--global--border--radius--medium);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+/** Used in example only */
+.pf-chatbot__file-drop-zone-example {
+  border: var(--pf-t--global--border--width--divider--default) solid var(--pf-t--global--border--color--default);
+  height: 100vh;
+  width: 100%;
+  padding: var(--pf-t--global--spacer--md);
+}
+
+.pf-chatbot--default {
+  // allows for zoom conditions; try zooming to 200% to see
+  .pf-chatbot__dropzone--visible.pf-chatbot__dropzone {
+    @media screen and (max-height: 518px) {
+      display: flex;
+      height: 100%;
+      overflow: hidden;
+
+      .pf-v6-c-multiple-file-upload__main {
+        width: 100%;
+      }
+    }
+  }
+}

package/src/FileDropZone/FileDropZone.test.tsx

@@ -0,0 +1,126 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FileDropZone from './FileDropZone';
+import userEvent from '@testing-library/user-event';
+
+describe('FileDropZone', () => {
+  it('should render file drop zone', () => {
+    const { container } = render(<FileDropZone onFileDrop={jest.fn()} />);
+    expect(container).toMatchSnapshot();
+  });
+  it('should render children', () => {
+    render(<FileDropZone onFileDrop={jest.fn()}>Hi</FileDropZone>);
+    expect(screen.getByText('Hi')).toBeTruthy();
+  });
+
+  it('should call onFileDrop when file type is accepted', async () => {
+    const onFileDrop = jest.fn();
+    const { container } = render(
+      <FileDropZone data-testid="input" allowedFileTypes={{ 'text/plain': ['.txt'] }} onFileDrop={onFileDrop} />
+    );
+
+    const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onFileDrop).toHaveBeenCalled();
+  });
+
+  it('should not call onFileDrop when file type is not accepted', async () => {
+    const onFileDrop = jest.fn();
+    const { container } = render(
+      <FileDropZone data-testid="input" allowedFileTypes={{ 'text/plain': ['.txt'] }} onFileDrop={onFileDrop} />
+    );
+
+    const file = new File(['[]'], 'example.json', { type: 'application/json' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onFileDrop).not.toHaveBeenCalled();
+  });
+
+  it('should respect minSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={jest.fn()} minSize={1000} onAttachRejected={onAttachRejected} />
+    );
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+  it('should respect maxSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={jest.fn()} maxSize={100} onAttachRejected={onAttachRejected} />
+    );
+
+    const largeContent = 'x'.repeat(200);
+    const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should respect maxFiles restriction', async () => {
+    const onAttachRejected = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={jest.fn()} maxFiles={1} onAttachRejected={onAttachRejected} />
+    );
+
+    const files = [
+      new File(['Test1'], 'example1.txt', { type: 'text/plain' }),
+      new File(['Test2'], 'example2.txt', { type: 'text/plain' })
+    ];
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, files);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should be disabled when isAttachmentDisabled is true', async () => {
+    const onFileDrop = jest.fn();
+    const { container } = render(<FileDropZone onFileDrop={onFileDrop} isAttachmentDisabled={true} />);
+
+    const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+    await userEvent.upload(fileInput, file);
+
+    expect(onFileDrop).not.toHaveBeenCalled();
+  });
+
+  it('should call onAttach when files are attached', async () => {
+    const onAttach = jest.fn();
+    const { container } = render(<FileDropZone onFileDrop={jest.fn()} onAttach={onAttach} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onAttach).toHaveBeenCalled();
+  });
+  it('should use custom validator when provided', async () => {
+    const validator = jest.fn().mockReturnValue({ message: 'Custom error' });
+    const onAttachRejected = jest.fn();
+    const onFileDrop = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={onFileDrop} validator={validator} onAttachRejected={onAttachRejected} />
+    );
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+    await userEvent.upload(fileInput, file);
+
+    expect(validator).toHaveBeenCalledWith(file);
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+});

package/src/FileDropZone/FileDropZone.tsx

@@ -0,0 +1,96 @@
+import { MultipleFileUpload, MultipleFileUploadMain } from '@patternfly/react-core';
+import type { FunctionComponent } from 'react';
+import { useState } from 'react';
+import { ChatbotDisplayMode } from '../Chatbot';
+import { UploadIcon } from '@patternfly/react-icons';
+import { Accept, DropEvent, FileError, FileRejection } from 'react-dropzone';
+
+export interface FileDropZoneProps {
+  /** Content displayed when the drop zone is not currently in use */
+  children?: React.ReactNode;
+  /** Custom classname for the outer dropzone component */
+  className?: string;
+  /** Informational text that shows below the title in the drop zone */
+  infoText?: string;
+  /** When files are dropped or uploaded this callback will be called with all accepted files */
+  onFileDrop: (event: DropEvent, data: File[]) => void;
+  /** Specifies the file types accepted by the attachment upload component.
+   *  Files that don't match the accepted types will be disabled in the file picker.
+   *  For example,
+   *   allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
+   **/
+  allowedFileTypes?: Accept;
+  /** Display mode for the Chatbot parent; this influences the styles applied */
+  displayMode?: ChatbotDisplayMode;
+  /** Minimum file size allowed */
+  minSize?: number;
+  /** Max file size allowed */
+  maxSize?: number;
+  /** Max number of files allowed */
+  maxFiles?: number;
+  /** Whether attachments are disabled */
+  isAttachmentDisabled?: boolean;
+  /** Callback when file(s) are attached */
+  onAttach?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
+  /** Callback function for AttachButton when an attachment fails */
+  onAttachRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
+  /** Validator for files; see https://react-dropzone.js.org/#!/Custom%20validation for more information */
+  validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
+}
+
+const FileDropZone: FunctionComponent<FileDropZoneProps> = ({
+  children,
+  className,
+  infoText = 'Maximum file size is 25 MB',
+  onFileDrop,
+  allowedFileTypes,
+  minSize,
+  maxSize,
+  maxFiles,
+  isAttachmentDisabled,
+  onAttach,
+  onAttachRejected,
+  validator,
+  displayMode = ChatbotDisplayMode.default,
+  ...props
+}: FileDropZoneProps) => {
+  const [showDropZone, setShowDropZone] = useState(false);
+
+  const renderDropZone = () => (
+    <>
+      <MultipleFileUploadMain
+        titleIcon={<UploadIcon />}
+        titleText="Drag and drop your file here"
+        infoText={infoText}
+        isUploadButtonHidden
+      />
+    </>
+  );
+
+  return (
+    <MultipleFileUpload
+      dropzoneProps={{
+        accept: allowedFileTypes,
+        onDrop: (acceptedFiles, fileRejections: FileRejection[], event: DropEvent) => {
+          setShowDropZone(false);
+          onAttach && onAttach(acceptedFiles, fileRejections, event);
+        },
+        minSize,
+        maxSize,
+        maxFiles,
+        disabled: isAttachmentDisabled,
+        onDropRejected: onAttachRejected,
+        validator,
+        ...props
+      }}
+      onDragEnter={() => setShowDropZone(true)}
+      onDragLeave={() => setShowDropZone(false)}
+      onFileDrop={onFileDrop}
+      className={`pf-chatbot__dropzone pf-chatbot__dropzone--${displayMode} pf-chatbot__dropzone--${showDropZone ? 'visible' : 'invisible'} ${className ? className : ''}`}
+    >
+      {showDropZone ? renderDropZone() : children}
+    </MultipleFileUpload>
+  );
+};
+
+export default FileDropZone;