Bugfix/Escape JSON in Prompt Message (#3901)

add fix to only get variables when there is no colon

packages/ui/src/utils/genericHelper.js

@@ -569,32 +569,24 @@ export const generateRandomGradient = () => {
     return gradient
 }
 
-export const getInputVariables = (paramValue) => {
-    let returnVal = paramValue
-    const variableStack = []
-    const inputVariables = []
-    let startIdx = 0
-    const endIdx = returnVal.length
+export const getInputVariables = (input) => {
+    // This regex will match single curly-braced substrings
+    const pattern = /\{([^{}]+)\}/g
+    const results = []
 
-    while (startIdx < endIdx) {
-        const substr = returnVal.substring(startIdx, startIdx + 1)
+    let match
 
-        // Store the opening double curly bracket
-        if (substr === '{') {
-            variableStack.push({ substr, startIdx: startIdx + 1 })
+    while ((match = pattern.exec(input)) !== null) {
+        const inside = match[1].trim()
+
+        // Check if there's a colon
+        if (!inside.includes(':')) {
+            // If there's no colon, add to results
+            results.push(inside)
         }
-
-        // Found the complete variable
-        if (substr === '}' && variableStack.length > 0 && variableStack[variableStack.length - 1].substr === '{') {
-            const variableStartIdx = variableStack[variableStack.length - 1].startIdx
-            const variableEndIdx = startIdx
-            const variableFullPath = returnVal.substring(variableStartIdx, variableEndIdx)
-            inputVariables.push(variableFullPath)
-            variableStack.pop()
-        }
-        startIdx += 1
     }
-    return inputVariables
+
+    return results
 }
 
 export const removeDuplicateURL = (message) => {

packages/ui/src/views/assistants/custom/CustomAssistantConfigurePreview.jsx

@@ -12,7 +12,16 @@ import useConfirm from '@/hooks/useConfirm'
 // Material-UI
 import { IconButton, Avatar, ButtonBase, Toolbar, Box, Button, Grid, OutlinedInput, Stack, Typography } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { IconCode, IconArrowLeft, IconDeviceFloppy, IconSettings, IconX, IconTrash, IconWand } from '@tabler/icons-react'
+import {
+    IconCode,
+    IconArrowLeft,
+    IconDeviceFloppy,
+    IconSettings,
+    IconX,
+    IconTrash,
+    IconWand,
+    IconArrowsMaximize
+} from '@tabler/icons-react'
 
 // Project import
 import MainCard from '@/ui-component/cards/MainCard'
@@ -30,6 +39,7 @@ import ViewLeadsDialog from '@/ui-component/dialog/ViewLeadsDialog'
 import Settings from '@/views/settings'
 import ConfirmDialog from '@/ui-component/dialog/ConfirmDialog'
 import PromptGeneratorDialog from '@/ui-component/dialog/PromptGeneratorDialog'
+import ExpandTextDialog from '@/ui-component/dialog/ExpandTextDialog'
 
 // API
 import assistantsApi from '@/api/assistants'
@@ -101,6 +111,8 @@ const CustomAssistantConfigurePreview = () => {
     const [isSettingsOpen, setSettingsOpen] = useState(false)
     const [assistantPromptGeneratorDialogOpen, setAssistantPromptGeneratorDialogOpen] = useState(false)
     const [assistantPromptGeneratorDialogProps, setAssistantPromptGeneratorDialogProps] = useState({})
+    const [showExpandDialog, setShowExpandDialog] = useState(false)
+    const [expandDialogProps, setExpandDialogProps] = useState({})
 
     const [loading, setLoading] = useState(false)
     const [loadingAssistant, setLoadingAssistant] = useState(true)
@@ -525,6 +537,21 @@ const CustomAssistantConfigurePreview = () => {
         }
     }
 
+    const onExpandDialogClicked = (value) => {
+        const dialogProps = {
+            value,
+            inputParam: {
+                label: 'Instructions',
+                name: 'instructions',
+                type: 'string'
+            },
+            confirmButtonName: 'Save',
+            cancelButtonName: 'Cancel'
+        }
+        setExpandDialogProps(dialogProps)
+        setShowExpandDialog(true)
+    }
+
     const generateDocStoreToolDesc = async (storeId) => {
         const isValid = checkInputParamsMandatory()
         if (!isValid) {
@@ -955,6 +982,18 @@ const CustomAssistantConfigurePreview = () => {
                                                     Instructions<span style={{ color: 'red' }}>&nbsp;*</span>
                                                 </Typography>
                                                 <div style={{ flex: 1 }}></div>
+                                                <IconButton
+                                                    size='small'
+                                                    sx={{
+                                                        height: 25,
+                                                        width: 25
+                                                    }}
+                                                    title='Expand'
+                                                    color='secondary'
+                                                    onClick={() => onExpandDialogClicked(customAssistantInstruction)}
+                                                >
+                                                    <IconArrowsMaximize />
+                                                </IconButton>
                                                 {selectedChatModel?.name && (
                                                     <Button
                                                         title='Generate instructions using model'
@@ -1329,6 +1368,15 @@ const CustomAssistantConfigurePreview = () => {
                     setAssistantPromptGeneratorDialogOpen(false)
                 }}
             />
+            <ExpandTextDialog
+                show={showExpandDialog}
+                dialogProps={expandDialogProps}
+                onCancel={() => setShowExpandDialog(false)}
+                onConfirm={(newValue) => {
+                    setCustomAssistantInstruction(newValue)
+                    setShowExpandDialog(false)
+                }}
+            ></ExpandTextDialog>
             <ConfirmDialog />
         </>
     )