openai using fetch api , new raw-json node-type and memory-only apikey configuration

devhelpr · devhelpr · commit 696e00b87ea2 · 2024-11-10T16:18:11.000+01:00
diff --git a/examples-test-flows/openai-fetch-completion.json b/examples-test-flows/openai-fetch-completion.json
@@ -0,0 +1,96 @@
+{
+  "schemaType": "flow",
+  "schemaVersion": "0.0.1",
+  "id": "1234",
+  "flows": {
+    "flow": {
+      "flowType": "flow",
+      "nodes": [
+        {
+          "id": "8f4ac174-5c8e-45da-8ad4-a81a40f4f666",
+          "x": 3287.947143039206,
+          "y": 1054.04668496768,
+          "width": 200,
+          "height": 155,
+          "nodeType": "Shape",
+          "nodeInfo": {
+            "type": "fetch",
+            "formValues": {
+              "url": "https://api.openai.com/v1/chat/completions",
+              "headers": "Authorization: Bearer [openai-key]",
+              "http-method": "post"
+            },
+            "isSettingsPopup": true
+          }
+        },
+        {
+          "id": "3cf44538-9913-4aa2-aade-a7c619910f45",
+          "x": 2871.977300992098,
+          "y": 1064.5111606731102,
+          "width": 161.1015625,
+          "height": 136,
+          "nodeType": "Shape",
+          "nodeInfo": {
+            "type": "json-node",
+            "formValues": {
+              "json": "{\n    \"messages\": [\n      { \n        \"role\": \"user\", \n        \"content\": \"Tell me a joke\" \n        }\n    ],\n    \"temperature\": 0.6,\n    \"model\": \"gpt-4-turbo\",\n    \"max_tokens\": 30\n}"
+            },
+            "nodeCannotBeReplaced": true,
+            "showFormOnlyInPopup": true,
+            "useInCompositionOnly": false,
+            "keepPopupOpenAfterUpdate": true,
+            "isRunOnStart": true
+          }
+        },
+        {
+          "id": "d186a002-218b-47dc-aae8-07522a3da6ed",
+          "x": 3670.3006812979065,
+          "y": 1053.8064850250428,
+          "width": 119.99989187093509,
+          "height": 271.9999386533287,
+          "nodeType": "Shape",
+          "nodeInfo": {
+            "type": "show-input",
+            "formValues": {
+              "name": "",
+              "data-type": "default"
+            },
+            "initializeOnStartFlow": true,
+            "isSettingsPopup": true
+          }
+        },
+        {
+          "id": "1a35b609-3594-4529-bec1-2b50b205aa0d",
+          "x": 3033.078863492098,
+          "y": 1132.5111606731102,
+          "endX": 3287.947143039206,
+          "endY": 1131.54668496768,
+          "startNodeId": "3cf44538-9913-4aa2-aade-a7c619910f45",
+          "endNodeId": "8f4ac174-5c8e-45da-8ad4-a81a40f4f666",
+          "startThumbName": "input",
+          "endThumbName": "input",
+          "lineType": "BezierCubic",
+          "nodeType": "Connection",
+          "layer": 1,
+          "nodeInfo": {}
+        },
+        {
+          "id": "a16c5c54-c867-41af-a922-9a014786c513",
+          "x": 3487.947143039206,
+          "y": 1084.04668496768,
+          "endX": 3670.3006812979065,
+          "endY": 1083.8064850250428,
+          "startNodeId": "8f4ac174-5c8e-45da-8ad4-a81a40f4f666",
+          "endNodeId": "d186a002-218b-47dc-aae8-07522a3da6ed",
+          "startThumbName": "output",
+          "endThumbName": "input",
+          "lineType": "BezierCubic",
+          "nodeType": "Connection",
+          "layer": 1,
+          "nodeInfo": {}
+        }
+      ]
+    }
+  },
+  "compositions": {}
+}
diff --git a/libs/app-canvas/src/app/components/node-sidebar-menu.ts b/libs/app-canvas/src/app/components/node-sidebar-menu.ts
@@ -22,6 +22,7 @@ import {
   setFollowNodeExecution,
 } from '../follow-path/followNodeExecution';
 import { NodeInfo } from '@devhelpr/web-flow-executor';
+import { createInputDialog } from '../utils/create-input-dialog';
 
 export class NodeSidebarMenuComponent extends Component<
   AppNavComponentsProps<NodeInfo>
@@ -39,6 +40,7 @@ export class NodeSidebarMenuComponent extends Component<
   switchLayerButton: HTMLButtonElement | null = null;
   toggleDependencyConnections: HTMLButtonElement | null = null;
   followNodeExecution: HTMLButtonElement | null = null;
+  apikeysButton: HTMLButtonElement | null = null;
   showDependencyConnections = false;
 
   constructor(
@@ -54,6 +56,7 @@ export class NodeSidebarMenuComponent extends Component<
       <button title="Toggle between layer 1 and 2" class="${navBarButtonNomargin} flex items-center justify-center w-[32px] h-[32px] mb-1"><span class="icon icon-layers text-[22px]"></span></button>
       <button title="Show node dependencies" class="${navBarButtonNomargin} flex items-center justify-center w-[32px] h-[32px] mb-1"><span class="icon icon-arrow_forward text-[22px]"></span></button>
       <button title="Follow node execution" class="${navBarButtonNomargin} flex items-center justify-center w-[32px] h-[32px] hidden">F</button>
+      <button title="API Keys(just openai for now)" class="${navBarButtonNomargin} flex items-center justify-center w-[32px] h-[32px] mb-1"><span class="icon icon-vpn_key text-[22px]"></span></button>
 
 		  <children></children>
 		</div>`
@@ -85,6 +88,9 @@ export class NodeSidebarMenuComponent extends Component<
         this.followNodeExecution = this.toggleDependencyConnections
           ?.nextSibling as HTMLButtonElement;
 
+        this.apikeysButton = this.followNodeExecution
+          ?.nextSibling as HTMLButtonElement;
+
         this.settingsNodeButton.addEventListener(
           'click',
           this.onClickSettingsNode
@@ -113,13 +119,16 @@ export class NodeSidebarMenuComponent extends Component<
           this.onClickFollowNodeExecution
         );
 
+        this.apikeysButton.addEventListener('click', this.onClickAPIKeys);
+
         this.renderList.push(
           this.settingsNodeButton,
           this.placeOnLayer1Button,
           this.placeOnLayer2Button,
           this.switchLayerButton,
           this.toggleDependencyConnections,
-          this.followNodeExecution
+          this.followNodeExecution,
+          this.apikeysButton
         );
         this.rootElement.append(this.element);
       }
@@ -353,6 +362,42 @@ export class NodeSidebarMenuComponent extends Component<
     return false;
   };
 
+  onClickAPIKeys = (event: Event) => {
+    event.preventDefault();
+    if (!this.rootAppElement) {
+      return false;
+    }
+    const canvasApp = this.props.getCanvasApp();
+    if (!canvasApp) {
+      return false;
+    }
+    const openAIKey = canvasApp.getTempData('openai-key') ?? '';
+    createInputDialog(
+      this.rootAppElement,
+      'Openai-key',
+      openAIKey,
+      (_name) => {
+        return {
+          valid: true,
+        };
+      },
+      {
+        isPassword: true,
+      }
+    ).then((value) => {
+      if (value === false) {
+        return;
+      }
+      const canvasApp = this.props.getCanvasApp();
+      if (!canvasApp) {
+        return;
+      }
+      canvasApp.setTempData('openai-key', value);
+      console.log('openai-key value', value);
+    });
+    return false;
+  };
+
   render() {
     super.render();
 
diff --git a/libs/app-canvas/src/app/utils/create-input-dialog.ts b/libs/app-canvas/src/app/utils/create-input-dialog.ts
@@ -7,20 +7,23 @@ export const createInputDialog = (
   rootElement: HTMLElement,
   nameLabel: string,
   defaultValue?: string,
-  onValidate?: (value: string) => { valid: boolean; message?: string }
+  onValidate?: (value: string) => { valid: boolean; message?: string },
+  settings?: {
+    isPassword?: boolean;
+  }
 ) => {
   return new Promise<string | false>((resolve, reject) => {
     //let wasTouched = false;
     let submitWasClicked = false;
     const nameId = crypto.randomUUID();
     const formElement = createElementFromHtml(
-      `<div class="input-dialog-form flex flex-col">
+      `<div class="input-dialog-form flex flex-col p-8">
 			<form cmethod="dialog" class="form row-1">
 				<div class="flex flex-col w-full my-2">
 					<label for="${nameId}__input">${nameLabel} *</label>
-					<input id="${nameId}__input" class="form-input w-full" name="${nameId}" required value="${
-        defaultValue ?? ''
-      }"></input>
+					<input id="${nameId}__input" class="form-input w-full" name="${nameId}" type="${
+        settings?.isPassword ? 'password' : 'text'
+      }" required value="${defaultValue ?? ''}"></input>
           <div class="form-error"></div>
 			  	</div>	
 				<div class="flex w-full flex-row justify-end gap-2">
diff --git a/libs/visual-programming-system/src/canvas-app/flow-core.ts b/libs/visual-programming-system/src/canvas-app/flow-core.ts
@@ -123,6 +123,9 @@ export interface IFlowCore {
     commandName: string,
     data: any
   ) => void;
+
+  setTempData: (key: string, value: any) => void;
+  getTempData: (key: string) => any;
 }
 
 export class FlowCore implements IFlowCore {
@@ -144,6 +147,7 @@ export class FlowCore implements IFlowCore {
   protected nodeSetStateHandlers: Record<string, SetNodeStatedHandler> = {};
   protected nodeGetStateHandlers: Record<string, GetNodeStatedHandler> = {};
   protected tempVariables: Record<string, any> = {};
+  protected tempData: Record<string, any> = {};
   protected onNodeMessage: ((keyName: string, value: any) => void) | undefined =
     undefined;
 
@@ -436,4 +440,11 @@ export class FlowCore implements IFlowCore {
       this.commandHandlers[name].execute(commandName, data);
     }
   };
+
+  setTempData = (key: string, value: any) => {
+    this.tempData[key] = value;
+  };
+  getTempData = (key: string) => {
+    return this.tempData[key];
+  };
 }
diff --git a/libs/web-flow-executor/src/node-task-registry/canvas-node-task-registry.ts b/libs/web-flow-executor/src/node-task-registry/canvas-node-task-registry.ts
@@ -210,6 +210,7 @@ import { loadCSVFile, loadCSVFileNodeName } from '../nodes/load-csv-file';
 import { filterNodeName, getFilter } from '../nodes/filter';
 import { loadJSONFile, loadJSONFileNodeName } from '../nodes/load-json-file';
 import { getReduce, reduceNodeName } from '../nodes/reduce';
+import { getRawJsonNode, jsonNodeName } from '../nodes/raw-json';
 
 export const canvasNodeTaskRegistry: NodeTypeRegistry<NodeInfo> = {};
 export const canvasNodeTaskRegistryLabels: Record<string, string> = {};
@@ -442,6 +443,8 @@ export const setupCanvasNodeTaskRegistry = (
       registerExpressionFunctionNodeName,
       getRegisterExpressionFunctionNode
     );
+
+    registerNodeFactory(jsonNodeName, getRawJsonNode);
   }
 
   registerExternalNodes?.(registerNodeFactory);
diff --git a/libs/web-flow-executor/src/nodes/fetch.ts b/libs/web-flow-executor/src/nodes/fetch.ts
@@ -109,6 +109,20 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
           node?.nodeInfo?.formValues?.['http-method'] ?? 'post';
 
         const headers = new Headers();
+        const headersString = node?.nodeInfo?.formValues?.['headers'] ?? '';
+        if (headersString) {
+          const headersArray = headersString.split('\n');
+          const openAIKey = canvasAppInstance?.isContextOnly
+            ? process.env?.['openai_api_key'] ?? ''
+            : canvasAppInstance?.getTempData('openai-key') ?? '';
+          headersArray.forEach((header: string) => {
+            const headerArray = header.split(':');
+            if (headerArray.length === 2) {
+              const value = headerArray[1].replace('[openai-key]', openAIKey);
+              headers.append(headerArray[0], value);
+            }
+          });
+        }
         if (responseType === 'json') {
           headers.append('Content-Type', 'application/json');
         }
@@ -183,25 +197,6 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
       const url = initalValues?.['url'] ?? '';
 
       canvasAppInstance = canvasApp;
-      const formElements = [
-        {
-          fieldType: FormFieldType.Text,
-          fieldName: 'url',
-          value: url ?? '',
-          onChange: (value: string) => {
-            if (!node.nodeInfo) {
-              return;
-            }
-            node.nodeInfo.formValues = {
-              ...node.nodeInfo.formValues,
-              url: value,
-            };
-            if (updated) {
-              updated();
-            }
-          },
-        },
-      ];
 
       const jsxComponentWrapper = createElement(
         'div',
@@ -308,7 +303,23 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
       node = rect.nodeComponent;
       if (node.nodeInfo) {
         node.nodeInfo.formElements = [
-          ...formElements,
+          {
+            fieldType: FormFieldType.Text,
+            fieldName: 'url',
+            value: url ?? '',
+            onChange: (value: string) => {
+              if (!node.nodeInfo) {
+                return;
+              }
+              node.nodeInfo.formValues = {
+                ...node.nodeInfo.formValues,
+                url: value,
+              };
+              if (updated) {
+                updated();
+              }
+            },
+          },
           {
             fieldType: FormFieldType.Select,
             fieldName: 'http-method',
@@ -357,6 +368,24 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
               }
             },
           },
+          {
+            fieldType: FormFieldType.TextArea,
+            fieldName: 'headers',
+            label: 'Headers',
+            value: initalValues?.['headers'] ?? '',
+            onChange: (value: string) => {
+              if (!node || !node.nodeInfo) {
+                return;
+              }
+              node.nodeInfo.formValues = {
+                ...node.nodeInfo.formValues,
+                ['headers']: value,
+              };
+              if (updated) {
+                updated();
+              }
+            },
+          },
         ];
         node.nodeInfo.computeAsync = computeAsync;
         node.nodeInfo.initializeCompute = initializeCompute;
diff --git a/libs/web-flow-executor/src/nodes/raw-json.tsx b/libs/web-flow-executor/src/nodes/raw-json.tsx
