Merge branch 'dev' into merge_repo

space_flow/src/App.tsx

@@ -1,6 +1,5 @@
 import "reactflow/dist/style.css";
-import { useState, useRef, useEffect, useContext } from "react";
+import { useState, useEffect, useContext } from "react";
-import { ReactFlowProvider } from "reactflow";
 import "./App.css";
 import { useLocation } from "react-router-dom";
 import ErrorAlert from "./alerts/error";
@@ -9,24 +8,21 @@ import SuccessAlert from "./alerts/success";
 import ExtraSidebar from "./components/ExtraSidebarComponent";
 import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
-import FlowPage from "./pages/FlowPage";
 import Sidebar from "./components/SidebarComponent";
 import Header from "./components/HeaderComponent";
-import { TabsProvider } from "./contexts/tabsContext";
 import { TabsManager } from "./pages/FlowPage/flowManager";
 
 export default function App() {
 	var _ = require("lodash");
 
-
+	let { setCurrent, setShowSideBar, setIsStackedOpen } =
-  let { setAtual, setShowSideBar, setIsStackedOpen} =
 		useContext(locationContext);
 	let location = useLocation();
 	useEffect(() => {
-    setAtual(location.pathname.replace(/\/$/g, "").split("/"));
+		setCurrent(location.pathname.replace(/\/$/g, "").split("/"));
 		setShowSideBar(true);
 		setIsStackedOpen(true);
-  }, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]);
+	}, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]);
 
 	const {
 		errorData,
@@ -98,7 +94,6 @@ export default function App() {
 	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>
 			</div>

space_flow/src/alerts/error/errorClass.ts

@@ -1,18 +0,0 @@
-const defaultErrorMessages ={
-    deleteRLAS:"Could not remove label from record, please try again",
-    addRLAS:"Could not label this record, please try again",
-    deleteRecords:"Could not delete record, please try again later"
-}
-
-
-
-export class CustomError extends Error{
-    constructor(message:string){
-        super(message)
-        Object.setPrototypeOf(this,CustomError.prototype)
-    }
-
-    getErrorMessage(): string{
-        return defaultErrorMessages[this.message]?? "unknow error, please try again"
-    }
-}

space_flow/src/components/ExtraSidebarComponent/index.tsx

@@ -1,13 +1,15 @@
 import { Disclosure } from "@headlessui/react";
-import { ChevronLeftIcon } from "@heroicons/react/24/outline";
+import { ArrowUpTrayIcon, ChevronLeftIcon } from "@heroicons/react/24/outline";
 import { useContext } from "react";
 import { Link } from "react-router-dom";
 import { classNames } from "../../utils";
 import { locationContext } from "../../contexts/locationContext";
+import { TabsContext } from "../../contexts/tabsContext";
 
 export default function ExtraSidebar() {
+  const {uploadFlow} = useContext(TabsContext)
   const {
-    atual,
+    current,
     isStackedOpen,
     setIsStackedOpen,
     extraNavigation,
@@ -20,7 +22,7 @@ export default function ExtraSidebar() {
           isStackedOpen ? "w-60" : "w-0 "
         } flex-shrink-0 flex overflow-hidden flex-col border-r transition-all duration-500`}
       >
-        <div className="w-60 overflow-y-auto scrollbar-hide h-full">
+        <div className="w-60 overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
           <div className="flex pt-4 px-4 justify-between align-middle w-full">
             <span className="text-gray-900 text-lg ml-2 font-semibold">
               {extraNavigation.title}
@@ -32,7 +34,7 @@ export default function ExtraSidebar() {
               <ChevronLeftIcon className="h-6 w-6"></ChevronLeftIcon>
             </button>
           </div>
-          <div className="flex flex-grow flex-col">
+          <div className="flex flex-grow flex-col w-full">
             {extraNavigation.options ? (
               <div className="p-4">
                 <nav className="flex-1 space-y-1">
@@ -42,7 +44,7 @@ export default function ExtraSidebar() {
                         <Link
                           to={item.href}
                           className={classNames(
-                            item.href.split("/")[2] === atual[4]
+                            item.href.split("/")[2] === current[4]
                               ? "bg-gray-100 text-gray-900"
                               : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
                             "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
@@ -50,7 +52,7 @@ export default function ExtraSidebar() {
                         >
                           <item.icon
                             className={classNames(
-                              item.href.split("/")[2] === atual[4]
+                              item.href.split("/")[2] === current[4]
                                 ? "text-gray-500"
                                 : "text-gray-400 group-hover:text-gray-500",
                               "mr-3 flex-shrink-0 h-6 w-6"
@@ -69,7 +71,7 @@ export default function ExtraSidebar() {
                           <>
                             <Disclosure.Button
                               className={classNames(
-                                item.href.split("/")[2] === atual[4]
+                                item.href.split("/")[2] === current[4]
                                   ? "bg-gray-100 text-gray-900"
                                   : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
                                 "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
@@ -102,7 +104,7 @@ export default function ExtraSidebar() {
                                   key={subItem.name}
                                   to={subItem.href}
                                   className={classNames(
-                                    subItem.href.split("/")[3] === atual[5]
+                                    subItem.href.split("/")[3] === current[5]
                                       ? "bg-gray-100 text-gray-900"
                                       : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
                                     "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
@@ -122,7 +124,11 @@ 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

@@ -45,7 +45,7 @@ export default function Header({user, userNavigation}){
           <div className="min-w-0 flex-1 ml-5">
             <Breadcrumb />
           </div>
-          {/* <div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
+          <div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
             <div className="flex items-center space-x-8">
               <span className="inline-flex">
                 <button type="button" {...triggerProps} className="-mx-1 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
@@ -56,7 +56,7 @@ export default function Header({user, userNavigation}){
                 </button>{renderLayer(<div {...layerProps}><AlertDropdown closeFunction={()=>setIsOpen(false)} open={isOpen}></AlertDropdown></div>)}
               </span>
 
-              <Menu as="div" className="relative inline-block text-left">
+              {/* <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="" />
@@ -100,9 +100,9 @@ export default function Header({user, userNavigation}){
                       </div>
                     </Menu.Items>
                   </Transition>
-                </Menu>
+                </Menu> */}
+              </div>
             </div>
-            </div> */}
           </div>
         </header>
     )

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

@@ -4,14 +4,14 @@ import { useContext } from "react"
 import { locationContext } from "../../../contexts/locationContext";
 
 export default function SidebarButton({item}){
-    let {atual}= useContext(locationContext);
+    let {current}= useContext(locationContext);
     return (
         <>
         <Link
         key={item.name}
         to={item.href}
         className={classNames(
-            item.href.split("/")[1]=== atual[3]? 'bg-gray-900 text-white' : 'text-gray-400 hover:bg-gray-700',
+            item.href.split("/")[1]=== current[3]? 'bg-gray-900 text-white' : 'text-gray-400 hover:bg-gray-700',
             'flex-shrink-0 inline-flex items-center justify-center h-14 w-14 rounded-lg'
         )}
         >

space_flow/src/components/breadcrumbComponent/index.tsx

@@ -22,7 +22,7 @@ function getPages(atual){
 }
 
 export default function Breadcrumb(){
-  let {atual} = useContext(locationContext);
+  let {current} = useContext(locationContext);
     return (
         <div>
             <nav className="flex ml-2" aria-label="Breadcrumb">
@@ -35,7 +35,7 @@ export default function Breadcrumb(){
                     </Link>
                   </div>
                 </li>
-                  {getPages(atual).map((page) => (
+                  {getPages(current).map((page) => (
                     <li key={page.href}>
                       <div className="flex items-center">
                         <ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />

space_flow/src/components/chatComponent/index.tsx

@@ -9,13 +9,16 @@ import { useContext, useEffect, useRef, useState } from "react";
 import { sendAll } from "../../controllers/NodesServices";
 import { alertContext } from "../../contexts/alertContext";
 import { nodeColors } from "../../utils";
+import { TabsContext } from "../../contexts/tabsContext";
 
 const _ = require("lodash");
 
-export default function Chat({ reactFlowInstance }) {
+export default function Chat({flow, reactFlowInstance }) {
+  const {updateFlow} = useContext(TabsContext)
+  const [saveChat,setSaveChat] = useState(false)
   const [open, setOpen] = useState(true);
   const [chatValue, setChatValue] = useState("");
-  const [chatHistory, setChatHistory] = useState([]);
+  const [chatHistory, setChatHistory] = useState(flow.chat);
   const {setErrorData} = useContext(alertContext);
   const addChatHistory = (message, isSend) => {
     setChatHistory((old) => {
@@ -23,8 +26,17 @@ export default function Chat({ reactFlowInstance }) {
       newChat.push({ message, isSend });
       return newChat;
     });
+    setSaveChat(chat=>!chat)
   };
   useEffect(()=>{
+    console.log("flow")
+    updateFlow({..._.cloneDeep(flow),chat:chatHistory})
+  },[saveChat])
+  useEffect(()=>{
+    setChatHistory(flow.chat)
+  },[flow])
+  useEffect(()=>{
+    if(ref.current)
       ref.current.scrollIntoView({behavior: 'smooth'});
   }, [chatHistory])
   function validateNodes(){
@@ -40,6 +52,29 @@ export default function Chat({ reactFlowInstance }) {
     return true;
   }
   const ref = useRef(null);
+
+  function sendMessage(){
+    console.log(reactFlowInstance.toObject())
+    if(chatValue !== ""){
+      if(validateNodes()){
+        if(validateChatNodes()){
+          let message = chatValue;
+          setChatValue("");
+          addChatHistory(message, true);
+          console.log({...reactFlowInstance.toObject(),message,chatHistory})
+          sendAll({...reactFlowInstance.toObject(),message,chatHistory}).then((r) => {addChatHistory(r.data.result, false);});
+        } else {
+          setErrorData({title: 'Error sending message', list:['Chat nodes are missing.']})
+        }
+      
+      } else {
+        setErrorData({title: 'Error sending message', list:['There are required fields not filled yet.']})
+      }
+    } else {
+      setErrorData({title: 'Error sending message', list:['The message cannot be empty.']})
+    }  
+  }
+
   return (
     <>
       <Transition
@@ -71,14 +106,14 @@ export default function Chat({ reactFlowInstance }) {
               {chatHistory.map((c, i) => (
                 <div key={i}>
                   {c.isSend ? (
-                    <div className="w-full text-start">
+                    <div className="w-full text-end">
-                      <div className="text-start inline-block bg-gray-200 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tl-none">
+                      <div className="text-start inline-block bg-gray-200 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tr-none">
                         {c.message}
                       </div>
                     </div>
                   ) : (
-                    <div className="w-full text-end">
+                    <div className="w-full text-start">
-                      <div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tr-none">
+                      <div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tl-none">
                         {c.message}
                       </div>
                     </div>
@@ -90,6 +125,11 @@ export default function Chat({ reactFlowInstance }) {
             <div className="w-full bg-white border-t flex items-center justify-between p-3">
               <div className="relative w-full mt-1 rounded-md shadow-sm">
                 <input
+                onKeyDown={(event)=>{
+                  if(event.key==='Enter'){
+                    sendMessage()
+                  }
+                }}
                   type="text"
                   value={chatValue}
                   onChange={(e) => {
@@ -100,28 +140,7 @@ export default function Chat({ reactFlowInstance }) {
                 />
                 <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                   <button
-                    onClick={() => {
+                    onClick={() => sendMessage()}
-                      console.log(reactFlowInstance.toObject())
-                      if(chatValue !== ""){
-                        if(validateNodes()){
-                          if(validateChatNodes()){
-                            let message = chatValue;
-                            setChatValue("");
-                            addChatHistory(message, true);
-                            sendAll({...reactFlowInstance.toObject(),message}).then((r) => {addChatHistory(r.data.result, false);});
-                          } else {
-                            setErrorData({title: 'Error sending message', list:['Chat nodes are missing.']})
-                          }
-                        
-                        } else {
-                          setErrorData({title: 'Error sending message', list:['There are required fields not filled yet.']})
-                        }
-                      } else {
-                        setErrorData({title: 'Error sending message', list:['The message cannot be empty.']})
-                      }
-                      
-                      
-                    }}
                   >
                     <PaperAirplaneIcon
                       className="h-5 w-5 text-gray-400 hover:text-gray-600"

space_flow/src/contexts/alertContext.tsx

@@ -3,28 +3,29 @@ import { alertDropdownItem } from "../alerts/alertDropDown";
 
 var _ = require("lodash");
 
-type alertContextType=
+//types for alertContextType
-{
+type alertContextType = {
-    errorData: {title: string, list?: Array<string>};
+	errorData: { title: string; list?: Array<string> };
-    setErrorData:(newState:{title: string, list?: Array<string>})=>void;
+	setErrorData: (newState: { title: string; list?: Array<string> }) => void;
 	errorOpen: boolean;
 	setErrorOpen: (newState: boolean) => void;
-    noticeData: {title: string, link?: string};
+	noticeData: { title: string; link?: string };
-    setNoticeData:(newState:{title: string, link?: string})=>void;
+	setNoticeData: (newState: { title: string; link?: string }) => void;
 	noticeOpen: boolean;
 	setNoticeOpen: (newState: boolean) => void;
 	successData: { title: string };
 	setSuccessData: (newState: { title: string }) => void;
 	successOpen: boolean;
 	setSuccessOpen: (newState: boolean) => void;
-    notificationCenter:boolean
+	notificationCenter: boolean;
 	setNotificationCenter: (newState: boolean) => void;
 	notificationList: Array<alertDropdownItem>;
-    pushNotificationList:(Object)=>void
+	pushNotificationList: (Object) => void;
-    clearNotificationList:()=>void,
+	clearNotificationList: () => void;
-    removeFromNotificationList:(index:number)=>void
+	removeFromNotificationList: (index: number) => void;
-}
+};
 
+//initial values to alertContextType
 const initialValue = {
 	errorData: { title: "", list: [] },
 	setErrorData: () => {},
@@ -43,61 +44,105 @@ const initialValue= {
 	notificationList: [],
 	pushNotificationList: () => {},
 	clearNotificationList: () => {},
-    removeFromNotificationList:()=>{}
+	removeFromNotificationList: () => {},
-}
+};
 
 export const alertContext = createContext<alertContextType>(initialValue);
 
 export function AlertProvider({ children }) {
-    const [errorData, setErrorDataState] = useState<{title:string,list?:Array<string>}>({title:"",list:[]});
+	const [errorData, setErrorDataState] = useState<{
+		title: string;
+		list?: Array<string>;
+	}>({ title: "", list: [] });
 	const [errorOpen, setErrorOpen] = useState(false);
-    const [noticeData, setNoticeDataState] = useState<{title:string,link?:string}>({title:"",link:""});
+	const [noticeData, setNoticeDataState] = useState<{
+		title: string;
+		link?: string;
+	}>({ title: "", link: "" });
 	const [noticeOpen, setNoticeOpen] = useState(false);
-    const [successData, setSuccessDataState] = useState<{title:string}>({title:""});
+	const [successData, setSuccessDataState] = useState<{ title: string }>({
+		title: "",
+	});
 	const [successOpen, setSuccessOpen] = useState(false);
 	const [notificationCenter, setNotificationCenter] = useState(false);
-    const [notificationList,setNotificationList] = useState([])
+	const [notificationList, setNotificationList] = useState([]);
 	const pushNotificationList = (notification: alertDropdownItem) => {
 		setNotificationList((old) => {
 			let newNotificationList = _.cloneDeep(old);
 			newNotificationList.unshift(notification);
 			return newNotificationList;
-        })
+		});
-    }
+	};
-    function setErrorData (newState:{title: string, list?: Array<string>}){
+	function setErrorData(newState: { title: string; list?: Array<string> }) {
-        setErrorDataState(newState)
+		setErrorDataState(newState);
-        setErrorOpen(true)
+		setErrorOpen(true);
 		if (newState.title) {
-            setNotificationCenter(true)
+			setNotificationCenter(true);
-            pushNotificationList({type:"error",title:newState.title,list:newState.list, id:_.uniqueId()})
+			pushNotificationList({
+				type: "error",
+				title: newState.title,
+				list: newState.list,
+				id: _.uniqueId(),
+			});
 		}
 	}
-    function setNoticeData(newState:{title: string, link?: string}){
+	function setNoticeData(newState: { title: string; link?: string }) {
-        setNoticeDataState(newState)
+		setNoticeDataState(newState);
-        setNoticeOpen(true)
+		setNoticeOpen(true);
 		if (newState.title) {
-            setNotificationCenter(true)
+			setNotificationCenter(true);
-            pushNotificationList({type:"notice",title:newState.title,link:newState.link, id:_.uniqueId()})
+			pushNotificationList({
+				type: "notice",
+				title: newState.title,
+				link: newState.link,
+				id: _.uniqueId(),
+			});
 		}
 	}
 	function setSuccessData(newState: { title: string }) {
-        setSuccessDataState(newState)
+		setSuccessDataState(newState);
-        setSuccessOpen(true)
+		setSuccessOpen(true);
 		if (newState.title) {
-            setNotificationCenter(true)
+			setNotificationCenter(true);
-            pushNotificationList({type:"success",title:newState.title, id:_.uniqueId()})
+			pushNotificationList({
+				type: "success",
+				title: newState.title,
+				id: _.uniqueId(),
+			});
 		}
 	}
 	function clearNotificationList() {
-        setNotificationList([])
+		setNotificationList([]);
 	}
 	function removeFromNotificationList(index: number) {
-        setNotificationList((prevAlertsList) => prevAlertsList.filter((alert) => alert.id !== index));
+		setNotificationList((prevAlertsList) =>
+			prevAlertsList.filter((alert) => alert.id !== index)
+		);
 	}
 	return (
-        <alertContext.Provider value={{ removeFromNotificationList,clearNotificationList,notificationList,pushNotificationList,setNotificationCenter,notificationCenter,errorData, setErrorData, 
+		<alertContext.Provider
-        errorOpen,setErrorOpen, noticeData, setNoticeData, noticeOpen, setNoticeOpen, successData, setSuccessData, successOpen, setSuccessOpen}}>
+			value={{
+				removeFromNotificationList,
+				clearNotificationList,
+				notificationList,
+				pushNotificationList,
+				setNotificationCenter,
+				notificationCenter,
+				errorData,
+				setErrorData,
+				errorOpen,
+				setErrorOpen,
+				noticeData,
+				setNoticeData,
+				noticeOpen,
+				setNoticeOpen,
+				successData,
+				setSuccessData,
+				successOpen,
+				setSuccessOpen,
+			}}
+		>
 			{children}
 		</alertContext.Provider>
-    )
+	);
 }

space_flow/src/contexts/index.tsx

@@ -5,6 +5,7 @@ import { TabsProvider } from "./tabsContext";
 import { TypesProvider } from "./typesContext";
 
 export default function ContextWrapper({ children }) {
+  //element to wrap all context
   return (
     <>
       <LocationProvider>

space_flow/src/contexts/locationContext.tsx

@@ -1,23 +1,44 @@
 import { createContext, useState } from "react";
 
-type locationContextType=
+//types for location context
-{
+type locationContextType = {
-    atual:Array<string>;
+	current: Array<string>;
-    setAtual:(newState:Array<string>)=>void;
+	setCurrent: (newState: Array<string>) => void;
 	isStackedOpen: boolean;
 	setIsStackedOpen: (newState: boolean) => void;
 	showSideBar: boolean;
 	setShowSideBar: (newState: boolean) => void;
-    extraNavigation:{title:string, options?:Array<{name:string, href:string, icon: any, children?:Array<any>}>};
+	extraNavigation: {
-    setExtraNavigation:(newState:{title:string, options?:Array<{name:string, href:string, icon: any, children?:Array<any>}>}) => void;
+		title: string;
+		options?: Array<{
+			name: string;
+			href: string;
+			icon: any;
+			children?: Array<any>;
+		}>;
+	};
+	setExtraNavigation: (newState: {
+		title: string;
+		options?: Array<{
+			name: string;
+			href: string;
+			icon: any;
+			children?: Array<any>;
+		}>;
+	}) => void;
 	extraComponent: any;
 	setExtraComponent: (newState: any) => void;
-}
+};
 
+//initial value for location context
 const initialValue = {
-    atual : window.location.pathname.replace(/\/$/g, '').split("/"),
+    //actual
-    isStackedOpen:((window.innerWidth > 1024 && window.location.pathname.split("/")[1]) ? true : false),
+	current: window.location.pathname.replace(/\/$/g, "").split("/"),
-    setAtual: ()=>{},
+	isStackedOpen:
+		window.innerWidth > 1024 && window.location.pathname.split("/")[1]
+			? true
+			: false,
+	setCurrent: () => {},
 	setIsStackedOpen: () => {},
 	showSideBar: window.location.pathname.split("/")[1] ? true : false,
 	setShowSideBar: () => {},
@@ -25,21 +46,34 @@ const initialValue= {
 	setExtraNavigation: () => {},
 	extraComponent: <></>,
 	setExtraComponent: () => {},
-}
+};
-
-
 
 export const locationContext = createContext<locationContextType>(initialValue);
 
 export function LocationProvider({ children }) {
-    const [atual,setAtual] = useState(initialValue.atual)
+	const [current, setCurrent] = useState(initialValue.current);
-    const [isStackedOpen,setIsStackedOpen] = useState(initialValue.isStackedOpen)
+	const [isStackedOpen, setIsStackedOpen] = useState(
-    const [showSideBar,setShowSideBar] = useState(initialValue.showSideBar)
+		initialValue.isStackedOpen
-    const [extraNavigation, setExtraNavigation] = useState({title:""})
+	);
-    const [extraComponent, setExtraComponent] = useState(<></>)
+	const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar);
+	const [extraNavigation, setExtraNavigation] = useState({ title: "" });
+	const [extraComponent, setExtraComponent] = useState(<></>);
 	return (
-        <locationContext.Provider value={{isStackedOpen,setIsStackedOpen,atual,setAtual, showSideBar, setShowSideBar,extraNavigation, setExtraNavigation, extraComponent, setExtraComponent}}>
+		<locationContext.Provider
+			value={{
+				isStackedOpen,
+				setIsStackedOpen,
+				current,
+				setCurrent,
+				showSideBar,
+				setShowSideBar,
+				extraNavigation,
+				setExtraNavigation,
+				extraComponent,
+				setExtraComponent,
+			}}
+		>
 			{children}
 		</locationContext.Provider>
-    )
+	);
 }

space_flow/src/contexts/popUpContext.tsx

@@ -1,9 +1,10 @@
 import { createContext } from "react";
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
+//context to set JSX element on the DOM
 export const PopUpContext = createContext({
   openPopUp: (popUpElement: JSX.Element) => {},
-    closePopUp: () => {}
+	closePopUp: () => {},
 });
 
 interface PopUpProviderProps {

space_flow/src/contexts/tabsContext.tsx

@@ -1,16 +1,24 @@
 import { createContext, useEffect, useState, useRef } from "react";
+import { example } from "../data_assets/example";
 
-type flow={name:string,id:string,data:any}
+type flow = {
+	name: string;
+	id: string;
+	data: any;
+	chat: Array<{ message: string; isSend: boolean }>;
+};
 
 type TabsContextType = {
 	tabIndex: number;
 	setTabIndex: (index: number) => void;
-    flows:Array<flow>
+	flows: Array<flow>;
 	removeFlow: (id: string) => void;
 	addFlow: (flowData?: any) => void;
 	updateFlow: (newFlow: flow) => void;
-    incrementNodeId:()=>number,
+	incrementNodeId: () => number;
-}
+	downloadFlow: () => void;
+	uploadFlow: () => void;
+};
 
 const TabsContextInitialValue = {
 	tabIndex: 0,
@@ -20,17 +28,19 @@ const TabsContextInitialValue = {
 	addFlow: (flowData?: any) => {},
 	updateFlow: (newFlow: flow) => {},
 	incrementNodeId: () => 0,
+	downloadFlow: () => {},
+	uploadFlow: () => {},
+};
 
+export const TabsContext = createContext<TabsContextType>(
+	TabsContextInitialValue
+);
 
-}
+let _ = require("lodash");
-
-export const TabsContext = createContext<TabsContextType>(TabsContextInitialValue)
-
-let _ = require('lodash');
 
 export function TabsProvider({ children }) {
-    const [tabIndex,setTabIndex] = useState(0)
+	const [tabIndex, setTabIndex] = useState(0);
-    const [flows,setFlows] = useState<Array<flow>>([])
+	const [flows, setFlows] = useState<Array<flow>>([]);
 	const [id, setId] = useState(0);
 
 	const newNodeId = useRef(0);
@@ -40,11 +50,14 @@ export function TabsProvider({children}){
 	}
 	useEffect(() => {
 		if (flows.length !== 0)
-            window.localStorage.setItem('tabsData', JSON.stringify({tabIndex, flows, id, nodeId: newNodeId.current}));
+			window.localStorage.setItem(
+				"tabsData",
+				JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current })
+			);
 	}, [flows, id, tabIndex, newNodeId]);
 
 	useEffect(() => {
-        let cookie = window.localStorage.getItem('tabsData');
+		let cookie = window.localStorage.getItem("tabsData");
 		if (cookie) {
 			let cookieObject = JSON.parse(cookie);
 			setTabIndex(cookieObject.tabIndex);
@@ -52,12 +65,37 @@ export function TabsProvider({children}){
 			setId(cookieObject.id);
 			newNodeId.current = cookieObject.nodeId;
 		}
-    }, [])
+	}, []);
+
+	function downloadFlow() {
+		const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
+			JSON.stringify(flows[tabIndex])
+		)}`;
+		const link = document.createElement("a");
+		link.href = jsonString;
+		link.download = `${flows[tabIndex].name}.json`;
+		link.click();
+	}
+	
+	function uploadFlow() {
+		const input = document.createElement("input");
+		input.type = "file";
+		input.onchange = (e: Event) => {
+			if ((e.target as HTMLInputElement).files[0].type === "application/json") {
+				const file = (e.target as HTMLInputElement).files[0];
+				file.text().then((text) => {
+                    console.log(JSON.parse(text),"json from upload")
+					addFlow(JSON.parse(text));
+				});
+			}
+		};
+		input.click();
+	}
 
 	function removeFlow(id: string) {
-        setFlows(prevState=>{
+		setFlows((prevState) => {
 			const newFlows = [...prevState];
-            const index = newFlows.findIndex(flow=>flow.id===id);
+			const index = newFlows.findIndex((flow) => flow.id === id);
 			if (index >= 0) {
 				if (index === tabIndex) {
 					setTabIndex(flows.length - 2);
@@ -65,38 +103,56 @@ export function TabsProvider({children}){
 				} else {
 					let flowId = flows[tabIndex].id;
 					newFlows.splice(index, 1);
-                    setTabIndex(newFlows.findIndex(flow=>flow.id === flowId));
+					setTabIndex(newFlows.findIndex((flow) => flow.id === flowId));
 				}
-                
 			}
 			return newFlows;
 		});
 	}
-    function addFlow(flowData?:flow) {
+	function addFlow(flow?: flow) {
-        const data = flowData?flowData:null
+		const data = flow?.data ? flow.data : null;
-        let newFlow: flow = {name: "flow"+id, id: id.toString(), data}
+		let newFlow: flow = {
+			name: flow ? flow.name : "flow" + id,
+			id: id.toString(),
+			data,
+			chat: flow ? flow.chat : [],
+		};
 		setId((old) => old + 1);
-        setFlows(prevState => {
+		setFlows((prevState) => {
 			const newFlows = [...prevState, newFlow];
 			return newFlows;
 		});
 		setTabIndex(flows.length);
 	}
 	function updateFlow(newFlow: flow) {
-        setFlows(prevState=>{
+		console.log(newFlow);
+		setFlows((prevState) => {
 			const newFlows = [...prevState];
-            const index = newFlows.findIndex(flow=>flow.id===newFlow.id)
+			const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
 			if (index !== -1) {
-                newFlows[index].data = newFlow.data
+				newFlows[index].data = newFlow.data;
-                newFlows[index].name = newFlow.name
+				newFlows[index].name = newFlow.name;
+				newFlows[index].chat = newFlow.chat;
 			}
 			return newFlows;
 		});
 	}
 
 	return (
-        <TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow}}>
+		<TabsContext.Provider
+			value={{
+				tabIndex,
+				setTabIndex,
+				flows,
+				incrementNodeId,
+				removeFlow,
+				addFlow,
+				updateFlow,
+				downloadFlow,
+				uploadFlow,
+			}}
+		>
 			{children}
 		</TabsContext.Provider>
-    )
+	);
 }

space_flow/src/contexts/typesContext.tsx

@@ -1,15 +1,14 @@
-import { ReactEventHandler, createContext, useState } from "react";
+import { createContext, useState } from "react";
 import { ReactFlowInstance } from "reactflow";
 
-type typesContextType=
+//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 = {
 	reactFlowInstance: null,
@@ -17,7 +16,7 @@ const initialValue= {
 	deleteNode: () => {},
 	types: {},
 	setTypes: () => {},
-}
+};
 
 export const typesContext = createContext<typesContextType>(initialValue);
 
@@ -30,8 +29,16 @@ export function TypesProvider({children}){
 		);
 	}
 	return (
-        <typesContext.Provider value={{ types, setTypes, reactFlowInstance, setReactFlowInstance, deleteNode}}>
+		<typesContext.Provider
+			value={{
+				types,
+				setTypes,
+				reactFlowInstance,
+				setReactFlowInstance,
+				deleteNode,
+			}}
+		>
 			{children}
 		</typesContext.Provider>
-    )
+	);
 }

space_flow/src/entities/sidebarNav.ts

@@ -10,9 +10,9 @@ import {
 
 export const sidebarNavigation = [
   { name: 'Home', href: '/', icon: HomeIcon, current: true },
-  { name: 'Table', href: '/table/', icon: TableCellsIcon, current: false },
+  // { name: 'Table', href: '/table/', icon: TableCellsIcon, current: false },
-  //{ name: 'Train', href: '#', icon: BoltIcon, current: false },
+  // //{ name: 'Train', href: '#', icon: BoltIcon, current: false },
-  //{ name: 'Model Details', href: '#', icon: LightBulbIcon, current: false },
+  // //{ name: 'Model Details', href: '#', icon: LightBulbIcon, current: false },
-  //{ name: 'Deploy', href: '#', icon: RocketLaunchIcon, current: false },
+  // //{ name: 'Deploy', href: '#', icon: RocketLaunchIcon, current: false },
-  { name: 'Settings', href: '/settings/', icon: Cog6ToothIcon, current: false },
+  // { name: 'Settings', href: '/settings/', icon: Cog6ToothIcon, current: false },
 ]

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

@@ -49,7 +49,7 @@ export default function ExtraSidebar() {
   }
 
   return (
-    <div className="mt-4">
+    <div className="mt-4 w-full">
       {Object.keys(data).map((d, i) => (
         <DisclosureComponent
           key={i}

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

@@ -1,3 +1,4 @@
+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";
@@ -5,7 +6,8 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 var _ = require("lodash");
 
 export default function TabComponent({ selected, flow, onClick }) {
-  const { removeFlow, updateFlow,flows } = useContext(TabsContext);
+	const { removeFlow, updateFlow, flows, downloadFlow } =
+		useContext(TabsContext);
 	const [isRename, setIsRename] = useState(false);
 	const [value, setValue] = useState("");
 	return (
@@ -46,6 +48,7 @@ export default function TabComponent({ selected, flow, onClick }) {
 								}}
 							/>
 						) : (
+							<div className="flex items-center gap-2">
 								<span
 									className="text-left truncate"
 									onDoubleClick={() => {
@@ -55,13 +58,20 @@ export default function TabComponent({ selected, flow, onClick }) {
 								>
 									{flow.name}
 								</span>
+								{/* <ArrowDownTrayIcon
+									onClick={() => downloadFlow()}
+									className="w-4 h-4 hover:text-blue-500 cursor-pointer"
+								/> */}
+							</div>
 						)}
 						<button
 							onClick={() => {
 								removeFlow(flow.id);
 							}}
 						>
-              {flows.length>1&& <XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />}
+							{flows.length > 1 && (
+								<XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />
+							)}
 						</button>
 					</div>
 				)

space_flow/src/pages/FlowPage/index.tsx

@@ -7,6 +7,7 @@ import ReactFlow, {
 	useNodesState,
 	ReactFlowProvider,
 	useReactFlow,
+	ControlButton,
 } from "reactflow";
 import { locationContext } from "../../contexts/locationContext";
 import ExtraSidebar from "./components/extraSidebarComponent";
@@ -20,6 +21,10 @@ import BooleanNode from "../../CustomNodes/BooleanNode";
 import { alertContext } from "../../contexts/alertContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
+import {
+	ArrowDownTrayIcon,
+	ArrowUpTrayIcon,
+} from "@heroicons/react/24/outline";
 
 const nodeTypes = {
 	genericNode: GenericNode,
@@ -32,14 +37,15 @@ const nodeTypes = {
 var _ = require("lodash");
 
 export default function FlowPage({ flow }) {
-  let { updateFlow, incrementNodeId } = useContext(TabsContext);
+	let { updateFlow, incrementNodeId, downloadFlow, uploadFlow } =
+		useContext(TabsContext);
 	const { types, reactFlowInstance, setReactFlowInstance } =
 		useContext(typesContext);
 	const reactFlowWrapper = useRef(null);
 
 	function getId() {
-    return `dndnode_}`+incrementNodeId();
+		return `dndnode_` + incrementNodeId();
-  };
+	}
 
 	const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
 	const { setErrorData } = useContext(alertContext);
@@ -50,7 +56,7 @@ export default function FlowPage({ flow }) {
 	const [edges, setEdges, onEdgesChange] = useEdgesState(
 		flow.data?.edges ?? []
 	);
-  const {setViewport} = useReactFlow()
+	const { setViewport } = useReactFlow();
 
 	useEffect(() => {
 		if (reactFlowInstance && flow) {
@@ -63,9 +69,7 @@ export default function FlowPage({ flow }) {
 		setNodes(flow?.data?.nodes ?? []);
 		setEdges(flow?.data?.edges ?? []);
 		if (reactFlowInstance) {
-      setViewport(
+			setViewport(flow?.data?.viewport ?? { x: 1, y: 0, zoom: 1 });
-        flow?.data?.viewport ?? { x: 1, y: 0, zoom: 1 }
-      );
 		}
 	}, [flow, reactFlowInstance, setEdges, setNodes]);
 
@@ -171,9 +175,23 @@ export default function FlowPage({ flow }) {
 						onDrop={onDrop}
 					>
 						<Background />
-            <Controls></Controls>
+						<Controls>
+							<ControlButton
+								className="text-black hover:text-blue-500"
+								onClick={() => uploadFlow()}
+							>
+								<ArrowUpTrayIcon />
+							</ControlButton>
+
+							<ControlButton
+								className="text-black hover:text-blue-500"
+								onClick={() => downloadFlow()}
+							>
+								<ArrowDownTrayIcon />
+							</ControlButton>
+						</Controls>
 					</ReactFlow>
-          <Chat reactFlowInstance={reactFlowInstance} />
+					<Chat flow={flow} reactFlowInstance={reactFlowInstance} />
 				</>
 			) : (
 				<></>

space_flow/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

space_flow/src/setupTests.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';