prettier

src/frontend/src/components/chatComponent/index.tsx

@@ -1,8 +1,4 @@
-import {
+import { useEffect, useRef, useState } from "react";
-	useEffect,
-	useRef,
-	useState,
-} from "react";
 
 import { ChatMessageType, ChatType } from "../../types/chat";
 import ChatTrigger from "./chatTrigger";
@@ -14,9 +10,12 @@ export default function Chat({ flow }: ChatType) {
   const [open, setOpen] = useState(false);
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-			event.preventDefault()
+      // event.preventDefault()
-		  if ((event.key === "K"||event.key==="k") && (event.metaKey||event.ctrlKey)) {
+      if (
-			setOpen(oldState=>!oldState);
+        (event.key === "K" || event.key === "k") &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        setOpen((oldState) => !oldState);
       }
     };
     document.addEventListener("keydown", handleKeyDown);

src/frontend/src/controllers/API/index.ts

@@ -1,32 +1,35 @@
-import { PromptTypeAPI, errorsTypeAPI } from './../../types/api/index';
+import { PromptTypeAPI, errorsTypeAPI } from "./../../types/api/index";
-import { APIObjectType, sendAllProps } from '../../types/api/index';
+import { APIObjectType, sendAllProps } from "../../types/api/index";
 import axios, { AxiosResponse } from "axios";
-import { FlowType } from '../../types/flow';
+import { FlowType } from "../../types/flow";
 
-export async function getAll():Promise<AxiosResponse<APIObjectType>> {
+export async function getAll(): Promise<AxiosResponse<APIObjectType>> {
   return await axios.get(`/all`);
 }
 
-export async function sendAll(data:sendAllProps) {
+export async function sendAll(data: sendAllProps) {
   return await axios.post(`/predict`, data);
 }
 
-export async function checkCode(code:string):Promise<AxiosResponse<errorsTypeAPI>>{
+export async function checkCode(
-
+  code: string
-    return await axios.post('/validate/code',{code})
+): Promise<AxiosResponse<errorsTypeAPI>> {
+  return await axios.post("/validate/code", { code });
 }
 
-export async function checkPrompt(template:string):Promise<AxiosResponse<PromptTypeAPI>>{
+export async function checkPrompt(
-
+  template: string
-    return await axios.post('/validate/prompt',{template})
+): Promise<AxiosResponse<PromptTypeAPI>> {
+  return await axios.post("/validate/prompt", { template });
 }
 
 export async function getExamples(): Promise<FlowType[]> {
-    const url = 'https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples';
+  const url =
+    "https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples";
   const response = await axios.get(url);
 
   const jsonFiles = response.data.filter((file: any) => {
-      return file.name.endsWith('.json');
+    return file.name.endsWith(".json");
   });
 
   const contentsPromises = jsonFiles.map(async (file: any) => {
@@ -37,4 +40,4 @@ export async function getExamples(): Promise<FlowType[]> {
   const contents = await Promise.all(contentsPromises);
 
   return contents;
-  }
+}

src/frontend/src/pages/FlowPage/index.tsx

@@ -29,9 +29,8 @@ const nodeTypes = {
 
 var _ = require("lodash");
 
-export default function FlowPage({ flow }:{flow:FlowType}) {
+export default function FlowPage({ flow }: { flow: FlowType }) {
-	let { updateFlow, incrementNodeId} =
+  let { updateFlow, incrementNodeId } = useContext(TabsContext);
-		useContext(TabsContext);
   const { types, reactFlowInstance, setReactFlowInstance } =
     useContext(typesContext);
   const reactFlowWrapper = useRef(null);
@@ -45,7 +44,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
     flow.data?.edges ?? []
   );
   const { setViewport } = useReactFlow();
-	const edgeUpdateSuccessful = useRef(true)
+  const edgeUpdateSuccessful = useRef(true);
 
   useEffect(() => {
     if (reactFlowInstance && flow) {
@@ -69,7 +68,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
   }, [setExtraComponent, setExtraNavigation]);
 
   const onEdgesChangeMod = useCallback(
-		(s:EdgeChange[]) => {
+    (s: EdgeChange[]) => {
       onEdgesChange(s);
       setNodes((x) => {
         let newX = _.cloneDeep(x);
@@ -80,7 +79,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
   );
 
   const onConnect = useCallback(
-		(params:Connection) => {
+    (params: Connection) => {
       setEdges((eds) =>
         addEdge({ ...params, className: "animate-pulse" }, eds)
       );
@@ -92,13 +91,13 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
     [setEdges, setNodes]
   );
 
-	const onDragOver = useCallback((event:React.DragEvent) => {
+  const onDragOver = useCallback((event: React.DragEvent) => {
     event.preventDefault();
     event.dataTransfer.dropEffect = "move";
   }, []);
 
   const onDrop = useCallback(
-		(event:React.DragEvent) => {
+    (event: React.DragEvent) => {
       event.preventDefault();
 
       // Helper function to generate a unique node ID
@@ -110,7 +109,9 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
       const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
 
       // Extract the data from the drag event and parse it as a JSON object
-			let data:{type:string,node?:APIClassType} = JSON.parse(event.dataTransfer.getData("json"));
+      let data: { type: string; node?: APIClassType } = JSON.parse(
+        event.dataTransfer.getData("json")
+      );
 
       // If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node
       if (
@@ -128,7 +129,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
         let newId = getId();
 
         // Create a new node object
-				const newNode:NodeType = {
+        const newNode: NodeType = {
           id: newId,
           type: "genericNode",
           position,
@@ -153,22 +154,27 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
     [incrementNodeId, reactFlowInstance, setErrorData, setNodes]
   );
 
-	
   const onDelete = (mynodes) => {
-		setEdges(edges.filter((ns) => !nodes.some((n) => ns.source === n.id || ns.target === n.id)));
+    setEdges(
-	}
+      edges.filter(
+        (ns) => !nodes.some((n) => ns.source === n.id || ns.target === n.id)
+      )
+    );
+  };
 
   const onEdgeUpdateStart = useCallback(() => {
     edgeUpdateSuccessful.current = false;
   }, []);
 
-	
+  const onEdgeUpdate = useCallback(
-	  const onEdgeUpdate = useCallback((oldEdge:Edge, newConnection:Connection) => {
+    (oldEdge: Edge, newConnection: Connection) => {
-		if(isValidConnection(newConnection,reactFlowInstance)){
+      if (isValidConnection(newConnection, reactFlowInstance)) {
         edgeUpdateSuccessful.current = true;
         setEdges((els) => updateEdge(oldEdge, newConnection, els));
       }
-	}, []);
+    },
+    []
+  );
 
   const onEdgeUpdateEnd = useCallback((_, edge) => {
     if (!edgeUpdateSuccessful.current) {
@@ -202,9 +208,8 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
             onDrop={onDrop}
             onNodesDelete={onDelete}
           >
-						<Background className="dark:bg-gray-900"/>
+            <Background className="dark:bg-gray-900" />
-						<Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600">
+            <Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600"></Controls>
-						</Controls>
           </ReactFlow>
           <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
         </>

src/frontend/src/reportWebVitals.ts

@@ -1,8 +1,8 @@
-import { ReportHandler } from 'web-vitals';
+import { ReportHandler } from "web-vitals";
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getFCP(onPerfEntry);

src/frontend/src/svg.d.ts

@@ -1,5 +1,4 @@
-declare module '*.svg' {
+declare module "*.svg" {
   const content: any;
   export default content;
-  }
+}
-  

src/frontend/src/types/api/index.ts

@@ -1,20 +1,40 @@
-import { Node,Edge,Viewport } from "reactflow"
+import { Node, Edge, Viewport } from "reactflow";
 //kind and class are just representative names to represent the actual structure of the object received by the API
 
-export type APIObjectType = {kind:APIKindType,[key:string]:APIKindType}
+export type APIObjectType = { kind: APIKindType; [key: string]: APIKindType };
-export type APIKindType= {class:APIClassType,[key:string]:APIClassType}
+export type APIKindType = { class: APIClassType; [key: string]: APIClassType };
-export type APITemplateType = {variable:TemplateVariableType,[key:string]:TemplateVariableType}
+export type APITemplateType = {
-export type APIClassType ={base_classes:Array<string>,description:string,template:APITemplateType,[key:string]:Array<string>|string|APITemplateType}
+  variable: TemplateVariableType;
-export type TemplateVariableType = {type:string,required:boolean,placeholder?:string,list:boolean,show:boolean,multiline?:boolean,value?:any,[key:string]:any}
+  [key: string]: TemplateVariableType;
-export type sendAllProps={
+};
+export type APIClassType = {
+  base_classes: Array<string>;
+  description: string;
+  template: APITemplateType;
+  [key: string]: Array<string> | string | APITemplateType;
+};
+export type TemplateVariableType = {
+  type: string;
+  required: boolean;
+  placeholder?: string;
+  list: boolean;
+  show: boolean;
+  multiline?: boolean;
+  value?: any;
+  [key: string]: any;
+};
+export type sendAllProps = {
   nodes: Node[];
   edges: Edge[];
-    name:string,
+  name: string;
-    description:string;
+  description: string;
   viewport: Viewport;
-    message:string;
+  message: string;
 
-    chatHistory:{message:string,isSend:boolean}[],
+  chatHistory: { message: string; isSend: boolean }[];
 };
-export type errorsTypeAPI={function:{errors:Array<string>},imports:{errors:Array<string>}}
+export type errorsTypeAPI = {
-export type PromptTypeAPI = {input_variables:Array<string>}
+  function: { errors: Array<string> };
+  imports: { errors: Array<string> };
+};
+export type PromptTypeAPI = { input_variables: Array<string> };

src/frontend/src/types/components/index.ts

@@ -43,9 +43,9 @@ export type FileComponentType = {
   disabled: boolean;
   onChange: (value: string[] | string) => void;
   value: string;
-	suffixes:Array<string>;
+  suffixes: Array<string>;
-	fileTypes:Array<string>;
+  fileTypes: Array<string>;
-	onFileChange:(value: string) => void;
+  onFileChange: (value: string) => void;
 };
 
 export type DisclosureComponentType = {
@@ -66,16 +66,20 @@ export type FloatComponentType = {
   onChange: (value: string) => void;
 };
 
-export type TooltipComponentType={children:ReactElement,title:string,placement?:
+export type TooltipComponentType = {
-    | 'bottom-end'
+  children: ReactElement;
-    | 'bottom-start'
+  title: string;
-    | 'bottom'
+  placement?:
-    | 'left-end'
+    | "bottom-end"
-    | 'left-start'
+    | "bottom-start"
-    | 'left'
+    | "bottom"
-    | 'right-end'
+    | "left-end"
-    | 'right-start'
+    | "left-start"
-    | 'right'
+    | "left"
-    | 'top-end'
+    | "right-end"
-    | 'top-start'
+    | "right-start"
-    | 'top';}
+    | "right"
+    | "top-end"
+    | "top-start"
+    | "top";
+};

src/frontend/src/types/entities/index.ts

@@ -1,3 +1,8 @@
 import { HomeIcon } from "@heroicons/react/24/outline";
 
-export type sidebarNavigationItemType =  { name: string, href: string, icon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>, current: boolean }
+export type sidebarNavigationItemType = {
+  name: string;
+  href: string;
+  icon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
+  current: boolean;
+};

src/frontend/src/types/flow/index.ts

@@ -1,12 +1,22 @@
-import { ChatMessageType } from './../chat/index';
+import { ChatMessageType } from "./../chat/index";
-import { APIClassType } from '../api/index';
+import { APIClassType } from "../api/index";
 import { ReactFlowJsonObject, XYPosition } from "reactflow";
 
 export type FlowType = {
   name: string;
   id: string;
   data: ReactFlowJsonObject;
-	description:string;
+  description: string;
+};
+export type NodeType = {
+  id: string;
+  type?: string;
+  position: XYPosition;
+  data: NodeDataType;
+};
+export type NodeDataType = {
+  type: string;
+  node?: APIClassType;
+  id: string;
+  value: any;
 };
-export type NodeType = {id:string,type:string,position:XYPosition,data:NodeDataType}
-export type NodeDataType = {type:string,node?:APIClassType,id:string,value:any}

src/frontend/src/types/tabs/index.ts

@@ -1,7 +1,7 @@
 import { FlowType } from "../flow";
 
 export type TabsContextType = {
-	save:()=>void;
+  save: () => void;
   tabIndex: number;
   setTabIndex: (index: number) => void;
   flows: Array<FlowType>;
@@ -9,7 +9,7 @@ export type TabsContextType = {
   addFlow: (flowData?: FlowType) => void;
   updateFlow: (newFlow: FlowType) => void;
   incrementNodeId: () => number;
-	downloadFlow: (flow:FlowType) => void;
+  downloadFlow: (flow: FlowType) => void;
   uploadFlow: () => void;
-	hardReset:()=>void;
+  hardReset: () => void;
 };

src/frontend/src/types/typesContext/index.ts

@@ -1,9 +1,9 @@
 import { ReactFlowInstance } from "reactflow";
 
-const types:{[char: string]: string}={}
+const types: { [char: string]: string } = {};
 
 export type typesContextType = {
-	reactFlowInstance: ReactFlowInstance|null;
+  reactFlowInstance: ReactFlowInstance | null;
   setReactFlowInstance: any;
   deleteNode: (idx: string) => void;
   types: typeof types;

src/frontend/src/utils.ts

@@ -14,13 +14,13 @@ import {
   FingerPrintIcon,
   ScissorsIcon,
   CircleStackIcon,
-  Squares2X2Icon
+  Squares2X2Icon,
 } from "@heroicons/react/24/outline";
 import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
 import { FlowType } from "./types/flow";
-var _ = require('lodash')
+var _ = require("lodash");
 
-export function classNames(...classes:Array<string>) {
+export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");
 }
 
@@ -70,7 +70,7 @@ export const borderLColors = {
   gray: "border-l-gray-500",
 };
 
-export const nodeColors: {[char: string]: string} = {
+export const nodeColors: { [char: string]: string } = {
   prompts: "#4367BF",
   llms: "#6344BE",
   chains: "#FE7500",
@@ -79,18 +79,18 @@ export const nodeColors: {[char: string]: string} = {
   memories: "#F5B85A",
   advanced: "#000000",
   chat: "#198BF6",
-  thought:"#272541",
+  thought: "#272541",
-  embeddings:"#42BAA7",
+  embeddings: "#42BAA7",
-  documentloaders:"#7AAE42",
+  documentloaders: "#7AAE42",
   vectorstores: "#AA8742",
   textsplitters: "#B47CB5",
-  toolkits:"#DB2C2C",
+  toolkits: "#DB2C2C",
-  wrappers:"#E6277A",
+  wrappers: "#E6277A",
-  utilities:"#31A3CC",
+  utilities: "#31A3CC",
-  unknown:"#9CA3AF"
+  unknown: "#9CA3AF",
 };
 
-export const nodeNames:{[char: string]: string} = {
+export const nodeNames: { [char: string]: string } = {
   prompts: "Prompts",
   llms: "LLMs",
   chains: "Chains",
@@ -102,14 +102,18 @@ export const nodeNames:{[char: string]: string} = {
   embeddings: "Embeddings",
   documentloaders: "Document Loaders",
   vectorstores: "Vector Stores",
-  toolkits:"Toolkits",
+  toolkits: "Toolkits",
-  wrappers:"Wrappers",
+  wrappers: "Wrappers",
   textsplitters: "Text Splitters",
-  utilities:"Utilities",
+  utilities: "Utilities",
-  unknown:"Unknown"
+  unknown: "Unknown",
 };
 
-export const nodeIcons:{[char: string]: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>} = {
+export const nodeIcons: {
+  [char: string]: React.ForwardRefExoticComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
+} = {
   agents: RocketLaunchIcon,
   chains: LinkIcon,
   memories: CpuChipIcon,
@@ -118,14 +122,14 @@ export const nodeIcons:{[char: string]: React.ForwardRefExoticComponent<React.SV
   tools: WrenchIcon,
   advanced: ComputerDesktopIcon,
   chat: Bars3CenterLeftIcon,
-  embeddings:FingerPrintIcon,
+  embeddings: FingerPrintIcon,
-  documentloaders:PaperClipIcon,
+  documentloaders: PaperClipIcon,
   vectorstores: CircleStackIcon,
-  toolkits:WrenchScrewdriverIcon,
+  toolkits: WrenchScrewdriverIcon,
-  textsplitters:ScissorsIcon,
+  textsplitters: ScissorsIcon,
-  wrappers:GiftIcon,
+  wrappers: GiftIcon,
-  utilities:Squares2X2Icon,
+  utilities: Squares2X2Icon,
-  unknown:QuestionMarkCircleIcon
+  unknown: QuestionMarkCircleIcon,
 };
 
 export const bgColors = {
@@ -218,7 +222,7 @@ export const taskTypeMap: { [key: string]: string } = {
   MULTICLASS_CLASSIFICATION: "Multiclass Classification",
 };
 
-const charWidths:{[char: string]: number} = {
+const charWidths: { [char: string]: number } = {
   " ": 0.2,
   "!": 0.2,
   '"': 0.3,
@@ -260,7 +264,7 @@ for (let i = 97; i <= 122; i++) {
   charWidths[String.fromCharCode(i)] = 0.5;
 }
 
-export function measureTextWidth(text: string, fontSize:number) {
+export function measureTextWidth(text: string, fontSize: number) {
   let wordWidth = 0;
   for (let j = 0; j < text.length; j++) {
     let char = text[j];
@@ -270,7 +274,11 @@ export function measureTextWidth(text: string, fontSize:number) {
   return wordWidth;
 }
 
-export function measureTextHeight(text: string, width:number, fontSize:number) {
+export function measureTextHeight(
+  text: string,
+  width: number,
+  fontSize: number
+) {
   const charHeight = fontSize;
   const lineHeight = charHeight * 1.5;
   const words = text.split(" ");
@@ -319,7 +327,7 @@ export function snakeToNormalCase(str: string) {
     .join(" ");
 }
 
-export function normalCaseToSnakeCase(str:string){
+export function normalCaseToSnakeCase(str: string) {
   return str
     .split(" ")
     .map((word, index) => {
@@ -331,7 +339,7 @@ export function normalCaseToSnakeCase(str:string){
     .join("_");
 }
 
-export function roundNumber(x:number, decimals:number) {
+export function roundNumber(x: number, decimals: number) {
   return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals);
 }
 
@@ -345,12 +353,15 @@ export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
 }
 
 export function isValidConnection(
-  { source, target, sourceHandle, targetHandle }:Connection,
+  { source, target, sourceHandle, targetHandle }: Connection,
-  reactFlowInstance:ReactFlowInstance
+  reactFlowInstance: ReactFlowInstance
 ) {
   if (
-    sourceHandle.split('|')[0] === targetHandle.split("|")[0] ||
+    sourceHandle.split("|")[0] === targetHandle.split("|")[0] ||
-    sourceHandle.split('|').slice(2).some((t) => t === targetHandle.split("|")[0]) ||
+    sourceHandle
+      .split("|")
+      .slice(2)
+      .some((t) => t === targetHandle.split("|")[0]) ||
     targetHandle.split("|")[0] === "str"
   ) {
     let targetNode = reactFlowInstance.getNode(target).data.node;
@@ -375,16 +386,15 @@ export function isValidConnection(
   return false;
 }
 
-export function removeApiKeys(flow:FlowType):FlowType{
+export function removeApiKeys(flow: FlowType): FlowType {
-  let cleanFLow = _.cloneDeep(flow)
+  let cleanFLow = _.cloneDeep(flow);
-  cleanFLow.data.nodes.forEach(node=>{
+  cleanFLow.data.nodes.forEach((node) => {
-    for(const key in node.data.node.template)
+    for (const key in node.data.node.template) {
-    {
+      if (key.includes("api")) {
-      if(key.includes('api')){
+        console.log(node.data.node.template[key]);
-        console.log(node.data.node.template[key])
+        node.data.node.template[key].value = "";
-        node.data.node.template[key].value = ''
       }
     }
-  })
+  });
-  return cleanFLow
+  return cleanFLow;
 }