feat: add status message below prompt editor

web-src/src/components/GenerateButton.js

@@ -34,6 +34,7 @@ import { log } from '../helpers/MetricsHelper.js';
 import { contentFragmentState } from '../state/ContentFragmentState.js';
 import { RUN_MODE_CF } from '../state/RunMode.js';
 import { FIREFALL_ACTION_TYPES } from '../services/FirefallService.js';
+import { promptSyntaxErrorState } from '../state/PromptSyntaxErrorState.js';
 
 const createWaitMessagesController = (intlFn) => {
   const displayToast = (msg, timeout = 1500) => {
@@ -92,6 +93,7 @@ export function GenerateButton() {
   const parameters = useRecoilValue(parametersState);
   const contentFragment = useRecoilValue(contentFragmentState);
   const temperature = useRecoilValue(temperatureState);
+  const syntaxError = useRecoilValue(promptSyntaxErrorState);
 
   const setResults = useSetRecoilState(resultsState);
   const setIsOpenPromptEditor = useSetRecoilState(promptEditorState);
@@ -154,7 +156,7 @@ export function GenerateButton() {
         variant="cta"
         style="fill"
         onPress={handleGenerate}
-        isDisabled={generationInProgress}>
+        isDisabled={generationInProgress || syntaxError}>
         {generationInProgress ? <ProgressCircle size="S" aria-label="Generate" isIndeterminate right="8px" /> : <GenAIIcon marginEnd={'8px'} color={'white'}/>}
         {formatMessage(intlMessages.promptSessionSideView.generateButtonLabel)}
       </Button>

web-src/src/components/PromptEditor.js

@@ -20,13 +20,16 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { css, injectGlobal } from '@emotion/css';
 import { Global } from '@emotion/react';
 import { motion, AnimatePresence } from 'framer-motion';
+import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle';
 import Close from '@spectrum-icons/workflow/Close';
+import Alert from '@spectrum-icons/workflow/Alert';
 import { useIntl } from 'react-intl';
 
 import { intlMessages } from './PromptSessionSideView.l10n.js';
 
 import { parametersState } from '../state/ParametersState.js';
 import { promptState } from '../state/PromptState.js';
+import { promptSyntaxErrorState } from '../state/PromptSyntaxErrorState.js';
 import { NO_VALUE_STRING, renderPrompt } from '../helpers/PromptRenderer.js';
 import { log } from '../helpers/MetricsHelper.js';
 
@@ -75,6 +78,15 @@ const style = {
     border-radius: 4px;
     padding: 12px;
   `,
+  containerError: css`
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: auto;
+    border: 1px solid var(--spectrum-red-900);
+    border-radius: 4px;
+    padding: 12px;
+  `,
   editor: css`
     font-family: Monospaced, monospace;
     font-size: 12px;
@@ -86,24 +98,45 @@ const style = {
   textarea: css`
     outline: none;
   `,
+  errorHelpText: css`
+    margin-top: 15px;
+    color: var(--spectrum-red-900);
+  `,
+  validHelpText: css`
+    margin-top: 15px;
+    color: var(--spectrum-green-700);
+  `,
+  hidden: css`
+    display: none;
+  `,
 };
 
 function PromptEditor({ isOpen, onClose, ...props }) {
   const [prompt, setPrompt] = useRecoilState(promptState);
   const [promptText, setPromptText] = useState(prompt);
   const [viewSource, setViewSource] = useState(false);
+  const [editorSyntaxError, setEditorSyntaxError] = useRecoilState(promptSyntaxErrorState);
 
   const parameters = useRecoilValue(parametersState);
   const contentFragment = useRecoilValue(contentFragmentState);
 
   const { formatMessage } = useIntl();
-
   useEffect(() => {
     setPrompt(promptText);
     const promptEditorTextArea = document.getElementById('promptEditorTextArea');
     if (promptEditorTextArea) {
       promptEditorTextArea.setAttribute('title', 'Prompt Editor');
     }
+
+    // detect unsupported characters in editor
+    const regex = /=".*[{}"]+.*"/g;
+    const matches = [...promptText.matchAll(regex)];
+
+    if (matches.length > 0) {
+      setEditorSyntaxError(true);
+    } else {
+      setEditorSyntaxError(false);
+    }
   }, [promptText, setPrompt]);
 
   useEffect(() => {
@@ -181,7 +214,7 @@ function PromptEditor({ isOpen, onClose, ...props }) {
             </Flex>
           </Flex>
 
-          <div className={style.container}>
+          <div className={editorSyntaxError ? style.containerError : style.container}>
             <SimpleEditor
               className={style.editor}
               textareaClassName={style.textarea}
@@ -196,6 +229,22 @@ function PromptEditor({ isOpen, onClose, ...props }) {
               readOnly={!viewSource}
             />
           </div>
+
+          <Flex gap="size-100" UNSAFE_className={editorSyntaxError ? style.hidden : style.validHelpText }>
+            <CheckmarkCircle aria-label="Positive Alert" color="positive" />
+            <Text>
+              Prompt is valid
+            </Text>
+          </Flex>
+
+          <Flex gap="size-100" UNSAFE_className={editorSyntaxError ? style.errorHelpText : style.hidden}>
+            <Alert aria-label="Negative Alert" color="negative" />
+            <Text>
+              The characters <span style={{ fontWeight: '600' }}>&#123;</span>, <span style={{ fontWeight: '600' }}>&#125;</span>,
+              and <span style={{ fontWeight: '600' }}>&quot;</span> are reserved and can&apos;t be used within quoted text values.
+              Please remove or replace these characters and try again.
+            </Text>
+          </Flex>
         </motion.div>
       )}
     </AnimatePresence>

web-src/src/state/PromptSyntaxErrorState.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { atom } from 'recoil';
+
+export const promptSyntaxErrorState = atom({
+  key: 'promptSyntaxErrorState',
+  default: false,
+});