text-node that has replace variable refererences like {{variableName}} and implemented in a simple google gemini flash prompt flow example

Author: devhelpr

examples-test-flows/google-gemini-flash-simple-prompt.json

@@ -8,15 +8,15 @@
       "nodes": [
         {
           "id": "1bc4104f-6c09-4bd2-9a65-9ed23137a1db",
-          "x": 3387.9412992094503,
-          "y": 1553.4911809888213,
+          "x": 3386.3467324818757,
+          "y": 1554.3180990996912,
           "width": 111.7109375,
           "height": 112,
           "nodeType": "Shape",
           "nodeInfo": {
             "type": "json-node",
             "formValues": {
-              "json": "{\n  \"contents\": [{\n    \"parts\":[{\"text\": \"Explain how AI works\"}]\n    }]\n}"
+              "json": "{\n  \"contents\": [{\n    \"parts\":[{\"@set:text\": \"input\"}]\n    }]\n}"
             },
             "nodeCannotBeReplaced": true,
             "showFormOnlyInPopup": true,
@@ -45,8 +45,8 @@
           "id": "8144d095-7110-43d4-96fb-8683bb78c353",
           "x": 4003.48228233086,
           "y": 1511.442820331771,
-          "width": 120.00028243731548,
-          "height": 272.0000021485332,
+          "width": 120.00011977661892,
+          "height": 272.00001609819054,
           "nodeType": "Shape",
           "nodeInfo": {
             "type": "show-input",
@@ -60,10 +60,10 @@
         },
         {
           "id": "c3a8bd9e-f4d5-46db-9384-b1de17a33c5f",
-          "x": 4673.813641176501,
-          "y": 1514.1354499719885,
-          "width": 119.99988179708753,
-          "height": 272.0000883964047,
+          "x": 4673.813395137549,
+          "y": 1515.2820578688627,
+          "width": 119.99966907871476,
+          "height": 272.00001609819054,
           "nodeType": "Shape",
           "nodeInfo": {
             "type": "show-input",
@@ -75,10 +75,67 @@
             "isSettingsPopup": true
           }
         },
+        {
+          "id": "c99ece2b-9de3-409d-af22-cb6fa0f677cb",
+          "x": 4313.803391261389,
+          "y": 1494.0914007909573,
+          "width": 200,
+          "height": 100,
+          "nodeType": "Shape",
+          "nodeInfo": {
+            "type": "expression",
+            "formValues": {
+              "expression": "candidates[0].content.parts[0].text",
+              "inputType": "number"
+            },
+            "showFormOnlyInPopup": true,
+            "isSettingsPopup": true,
+            "supportsPreview": true
+          }
+        },
+        {
+          "id": "9f1f3e1c-787f-406f-b52b-b6db3e7b85dd",
+          "x": 3117.576582938058,
+          "y": 1576.330740260205,
+          "width": 74.7109375,
+          "height": 80,
+          "nodeType": "Shape",
+          "nodeInfo": {
+            "type": "text-node",
+            "formValues": {
+              "text": "Input data is received in a typescript object specified below, it is in the subject property:\n\n```ts\nconst input = {\n  subject: \"{{subject}}\"\n}\n```\n\nExplain in detail the subject that is in the subject property in the incoming input data object, specified above"
+            },
+            "nodeCannotBeReplaced": true,
+            "showFormOnlyInPopup": true,
+            "useInCompositionOnly": false,
+            "keepPopupOpenAfterUpdate": true
+          }
+        },
+        {
+          "id": "8b7d6c8d-1806-4596-a47a-514038cffe13",
+          "x": 3149.212398108586,
+          "y": 1326.8614462943667,
+          "width": 174.42183422340463,
+          "height": 83.99991573929128,
+          "nodeType": "Shape",
+          "nodeInfo": {
+            "type": "scope-variable",
+            "formValues": {
+              "variableName": "subject",
+              "initialValue": "AI",
+              "fieldType": "value",
+              "fieldValueType": "string",
+              "enumValues": [],
+              "initialEnumValue": ""
+            },
+            "isVariable": true,
+            "nodeCannotBeReplaced": true
+          }
+        },
         {
           "id": "6a22f828-b47c-4123-bde9-6ebe2940cc0a",
-          "x": 3499.6522367094503,
-          "y": 1609.4911809888213,
+          "x": 3498.0576699818757,
+          "y": 1610.3180990996912,
           "endX": 3663.063721988264,
           "endY": 1611.6351069890657,
           "startNodeId": "1bc4104f-6c09-4bd2-9a65-9ed23137a1db",
@@ -107,7 +164,7 @@
         },
         {
           "id": "ea98148d-52be-473c-be87-8f0fbd6e771b",
-          "x": 4123.4825647681755,
+          "x": 4123.482402107479,
           "y": 1541.442820331771,
           "endX": 4313.803391261389,
           "endY": 1544.0914007909573,
@@ -120,31 +177,12 @@
           "layer": 1,
           "nodeInfo": {}
         },
-        {
-          "id": "c99ece2b-9de3-409d-af22-cb6fa0f677cb",
-          "x": 4313.803391261389,
-          "y": 1494.0914007909573,
-          "width": 200,
-          "height": 100,
-          "nodeType": "Shape",
-          "nodeInfo": {
-            "type": "expression",
-            "formValues": {
-              "expression": "candidates[0].content.parts[0].text",
-              "inputType": "number"
-            },
-            "showFormOnlyInPopup": true,
-            "isSettingsPopup": true,
-            "supportsPreview": true,
-            "taskType": "expression"
-          }
-        },
         {
           "id": "3735612d-a425-45c2-ae8f-8a3adfcde306",
           "x": 4513.803391261389,
           "y": 1544.0914007909573,
-          "endX": 4673.813641176501,
-          "endY": 1544.1354499719885,
+          "endX": 4673.813395137549,
+          "endY": 1545.2820578688627,
           "startNodeId": "c99ece2b-9de3-409d-af22-cb6fa0f677cb",
           "endNodeId": "c3a8bd9e-f4d5-46db-9384-b1de17a33c5f",
           "startThumbName": "output",
@@ -153,6 +191,21 @@
           "nodeType": "Connection",
           "layer": 1,
           "nodeInfo": {}
+        },
+        {
+          "id": "3595bb23-681a-43d1-b8c5-0a3cd2b68bfc",
+          "x": 3192.287520438058,
+          "y": 1616.330740260205,
+          "endX": 3386.3467324818757,
+          "endY": 1610.3180990996912,
+          "startNodeId": "9f1f3e1c-787f-406f-b52b-b6db3e7b85dd",
+          "endNodeId": "1bc4104f-6c09-4bd2-9a65-9ed23137a1db",
+          "startThumbName": "output",
+          "endThumbName": "input",
+          "lineType": "BezierCubic",
+          "nodeType": "Connection",
+          "layer": 1,
+          "nodeInfo": {}
         }
       ]
     }

libs/visual-programming-system/src/components/meta-view-dialog/meta-view-dialog.tsx

@@ -60,7 +60,7 @@ export const showMetaViewDialog = (
       }
     >
       <div
-        class="overflow-visible whitespace-pre flex flex-col gap-4"
+        class="overflow-visible whitespace-pre-wrap flex flex-col gap-4"
         getElement={(element: HTMLDivElement) =>
           (divElement = element as HTMLDivElement)
         }

libs/web-flow-executor/src/nodes/raw-text.tsx

@@ -14,6 +14,8 @@ import {
   visualNodeFactory,
 } from '@devhelpr/visual-programming-system';
 import { NodeInfo } from '../types/node-info';
+import { getVariablePayloadInputUtils } from './variable-payload-input-utils/variable-payload-input-utils';
+import { replaceVariablesInString } from '../utils/replace-variables-in-string';
 
 const fieldName = 'testt-input';
 const labelName = 'JSON';
@@ -57,11 +59,11 @@ export const getRawTextNode: NodeTaskFactory<NodeInfo> = (
   };
 
   const compute = (
-    _input: string,
-    _loopIndex?: number,
-    _payload?: any,
+    input: string,
+    loopIndex?: number,
+    payload?: any,
     _thumbName?: string,
-    _scopeId?: string
+    scopeId?: string
   ) => {
     clearErrorMessage?.();
     if (!node.nodeInfo || !node.nodeInfo.formValues?.['text']) {
@@ -73,7 +75,21 @@ export const getRawTextNode: NodeTaskFactory<NodeInfo> = (
       };
     }
 
-    const text = node.nodeInfo.formValues['text'] ?? '';
+    const variablePayload = getVariablePayloadInputUtils(
+      input,
+      payload,
+      'string',
+      0,
+      loopIndex ?? 0,
+      scopeId,
+      canvasAppInstance
+    );
+
+    const text = replaceVariablesInString(
+      node.nodeInfo.formValues['text'] ?? '',
+      variablePayload
+    );
+
     currentSerializedInput = text;
     return {
       result: text,

libs/web-flow-executor/src/utils/replace-variables-in-string.ts

@@ -0,0 +1,21 @@
+export const replaceVariablesInString = (
+  content: string,
+  payload: Record<string, string> = {}
+) => {
+  let resultContent = content;
+  try {
+    const matches = resultContent.match(/{{[\s\S]+?}}/gm);
+    if (matches) {
+      matches.map((match) => {
+        const variableName = match.slice(2, -2);
+        const info = payload[variableName];
+        if (info) {
+          resultContent = resultContent.replace(match, info);
+        }
+      });
+    }
+  } catch (error) {
+    console.error('replaceVariablesInString error', error);
+  }
+  return resultContent;
+};