Merge pull request #82 from rebeccaalpert/attachment-edit

feat(AttachmentEdit): Add AttachmentEdit

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,11 @@
+.pf-chatbot__attachment-language {
+ color: var(--pf-t--global--text--color--subtle);
+ font-size: var(--pf-t--global--icon--size--font--xs);
+}
+
+.pf-chatbot__attachment-icon {
+ background-color: var(--pf-t--global--icon--color--status--custom--default);
+ border-radius: var(--pf-t--global--border--radius--tiny);
+ width: 24px;
+ height: 24px;
+}

packages/module/src/AttachmentEdit/AttachmentEdit.tsx

@@ -0,0 +1,123 @@
+// ============================================================================
+// 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,
+ Icon,
+ Modal,
+ ModalBody,
+ ModalFooter,
+ ModalHeader,
+ Stack,
+ StackItem
+} 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;
+ /** Function that runs when cancel button is clicked */
+ onCancel: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+ /** Function that runs when save button is clicked */
+ onSave: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+ /** Function that opens and closes modal */
+ handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+ /** Whether modal is open */
+ 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">
+ <Stack hasGutter>
+ <StackItem>
+ <Flex>
+ <Flex
+ className="pf-chatbot__attachment-icon"
+ justifyContent={{ default: 'justifyContentCenter' }}
+ alignItems={{ default: 'alignItemsCenter' }}
+ alignSelf={{ default: 'alignSelfCenter' }}
+ >
+ <Icon>
+ <CodeIcon color="white" />
+ </Icon>
+ </Flex>
+ <Stack>
+ <StackItem>{path.parse(fileName).name}</StackItem>
+ <StackItem className="pf-chatbot__attachment-language">
+ {Language[path.extname(fileName).slice(1)].toUpperCase()}
+ </StackItem>
+ </Stack>
+ </Flex>
+ </StackItem>
+ <StackItem>
+ <CodeEditor
+ isDarkTheme
+ isLineNumbersVisible
+ isLanguageLabelVisible
+ code={code}
+ language={Language[path.extname(fileName).slice(1)]}
+ onEditorDidMount={onEditorDidMount}
+ height="400px"
+ {...props}
+ />
+ </StackItem>
+ </Stack>
+ </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;