@patternfly/chatbot 2.1.0-prerelease.17

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx

@@ -0,0 +1,66 @@
+// ============================================================================
+// Chatbot Layout - Chat - Welcome
+// ============================================================================
+import React 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;
+}
+
+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: React.FunctionComponent<ChatbotWelcomePromptProps> = ({
+  title,
+  description,
+  prompts,
+  className,
+  testId,
+  ...props
+}: ChatbotWelcomePromptProps) => (
+  <div data-testid={testId} className={`pf-chatbot--layout--welcome ${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>
+            <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-1"
+      data-ouia-component-type="PF6/Content"
+      data-ouia-safe="true"
+      data-pf-content="true"
+    >
+      <span
+        class="pf-chatbot__hello"
+      >
+        Hello, Chatbot User
+      </span>
+      <br />
+      <span
+        class="pf-chatbot__question"
+      >
+        How may 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,76 @@
+.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__header {
+    background: #1f1f1f;
+    /** 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);
+    --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: 500;
+  }
+  .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-chatbot__code-modal-file-details {
+    padding-inline-start: var(--pf-t--global--spacer--md);
+  }
+}
+
+// ============================================================================
+// 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;
+    }
+  }
+}

package/src/CodeModal/CodeModal.tsx

@@ -0,0 +1,153 @@
+// ============================================================================
+// Code Modal - Chatbot Modal with Code Editor
+// ============================================================================
+import React from 'react';
+import path from 'path-browserify';
+
+// Import PatternFly components
+import { CodeEditor } from '@patternfly/react-code-editor';
+import { Button, ModalBody, ModalFooter, ModalHeader, Stack, StackItem } from '@patternfly/react-core';
+import FileDetails, { extensionToLanguage } from '../FileDetails';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal/ChatbotModal';
+
+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;
+}
+
+export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
+  fileName,
+  code,
+  codeEditorControlClassName: codeEditorClassName,
+  handleModalToggle,
+  isCopyEnabled,
+  isLineNumbersVisible,
+  isModalOpen,
+  isReadOnly,
+  onPrimaryAction,
+  onSecondaryAction,
+  primaryActionBtn,
+  secondaryActionBtn,
+  title,
+  displayMode = ChatbotDisplayMode.default,
+  ...props
+}: CodeModalProps) => {
+  const [newCode, setNewCode] = React.useState(code);
+
+  const handlePrimaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    if (!isReadOnly) {
+      onPrimaryAction(_event, newCode);
+    } else {
+      onPrimaryAction(_event);
+    }
+  };
+
+  const handleSecondaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onSecondaryAction(_event);
+  };
+
+  const onEditorDidMount = (editor, monaco) => {
+    editor.layout();
+    editor.focus();
+    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+  };
+
+  const onCodeChange = (value: string) => {
+    if (!isReadOnly) {
+      setNewCode(value);
+    }
+  };
+
+  /* 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}
+      onClose={handleModalToggle}
+      ouiaId="CodeModal"
+      aria-labelledby="code-modal-title"
+      aria-describedby="code-modal"
+      className={`pf-chatbot__code-modal pf-chatbot__code-modal--${displayMode}`}
+      displayMode={displayMode}
+    >
+      <ModalHeader title={title} labelId="code-modal-title" />
+      <ModalBody id="code-modal-body">
+        <Stack className="pf-chatbot__code-modal-body">
+          <StackItem className="pf-chatbot__code-modal-file-details">
+            <FileDetails fileName={fileName} />
+          </StackItem>
+          <StackItem>
+            <CodeEditor
+              isDarkTheme
+              isLineNumbersVisible={isLineNumbersVisible}
+              isLanguageLabelVisible
+              isCopyEnabled={isCopyEnabled}
+              isReadOnly={isReadOnly}
+              code={newCode}
+              language={extensionToLanguage[path.extname(fileName).slice(1)]}
+              onEditorDidMount={onEditorDidMount}
+              onCodeChange={onCodeChange}
+              className={codeEditorClassName}
+              height={getHeight(displayMode)}
+              options={{
+                glyphMargin: false,
+                folding: false
+              }}
+              {...props}
+            />
+          </StackItem>
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
+        <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/FileDetails/FileDetails.scss

@@ -0,0 +1,25 @@
+.pf-chatbot__code-language {
+  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;
+}
+
+.pf-chatbot__code-icon {
+  color: var(--pf-t--global--icon--color--status--custom--default);
+  width: 24px;
+  height: 24px;
+}
+
+.pf-chatbot__code-fileName {
+  font-size: var(--pf-t--global--font--size--body--default);
+}
+
+// This is used in demos only
+.pf-chatbot__file-details-example {
+  background: var(--pf-t--global--background--color--secondary--default);
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/FileDetails/FileDetails.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FileDetails from './FileDetails';
+
+describe('FileDetails', () => {
+  it('should render file details', () => {
+    const { container } = render(<FileDetails fileName="test.txt" />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render file details correctly if an extension we support is passed in', () => {
+    render(<FileDetails fileName="test.txt" languageTestId="language" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.getByText('TEXT')).toBeTruthy();
+    expect(screen.getByTestId('language')).toBeTruthy();
+  });
+  it('should skip language if we do not support an extension', () => {
+    render(<FileDetails fileName="test.joke" languageTestId="language" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.queryByTestId('language')).toBeFalsy();
+  });
+});