feat(AttachmentEdit): add AttachmentEdit

I'm building this with the current version of the modal for the time being given that the rest of the assistant layout doesn't seem to be built yet. This means that the footer is slightly different, as are the close buttons, title, background color, etc. I am also using the current PF6 code editor, which looks different. If this winds up being the ultimate design, we can go back and customize this to match once decisions have been made.

Fixes #57

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/AttachmentEdit/AttachmentEdit.md

@@ -0,0 +1,22 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Chat bots / AI
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Attachment edit
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['AttachmentEdit']
+---
+
+import AttachmentEdit from '@patternfly/virtual-assistant/dist/dynamic/AttachmentEdit';
+
+### Basic example
+
+```js file="./AttachmentEdit.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/AttachmentEdit/AttachmentEdit.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { AttachmentEdit } from '@patternfly/virtual-assistant/dist/dynamic/AttachmentEdit';
+
+export const BasicDemo: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <>
+      <Button onClick={handleModalToggle}>Launch modal</Button>
+      <AttachmentEdit
+        code="I am a code snippet"
+        fileName="test.yaml"
+        handleModalToggle={handleModalToggle}
+        isModalOpen={isModalOpen}
+        onCancel={() => null}
+        onSave={() => null}
+      />
+    </>
+  );
+};

packages/module/src/AttachmentEdit/AttachmentEdit.scss

@@ -0,0 +1,14 @@
+.pf-chatbot__attachment-language {
+  color: var(--pf-t--color--gray--50);
+  font-size: var(--pf-t--global--font--size--100);
+}
+
+.pf-chatbot__attachment-icon {
+  background-color: var(--pf-t--color--teal--50);
+  border-radius: var(--pf-t--global--border--radius--tiny);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}

packages/module/src/AttachmentEdit/AttachmentEdit.tsx

@@ -0,0 +1,106 @@
+// ============================================================================
+// Attachment Edit - Chatbot Code Snippet Editor
+// ============================================================================
+import React from 'react';
+import path from 'path';
+
+// Import PatternFly components
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+import { Button, Flex, FlexItem, Icon, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
+import { CodeIcon } from '@patternfly/react-icons';
+
+export interface AttachmentEditProps {
+  /** Text shown in code editor */
+  code: string;
+  /** Filename, including extension, of file shown in editor */
+  fileName: string;
+  onCancel: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  onSave: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  isModalOpen: boolean;
+  /** Title of modal */
+  title?: string;
+}
+
+export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
+  fileName,
+  code,
+  handleModalToggle,
+  isModalOpen,
+  onCancel,
+  onSave,
+  title = 'Edit attachment',
+  ...props
+}: AttachmentEditProps) => {
+  const handleSave = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onSave(_event);
+  };
+
+  const handleCancel = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onCancel(_event);
+  };
+
+  const onEditorDidMount = (editor, monaco) => {
+    editor.layout();
+    editor.focus();
+    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+  };
+
+  return (
+    <Modal
+      isOpen={isModalOpen}
+      onClose={handleModalToggle}
+      ouiaId="EditAttachmentModal"
+      aria-labelledby="edit-attachment-title"
+      aria-describedby="edit-attachment-modal"
+      width="25%"
+    >
+      <ModalHeader title={title} labelId="edit-attachment-title" />
+      <ModalBody id="edit-attachment-body">
+        <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
+          <FlexItem>
+            <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+              <Flex alignSelf={{ default: 'alignSelfCenter' }}>
+                <FlexItem className="pf-chatbot__attachment-icon">
+                  <Icon>
+                    <CodeIcon color="white" />
+                  </Icon>
+                </FlexItem>
+              </Flex>
+              <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
+                <FlexItem>{path.parse(fileName).name}</FlexItem>
+                <FlexItem className="pf-chatbot__attachment-language">
+                  {Language[path.extname(fileName).slice(1)].toUpperCase()}
+                </FlexItem>
+              </Flex>
+            </Flex>
+          </FlexItem>
+          <FlexItem>
+            <CodeEditor
+              isDarkTheme
+              isLineNumbersVisible
+              isLanguageLabelVisible
+              code={code}
+              language={Language[path.extname(fileName).slice(1)]}
+              onEditorDidMount={onEditorDidMount}
+              height="400px"
+              {...props}
+            />
+          </FlexItem>
+        </Flex>
+      </ModalBody>
+      <ModalFooter>
+        <Button isBlock key="confirm" variant="primary" onClick={handleSave}>
+          Save
+        </Button>
+        <Button isBlock key="cancel" variant="secondary" onClick={handleCancel}>
+          Cancel
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default AttachmentEdit;

packages/module/src/AttachmentEdit/index.ts

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

packages/module/src/index.ts

@@ -3,6 +3,9 @@
 export { default as AssistantMessageEntry } from './AssistantMessageEntry';
 export * from './AssistantMessageEntry';
 
+export { default as AttachmentEdit } from './AttachmentEdit';
+export * from './AttachmentEdit';
+
 export { default as ChatbotHeader } from './ChatbotHeader';
 export * from './ChatbotHeader';
 

packages/module/src/main.scss

@@ -1,5 +1,14 @@
+@import './AttachmentEdit/AttachmentEdit';
+@import './ChatbotConversationHistoryNav/ChatbotConversationHistoryNav';
+@import './ChatbotHeader/ChatbotHeader.scss';
 @import './ChatbotToggle/ChatbotToggle';
-
+@import './Footer/Footer';
+@import './Footer/Footnote';
+@import './MessageBar/AttachButton';
+@import './MessageBar/MessageBar';
+@import './MessageBar/MicrophoneButton';
+@import './MessageBar/SendButton';
+@import './Popover/Popover';
 
 .ws-full-page-utils {
   bottom: auto !important;