From 09c1b3e855792027479925cd08e3ed2b83a71d29 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Tue, 20 Aug 2024 09:04:05 -0400 Subject: [PATCH 1/2] 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 https://github.com/patternfly/virtual-assistant/issues/57 --- .../examples/AttachmentEdit/AttachmentEdit.md | 22 ++++ .../AttachmentEdit/AttachmentEdit.tsx | 25 +++++ .../src/AttachmentEdit/AttachmentEdit.scss | 14 +++ .../src/AttachmentEdit/AttachmentEdit.tsx | 106 ++++++++++++++++++ packages/module/src/AttachmentEdit/index.ts | 3 + packages/module/src/index.ts | 3 + packages/module/src/main.scss | 11 +- 7 files changed, 183 insertions(+), 1 deletion(-) create mode 100644 packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/AttachmentEdit/AttachmentEdit.md create mode 100644 packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/AttachmentEdit/AttachmentEdit.tsx create mode 100644 packages/module/src/AttachmentEdit/AttachmentEdit.scss create mode 100644 packages/module/src/AttachmentEdit/AttachmentEdit.tsx create mode 100644 packages/module/src/AttachmentEdit/index.ts diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/AttachmentEdit/AttachmentEdit.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/AttachmentEdit/AttachmentEdit.md new file mode 100644 index 0000000..93abcc2 --- /dev/null +++ b/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" + +``` diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/AttachmentEdit/AttachmentEdit.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/AttachmentEdit/AttachmentEdit.tsx new file mode 100644 index 0000000..0ba8572 --- /dev/null +++ b/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 ( + <> + + null} + onSave={() => null} + /> + + ); +}; diff --git a/packages/module/src/AttachmentEdit/AttachmentEdit.scss b/packages/module/src/AttachmentEdit/AttachmentEdit.scss new file mode 100644 index 0000000..4cf3f94 --- /dev/null +++ b/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; +} diff --git a/packages/module/src/AttachmentEdit/AttachmentEdit.tsx b/packages/module/src/AttachmentEdit/AttachmentEdit.tsx new file mode 100644 index 0000000..58d8ff9 --- /dev/null +++ b/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 = ({ + 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 ( + + + + + + + + + + + + + + + {path.parse(fileName).name} + + {Language[path.extname(fileName).slice(1)].toUpperCase()} + + + + + + + + + + + + + + + ); +}; + +export default AttachmentEdit; diff --git a/packages/module/src/AttachmentEdit/index.ts b/packages/module/src/AttachmentEdit/index.ts new file mode 100644 index 0000000..f043125 --- /dev/null +++ b/packages/module/src/AttachmentEdit/index.ts @@ -0,0 +1,3 @@ +export { default } from './AttachmentEdit'; + +export * from './AttachmentEdit'; diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index cf2da18..632621c 100644 --- a/packages/module/src/index.ts +++ b/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'; diff --git a/packages/module/src/main.scss b/packages/module/src/main.scss index 0f62edd..8b367d8 100644 --- a/packages/module/src/main.scss +++ b/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; From 15c6828da69f6ac4818d7b8f5ad73d37ebddb19d Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Tue, 20 Aug 2024 17:16:16 -0400 Subject: [PATCH 2/2] Address PR feedback --- .../src/AttachmentEdit/AttachmentEdit.scss | 9 +-- .../src/AttachmentEdit/AttachmentEdit.tsx | 55 ++++++++++++------- 2 files changed, 39 insertions(+), 25 deletions(-) diff --git a/packages/module/src/AttachmentEdit/AttachmentEdit.scss b/packages/module/src/AttachmentEdit/AttachmentEdit.scss index 4cf3f94..3557e34 100644 --- a/packages/module/src/AttachmentEdit/AttachmentEdit.scss +++ b/packages/module/src/AttachmentEdit/AttachmentEdit.scss @@ -1,14 +1,11 @@ .pf-chatbot__attachment-language { - color: var(--pf-t--color--gray--50); - font-size: var(--pf-t--global--font--size--100); + 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--color--teal--50); + background-color: var(--pf-t--global--icon--color--status--custom--default); border-radius: var(--pf-t--global--border--radius--tiny); - display: flex; - align-items: center; - justify-content: center; width: 24px; height: 24px; } diff --git a/packages/module/src/AttachmentEdit/AttachmentEdit.tsx b/packages/module/src/AttachmentEdit/AttachmentEdit.tsx index 58d8ff9..f7f0923 100644 --- a/packages/module/src/AttachmentEdit/AttachmentEdit.tsx +++ b/packages/module/src/AttachmentEdit/AttachmentEdit.tsx @@ -6,7 +6,17 @@ 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 { + Button, + Flex, + Icon, + Modal, + ModalBody, + ModalFooter, + ModalHeader, + Stack, + StackItem +} from '@patternfly/react-core'; import { CodeIcon } from '@patternfly/react-icons'; export interface AttachmentEditProps { @@ -14,9 +24,13 @@ export interface AttachmentEditProps { 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; @@ -59,25 +73,28 @@ export const AttachmentEdit: React.FunctionComponent = ({ > - - - - - - - - - + + + + + + + - - {path.parse(fileName).name} - + + {path.parse(fileName).name} + {Language[path.extname(fileName).slice(1)].toUpperCase()} - - + + - - + + = ({ height="400px" {...props} /> - - + +