@patternfly/chatbot 1.0.0

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx

@@ -0,0 +1,77 @@
+// ============================================================================
+// Chatbot Layout - Chat - Welcome
+// ============================================================================
+import type { FunctionComponent } from 'react';
+
+import { Content, ContentVariants, Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
+
+export interface ChatbotWelcomePromptProps extends React.HTMLProps<HTMLDivElement> {
+  /** Title for the welcome message*/
+  title: string;
+  /** Welcome message */
+  description: string;
+  /** Custom basic prompts to help users coming for the first time to chatbot */
+  prompts?: WelcomePrompt[];
+  /** Custom classname for the WelcomePrompt component */
+  className?: string;
+  /** Custom test id for the WelcomePrompt component */
+  testId?: string;
+  isCompact?: boolean;
+}
+
+export interface WelcomePrompt {
+  /** Message for the welcome prompt */
+  message?: string;
+  /** Title for the welcome prompt */
+  title: string;
+  /** Callback handler for the onClick event for welcome prompt */
+  onClick?: () => void;
+}
+
+export const ChatbotWelcomePrompt: FunctionComponent<ChatbotWelcomePromptProps> = ({
+  title,
+  description,
+  prompts,
+  className,
+  testId,
+  isCompact = false,
+  ...props
+}: ChatbotWelcomePromptProps) => (
+  <div
+    data-testid={testId}
+    className={`pf-chatbot--layout--welcome ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
+    {...props}
+  >
+    <Content component={ContentVariants.h1}>
+      <span className="pf-chatbot__hello">{title}</span>
+      <br />
+      <span className="pf-chatbot__question">{description}</span>
+    </Content>
+
+    {prompts && (
+      <div className="pf-chatbot__prompt-suggestions">
+        {prompts?.map((prompt, index) => (
+          <Card
+            key={`welcome-prompt-${index}`}
+            className="pf-chatbot__prompt-suggestion"
+            isClickable
+            isCompact={isCompact}
+          >
+            <CardHeader
+              selectableActions={{
+                onClickAction: prompt.onClick,
+                selectableActionId: `welcome-prompt-input-${index}`,
+                selectableActionAriaLabelledby: `welcome-prompt-title-${index}`
+              }}
+            >
+              <CardTitle id={`welcome-prompt-title-${index}`}>{prompt.title}</CardTitle>
+            </CardHeader>
+            {prompt.message && <CardBody>{prompt.message}</CardBody>}
+          </Card>
+        ))}
+      </div>
+    )}
+  </div>
+);
+
+export default ChatbotWelcomePrompt;

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChatbotWelcomePrompt should render welcome prompt 1`] = `
+<div>
+  <div
+    class="pf-chatbot--layout--welcome  "
+  >
+    <h1
+      class="pf-v6-c-content--h1"
+      data-ouia-component-id="OUIA-Generated-Content-:r0:"
+      data-ouia-component-type="PF6/Content"
+      data-ouia-safe="true"
+      data-pf-content="true"
+    >
+      <span
+        class="pf-chatbot__hello"
+      >
+        Hi, ChatBot User!
+      </span>
+      <br />
+      <span
+        class="pf-chatbot__question"
+      >
+        How can I help you today?
+      </span>
+    </h1>
+  </div>
+</div>
+`;

package/src/ChatbotWelcomePrompt/index.ts

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

package/src/CodeModal/CodeModal.scss

@@ -0,0 +1,97 @@
+.pf-chatbot__code-modal {
+  .pf-v6-c-code-editor {
+    --pf-v6-c-code-editor__main--BackgroundColor: #1f1f1f;
+    --pf-v6-c-code-editor__main--BorderEndStartRadius: 0;
+    --pf-v6-c-code-editor__main--BorderEndEndRadius: 0;
+    --pf-v6-c-code-editor__tab--BorderStartEndRadius: var(--pf-t--global--border--radius--small);
+    --pf-v6-c-code-editor--m-read-only__main--BackgroundColor: #1f1f1f;
+  }
+  .pf-v6-c-code-editor__header {
+    --pf-v6-c-code-editor__header--BorderWidth: 0;
+    background: #1f1f1f !important;
+    /** this is for the attachment editor header */
+    border-start-start-radius: var(--pf-t--global--border--radius--small);
+    border-start-end-radius: var(--pf-t--global--border--radius--small);
+  }
+  .pf-chatbot__code-modal-body {
+    gap: var(--pf-t--global--spacer--lg);
+  }
+  .pf-chatbot__code-modal--controls > .pf-v6-c-code-editor__header {
+    flex-direction: row-reverse;
+    border-radius: var(--pf-t--global--border--radius--small);
+  }
+  .pf-v6-c-code-editor__header::before {
+    border-block-end: none;
+  }
+  .pf-v6-c-code-editor__header-content {
+    --pf-v6-c-code-editor__header-content--BackgroundColor: #1f1f1f;
+    --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor: #1f1f1f;
+    --pf-v6-c-code-editor__header-content--BorderStartStartRadius: var(
+      --pf-t--global--border--radius--small
+    ) !important;
+    --pf-v6-c-code-editor__header-content--PaddingInlineEnd: 0;
+    justify-content: flex-end;
+  }
+  .pf-chatbot__code-modal--controls > .pf-v6-c-code-editor__header > .pf-v6-c-code-editor__header-content {
+    --pf-v6-c-code-editor__header-content--BorderStartStartRadius: 0;
+    border-start-end-radius: var(--pf-t--global--border--radius--small);
+  }
+  .pf-v6-c-code-editor__tab {
+    --pf-v6-c-code-editor__tab--BackgroundColor: #1f1f1f;
+    --pf-v6-c-code-editor__tab--Color: #fff;
+    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: var(--pf-t--global--font--weight--body--bold);
+    margin-inline-start: unset;
+  }
+  .pf-v6-c-code-editor__tab-icon {
+    display: none;
+  }
+  .pf-v6-c-code-editor__main {
+    border: unset;
+    --pf-v6-c-code-editor__main--BorderEndStartRadius: var(--pf-t--global--border--radius--small);
+    --pf-v6-c-code-editor__main--BorderEndEndRadius: var(--pf-t--global--border--radius--small);
+  }
+  .pf-v6-c-code-editor__controls {
+    padding-right: var(--pf-t--global--spacer--sm);
+  }
+  .pf-v6-c-code-editor__controls > div > .pf-v6-c-button {
+    --pf-v6-c-button--m-plain__icon--Color: #fff;
+    --pf-v6-c-button--hover__icon--Color: #fff;
+  }
+  .pf-v6-c-code-editor__header-main {
+    display: none;
+  }
+  .pf-v6-c-modal-box__close {
+    .pf-v6-c-button.pf-m-plain {
+      --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
+    }
+  }
+}
+
+// ============================================================================
+// Dark theme
+// ============================================================================
+.pf-v6-theme-dark {
+  .pf-chatbot__code-modal {
+    .pf-v6-c-code-editor__controls > div > button {
+      --pf-v6-c-button--m-plain__icon--Color: #c7c7c7;
+      --pf-v6-c-button--hover__icon--Color: #c7c7c7;
+    }
+  }
+}
+
+.pf-chatbot__code-modal-editor {
+  flex: 1;
+}
+
+.pf-chatbot__code-modal--fullscreen {
+  height: inherit !important; // override shared modal so code editor works in full screen
+}
+
+.pf-chatbot__code-modal.pf-m-compact {
+  .pf-chatbot__code-modal-body {
+    gap: var(--pf-t--global--spacer--md);
+  }
+}

package/src/CodeModal/CodeModal.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CodeModal from './CodeModal';
+
+describe('ChatbotModal', () => {
+  it('should render compact modal', () => {
+    render(
+      <CodeModal
+        isCompact
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        handleModalToggle={jest.fn()}
+        onPrimaryAction={jest.fn()}
+        onSecondaryAction={jest.fn()}
+        title="Preview attachment"
+        primaryActionBtn="Submit"
+        secondaryActionBtn="Cancel"
+      ></CodeModal>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('pf-m-compact');
+  });
+
+  it('should render CodeModal with custom classNames', async () => {
+    render(
+      <CodeModal
+        isCompact
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        handleModalToggle={jest.fn()}
+        onPrimaryAction={jest.fn()}
+        onSecondaryAction={jest.fn()}
+        title="Preview attachment"
+        primaryActionBtn="Submit"
+        secondaryActionBtn="Cancel"
+        modalHeaderClassName="custom-header-class"
+        modalBodyClassName="custom-body-class"
+        modalFooterClassName="custom-footer-class"
+      ></CodeModal>
+    );
+
+    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/CodeModal/CodeModal.tsx

@@ -0,0 +1,252 @@
+// ============================================================================
+// Code Modal - Chatbot Modal with Code Editor
+// ============================================================================
+
+import type { FunctionComponent, MouseEvent } from 'react';
+import { useState, useEffect, useRef } from 'react';
+import path from 'path-browserify';
+
+// Import PatternFly components
+import { CodeEditor } from '@patternfly/react-code-editor';
+import {
+  Bullseye,
+  Button,
+  getResizeObserver,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
+  Stack,
+  StackItem
+} from '@patternfly/react-core';
+import FileDetails, { extensionToLanguage } from '../FileDetails';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal/ChatbotModal';
+
+// Try to lazy load - some consumers need to be below a certain bundle size, but can't use the CDN and don't have webpack
+let monacoInstance: typeof import('monaco-editor') | null = null;
+const loadMonaco = async () => {
+  if (!monacoInstance) {
+    const [monaco, { loader }] = await Promise.all([import('monaco-editor'), import('@monaco-editor/react')]);
+    monacoInstance = monaco;
+    loader.config({ monaco });
+  }
+  return monacoInstance;
+};
+
+export interface CodeModalProps {
+  /** Class applied to code editor */
+  codeEditorControlClassName?: string;
+  /** Text shown in code editor */
+  code: string;
+  /** Filename, including extension, of file shown in editor */
+  fileName: string;
+  /** Whether copying code is allowed */
+  isCopyEnabled?: boolean;
+  /** Whether line numbers show in the code editor */
+  isLineNumbersVisible?: boolean;
+  /** Whether code is read-only */
+  isReadOnly?: boolean;
+  /** Action assigned to primary modal button */
+  onPrimaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent, code?: string) => 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;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
+  /** Class applied to modal header */
+  modalHeaderClassName?: string;
+  /** Class applied to modal body */
+  modalBodyClassName?: string;
+  /** Class applied to modal footer */
+  modalFooterClassName?: string;
+  /** Aria label applied to spinner when loading Monaco */
+  spinnerAriaLabel?: string;
+}
+
+export const CodeModal: FunctionComponent<CodeModalProps> = ({
+  fileName,
+  code,
+  codeEditorControlClassName: codeEditorClassName,
+  handleModalToggle,
+  isCopyEnabled,
+  isLineNumbersVisible,
+  isModalOpen,
+  isReadOnly,
+  onPrimaryAction,
+  onSecondaryAction,
+  primaryActionBtn,
+  secondaryActionBtn,
+  title,
+  displayMode = ChatbotDisplayMode.default,
+  isCompact,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
+  spinnerAriaLabel = 'Loading',
+  ...props
+}: CodeModalProps) => {
+  const [newCode, setNewCode] = useState(code);
+  const [editorInstance, setEditorInstance] = useState<any>(null);
+  const [isEditorReady, setIsEditorReady] = useState(false);
+  const [isMonacoLoading, setIsMonacoLoading] = useState(false);
+  const [isMonacoLoaded, setIsMonacoLoaded] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isModalOpen && !isMonacoLoaded && !isMonacoLoading) {
+      setIsMonacoLoading(true);
+      loadMonaco()
+        .then(() => {
+          setIsMonacoLoaded(true);
+          setIsMonacoLoading(false);
+        })
+        .catch((error) => {
+          // eslint-disable-next-line no-console
+          console.error('Failed to load Monaco editor:', error);
+          setIsMonacoLoading(false);
+        });
+    }
+  }, [isModalOpen, isMonacoLoaded, isMonacoLoading]);
+
+  useEffect(() => {
+    if (!isModalOpen || !isEditorReady || !editorInstance || !containerRef.current) {
+      return;
+    }
+
+    const handleResize = () => {
+      if (editorInstance && isEditorReady && isModalOpen) {
+        try {
+          window.requestAnimationFrame(() => {
+            editorInstance.layout();
+          });
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error('ChatBot code modal layout error:', error);
+        }
+      }
+    };
+
+    const observer = getResizeObserver(containerRef.current, handleResize);
+
+    return () => {
+      observer();
+    };
+  }, [editorInstance, isEditorReady, isModalOpen]);
+
+  const handlePrimaryAction = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    if (!isReadOnly) {
+      onPrimaryAction(_event, newCode);
+    } else {
+      onPrimaryAction(_event);
+    }
+  };
+
+  const handleSecondaryAction = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onSecondaryAction(_event);
+  };
+
+  const onEditorDidMount = (editor, monaco) => {
+    setEditorInstance(editor);
+
+    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+
+    if (containerRef.current) {
+      setIsEditorReady(true);
+      editor.layout();
+      editor.focus();
+    }
+  };
+
+  const onCodeChange = (value: string) => {
+    if (!isReadOnly) {
+      setNewCode(value);
+    }
+  };
+
+  const renderMonacoEditor = () => {
+    if (isMonacoLoading) {
+      return (
+        <Bullseye>
+          <Spinner aria-label={spinnerAriaLabel} />
+        </Bullseye>
+      );
+    }
+    if (isMonacoLoaded) {
+      return (
+        <CodeEditor
+          isDarkTheme
+          isLineNumbersVisible={isLineNumbersVisible}
+          isLanguageLabelVisible
+          isCopyEnabled={isCopyEnabled}
+          isReadOnly={isReadOnly}
+          code={newCode}
+          language={extensionToLanguage[path.extname(fileName).slice(1)]}
+          onEditorDidMount={onEditorDidMount}
+          onCodeChange={onCodeChange}
+          className={codeEditorClassName}
+          isFullHeight
+          options={{
+            glyphMargin: false,
+            folding: false,
+            // prevents Monaco from handling resizing itself
+            // was causing ResizeObserver issues
+            automaticLayout: false
+          }}
+          {...props}
+        />
+      );
+    }
+    return null;
+  };
+
+  const modal = (
+    <ChatbotModal
+      isOpen={isModalOpen}
+      onClose={handleModalToggle}
+      ouiaId="CodeModal"
+      aria-labelledby="code-modal-title"
+      aria-describedby="code-modal"
+      className={`pf-chatbot__code-modal ${isCompact ? 'pf-m-compact' : ''} pf-chatbot__code-modal--${displayMode}`}
+      displayMode={displayMode}
+      isCompact={isCompact}
+    >
+      <ModalHeader className={modalHeaderClassName} title={title} labelId="code-modal-title" />
+      <ModalBody className={modalBodyClassName} id="code-modal-body">
+        <Stack className="pf-chatbot__code-modal-body">
+          <StackItem className="pf-chatbot__code-modal-file-details">
+            <FileDetails fileName={fileName} />
+          </StackItem>
+          <div className="pf-v6-l-stack__item pf-chatbot__code-modal-editor" ref={containerRef}>
+            {renderMonacoEditor()}
+          </div>
+        </Stack>
+      </ModalBody>
+      <ModalFooter className={modalFooterClassName}>
+        <Button isBlock key="code-modal-primary" variant="primary" onClick={handlePrimaryAction} form="code-modal-form">
+          {primaryActionBtn}
+        </Button>
+        <Button isBlock key="code-modal-secondary" variant="link" onClick={handleSecondaryAction}>
+          {secondaryActionBtn}
+        </Button>
+      </ModalFooter>
+    </ChatbotModal>
+  );
+
+  return modal;
+};
+
+export default CodeModal;

package/src/CodeModal/index.ts

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

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