split-case support for expresssions (optional) and openai call-tool support with streaming in a flow

Author: devhelpr

examples-test-flows/openai-fetch-completion-as-stream-with-toolcall.json

@@ -1631,6 +1631,7 @@ export class FlowAppElement extends AppElement<NodeInfo> {
         }
 
         if (
+          node.nodeInfo.hasNoFormPopup ||
           getFollowNodeExecution() ||
           (formElements.length <= 1 &&
             !(

libs/app-canvas/src/app/flow-app.element.tsx

@@ -92,6 +92,7 @@ export interface BaseNodeInfo {
   initializeCompute?: () => void;
   showFormOnlyInPopup?: boolean;
   isSettingsPopup?: boolean;
+  hasNoFormPopup?: boolean;
   formElements?: any[];
   delete?: () => void;
   formValues?: any;

libs/visual-programming-system/src/types/base-node-info.ts

@@ -16,3 +16,19 @@ export const getFormattedValue = (
   }
   return '-';
 };
+
+export const getFormattedVariableValue = (
+  value: any,
+  decimalCount: number,
+  append: string
+) => {
+  const appendText = `${append ? ` ${append}` : ''}`;
+  if (typeof value === 'number') {
+    return `${(value as number).toFixed(decimalCount)}${appendText}`;
+  } else if (typeof value === 'string') {
+    return `${value}${appendText}`;
+  } else {
+    return `${(value as any).toString()}${appendText}`;
+  }
+  return '-';
+};

libs/visual-programming-system/src/utils/getFormattedValue.ts

@@ -95,6 +95,9 @@ export const getExpression: NodeTaskFactory<NodeInfo> = (
     currentValue = 0;
     executionRunCounter = 0;
     expressionCache[node.id] = undefined;
+    if (errorNode) {
+      (errorNode.domElement as unknown as HTMLElement).classList.add('hidden');
+    }
     return;
   };
 

libs/web-flow-executor/src/nodes/expression.ts

@@ -3,12 +3,12 @@ import {
   createElement,
   createNodeElement,
   FormFieldType,
-  getFormattedValue,
   IElementNode,
   InitialValues,
   INodeComponent,
   IRectNodeComponent,
   NodeTask,
+  getFormattedVariableValue,
 } from '@devhelpr/visual-programming-system';
 import { NodeInfo } from '../types/node-info';
 import { showDictionaryData } from './data-viewers/dictionary';
@@ -492,7 +492,9 @@ export const getScopedVariable =
         if (fieldType === 'value') {
           if (htmlNode?.domElement) {
             (htmlNode?.domElement as unknown as HTMLElement).innerHTML =
-              getLabelAsHtml(getFormattedValue(lastStoredDataState, 2, ''));
+              getLabelAsHtml(
+                getFormattedVariableValue(lastStoredDataState, 2, '')
+              );
           }
           if (rect && rect.resize) {
             rect.resize(120);

libs/web-flow-executor/src/nodes/scoped-variable.ts

@@ -15,6 +15,28 @@ import { NodeInfo } from '../types/node-info';
 
 import { RunCounter } from '../follow-path/run-counter';
 import { runNodeFromThumb } from '../flow-engine/flow-engine';
+import {
+  compileExpressionAsInfo,
+  runExpression,
+} from '@devhelpr/expression-compiler';
+import { getVariablePayloadInputUtils } from './variable-payload-input-utils.ts/variable-payload-input-utils';
+
+function handleExpression(expression: string, payload: any) {
+  const compiledExpression = compileExpressionAsInfo(expression);
+  const expressionFunction = (
+    new Function('payload', `${compiledExpression.script}`) as unknown as (
+      payload?: any
+    ) => any
+  ).bind(compiledExpression.bindings);
+
+  const result = runExpression(
+    expressionFunction,
+    payload,
+    false,
+    compiledExpression.payloadProperties
+  );
+  return Boolean(result);
+}
 
 export const getSplitByCase = (updated: () => void): NodeTask<NodeInfo> => {
   let node: IRectNodeComponent<NodeInfo>;
@@ -26,7 +48,7 @@ export const getSplitByCase = (updated: () => void): NodeTask<NodeInfo> => {
   const computeAsync = (
     input: string,
     loopIndex?: number,
-    _payload?: any,
+    payload?: any,
     _thumbName?: string,
     scopeId?: string,
     runCounterCompute?: RunCounter
@@ -47,10 +69,30 @@ export const getSplitByCase = (updated: () => void): NodeTask<NodeInfo> => {
       const case1 = node?.nodeInfo?.formValues?.['case1'] ?? '';
       const case2 = node?.nodeInfo?.formValues?.['case2'] ?? '';
       const case3 = node?.nodeInfo?.formValues?.['case3'] ?? '';
+      const useExpression =
+        node?.nodeInfo?.formValues?.['useExpression'] ?? false;
 
       let thumbNode: IThumbNodeComponent<NodeInfo> | undefined = undefined;
       if (input !== 'true') {
-        if (typeof inputAsString === 'string') {
+        if (useExpression) {
+          const payloadForExpression = getVariablePayloadInputUtils(
+            input,
+            payload,
+            'string',
+            -1,
+            -1,
+            scopeId,
+            canvasAppInstance
+          );
+
+          if (handleExpression(case1, payloadForExpression)) {
+            thumbNode = node.thumbConnectors[0];
+          } else if (handleExpression(case2, payloadForExpression)) {
+            thumbNode = node.thumbConnectors[1];
+          } else if (handleExpression(case3, payloadForExpression)) {
+            thumbNode = node.thumbConnectors[2];
+          }
+        } else if (typeof inputAsString === 'string') {
           if (case1 && inputAsString === case1) {
             thumbNode = node.thumbConnectors[0];
           } else if (case2 && inputAsString === case2) {
@@ -101,7 +143,9 @@ export const getSplitByCase = (updated: () => void): NodeTask<NodeInfo> => {
       y: number,
       id?: string,
       initalValues?: InitialValues,
-      containerNode?: IRectNodeComponent<NodeInfo>
+      containerNode?: IRectNodeComponent<NodeInfo>,
+      width?: number,
+      height?: number
     ) => {
       canvasAppInstance = canvasApp;
       const formElements = [
@@ -160,6 +204,25 @@ export const getSplitByCase = (updated: () => void): NodeTask<NodeInfo> => {
               case3: value,
             };
 
+            if (updated) {
+              updated();
+            }
+          },
+        },
+        {
+          fieldType: FormFieldType.Checkbox,
+          fieldName: 'useExpression',
+          label: 'Use expressions',
+          value: initalValues?.['useExpression'] ?? 'false',
+          onChange: (value: boolean) => {
+            if (!node.nodeInfo) {
+              return;
+            }
+            node.nodeInfo.formValues = {
+              ...node.nodeInfo.formValues,
+              useExpression: value,
+            };
+
             if (updated) {
               updated();
             }
@@ -187,8 +250,8 @@ export const getSplitByCase = (updated: () => void): NodeTask<NodeInfo> => {
       const rect = canvasApp.createRect(
         x,
         y,
-        200,
-        110,
+        width ?? 200,
+        height ?? 110,
         undefined,
         [
           {
@@ -233,7 +296,7 @@ export const getSplitByCase = (updated: () => void): NodeTask<NodeInfo> => {
         {
           classNames: `bg-slate-500 p-4 rounded`,
         },
-        false,
+        true,
         undefined,
         undefined,
         id,
@@ -252,6 +315,9 @@ export const getSplitByCase = (updated: () => void): NodeTask<NodeInfo> => {
         node.nodeInfo.formElements = formElements;
         node.nodeInfo.computeAsync = computeAsync;
         node.nodeInfo.initializeCompute = initializeCompute;
+        node.nodeInfo.showFormOnlyInPopup = false;
+        node.nodeInfo.hasNoFormPopup = true;
+        node.nodeInfo.isSettingsPopup = false;
       }
       return node;
     },

libs/web-flow-executor/src/nodes/split-by-case.ts

@@ -219,7 +219,7 @@ export const getUserTextInput =
           x,
           y,
           width ?? 200,
-          height ?? 100,
+          height ?? 150,
           undefined,
           [
             {