refactor and create type for functions and majority of variables

space_flow/src/App.tsx

@@ -36,7 +36,7 @@ export default function App() {
 		setSuccessOpen,
 	} = useContext(alertContext);
 
-	const [alertsList, setAlertsList] = useState([]);
+	const [alertsList, setAlertsList] = useState<Array<{type:string,data:{title:string,list?:Array<string>,link?:string},id:string}>>([]);
 
 	useEffect(() => {
 		if (errorOpen && errorData) {
@@ -69,33 +69,17 @@ export default function App() {
 		}
 	}, [errorData, errorOpen, noticeData, noticeOpen, successData, successOpen]);
 
-	const removeAlert = (id: number) => {
+	const removeAlert = (id: string) => {
 		setAlertsList((prevAlertsList) =>
 			prevAlertsList.filter((alert) => alert.id !== id)
 		);
 	};
 
-	const user = {
-		name: "Whitney Francis",
-		email: "whitney.francis@example.com",
-		imageUrl:
-			"https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
-	};
-
-	const userNavigation = [
-		{ name: "Your Projects", href: "/" },
-		// {
-		//   name: "Account settings",
-		//   href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser",
-		// },
-		{ name: "Sign out", href: "/" },
-	];
-
 	return (
 		//need parent component with width and height
 		<div className="h-full flex flex-col">
 			<div className="flex grow-0 shrink basis-auto">
-				<Header userNavigation={userNavigation} user={user}></Header>
+				<Header></Header>
 			</div>
 			<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
 				<Sidebar />

space_flow/src/CustomNodes/BooleanNode/index.tsx

@@ -5,10 +5,11 @@ import { isValidConnection, nodeColors } from "../../utils";
 import ToggleComponent from "../../components/toggleComponent";
 import { useContext, useEffect, useState } from "react";
 import { typesContext } from "../../contexts/typesContext";
+import { NodeDataType } from "../../types/flow";
 
-export default function BooleanNode({ data }) {
+export default function BooleanNode({ data }:{data:NodeDataType}) {
   const [enabled, setEnabled] = useState(false);
-  const {types, deleteNode} = useContext(typesContext);
+  const {types, deleteNode, reactFlowInstance} = useContext(typesContext);
   return (
     <div className="prompt-node relative bg-white rounded-lg solid border flex flex-col justify-center">
       <div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 border-b ">
@@ -34,7 +35,7 @@ export default function BooleanNode({ data }) {
         type="source"
         position={Position.Right}
         id={data.type}
-        isValidConnection={(connection) => isValidConnection(data,connection)}
+        isValidConnection={(connection) => isValidConnection(connection,reactFlowInstance)}
         className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
         style={{ borderLeftColor: nodeColors[types[data.type]] }}
       ></Handle>

space_flow/src/CustomNodes/ChatInputNode/index.tsx

@@ -1,16 +1,15 @@
 import {
   Bars3CenterLeftIcon,
-  ChatBubbleBottomCenterTextIcon,
 } from "@heroicons/react/24/outline";
-import InputComponent from "../../components/inputComponent";
+import { isValidConnection, nodeColors } from "../../utils";
-import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
 import { Handle, Position } from "reactflow";
 import Tooltip from "../../components/TooltipComponent";
 import { typesContext } from "../../contexts/typesContext";
 import { useContext } from "react";
+import { NodeDataType } from "../../types/flow";
 
-export default function ChatInputNode({ data }) {
+export default function ChatInputNode({ data }:{data:NodeDataType}) {
-  const { types } = useContext(typesContext);
+  const { types,reactFlowInstance } = useContext(typesContext);
   return (
     <div
       className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50"
@@ -20,7 +19,7 @@ export default function ChatInputNode({ data }) {
         <Handle
           type="target"
           isValidConnection={(connection) =>
-            isValidConnection(data, connection)
+            isValidConnection(connection,reactFlowInstance)
           }
           position={Position.Left}
           id={"str|Prefix|" + data.id}
@@ -34,7 +33,7 @@ export default function ChatInputNode({ data }) {
         <Handle
           type="source"
           isValidConnection={(connection) =>
-            isValidConnection(data, connection)
+            isValidConnection(connection,reactFlowInstance)
           }
           position={Position.Right}
           id={"str|str|" + data.id}

space_flow/src/CustomNodes/ChatOutputNode/index.tsx

@@ -5,15 +5,16 @@ import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
 import Tooltip from "../../components/TooltipComponent";
 import { useContext } from "react";
 import { typesContext } from "../../contexts/typesContext";
+import { NodeDataType } from "../../types/flow";
 
-export default function ChatOutputNode({ data }) {
+export default function ChatOutputNode({ data }:{data:NodeDataType}) {
-  const {types} = useContext(typesContext);
+  const {types,reactFlowInstance} = useContext(typesContext);
   return (
     <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors[types[data.type]]}}>
       <Tooltip title="Message: str">
         <Handle
           type="target"
-          isValidConnection={(connection) => isValidConnection(data,connection)}
+          isValidConnection={(connection) => isValidConnection(connection,reactFlowInstance)}
           position={Position.Left}
           id={"str|output|"+data.id}
           className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white"

space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -11,6 +11,7 @@ import ToggleComponent from "../../../../components/toggleComponent";
 import InputListComponent from "../../../../components/inputListComponent";
 import TextAreaComponent from "../../../../components/textAreaComponent";
 import { typesContext } from "../../../../contexts/typesContext";
+import { ParameterComponentType } from "../../../../types/components";
 
 export default function ParameterComponent({
   left,
@@ -22,7 +23,7 @@ export default function ParameterComponent({
   type,
   name = "",
   required = false,
-}) {
+}:ParameterComponentType) {
   const ref = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
@@ -70,7 +71,7 @@ export default function ParameterComponent({
             <InputListComponent
             disabled={disabled}
             value={!data.node.template[name].value || data.node.template[name].value === "" ? [""] : data.node.template[name].value}
-              onChange={(t) => {
+              onChange={(t:string[]) => {
                 data.node.template[name].value = t;
               }}
             />
@@ -79,7 +80,7 @@ export default function ParameterComponent({
               <TextAreaComponent
                 disabled={disabled}
                 value={data.node.template[name].value ?? ""}
-                onChange={(t) => {
+                onChange={(t:string) => {
                   data.node.template[name].value = t;
                 }}
               />

space_flow/src/CustomNodes/GenericNode/index.tsx

@@ -9,8 +9,10 @@ import {
 import ParameterComponent from "./components/parameterComponent";
 import { typesContext } from "../../contexts/typesContext";
 import { useContext } from "react";
+import { NodeDataType} from "../../types/flow";
+import { APITemplateType, TemplateVariableType } from "../../types/api";
 
-export default function GenericNode({ data }) {
+export default function GenericNode({ data}:{data:NodeDataType}) {
   const {types, deleteNode} = useContext(typesContext);
   const Icon = nodeIcons[types[data.type]];
 
@@ -38,7 +40,7 @@ export default function GenericNode({ data }) {
         <>
           {Object.keys(data.node.template)
             .filter((t) => t.charAt(0) !== "_")
-            .map((t, idx) => (
+            .map((t:string, idx) => (
               <div key={idx}>
                 {idx === 0 ? (
                   <div className="px-5 py-2 mt-2 text-center">Inputs:</div>

space_flow/src/CustomNodes/InputNode/index.tsx

@@ -3,17 +3,16 @@ import InputComponent from "../../components/inputComponent";
 import {
   isValidConnection,
   nodeColors,
-  nodeIcons,
-  snakeToNormalCase,
 } from "../../utils";
 import { Handle, Position } from "reactflow";
-import { useContext, useEffect } from "react";
+import { useContext } from "react";
 import Tooltip from "../../components/TooltipComponent";
 import { typesContext } from "../../contexts/typesContext";
-import TextAreaComponent from "../../components/textAreaComponent";
+import { NodeDataType } from "../../types/flow";
 
-export default function InputNode({ data }) {
+export default function InputNode({ data }:{data:NodeDataType}) {
-  const {types, deleteNode} = useContext(typesContext);
+  console.log(data)
+  const {types, deleteNode,reactFlowInstance} = useContext(typesContext);
   return (
     <div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
       <Tooltip title="Prefix: str">
@@ -22,7 +21,7 @@ export default function InputNode({ data }) {
           position={Position.Left}
           id={"str|Prefix|" + data.id}
           isValidConnection={(connection) =>
-            isValidConnection(data, connection)
+            isValidConnection(connection,reactFlowInstance)
           }
           className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
           style={{ borderLeftColor: nodeColors[types[data.type]] }}
@@ -59,7 +58,7 @@ export default function InputNode({ data }) {
         type="source"
         position={Position.Right}
         id={data.type}
-        isValidConnection={(connection) => isValidConnection(data, connection)}
+        isValidConnection={(connection) => isValidConnection(connection,reactFlowInstance)}
         className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
         style={{ borderLeftColor: nodeColors[types[data.type]] }}
       ></Handle>

space_flow/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -2,10 +2,12 @@ import { XCircleIcon, XMarkIcon, InformationCircleIcon, CheckCircleIcon } from "
 import { Link } from "react-router-dom";
 import { Transition } from "@headlessui/react";
 import { useState } from "react";
+import { SingleAlertComponentType } from "../../../../types/alerts";
 
-export default function SingleAlert({ dropItem, removeAlert }) {
+export default function SingleAlert({ dropItem, removeAlert}:SingleAlertComponentType) {
     const [show, setShow] = useState(true);
     const type = dropItem.type;
+    console.log(dropItem.id)
 
     return (
         <Transition
@@ -20,7 +22,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
       leaveTo={"transform translate-x-[-100%]"}
     >
         {type === "error"? 
-          <div className="flex bg-red-50 rounded-md p-4 mb-2" key={dropItem.index}>
+          <div className="flex bg-red-50 rounded-md p-4 mb-2" key={dropItem.id}>
             <div className="flex-shrink-0">
               <XCircleIcon
                 className="h-5 w-5 text-red-400"
@@ -48,7 +50,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
                 <button
                   type="button"
                   onClick={() => {
-                    setShow(false); setTimeout(() => {removeAlert(dropItem.index);}, 500);
+                    setShow(false); setTimeout(() => {removeAlert(dropItem.id);}, 500);
                   }}
                   className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500"
                 >
@@ -59,7 +61,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
             </div>
           </div>
         :(type === "notice" ?
-          <div className="flex rounded-md p-4 bg-blue-50 mb-2" key={dropItem.index}>
+          <div className="flex rounded-md p-4 bg-blue-50 mb-2" key={dropItem.id}>
             <div className="flex-shrink-0">
               <InformationCircleIcon
                 className="h-5 w-5 text-blue-400"
@@ -86,7 +88,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
                 <button
                   type="button"
                   onClick={() => {
-                    setShow(false); setTimeout(() => {removeAlert(dropItem.index);}, 500);
+                    setShow(false); setTimeout(() => {removeAlert(dropItem.id);}, 500);
                   }}
                   className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500"
                 >
@@ -97,7 +99,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
             </div>
           </div>
         :
-        <div className="flex bg-green-50 p-4 mb-2" key={dropItem.index}>
+        <div className="flex bg-green-50 p-4 mb-2" key={dropItem.id}>
             <div className="flex-shrink-0">
               <CheckCircleIcon
                 className="h-5 w-5 text-green-400"
@@ -114,7 +116,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
                 <button
                   type="button"
                   onClick={() => {
-                    setShow(false); setTimeout(() => {removeAlert(dropItem.index);}, 500);
+                    setShow(false); setTimeout(() => {removeAlert(dropItem.id);}, 500);
                   }}
                   className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500"
                 >

space_flow/src/alerts/alertDropDown/index.tsx

@@ -1,30 +1,16 @@
 import { useContext } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import {
-  CheckCircleIcon,
-  InformationCircleIcon,
-  XCircleIcon,
   XMarkIcon,
 } from "@heroicons/react/24/solid";
-import { Link } from "react-router-dom";
 import { Transition } from "@headlessui/react";
 import { TrashIcon } from "@heroicons/react/24/outline";
 import SingleAlert from "./components/singleAlertComponent";
+import { AlertDropdownType } from "../../types/alerts";
 
-type AlertDropdownProps = {
-  closeFunction: () => void;
-  open?: boolean;
-};
 
-export type alertDropdownItem = {
-  type: "notice" | "error" | "success";
-  title: string;
-  link?: string;
-  list?: Array<string>;
-  id: string;
-};
 
-export default function AlertDropdown({closeFunction, open}: AlertDropdownProps) {
+export default function AlertDropdown({closeFunction, open}: AlertDropdownType) {
   const {
     notificationList,
     clearNotificationList,

space_flow/src/alerts/error/index.tsx

@@ -1,8 +1,9 @@
 import { Transition } from "@headlessui/react";
 import { XCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
+import { ErrorAlertType} from "../../types/alerts";
 
-export default function ErrorAlert({ title, list = [], id, removeAlert }) {
+export default function ErrorAlert({ title, list = [], id, removeAlert }:ErrorAlertType) {
   const [show, setShow] = useState(true);
   useEffect(() => {
     if(show){

space_flow/src/alerts/notice/index.tsx

@@ -2,8 +2,9 @@ import { Transition } from "@headlessui/react";
 import { InformationCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
+import { NoticeAlertType } from "../../types/alerts";
 
-export default function NoticeAlert({ title, link = "", id, removeAlert }) {
+export default function NoticeAlert({ title, link = "", id, removeAlert }:NoticeAlertType) {
   const [show, setShow] = useState(true);
   useEffect(() => {
     if(show){

space_flow/src/alerts/success/index.tsx

@@ -1,8 +1,9 @@
 import { Transition } from "@headlessui/react";
 import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
+import { SuccessAlertType } from "../../types/alerts";
 
-export default function SuccessAlert({ title, id, removeAlert }) {
+export default function SuccessAlert({ title, id, removeAlert }:SuccessAlertType) {
   const [show, setShow] = useState(true);
   useEffect(() => {
     if(show){

space_flow/src/components/ExtraSidebarComponent/index.tsx

@@ -7,7 +7,6 @@ import { locationContext } from "../../contexts/locationContext";
 import { TabsContext } from "../../contexts/tabsContext";
 
 export default function ExtraSidebar() {
-  const {uploadFlow} = useContext(TabsContext)
   const {
     current,
     isStackedOpen,
@@ -124,11 +123,7 @@ export default function ExtraSidebar() {
             ) : (
               extraComponent
             )}
-            {/* need to convert to multi stackbar logic */}
           </div>
-          {/* <div className="w-full  flex content-center justify-center mt-auto mb-8">
-          <button onClick={()=>uploadFlow()} className="flex content-center justify-center py-3 px-6 border rounded-lg border-blue-500 text-blue-500 hover:text-white hover:bg-blue-500"><span>import flow</span><ArrowUpTrayIcon className=" ml-2 w-5 h-5"/>  </button>
-          </div> */}
         </div>
       </aside>
     </>

space_flow/src/components/HeaderComponent/index.tsx

@@ -1,18 +1,13 @@
-import { Fragment, useContext, useState } from 'react'
+import { useContext, useState } from 'react'
-import { Menu, Transition } from '@headlessui/react'
-import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
 import {
     BellIcon,
-    MoonIcon,
   } from '@heroicons/react/24/outline'
-import { classNames } from '../../utils'
-import { Link } from 'react-router-dom'
 import Breadcrumb from '../breadcrumbComponent'
 import { alertContext } from '../../contexts/alertContext'
-import { useLayer,Arrow } from 'react-laag'
+import { useLayer } from 'react-laag'
 import AlertDropdown from '../../alerts/alertDropDown'
 
-export default function Header({user, userNavigation}){
+export default function Header(){
   const {notificationCenter, setNotificationCenter} = useContext(alertContext)
   const [isOpen,setIsOpen] = useState(false)
   const {layerProps,renderLayer, triggerProps} = useLayer({
@@ -55,52 +50,6 @@ export default function Header({user, userNavigation}){
                   <BellIcon className="h-6 w-6" aria-hidden="true" />
                 </button>{renderLayer(<div {...layerProps}><AlertDropdown closeFunction={()=>setIsOpen(false)} open={isOpen}></AlertDropdown></div>)}
               </span>
-
-              {/* <Menu as="div" className="relative inline-block text-left">
-                <Menu.Button className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
-                  <span className="sr-only">Open user menu</span>
-                  <img className="h-8 w-8 rounded-full" src={user.imageUrl} alt="" />
-                </Menu.Button>
-
-                  <Transition
-                    as={Fragment}
-                    enter="transition ease-out duration-100"
-                    enterFrom="transform opacity-0 scale-95"
-                    enterTo="transform opacity-100 scale-100"
-                    leave="transition ease-in duration-75"
-                    leaveFrom="transform opacity-100 scale-100"
-                    leaveTo="transform opacity-0 scale-95"
-                  >
-                    <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                      <div className="py-1">
-                        {userNavigation.map((item,index) => (
-                        <Menu.Item key={index}>
-                          {({ active }) => (
-                            !item.href.includes("http://")?
-                            <Link
-                              to={item.href}
-                              className={classNames(
-                                active ? 'bg-gray-100' : '',
-                                'block px-4 py-2 text-sm text-gray-700'
-                              )}
-                            >
-                              {item.name}
-                            </Link>:
-                            <a
-                              href={item.href}
-                              className={classNames(
-                              active ? 'bg-gray-100' : '',
-                                'block px-4 py-2 text-sm text-gray-700'
-                            )}>
-                          {item.name}
-                        </a>)}
-                        </Menu.Item>
-                        ))
-                        }
-                      </div>
-                    </Menu.Items>
-                  </Transition>
-                </Menu> */}
               </div>
             </div>
           </div>

space_flow/src/components/SidebarComponent/sidebarButton/index.tsx

@@ -2,8 +2,9 @@ import { classNames } from "../../../utils"
 import { Link } from "react-router-dom"
 import { useContext } from "react"
 import { locationContext } from "../../../contexts/locationContext";
+import { sidebarNavigationItemType } from "../../../types/entities";
 
-export default function SidebarButton({item}){
+export default function SidebarButton({item}:{item:sidebarNavigationItemType}){
     let {current}= useContext(locationContext);
     return (
         <>

space_flow/src/components/TooltipComponent/index.tsx

@@ -1,5 +1,6 @@
+import { ReactElement } from "react";
 import { LightTooltip } from "../LightTooltipComponent";
 
-export default function Tooltip({ children, title }) {
+export default function Tooltip({ children, title }:{children:ReactElement,title:string}) {
   return <LightTooltip title={title} arrow>{children}</LightTooltip>;
 }

space_flow/src/components/breadcrumbComponent/index.tsx

@@ -11,7 +11,7 @@ const breadcrumbNameMap: { [key: string]: string } = {
 };
 
 
-function getPages(atual){
+function getPages(atual:string[]){
   let pages = [];
   for(let i = 2; i <= atual.length; i++){
     let to = '/' + atual.slice(1,i).join('/');

space_flow/src/components/chatComponent/index.tsx

@@ -1,7 +1,6 @@
 import { Transition } from "@headlessui/react";
 import {
   Bars3CenterLeftIcon,
-  ChatBubbleBottomCenterTextIcon,
   PaperAirplaneIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
@@ -10,17 +9,18 @@ import { sendAll } from "../../controllers/NodesServices";
 import { alertContext } from "../../contexts/alertContext";
 import { nodeColors } from "../../utils";
 import { TabsContext } from "../../contexts/tabsContext";
+import { ChatType } from "../../types/chat";
 
 const _ = require("lodash");
 
-export default function Chat({flow, reactFlowInstance }) {
+export default function Chat({flow, reactFlowInstance }:ChatType) {
   const {updateFlow} = useContext(TabsContext)
   const [saveChat,setSaveChat] = useState(false)
   const [open, setOpen] = useState(true);
   const [chatValue, setChatValue] = useState("");
   const [chatHistory, setChatHistory] = useState(flow.chat);
   const {setErrorData} = useContext(alertContext);
-  const addChatHistory = (message, isSend) => {
+  const addChatHistory = (message:string, isSend:boolean) => {
     setChatHistory((old) => {
       let newChat = _.cloneDeep(old);
       newChat.push({ message, isSend });
@@ -29,7 +29,6 @@ export default function Chat({flow, reactFlowInstance }) {
     setSaveChat(chat=>!chat)
   };
   useEffect(()=>{
-    console.log("flow")
     updateFlow({..._.cloneDeep(flow),chat:chatHistory})
   },[saveChat])
   useEffect(()=>{
@@ -54,7 +53,6 @@ export default function Chat({flow, reactFlowInstance }) {
   const ref = useRef(null);
 
   function sendMessage(){
-    console.log(reactFlowInstance.toObject())
     if(chatValue !== ""){
       if(validateNodes()){
         if(validateChatNodes()){

space_flow/src/components/dropdownComponent/index.tsx

@@ -1,9 +1,10 @@
 import { Listbox, Transition } from "@headlessui/react";
 import { ChevronUpDownIcon, CheckIcon } from "@heroicons/react/24/outline";
 import { Fragment } from "react";
+import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 
-export default function Dropdown({title, value, options, onSelect}) {
+export default function Dropdown({title, value, options, onSelect}:DropDownComponentType) {
   return (
     <>
       <Listbox value={value} onChange={onSelect}>

space_flow/src/components/inputComponent/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
+import { InputComponentType } from "../../types/components";
 
-export default function InputComponent({value, onChange, disabled}){
+export default function InputComponent({value, onChange, disabled}: InputComponentType){
     const [myValue, setMyValue] = useState(value ?? "");
     useEffect(()=> {
         if(disabled){

space_flow/src/components/inputListComponent/index.tsx

@@ -1,9 +1,10 @@
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
+import { InputListComponentType } from "../../types/components";
 
 var _ = require("lodash");
 
-export default function InputListComponent({ value, onChange, disabled}) {
+export default function InputListComponent({ value, onChange, disabled}:InputListComponentType) {
   const [inputList, setInputList] = useState(value ?? [""]);
   useEffect(()=> {
     if(disabled){

space_flow/src/components/textAreaComponent/index.tsx

@@ -2,8 +2,9 @@ import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import TextAreaModal from "../../modals/textAreaModal";
+import { TextAreaComponentType } from "../../types/components";
 
-export default function TextAreaComponent({ value, onChange, disabled }) {
+export default function TextAreaComponent({ value, onChange, disabled }:TextAreaComponentType) {
   const [myValue, setMyValue] = useState(value);
   const { openPopUp } = useContext(PopUpContext);
   useEffect(() => {
@@ -23,7 +24,7 @@ export default function TextAreaComponent({ value, onChange, disabled }) {
         >
             {myValue !== "" ? myValue : 'Text empty'}
         </span>
-        <button onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t) => {setMyValue(t); onChange(t);}}/>)}}>
+        <button onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}>
             <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
         </button>
       </div>

space_flow/src/components/toggleComponent/index.tsx

@@ -1,8 +1,9 @@
 import { Switch } from "@headlessui/react";
 import { classNames } from "../../utils";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
+import { ToggleComponentType } from "../../types/components";
 
-export default function ToggleComponent({ enabled, setEnabled, disabled }) {
+export default function ToggleComponent({ enabled, setEnabled, disabled }:ToggleComponentType) {
   useEffect(()=> {
     if(disabled){
         setEnabled(false);
@@ -12,7 +13,7 @@ export default function ToggleComponent({ enabled, setEnabled, disabled }) {
     <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
       <Switch
         checked={enabled}
-        onChange={(x) => {
+        onChange={(x:boolean) => {
           setEnabled(x);
         }}
         className={classNames(

space_flow/src/contexts/alertContext.tsx

@@ -1,5 +1,5 @@
-import { createContext, useState } from "react";
+import { createContext, ReactNode, useState } from "react";
-import { alertDropdownItem } from "../alerts/alertDropDown";
+import { AlertItemType } from "../types/alerts";
 
 var _ = require("lodash");
 
@@ -19,14 +19,14 @@ type alertContextType = {
 	setSuccessOpen: (newState: boolean) => void;
 	notificationCenter: boolean;
 	setNotificationCenter: (newState: boolean) => void;
-	notificationList: Array<alertDropdownItem>;
+	notificationList: Array<AlertItemType>;
-	pushNotificationList: (Object) => void;
+	pushNotificationList: (Object:AlertItemType) => void;
 	clearNotificationList: () => void;
-	removeFromNotificationList: (index: number) => void;
+	removeFromNotificationList: (index: string) => void;
 };
 
 //initial values to alertContextType
-const initialValue = {
+const initialValue:alertContextType = {
 	errorData: { title: "", list: [] },
 	setErrorData: () => {},
 	errorOpen: false,
@@ -49,7 +49,7 @@ const initialValue = {
 
 export const alertContext = createContext<alertContextType>(initialValue);
 
-export function AlertProvider({ children }) {
+export function AlertProvider({ children }:{children:ReactNode}) {
 	const [errorData, setErrorDataState] = useState<{
 		title: string;
 		list?: Array<string>;
@@ -66,7 +66,7 @@ export function AlertProvider({ children }) {
 	const [successOpen, setSuccessOpen] = useState(false);
 	const [notificationCenter, setNotificationCenter] = useState(false);
 	const [notificationList, setNotificationList] = useState([]);
-	const pushNotificationList = (notification: alertDropdownItem) => {
+	const pushNotificationList = (notification: AlertItemType) => {
 		setNotificationList((old) => {
 			let newNotificationList = _.cloneDeep(old);
 			newNotificationList.unshift(notification);
@@ -114,7 +114,7 @@ export function AlertProvider({ children }) {
 	function clearNotificationList() {
 		setNotificationList([]);
 	}
-	function removeFromNotificationList(index: number) {
+	function removeFromNotificationList(index: string) {
 		setNotificationList((prevAlertsList) =>
 			prevAlertsList.filter((alert) => alert.id !== index)
 		);

space_flow/src/contexts/index.tsx

@@ -1,10 +1,11 @@
+import { ReactNode } from "react";
 import { AlertProvider } from "./alertContext";
 import { LocationProvider } from "./locationContext";
 import PopUpProvider from "./popUpContext";
 import { TabsProvider } from "./tabsContext";
 import { TypesProvider } from "./typesContext";
 
-export default function ContextWrapper({ children }) {
+export default function ContextWrapper({ children }:{children:ReactNode}) {
   //element to wrap all context
   return (
     <>

space_flow/src/contexts/locationContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, useState } from "react";
+import { createContext, ReactNode, useState } from "react";
 
 //types for location context
 type locationContextType = {
@@ -50,7 +50,7 @@ const initialValue = {
 
 export const locationContext = createContext<locationContextType>(initialValue);
 
-export function LocationProvider({ children }) {
+export function LocationProvider({ children }:{children:ReactNode}) {
 	const [current, setCurrent] = useState(initialValue.current);
 	const [isStackedOpen, setIsStackedOpen] = useState(
 		initialValue.isStackedOpen

space_flow/src/contexts/tabsContext.tsx

@@ -1,16 +1,16 @@
-import { createContext, useEffect, useState, useRef } from "react";
+import { createContext, useEffect, useState, useRef, ReactNode } from "react";
-import {flow} from "../types/flow"
+import {FlowType} from "../types/flow"
 import { TabsContextType } from "../types/tabs";
 
 
 
-const TabsContextInitialValue = {
+const TabsContextInitialValue:TabsContextType = {
 	tabIndex: 0,
 	setTabIndex: (index: number) => {},
 	flows: [],
 	removeFlow: (id: string) => {},
 	addFlow: (flowData?: any) => {},
-	updateFlow: (newFlow: flow) => {},
+	updateFlow: (newFlow: FlowType) => {},
 	incrementNodeId: () => 0,
 	downloadFlow: () => {},
 	uploadFlow: () => {},
@@ -22,9 +22,9 @@ export const TabsContext = createContext<TabsContextType>(
 
 let _ = require("lodash");
 
-export function TabsProvider({ children }) {
+export function TabsProvider({ children }:{children:ReactNode}) {
 	const [tabIndex, setTabIndex] = useState(0);
-	const [flows, setFlows] = useState<Array<flow>>([]);
+	const [flows, setFlows] = useState<Array<FlowType>>([]);
 	const [id, setId] = useState(0);
 
 	const newNodeId = useRef(0);
@@ -96,9 +96,9 @@ export function TabsProvider({ children }) {
 			return newFlows;
 		});
 	}
-	function addFlow(flow?: flow) {
+	function addFlow(flow?: FlowType) {
 		const data = flow?.data ? flow.data : null;
-		let newFlow: flow = {
+		let newFlow: FlowType = {
 			name: flow ? flow.name : "flow" + id,
 			id: id.toString(),
 			data,
@@ -111,8 +111,7 @@ export function TabsProvider({ children }) {
 		});
 		setTabIndex(flows.length);
 	}
-	function updateFlow(newFlow: flow) {
+	function updateFlow(newFlow: FlowType) {
-		console.log(newFlow);
 		setFlows((prevState) => {
 			const newFlows = [...prevState];
 			const index = newFlows.findIndex((flow) => flow.id === newFlow.id);

space_flow/src/contexts/typesContext.tsx

@@ -1,16 +1,10 @@
-import { createContext, useState } from "react";
+import { createContext, ReactNode, useState } from "react";
-import { ReactFlowInstance } from "reactflow";
+import { Node} from "reactflow";
+import { typesContextType } from "../types/typesContext";
 
 //context to share types adn functions from nodes to flow
-type typesContextType = {
-	reactFlowInstance: ReactFlowInstance;
-	setReactFlowInstance: any;
-	deleteNode: (idx: number) => void;
-	types: {};
-	setTypes: (newState: {}) => void;
-};
 
-const initialValue = {
+const initialValue:typesContextType = {
 	reactFlowInstance: null,
 	setReactFlowInstance: () => {},
 	deleteNode: () => {},
@@ -20,12 +14,12 @@ const initialValue = {
 
 export const typesContext = createContext<typesContextType>(initialValue);
 
-export function TypesProvider({ children }) {
+export function TypesProvider({ children }:{children:ReactNode}) {
 	const [types, setTypes] = useState({});
 	const [reactFlowInstance, setReactFlowInstance] = useState(null);
-	function deleteNode(idx) {
+	function deleteNode(idx:string) {
 		reactFlowInstance.setNodes(
-			reactFlowInstance.getNodes().filter((n) => n.id !== idx)
+			reactFlowInstance.getNodes().filter((n:Node) => n.id !== idx)
 		);
 	}
 	return (

space_flow/src/controllers/NodesServices/index.ts

@@ -1,10 +1,11 @@
-import axios from "axios";
+import { APIObjectType, sendAllProps } from './../../types/api/index';
+import axios, { AxiosResponse } from "axios";
 
-export async function getAll() {
+export async function getAll():Promise<AxiosResponse<APIObjectType>> {
     return await axios.get("http://localhost:5003/");
 }
 
-export async function sendAll(data) {
+export async function sendAll(data:sendAllProps) {
     console.log(data);
     return await axios.post("http://localhost:5003/predict", data);
 }

space_flow/src/controllers/UiGenerator/index.ts

@@ -1,11 +0,0 @@
-import axios from "axios";
-
-export function generateUiNode(data: Object) {
-    const fields = [];
-	Object.keys(data).forEach((field) => {
-		if (data[field].required) {
-            fields.push(data[field])
-		}
-	});
-    return fields
-}

space_flow/src/data_assets/agent.ts

@@ -1,36 +0,0 @@
-export const agent = {
-    "llm_chain": {
-        "memory": null,
-        "verbose": false,
-        "prompt": {
-            "input_variables": [
-                "input",
-                "agent_scratchpad"
-            ],
-            "output_parser": null,
-            "template": "You are an assistant that helps a company to find relevant news articles.\nAnswer the questions thoroughly and with as many details as you can and specially don't be afraid to say if you can't find the answer in the articles.\nYou have access to the following tools:\n\nCall Consultant: Ask the assistant to research the question\n\nUse the following format:\n\nQuestion: the input question you must answer\nThought: you should always think about what to do\nAction: the action to take, should be one of [Call Consultant]\nAction Input: the input to the action\nObservation: the result of the action\n... (this Thought/Action/Action Input/Observation can repeat N times)\nThought: I now know the final answer\nFinal Answer: the final answer to the original input question\n\nBegin! Remember to use the tools to help you.\n\nQuestion: {input}\n{agent_scratchpad}",
-            "template_format": "f-string",
-            "_type": "prompt"
-        },
-        "llm": {
-            "model_name": "text-davinci-003",
-            "temperature": 0.0,
-            "max_tokens": 256,
-            "top_p": 1,
-            "frequency_penalty": 0,
-            "presence_penalty": 0,
-            "n": 1,
-            "best_of": 1,
-            "request_timeout": null,
-            "logit_bias": {},
-            "_type": "openai"
-        },
-        "output_key": "text",
-        "_type": "llm_chain"
-    },
-    "allowed_tools": null,
-    "return_values": [
-        "output"
-    ],
-    "_type": "zero-shot-react-description"
-}

space_flow/src/data_assets/example.ts

@@ -1,606 +0,0 @@
-export const example = {
-    "nodes": [
-        {
-            "width": 384,
-            "height": 271,
-            "id": "dndnode_}5",
-            "type": "genericNode",
-            "position": {
-                "x": -640.9237482084102,
-                "y": 117.60473769101873
-            },
-            "data": {
-                "type": "ConversationBufferMemory",
-                "node": {
-                    "template": {
-                        "_type": "conversation_buffer",
-                        "human_prefix": {
-                            "type": "str",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": "Human"
-                        },
-                        "ai_prefix": {
-                            "type": "str",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": "AI"
-                        },
-                        "buffer": {
-                            "type": "str",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": ""
-                        },
-                        "output_key": {
-                            "type": "str",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": null
-                        },
-                        "input_key": {
-                            "type": "str",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": null
-                        },
-                        "memory_key": {
-                            "type": "str",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": "history"
-                        }
-                    },
-                    "description": "Buffer for storing conversation memory.",
-                    "base_classes": [
-                        "Memory"
-                    ]
-                },
-                "id": "dndnode_}5",
-                "value": null
-            },
-            "selected": false,
-            "positionAbsolute": {
-                "x": -640.9237482084102,
-                "y": 117.60473769101873
-            },
-            "dragging": false
-        },
-        {
-            "width": 384,
-            "height": 447,
-            "id": "dndnode_}7",
-            "type": "genericNode",
-            "position": {
-                "x": -86,
-                "y": 522
-            },
-            "data": {
-                "type": "LLMChain",
-                "node": {
-                    "template": {
-                        "_type": "llm_chain",
-                        "memory": {
-                            "type": "Memory",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": true,
-                            "multline": false,
-                            "value": null
-                        },
-                        "verbose": {
-                            "type": "bool",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": true,
-                            "multline": false,
-                            "value": false
-                        },
-                        "prompt": {
-                            "type": "BasePromptTemplate",
-                            "required": true,
-                            "placeholder": "",
-                            "list": false,
-                            "show": true,
-                            "multline": false
-                        },
-                        "llm": {
-                            "type": "BaseLLM",
-                            "required": true,
-                            "placeholder": "",
-                            "list": false,
-                            "show": true,
-                            "multline": false
-                        },
-                        "output_key": {
-                            "type": "str",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": "text"
-                        }
-                    },
-                    "description": "Chain to run queries against LLMs.",
-                    "base_classes": [
-                        "Chain"
-                    ]
-                },
-                "id": "dndnode_}7",
-                "value": null
-            },
-            "selected": false,
-            "positionAbsolute": {
-                "x": -86,
-                "y": 522
-            },
-            "dragging": false
-        },
-        {
-            "width": 384,
-            "height": 357,
-            "id": "dndnode_}8",
-            "type": "genericNode",
-            "position": {
-                "x": -633.4,
-                "y": 230
-            },
-            "data": {
-                "type": "PromptTemplate",
-                "node": {
-                    "template": {
-                        "_type": "prompt",
-                        "input_variables": {
-                            "type": "str",
-                            "required": true,
-                            "placeholder": "",
-                            "list": true,
-                            "show": false,
-                            "multline": false
-                        },
-                        "output_parser": {
-                            "type": "BaseOutputParser",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": null
-                        },
-                        "template": {
-                            "type": "str",
-                            "required": true,
-                            "placeholder": "",
-                            "list": false,
-                            "show": true,
-                            "multline": true,
-                            "value": "aaaaa"
-                        },
-                        "template_format": {
-                            "type": "str",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": "f-string"
-                        },
-                        "validate_template": {
-                            "type": "bool",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": true
-                        }
-                    },
-                    "description": "Schema to represent a prompt for an LLM.",
-                    "base_classes": [
-                        "BasePromptTemplate"
-                    ]
-                },
-                "id": "dndnode_}8",
-                "value": null
-            },
-            "selected": false,
-            "positionAbsolute": {
-                "x": -633.4,
-                "y": 230
-            },
-            "dragging": false
-        },
-        {
-            "width": 384,
-            "height": 453,
-            "id": "dndnode_}9",
-            "type": "genericNode",
-            "position": {
-                "x": -655.1999999999999,
-                "y": 615
-            },
-            "data": {
-                "type": "AI21",
-                "node": {
-                    "template": {
-                        "_type": "ai21",
-                        "cache": {
-                            "type": "bool",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": null
-                        },
-                        "verbose": {
-                            "type": "bool",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": true,
-                            "multline": false,
-                            "value": false
-                        },
-                        "model": {
-                            "type": "str",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": "j1-jumbo"
-                        },
-                        "temperature": {
-                            "type": "float",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": 0.7
-                        },
-                        "maxTokens": {
-                            "type": "int",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": 256
-                        },
-                        "minTokens": {
-                            "type": "int",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": 0
-                        },
-                        "topP": {
-                            "type": "float",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": 1
-                        },
-                        "presencePenalty": {
-                            "type": "AI21PenaltyData",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": {
-                                "scale": 0,
-                                "applyToWhitespaces": true,
-                                "applyToPunctuations": true,
-                                "applyToNumbers": true,
-                                "applyToStopwords": true,
-                                "applyToEmojis": true
-                            }
-                        },
-                        "countPenalty": {
-                            "type": "AI21PenaltyData",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": {
-                                "scale": 0,
-                                "applyToWhitespaces": true,
-                                "applyToPunctuations": true,
-                                "applyToNumbers": true,
-                                "applyToStopwords": true,
-                                "applyToEmojis": true
-                            }
-                        },
-                        "frequencyPenalty": {
-                            "type": "AI21PenaltyData",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": {
-                                "scale": 0,
-                                "applyToWhitespaces": true,
-                                "applyToPunctuations": true,
-                                "applyToNumbers": true,
-                                "applyToStopwords": true,
-                                "applyToEmojis": true
-                            }
-                        },
-                        "numResults": {
-                            "type": "int",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": 1
-                        },
-                        "logitBias": {
-                            "type": "dict[str, float]",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": null
-                        },
-                        "ai21_api_key": {
-                            "type": "str",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": true,
-                            "multline": false,
-                            "value": "aaaa"
-                        },
-                        "base_url": {
-                            "type": "str",
-                            "required": false,
-                            "placeholder": "",
-                            "list": false,
-                            "show": false,
-                            "multline": false,
-                            "value": null
-                        }
-                    },
-                    "description": "Wrapper around AI21 large language models.To use, you should have the environment variable ``AI21_API_KEY``set with your API key.",
-                    "base_classes": [
-                        "LLM",
-                        "BaseLLM"
-                    ]
-                },
-                "id": "dndnode_}9",
-                "value": null
-            },
-            "selected": false,
-            "positionAbsolute": {
-                "x": -655.1999999999999,
-                "y": 615
-            },
-            "dragging": false
-        },
-        {
-            "width": 384,
-            "height": 351,
-            "id": "dndnode_}11",
-            "type": "genericNode",
-            "position": {
-                "x": 638.4588569554073,
-                "y": 325.32407743706693
-            },
-            "data": {
-                "type": "ZeroShotAgent",
-                "node": {
-                    "template": {
-                        "_type": "zero-shot-react-description",
-                        "llm_chain": {
-                            "type": "LLMChain",
-                            "required": true,
-                            "placeholder": "",
-                            "list": false,
-                            "show": true,
-                            "multline": false
-                        },
-                        "allowed_tools": {
-                            "type": "Tool",
-                            "required": false,
-                            "placeholder": "",
-                            "list": true,
-                            "show": true,
-                            "multline": false,
-                            "value": null
-                        },
-                        "return_values": {
-                            "type": "str",
-                            "required": false,
-                            "placeholder": "",
-                            "list": true,
-                            "show": false,
-                            "multline": false,
-                            "value": [
-                                "output"
-                            ]
-                        }
-                    },
-                    "description": "Agent for the MRKL chain.",
-                    "base_classes": [
-                        "Agent"
-                    ]
-                },
-                "id": "dndnode_}11",
-                "value": null
-            },
-            "positionAbsolute": {
-                "x": 638.4588569554073,
-                "y": 325.32407743706693
-            }
-        },
-        {
-            "width": 384,
-            "height": 283,
-            "id": "dndnode_}12",
-            "type": "genericNode",
-            "position": {
-                "x": -88.20259321315393,
-                "y": 992.0115499525607
-            },
-            "data": {
-                "type": "Requests",
-                "node": {
-                    "template": {
-                        "_type": "requests"
-                    },
-                    "name": "Requests",
-                    "description": "A portal to the internet. Use this when you need to get specific content from a site. Input should be a specific url, and the output will be all the text on that page.",
-                    "base_classes": [
-                        "Tool"
-                    ]
-                },
-                "id": "dndnode_}12",
-                "value": null
-            },
-            "selected": false,
-            "positionAbsolute": {
-                "x": -88.20259321315393,
-                "y": 992.0115499525607
-            },
-            "dragging": false
-        },
-        {
-            "width": 155,
-            "height": 62,
-            "id": "dndnode_}13",
-            "type": "chatOutputNode",
-            "position": {
-                "x": 1187.9878614974666,
-                "y": 492.6933173991155
-            },
-            "data": {
-                "type": "chatOutput",
-                "id": "dndnode_}13",
-                "value": null
-            },
-            "selected": false,
-            "positionAbsolute": {
-                "x": 1187.9878614974666,
-                "y": 492.6933173991155
-            },
-            "dragging": false
-        },
-        {
-            "width": 139,
-            "height": 62,
-            "id": "dndnode_}14",
-            "type": "chatInputNode",
-            "position": {
-                "x": -1098.8338538506573,
-                "y": 562.4305007166358
-            },
-            "data": {
-                "type": "chatInput",
-                "id": "dndnode_}14",
-                "value": null
-            },
-            "selected": true,
-            "positionAbsolute": {
-                "x": -1098.8338538506573,
-                "y": 562.4305007166358
-            },
-            "dragging": false
-        }
-    ],
-    "edges": [
-        {
-            "source": "dndnode_}2",
-            "sourceHandle": "PromptTemplate|example_prompt|dndnode_}2",
-            "target": "dndnode_}1",
-            "targetHandle": "PromptTemplate|dndnode_}1|BasePromptTemplate",
-            "className": "animate-pulse",
-            "id": "reactflow__edge-dndnode_}2PromptTemplate|example_prompt|dndnode_}2-dndnode_}1PromptTemplate|dndnode_}1|BasePromptTemplate"
-        },
-        {
-            "source": "dndnode_}7",
-            "sourceHandle": "BasePromptTemplate|prompt|dndnode_}7",
-            "target": "dndnode_}8",
-            "targetHandle": "PromptTemplate|dndnode_}8|BasePromptTemplate",
-            "className": "animate-pulse",
-            "id": "reactflow__edge-dndnode_}7BasePromptTemplate|prompt|dndnode_}7-dndnode_}8PromptTemplate|dndnode_}8|BasePromptTemplate"
-        },
-        {
-            "source": "dndnode_}7",
-            "sourceHandle": "BaseLLM|llm|dndnode_}7",
-            "target": "dndnode_}9",
-            "targetHandle": "AI21|dndnode_}9|LLM,|BaseLLM",
-            "className": "animate-pulse",
-            "id": "reactflow__edge-dndnode_}7BaseLLM|llm|dndnode_}7-dndnode_}9AI21|dndnode_}9|LLM,|BaseLLM"
-        },
-        {
-            "source": "dndnode_}7",
-            "sourceHandle": "Memory|memory|dndnode_}7",
-            "target": "dndnode_}5",
-            "targetHandle": "ConversationBufferMemory|dndnode_}5|Memory",
-            "className": "animate-pulse",
-            "id": "reactflow__edge-dndnode_}7Memory|memory|dndnode_}7-dndnode_}5ConversationBufferMemory|dndnode_}5|Memory"
-        },
-        {
-            "source": "dndnode_}11",
-            "sourceHandle": "LLMChain|llm_chain|dndnode_}11",
-            "target": "dndnode_}7",
-            "targetHandle": "LLMChain|dndnode_}7|Chain",
-            "className": "animate-pulse",
-            "id": "reactflow__edge-dndnode_}11LLMChain|llm_chain|dndnode_}11-dndnode_}7LLMChain|dndnode_}7|Chain"
-        },
-        {
-            "source": "dndnode_}11",
-            "sourceHandle": "Tool|allowed_tools|dndnode_}11",
-            "target": "dndnode_}12",
-            "targetHandle": "Requests|dndnode_}12|Tool",
-            "className": "animate-pulse",
-            "id": "reactflow__edge-dndnode_}11Tool|allowed_tools|dndnode_}11-dndnode_}12Requests|dndnode_}12|Tool"
-        },
-        {
-            "source": "dndnode_}13",
-            "sourceHandle": "str|output|dndnode_}13",
-            "target": "dndnode_}11",
-            "targetHandle": "ZeroShotAgent|dndnode_}11|Agent",
-            "className": "animate-pulse",
-            "id": "reactflow__edge-dndnode_}13str|output|dndnode_}13-dndnode_}11ZeroShotAgent|dndnode_}11|Agent",
-            "selected": false
-        }
-    ],
-    "viewport": {
-        "x": 765.8392857133035,
-        "y": -83.25008407339476,
-        "zoom": 0.7169776240079136
-    }
-}

space_flow/src/data_assets/llm_chain.ts

@@ -1,29 +0,0 @@
-export const llm_chain = {
-    "memory": null,
-    "verbose": false,
-    "prompt": {
-        "input_variables": [
-            "input",
-            "agent_scratchpad"
-        ],
-        "output_parser": null,
-        "template": "You are an assistant that helps a company to find relevant news articles.\nAnswer the questions thoroughly and with as many details as you can and specially don't be afraid to say if you can't find the answer in the articles.\nYou have access to the following tools:\n\nCall Consultant: Ask the assistant to research the question\n\nUse the following format:\n\nQuestion: the input question you must answer\nThought: you should always think about what to do\nAction: the action to take, should be one of [Call Consultant]\nAction Input: the input to the action\nObservation: the result of the action\n... (this Thought/Action/Action Input/Observation can repeat N times)\nThought: I now know the final answer\nFinal Answer: the final answer to the original input question\n\nBegin! Remember to use the tools to help you.\n\nQuestion: {input}\n{agent_scratchpad}",
-        "template_format": "f-string",
-        "_type": "prompt"
-    },
-    "llm": {
-        "model_name": "text-davinci-003",
-        "temperature": 0.0,
-        "max_tokens": 256,
-        "top_p": 1,
-        "frequency_penalty": 0,
-        "presence_penalty": 0,
-        "n": 1,
-        "best_of": 1,
-        "request_timeout": null,
-        "logit_bias": {},
-        "_type": "openai"
-    },
-    "output_key": "text",
-    "_type": "llm_chain"
-}

space_flow/src/data_assets/prompt.ts

@@ -1,10 +0,0 @@
-export const prompt={
-    "input_variables": [
-        "input",
-        "agent_scratchpad"
-    ],
-    "output_parser": null,
-    "template": "You are an assistant that helps a company to find relevant news articles.\nAnswer the questions thoroughly and with as many details as you can and specially don't be afraid to say if you can't find the answer in the articles.\nYou have access to the following tools:\n\nCall Consultant: Ask the assistant to research the question\n\nUse the following format:\n\nQuestion: the input question you must answer\nThought: you should always think about what to do\nAction: the action to take, should be one of [Call Consultant]\nAction Input: the input to the action\nObservation: the result of the action\n... (this Thought/Action/Action Input/Observation can repeat N times)\nThought: I now know the final answer\nFinal Answer: the final answer to the original input question\n\nBegin! Remember to use the tools to help you.\n\nQuestion: {input}\n{agent_scratchpad}",
-    "template_format": "f-string",
-    "_type": "prompt"
-}

space_flow/src/modals/textAreaModal/index.tsx

@@ -1,15 +1,14 @@
-import { Dialog, Menu, Transition } from "@headlessui/react";
+import { Dialog, Transition } from "@headlessui/react";
-import { XMarkIcon, ClipboardDocumentListIcon, PlusIcon, ChevronDownIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { XMarkIcon, ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
-import { taskTypeMap, textColors, classNames, bgColors } from "../../utils";
 import { PopUpContext } from "../../contexts/popUpContext";
 
-export default function TextAreaModal({value, setValue}){
+export default function TextAreaModal({value, setValue}:{setValue:(value:string)=>void,value:string|string[]}){
     const [open, setOpen] = useState(true);
     const [myValue, setMyValue] = useState(value);
     const { closePopUp } = useContext(PopUpContext);
     const ref = useRef();
-    function setModalOpen(x){
+    function setModalOpen(x:boolean){
         setOpen(x);
         if(x === false){
             setTimeout(() => {closePopUp()}, 300);

space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx

@@ -1,19 +1,14 @@
 import {
-  CpuChipIcon,
-  PlusIcon,
 	ChevronRightIcon,
-  ArrowPathIcon,
-  BoltIcon,
-  ChevronDoubleRightIcon,
 } from "@heroicons/react/24/outline";
 import { Disclosure } from "@headlessui/react";
-import { useState } from "react";
+import { DisclosureComponentType } from "../../../../types/components";
-import { borderLColors } from "../../../../utils";
 
 export default function DisclosureComponent({
 	button: { title, Icon, buttons = [] },
 	children,
-}) {
+}: DisclosureComponentType
+) {
 	return (
 		<Disclosure as="div" key={title}>
 			{({ open }) => (
@@ -27,7 +22,7 @@ export default function DisclosureComponent({
 								</span>
 							</div>
 							<div className="flex gap-2">
-                {buttons.map((x, index)=>(
+								{buttons.map((x, index) => (
 									<button key={index} onClick={x.onClick}>
 										{x.Icon}
 									</button>
@@ -46,7 +41,6 @@ export default function DisclosureComponent({
 						{children}
 					</Disclosure.Panel>
 				</>
-        
 			)}
 		</Disclosure>
 	);

space_flow/src/pages/FlowPage/components/connection/index.tsx

@@ -1,17 +1,8 @@
 import { CSSProperties, FC } from 'react';
 import { Node } from 'reactflow';
+import { ConnectionLineComponentProps } from 'reactflow';
+
 
-interface ConnectionLineComponentProps {
-	fromX: number;
-	fromY: number;
-	fromPosition: string;
-	toX: number;
-	toY: number;
-  fromNode:Node;
-	toPosition: string;
-	connectionLineType: string;
-	connectionLineStyle: CSSProperties;
-}
 
 const ConnectionLineComponent = ({
 	fromX,
@@ -21,9 +12,9 @@ const ConnectionLineComponent = ({
 	toY,
 	toPosition,
 	connectionLineType,
-  fromNode={},
+  	fromNode,
 	connectionLineStyle = {} // provide a default value for connectionLineStyle
-}) => {
+}:ConnectionLineComponentProps) => {
 	return (
 		<g>
 			<path

space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -1,39 +1,40 @@
-import { Bars2Icon, ComputerDesktopIcon } from "@heroicons/react/24/outline";
+import { Bars2Icon } from "@heroicons/react/24/outline";
 import DisclosureComponent from "../DisclosureComponent";
 import {
   nodeColors,
   nodeIcons,
   nodeNames,
-  toFirstUpperCase,
 } from "../../../../utils";
 import { useContext, useEffect, useState } from "react";
 import { getAll } from "../../../../controllers/NodesServices";
 import { typesContext } from "../../../../contexts/typesContext";
+import { APIClassType, APIKindType, APIObjectType } from "../../../../types/api";
 
 export default function ExtraSidebar() {
   const [data, setData] = useState({});
   const { setTypes} = useContext(typesContext);
 
-  async function getTypes(){
+  async function getTypes():Promise<void>{
-    let d = await getAll();
+    const initialValue:{[char: string]: string} = {
-    setData(d.data);
-    setTypes(
-      Object.keys(d.data).reduce(
-        (acc, curr) => {
-          Object.keys(d.data[curr]).forEach((c) => {
-            acc[c] = curr;
-            d.data[curr][c].base_classes?.forEach((b) => {
-              acc[b] = curr;
-            });
-          });
-          return acc;
-        },
-        {
       str: "advanced",
       bool: "advanced",
       chatOutput: "chat",
       chatInput: "chat",
     }
+    let result = await getAll();
+    setData(result.data);
+    setTypes(
+      Object.keys(result.data).reduce(
+        (acc, curr) => {
+          Object.keys(result.data[curr]).forEach((c:keyof APIKindType) => {
+            acc[c] = curr;
+            result.data[curr][c].base_classes?.forEach((b) => {
+              acc[b] = curr;
+            });
+          });
+          return acc;
+        },
+        initialValue
       )
     );
   }
@@ -43,20 +44,20 @@ export default function ExtraSidebar() {
   }, []);
 
 
-  function onDragStart(event: React.DragEvent<any>, data) {
+  function onDragStart(event: React.DragEvent<any>, data:{type:string,node?:APIClassType}) {
     event.dataTransfer.effectAllowed = "move";
     event.dataTransfer.setData("json", JSON.stringify(data));
   }
 
   return (
     <div className="mt-4 w-full">
-      {Object.keys(data).map((d, i) => (
+      {Object.keys(data).map((d:keyof APIObjectType, i) => (
         <DisclosureComponent
           key={i}
           button={{ title: nodeNames[d], Icon: nodeIcons[d] }}
         >
           <div className="p-2 flex flex-col gap-2">
-            {Object.keys(data[d]).map((t, k) => (
+            {Object.keys(data[d]).map((t: string, k) => (
               <div key={k}>
                 <div
                   draggable

space_flow/src/pages/FlowPage/flowManager/index.tsx

@@ -3,9 +3,6 @@ import { ReactFlowProvider } from "reactflow";
 import FlowPage from "..";
 import { TabsContext } from "../../../contexts/tabsContext";
 import TabComponent from "./tabComponent";
-import { example } from "../../../data_assets/example";
-var _ = require("lodash");
-
 export function TabsManager() {
   const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
   useEffect(() => {

space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx

@@ -2,11 +2,12 @@ import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import { useContext, useRef, useState } from "react";
 import { TabsContext } from "../../../../contexts/tabsContext";
+import { FlowType } from "../../../../types/flow";
 
 var _ = require("lodash");
 
-export default function TabComponent({ selected, flow, onClick }) {
+export default function TabComponent({ selected, flow, onClick }:{flow:FlowType,selected:boolean,onClick:()=>void}) {
-	const { removeFlow, updateFlow, flows, downloadFlow } =
+	const { removeFlow, updateFlow, flows } =
 		useContext(TabsContext);
 	const [isRename, setIsRename] = useState(false);
 	const [value, setValue] = useState("");

space_flow/src/pages/FlowPage/index.tsx

@@ -7,6 +7,8 @@ import ReactFlow, {
 	useNodesState,
 	useReactFlow,
 	ControlButton,
+	EdgeChange,
+	Connection,
 } from "reactflow";
 import { locationContext } from "../../contexts/locationContext";
 import ExtraSidebar from "./components/extraSidebarComponent";
@@ -24,6 +26,8 @@ import {
 	ArrowDownTrayIcon,
 	ArrowUpTrayIcon,
 } from "@heroicons/react/24/outline";
+import { FlowType, NodeType } from "../../types/flow";
+import { APIClassType } from "../../types/api";
 
 const nodeTypes = {
 	genericNode: GenericNode,
@@ -35,7 +39,7 @@ const nodeTypes = {
 
 var _ = require("lodash");
 
-export default function FlowPage({ flow }) {
+export default function FlowPage({ flow }:{flow:FlowType}) {
 	let { updateFlow, incrementNodeId, downloadFlow, uploadFlow } =
 		useContext(TabsContext);
 	const { types, reactFlowInstance, setReactFlowInstance } =
@@ -78,7 +82,7 @@ export default function FlowPage({ flow }) {
 	}, [setExtraComponent, setExtraNavigation]);
 
 	const onEdgesChangeMod = useCallback(
-		(s) => {
+		(s:EdgeChange[]) => {
 			onEdgesChange(s);
 			setNodes((x) => {
 				let newX = _.cloneDeep(x);
@@ -89,7 +93,7 @@ export default function FlowPage({ flow }) {
 	);
 
 	const onConnect = useCallback(
-		(params) => {
+		(params:Connection) => {
 			setEdges((eds) =>
 				addEdge({ ...params, className: "animate-pulse" }, eds)
 			);
@@ -101,17 +105,17 @@ export default function FlowPage({ flow }) {
 		[setEdges, setNodes]
 	);
 
-	const onDragOver = useCallback((event) => {
+	const onDragOver = useCallback((event:React.DragEvent) => {
 		event.preventDefault();
 		event.dataTransfer.dropEffect = "move";
 	}, []);
 
 	const onDrop = useCallback(
-		(event) => {
+		(event:React.DragEvent) => {
 			event.preventDefault();
 
 			const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
-			let data = JSON.parse(event.dataTransfer.getData("json"));
+			let data:{type:string,node?:APIClassType} = JSON.parse(event.dataTransfer.getData("json"));
 			if (
 				data.type !== "chatInput" ||
 				(data.type === "chatInput" &&
@@ -123,7 +127,7 @@ export default function FlowPage({ flow }) {
 				});
 				let newId = getId();
 
-				const newNode = {
+				const newNode:NodeType = {
 					id: newId,
 					type:
 						data.type === "str"

space_flow/src/types/alerts/index.ts

@@ -0,0 +1,15 @@
+export type ErrorAlertType = {title:string,list:Array<string>,id:string,removeAlert:(id:string)=>void}
+export type NoticeAlertType = {title:string,link:string,id:string,removeAlert:(id:string)=>void}
+export type SuccessAlertType = {title:string,id:string, removeAlert:(id:string)=>void}
+export type SingleAlertComponentType = {dropItem:AlertItemType,removeAlert:(index:string)=>void}
+export type AlertDropdownType = {
+    closeFunction: () => void;
+    open?: boolean;
+  };
+export type AlertItemType = {
+    type: "notice" | "error" | "success";
+    title: string;
+    link?: string;
+    list?: Array<string>;
+    id: string;
+  };

space_flow/src/types/api/index.ts

@@ -0,0 +1,15 @@
+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 APIKindType= {class:APIClassType,[key:string]:APIClassType}
+export type APITemplateType = {variable:TemplateVariableType,[key:string]:TemplateVariableType}
+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[];
+    viewport: Viewport;
+    message:string;
+    chatHistory:{message:string,isSend:boolean}[]
+};

space_flow/src/types/chat/index.ts

@@ -0,0 +1,4 @@
+import { ReactFlowInstance } from 'reactflow';
+import { FlowType } from "../flow";
+
+export type ChatType = {flow:FlowType,reactFlowInstance:ReactFlowInstance}

space_flow/src/types/components/index.ts

@@ -0,0 +1,45 @@
+import { Disclosure } from '@headlessui/react';
+import { ForwardRefExoticComponent, ReactElement, ReactNode } from 'react';
+import { NodeDataType } from "./../flow/index";
+export type InputComponentType = {
+	value: string;
+	disabled?: boolean;
+	onChange: (value: string) => void;
+};
+export type ToggleComponentType = {
+	enabled: boolean;
+	setEnabled: (state: boolean) => void;
+	disabled: boolean;
+};
+export type DropDownComponentType = {
+	title: string;
+	value: string;
+	options: string[];
+	onSelect: (value: string) => void;
+};
+export type ParameterComponentType = {
+	data: NodeDataType;
+	title: string;
+	id: string;
+	color: string;
+	left: boolean;
+	type: string;
+	required?: boolean;
+	name?: string;
+	tooltipTitle: string;
+};
+export type InputListComponentType = {value:string[],onChange:(value:string[])=>void,disabled:boolean}
+
+export type TextAreaComponentType = {disabled:boolean,onChange:(value:string[]|string)=>void,value:string[]|string}
+
+export type DisclosureComponentType = {
+	children: ReactNode;
+	button: {
+		title: string;
+		Icon: ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
+		buttons?: {
+			Icon: ReactElement;
+			title: string;
+      onClick:(event?:React.MouseEvent)=>void;
+		}[];
+	}};

space_flow/src/types/entities/index.ts

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

space_flow/src/types/flow/index.ts

@@ -1,6 +1,11 @@
-export type flow = {
+import { APIClassType } from './../api/index';
+import { ReactFlowJsonObject, XYPosition } from "reactflow";
+
+export type FlowType = {
 	name: string;
 	id: string;
-	data: any;
+	data: ReactFlowJsonObject;
 	chat: Array<{ message: string; isSend: boolean }>;
 };
+export type NodeType = {id:string,type:string,position:XYPosition,data:NodeDataType}
+export type NodeDataType = {type:string,node?:APIClassType,id:string,value:any}

space_flow/src/types/tabs/index.ts

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

space_flow/src/types/typesContext/index.ts

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

space_flow/src/utils.ts

@@ -8,9 +8,9 @@ import {
   ComputerDesktopIcon,
   Bars3CenterLeftIcon,
 } from "@heroicons/react/24/outline";
-import { Edge, Node } from "reactflow";
+import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
 
-export function classNames(...classes) {
+export function classNames(...classes:Array<string>) {
   return classes.filter(Boolean).join(" ");
 }
 
@@ -60,43 +60,7 @@ export const borderLColors = {
   gray: "border-l-gray-500",
 };
 
-/* export const nodeColors = {
+export const nodeColors: {[char: string]: string} = {
-    prompt: "#35ADAE",
-    model: "#4266BE",
-    chain: "#6344BE",
-    agent: "#903BBE",
-    tool: "#DB3392",
-    memory: "#FF3434",
-  } */
-
-/* export const nodeColors = {
-    prompt: "#36D635",
-    model: "#4266BE",
-    chain: "#903BBE",
-    agent: "#FF3434",
-    tool: "#FEBB35",
-    memory: "#FFFF33",
-  } */
-
-/* export const nodeColors = {
-    prompt: "#36D635",
-    model: "#35ADAE",
-    chain: "#903BBE",
-    agent: "#DB3392",
-    tool: "#FF9135",
-    memory: "#FFDC35",
-  } */
-
-/* export const nodeColors = {
-    prompt: "#36D635",
-    model: "#35ADAE",
-    chain: "#903BBE",
-    agent: "#DB3392",
-    tool: "#FF3434",
-    memory: "#FF9135",
-  } */
-
-export const nodeColors = {
   prompts: "#4367BF",
   llms: "#6344BE",
   chains: "#FE7500",
@@ -107,7 +71,7 @@ export const nodeColors = {
   chat: "#2563EB",
 };
 
-export const nodeNames = {
+export const nodeNames:{[char: string]: string} = {
   prompts: "Prompts",
   llms: "LLMs",
   chains: "Chains",
@@ -119,7 +83,7 @@ export const nodeNames = {
 
 };
 
-export const nodeIcons = {
+export const nodeIcons:{[char: string]: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>} = {
   agents: RocketLaunchIcon,
   chains: LinkIcon,
   memories: CpuChipIcon,
@@ -220,7 +184,7 @@ export const taskTypeMap: { [key: string]: string } = {
   MULTICLASS_CLASSIFICATION: "Multiclass Classification",
 };
 
-const charWidths = {
+const charWidths:{[char: string]: number} = {
   " ": 0.2,
   "!": 0.2,
   '"': 0.3,
@@ -262,7 +226,7 @@ for (let i = 97; i <= 122; i++) {
   charWidths[String.fromCharCode(i)] = 0.5;
 }
 
-export function measureTextWidth(text: string, fontSize) {
+export function measureTextWidth(text: string, fontSize:number) {
   let wordWidth = 0;
   for (let j = 0; j < text.length; j++) {
     let char = text[j];
@@ -272,7 +236,7 @@ export function measureTextWidth(text: string, fontSize) {
   return wordWidth;
 }
 
-export function measureTextHeight(text: string, width, fontSize) {
+export function measureTextHeight(text: string, width:number, fontSize:number) {
   const charHeight = fontSize;
   const lineHeight = charHeight * 1.5;
   const words = text.split(" ");
@@ -321,7 +285,7 @@ export function snakeToNormalCase(str: string) {
     .join(" ");
 }
 
-export function roundNumber(x, decimals) {
+export function roundNumber(x:number, decimals:number) {
   return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals);
 }
 
@@ -335,9 +299,10 @@ export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
 }
 
 export function isValidConnection(
-  { source, target, sourceHandle, targetHandle },
+  { source, target, sourceHandle, targetHandle }:Connection,
-  reactFlowInstance
+  reactFlowInstance:ReactFlowInstance
 ) {
+  console.log(target)
   if (
     sourceHandle.split('|')[0] === targetHandle.split("|")[0] ||
     sourceHandle.split('|').slice(2).some((t) => t === targetHandle.split("|")[0]) ||