From 1dea005599e0e8625dce859e31163299e93ad339 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 24 Mar 2023 14:24:49 -0300
Subject: [PATCH 01/14] import modal created

---
 .../modals/importModal/buttonBox/index.tsx    |  45 +++++++
 src/frontend/src/modals/importModal/index.tsx | 118 ++++++++++++++++++
 .../components/tabsManagerComponent/index.tsx |  19 ++-
 src/frontend/src/utils.ts                     |   1 +
 4 files changed, 180 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/src/modals/importModal/buttonBox/index.tsx
 create mode 100644 src/frontend/src/modals/importModal/index.tsx

diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
new file mode 100644
index 00000000000..38d2e84bfb5
--- /dev/null
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react";
+import { DocumentDuplicateIcon } from "@heroicons/react/solid";
+import { classNames } from "../../../utils";
+
+export default function ButtonBox({
+	onClick,
+	title,
+	description,
+	icon,
+	bgColor,
+	textColor,
+}: {
+	onClick: () => void;
+	title: string;
+	description: string;
+	icon: ReactNode;
+	bgColor: string;
+	textColor: string;
+}) {
+	return (
+		<button onClick={onClick}>
+			<div
+				className={classNames(
+					"col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg text-center shadow border border-gray-300 hover:shadow-lg transform hover:scale-105",
+					bgColor
+				)}
+			>
+				<div className="flex flex-1 flex-col p-8">
+					<div className="mx-auto flex items-center justify-center h-20 w-20 bg-white/30 rounded-full">
+						<div className="mx-auto flex items-center justify-center h-16 w-16 bg-white rounded-full">
+                            <div className={textColor}>
+                                {icon}
+                            </div>
+						</div>
+					</div>
+					<h3 className="mt-6 text-lg font-semibold text-white">{title}</h3>
+					<div className="mt-1 flex flex-grow flex-col justify-between">
+						<dt className="sr-only">{title}</dt>
+						<dd className="text-sm text-gray-100">{description}</dd>
+					</div>
+				</div>
+			</div>
+		</button>
+	);
+}
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
new file mode 100644
index 00000000000..70f65dd6c6b
--- /dev/null
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -0,0 +1,118 @@
+import { Dialog, Transition } from "@headlessui/react";
+import {
+	XMarkIcon,
+	ArrowDownTrayIcon,
+	DocumentDuplicateIcon,
+    ComputerDesktopIcon,
+} from "@heroicons/react/24/outline";
+import { Fragment, useContext, useRef, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
+import ButtonBox from "./buttonBox";
+
+export default function ImportModal() {
+	const [open, setOpen] = useState(true);
+	const { closePopUp } = useContext(PopUpContext);
+	const ref = useRef();
+	function setModalOpen(x: boolean) {
+		setOpen(x);
+		if (x === false) {
+			setTimeout(() => {
+				closePopUp();
+			}, 300);
+		}
+	}
+	return (
+		<Transition.Root show={open} appear={true} as={Fragment}>
+			<Dialog
+				as="div"
+				className="relative z-10"
+				onClose={setModalOpen}
+				initialFocus={ref}
+			>
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0"
+				>
+					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+				</Transition.Child>
+
+				<div className="fixed inset-0 z-10 overflow-y-auto">
+					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+							enterTo="opacity-100 translate-y-0 sm:scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+						>
+							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+									<button
+										type="button"
+										className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+										onClick={() => {
+											setModalOpen(false);
+										}}
+									>
+										<span className="sr-only">Close</span>
+										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
+									</button>
+								</div>
+								<div className="h-full w-full flex flex-col justify-center items-center">
+									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+											<ArrowDownTrayIcon
+												className="h-6 w-6 text-blue-600"
+												aria-hidden="true"
+											/>
+										</div>
+										<div className="mt-4 text-center sm:ml-4 sm:text-left">
+											<Dialog.Title
+												as="h3"
+												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+											>
+												Import from
+											</Dialog.Title>
+										</div>
+									</div>
+									<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+										<div className="flex h-full w-full justify-evenly items-center">
+											<ButtonBox
+												bgColor="bg-blue-500"
+												description="Prebuilt Examples"
+												icon={
+													<DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
+												}
+												onClick={() => console.log("sdsds")}
+												textColor="text-blue-500"
+												title="Examples"
+											></ButtonBox>
+											<ButtonBox
+												bgColor="bg-blue-500"
+												description="Import from Local"
+												icon={
+													<ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
+												}
+												onClick={() => console.log("sdsds")}
+												textColor="text-blue-500"
+												title="Local file"
+											></ButtonBox>
+										</div>
+									</div>
+
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition.Root>
+	);
+}
diff --git a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
index 79240f72085..f40184d93b9 100644
--- a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
@@ -14,9 +14,11 @@ import {
 import { PopUpContext } from "../../../../contexts/popUpContext";
 import AlertDropdown from "../../../../alerts/alertDropDown";
 import { alertContext } from "../../../../contexts/alertContext";
+import ImportModal from "../../../../modals/importModal";
 
 export default function TabsManagerComponent() {
-	const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } = useContext(TabsContext);
+	const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } =
+		useContext(TabsContext);
 	const { openPopUp } = useContext(PopUpContext);
 	const AlertWidth = 256;
 	const { dark, setDark } = useContext(darkContext);
@@ -50,10 +52,21 @@ export default function TabsManagerComponent() {
 					flow={null}
 				/>
 				<div className="ml-auto mr-2 flex gap-3">
-					<button onClick={() => uploadFlow()} className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-400 hover:text-gray-500">
+					<button
+						onClick={() =>
+							openPopUp(
+								<ImportModal
+								/>
+							)
+						}
+						className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-400 hover:text-gray-500"
+					>
 						Import <ArrowUpTrayIcon className="w-5 h-5" />
 					</button>
-					<button onClick={() => downloadFlow()} className="flex items-center gap-1 mr-2 text-sm text-gray-400 hover:text-gray-500">
+					<button
+						onClick={() => downloadFlow()}
+						className="flex items-center gap-1 mr-2 text-sm text-gray-400 hover:text-gray-500"
+					>
 						Export <ArrowDownTrayIcon className="h-5 w-5" />
 					</button>
 					<button
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index c95f17834cb..0088a564156 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -341,3 +341,4 @@ export function isValidConnection(
   }
   return false;
 }
+

From 647d7d2759532cbfd8d6da7f71f0f66644376c2e Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 24 Mar 2023 14:31:40 -0300
Subject: [PATCH 02/14] upload flow function inside modal

---
 src/frontend/src/modals/importModal/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 70f65dd6c6b..2458da3b96f 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -7,12 +7,14 @@ import {
 } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
+import { TabsContext } from "../../contexts/tabsContext";
 import ButtonBox from "./buttonBox";
 
 export default function ImportModal() {
 	const [open, setOpen] = useState(true);
 	const { closePopUp } = useContext(PopUpContext);
 	const ref = useRef();
+    const {uploadFlow} = useContext(TabsContext)
 	function setModalOpen(x: boolean) {
 		setOpen(x);
 		if (x === false) {
@@ -100,7 +102,7 @@ export default function ImportModal() {
 												icon={
 													<ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
 												}
-												onClick={() => console.log("sdsds")}
+												onClick={() => {uploadFlow()}}
 												textColor="text-blue-500"
 												title="Local file"
 											></ButtonBox>

From 977b4c0c9a69c2cf9617274e533c8c7b7a3b8a20 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 24 Mar 2023 14:38:39 -0300
Subject: [PATCH 03/14] change the context wrapping order, this is a major
 change, nothing looks broken

---
 src/frontend/src/contexts/index.tsx           | 4 +++-
 src/frontend/src/modals/importModal/index.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx
index 6bb581f449c..310606ea546 100644
--- a/src/frontend/src/contexts/index.tsx
+++ b/src/frontend/src/contexts/index.tsx
@@ -13,11 +13,13 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
 			<DarkProvider>
 				<LocationProvider>
 					<AlertProvider>
+					<TabsProvider>
 						<PopUpProvider>
 							<TypesProvider>
-								<TabsProvider>{children}</TabsProvider>
+								{children}
 							</TypesProvider>
 						</PopUpProvider>
+						</TabsProvider>
 					</AlertProvider>
 				</LocationProvider>
 			</DarkProvider>
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 2458da3b96f..67b66bb7a2f 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -102,7 +102,7 @@ export default function ImportModal() {
 												icon={
 													<ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
 												}
-												onClick={() => {uploadFlow()}}
+												onClick={() => uploadFlow()}
 												textColor="text-blue-500"
 												title="Local file"
 											></ButtonBox>

From a5774d23a978d5405cef2909a61357b4bc08e732 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 24 Mar 2023 14:42:11 -0300
Subject: [PATCH 04/14] upload from file working

---
 src/frontend/src/modals/importModal/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 67b66bb7a2f..c069a437503 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -102,7 +102,7 @@ export default function ImportModal() {
 												icon={
 													<ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
 												}
-												onClick={() => uploadFlow()}
+												onClick={() => {uploadFlow();setModalOpen(false)}}
 												textColor="text-blue-500"
 												title="Local file"
 											></ButtonBox>

From 2224d219be235e9093eff4cd5a890dfe8a6b752b Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 24 Mar 2023 15:34:03 -0300
Subject: [PATCH 05/14] add descriptions to flow

---
 src/frontend/src/components/chatComponent/index.tsx | 2 +-
 src/frontend/src/contexts/tabsContext.tsx           | 3 +++
 src/frontend/src/types/api/index.ts                 | 3 +++
 src/frontend/src/types/flow/index.ts                | 1 +
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 27bf220f964..037c9cdafbb 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -97,7 +97,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
 				setChatValue("");
 				addChatHistory(message, true);
 
-				sendAll({ ...reactFlowInstance.toObject(), message, chatHistory})
+				sendAll({ ...reactFlowInstance.toObject(), message, chatHistory,name:flow.name,description:flow.description})
 					.then((r) => {
 						addChatHistory(r.data.result, false, r.data.thought);
 						setLockChat(false);
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 1bab447b83b..fa52a695510 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -128,9 +128,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 	function addFlow(flow?: FlowType) {
 		// Get data from the flow or set it to null if there's no flow provided.
 		const data = flow?.data ? flow.data : null;
+		const description = flow?.description?flow.description:""
 
 		// Create a new flow with a default name if no flow is provided.
 		let newFlow: FlowType = {
+			description,
 			name: "New Flow",
 			id: id.toString(),
 			data,
@@ -158,6 +160,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 			const newFlows = [...prevState];
 			const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
 			if (index !== -1) {
+				newFlows[index].description = newFlow.description??""
 				newFlows[index].data = newFlow.data;
 				newFlows[index].name = newFlow.name;
 				newFlows[index].chat = newFlow.chat;
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index d0f8f3f871a..f85605ce47e 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -9,7 +9,10 @@ export type TemplateVariableType = {type:string,required:boolean,placeholder?:st
 export type sendAllProps={
     nodes: Node[];
     edges: Edge[];
+    name:string,
+    description:string;
     viewport: Viewport;
     message:string;
+
     chatHistory:{message:string,isSend:boolean}[],
 };
\ No newline at end of file
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index ba12291f1fc..50b0cab7acc 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/src/frontend/src/types/flow/index.ts
@@ -7,6 +7,7 @@ export type FlowType = {
 	id: string;
 	data: ReactFlowJsonObject;
 	chat: Array<ChatMessageType>;
+	description:string;
 };
 export type NodeType = {id:string,type:string,position:XYPosition,data:NodeDataType}
 export type NodeDataType = {type:string,node?:APIClassType,id:string,value:any}
\ No newline at end of file

From 1feb50e5a8e577ff21ddc548e4b9c64d83b50b60 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 24 Mar 2023 17:31:01 -0300
Subject: [PATCH 06/14] export flow improved, auto-remove api keys and added
 description when export flow

---
 src/frontend/package-lock.json                |   1 +
 src/frontend/package.json                     |   3 +-
 src/frontend/src/contexts/tabsContext.tsx     |   8 +-
 src/frontend/src/modals/exportModal/index.tsx | 167 ++++++++++++++++++
 src/frontend/src/modals/importModal/index.tsx |   3 +-
 .../components/tabsManagerComponent/index.tsx |   3 +-
 src/frontend/src/types/tabs/index.ts          |   2 +-
 src/frontend/src/utils.ts                     |  15 ++
 8 files changed, 194 insertions(+), 8 deletions(-)
 create mode 100644 src/frontend/src/modals/exportModal/index.tsx

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index dffaa46656a..ddb3a3a0d2f 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -22,6 +22,7 @@
                 "@types/react": "^18.0.27",
                 "@types/react-dom": "^18.0.10",
                 "axios": "^1.3.2",
+                "lodash": "^4.17.21",
                 "react": "^18.2.0",
                 "react-cookie": "^4.1.1",
                 "react-dom": "^18.2.0",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 9afe85ebca1..15aa1e48bdf 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -17,6 +17,7 @@
         "@types/react": "^18.0.27",
         "@types/react-dom": "^18.0.10",
         "axios": "^1.3.2",
+        "lodash": "^4.17.21",
         "react": "^18.2.0",
         "react-cookie": "^4.1.1",
         "react-dom": "^18.2.0",
@@ -55,4 +56,4 @@
         ]
     },
     "proxy": "http://backend:7860"
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index fa52a695510..ae583344226 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -12,7 +12,7 @@ const TabsContextInitialValue: TabsContextType = {
 	addFlow: (flowData?: any) => {},
 	updateFlow: (newFlow: FlowType) => {},
 	incrementNodeId: () => 0,
-	downloadFlow: () => {},
+	downloadFlow: (flow:FlowType) => {},
 	uploadFlow: () => {},
 	lockChat: false,
 	setLockChat:(prevState:boolean)=>{}
@@ -58,10 +58,10 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 	/**
 	 * Downloads the current flow as a JSON file
 	 */
-	function downloadFlow() {
+	function downloadFlow(flow:FlowType) {
 		// create a data URI with the current flow data
 		const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-			JSON.stringify(flows[tabIndex])
+			JSON.stringify(flow)
 		)}`;
 
 		// create a link element and set its properties
@@ -71,7 +71,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
 		// simulate a click on the link element to trigger the download
 		link.click();
-		setNoticeData({title:"Warning: Critical data, including API keys, in JSON file. Keep secure and do not share."})
+		setNoticeData({title:"Warning: Critical data,JSON file may including API keys."})
 	}
 
 	/**
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
new file mode 100644
index 00000000000..50e16f403a5
--- /dev/null
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -0,0 +1,167 @@
+import { Dialog, Transition } from "@headlessui/react";
+import {
+	XMarkIcon,
+	ArrowDownTrayIcon,
+	DocumentDuplicateIcon,
+	ComputerDesktopIcon,
+} from "@heroicons/react/24/outline";
+import { Fragment, useContext, useRef, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { TabsContext } from "../../contexts/tabsContext";
+import { removeApiKeys } from "../../utils";
+
+export default function ExportModal() {
+	const [open, setOpen] = useState(true);
+	const { closePopUp } = useContext(PopUpContext);
+	const ref = useRef();
+	const { flows, tabIndex, updateFlow, downloadFlow } = useContext(TabsContext);
+	function setModalOpen(x: boolean) {
+		setOpen(x);
+		if (x === false) {
+			setTimeout(() => {
+				closePopUp();
+			}, 300);
+		}
+	}
+	const [checked,setChecked] = useState(true)
+	return (
+		<Transition.Root show={open} appear={true} as={Fragment}>
+			<Dialog
+				as="div"
+				className="relative z-10"
+				onClose={setModalOpen}
+				initialFocus={ref}
+			>
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0"
+				>
+					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+				</Transition.Child>
+
+				<div className="fixed inset-0 z-10 overflow-y-auto">
+					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+							enterTo="opacity-100 translate-y-0 sm:scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+						>
+							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+									<button
+										type="button"
+										className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+										onClick={() => {
+											setModalOpen(false);
+										}}
+									>
+										<span className="sr-only">Close</span>
+										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
+									</button>
+								</div>
+								<div className="h-full w-full flex flex-col justify-center items-center">
+									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+											<ArrowDownTrayIcon
+												className="h-6 w-6 text-blue-600"
+												aria-hidden="true"
+											/>
+										</div>
+										<div className="mt-4 text-center sm:ml-4 sm:text-left">
+											<Dialog.Title
+												as="h3"
+												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+											>
+												Export as
+											</Dialog.Title>
+										</div>
+									</div>
+									<div className="pt-16 flex flex-col items-start justify-start h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-16">
+										<div className="w-full">
+											<label
+												htmlFor="name"
+												className="block mb-2 font-medium text-gray-700 dark:text-white"
+											>
+												Name
+											</label>
+											<input
+												onChange={(event) => {
+													let newFlow = flows[tabIndex];
+													newFlow.name = event.target.value;
+													updateFlow(newFlow);
+												}}
+												type="text"
+												name="name"
+												value={flows[tabIndex].name ?? null}
+												placeholder="File name"
+												id="name"
+												className="focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+											/>
+										</div>
+										<div className="w-full">
+											<label
+												htmlFor="description"
+												className="block mb-2 font-medium text-gray-700 dark:text-white"
+											>
+												Description
+											</label>
+											<textarea
+												name="description"
+												id="description"
+												onChange={(event) => {
+													let newFlow = flows[tabIndex];
+													newFlow.description = event.target.value;
+													updateFlow(newFlow);
+												}}
+												value={flows[tabIndex].description ?? null}
+												placeholder="Flow description"
+												rows={3}
+												className=" focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+											></textarea>
+										</div>
+										<div>
+											<label htmlFor="checkbox" className="flex items-center">
+												<input
+													onChange={(event) => {
+                                                        setChecked(event.target.checked)
+													}}
+													checked={checked}
+													id="checkbox"
+													type="checkbox"
+													className="h-4 w-4 text-blue-600 border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+												/>
+												<span className="ml-2 font-medium text-gray-700 dark:text-white">
+													Save with my API keys
+												</span>
+											</label>
+										</div>
+										<div className="w-full flex justify-end">
+											<button
+												onClick={() => {
+                                                    if(checked) downloadFlow(flows[tabIndex]);
+                                                    else downloadFlow(removeApiKeys(flows[tabIndex]))
+												}}
+												className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+											>
+												Download Flow
+											</button>
+										</div>
+									</div>
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition.Root>
+	);
+}
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index c069a437503..f4c09df1b02 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -4,6 +4,7 @@ import {
 	ArrowDownTrayIcon,
 	DocumentDuplicateIcon,
     ComputerDesktopIcon,
+	ArrowUpTrayIcon,
 } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -70,7 +71,7 @@ export default function ImportModal() {
 								<div className="h-full w-full flex flex-col justify-center items-center">
 									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
 										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-											<ArrowDownTrayIcon
+											<ArrowUpTrayIcon
 												className="h-6 w-6 text-blue-600"
 												aria-hidden="true"
 											/>
diff --git a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
index f40184d93b9..71c964cbeb7 100644
--- a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
@@ -15,6 +15,7 @@ import { PopUpContext } from "../../../../contexts/popUpContext";
 import AlertDropdown from "../../../../alerts/alertDropDown";
 import { alertContext } from "../../../../contexts/alertContext";
 import ImportModal from "../../../../modals/importModal";
+import ExportModal from "../../../../modals/exportModal";
 
 export default function TabsManagerComponent() {
 	const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } =
@@ -64,7 +65,7 @@ export default function TabsManagerComponent() {
 						Import <ArrowUpTrayIcon className="w-5 h-5" />
 					</button>
 					<button
-						onClick={() => downloadFlow()}
+						onClick={() =>openPopUp(<ExportModal/>)}
 						className="flex items-center gap-1 mr-2 text-sm text-gray-400 hover:text-gray-500"
 					>
 						Export <ArrowDownTrayIcon className="h-5 w-5" />
diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts
index 7f38a0a20e7..df2d76206ab 100644
--- a/src/frontend/src/types/tabs/index.ts
+++ b/src/frontend/src/types/tabs/index.ts
@@ -8,7 +8,7 @@ export type TabsContextType = {
 	addFlow: (flowData?: any) => void;
 	updateFlow: (newFlow: FlowType) => void;
 	incrementNodeId: () => number;
-	downloadFlow: () => void;
+	downloadFlow: (flow:FlowType) => void;
 	uploadFlow: () => void;
 	lockChat:boolean,
 	setLockChat:(prevState:boolean)=>void
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 0088a564156..dc24f8dbe21 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -9,6 +9,8 @@ import {
   Bars3CenterLeftIcon,
 } from "@heroicons/react/24/outline";
 import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
+import { FlowType } from "./types/flow";
+var _ = require('lodash')
 
 export function classNames(...classes:Array<string>) {
   return classes.filter(Boolean).join(" ");
@@ -342,3 +344,16 @@ export function isValidConnection(
   return false;
 }
 
+export function removeApiKeys(flow:FlowType):FlowType{
+  let cleanFLow = _.cloneDeep(flow)
+  cleanFLow.data.nodes.forEach(node=>{
+    for(const key in node.data.node.template)
+    {
+      if(key.includes('api')){
+        console.log(node.data.node.template[key])
+        node.data.node.template[key].value = ''
+      }
+    }
+  })
+  return cleanFLow
+}
\ No newline at end of file

From 6fbda135ba288b573e14f6e7a02612e5ea06c8c6 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 24 Mar 2023 17:32:41 -0300
Subject: [PATCH 07/14] optional field alert

---
 src/frontend/src/modals/exportModal/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 50e16f403a5..fb1b9a233a8 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -112,7 +112,7 @@ export default function ExportModal() {
 												htmlFor="description"
 												className="block mb-2 font-medium text-gray-700 dark:text-white"
 											>
-												Description
+												Description <span className="text-gray-400 text-sm"> (optional)</span>
 											</label>
 											<textarea
 												name="description"

From e9367fa90ce5efd1e6a82788e6fb77c7b3af7d60 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 24 Mar 2023 17:44:36 -0300
Subject: [PATCH 08/14] blocked empty name

---
 src/frontend/src/modals/exportModal/index.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index fb1b9a233a8..7c09b6edad8 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -95,9 +95,11 @@ export default function ExportModal() {
 											</label>
 											<input
 												onChange={(event) => {
-													let newFlow = flows[tabIndex];
-													newFlow.name = event.target.value;
-													updateFlow(newFlow);
+                                                    if(event.target.value!=""){
+                                                        let newFlow = flows[tabIndex];
+                                                        newFlow.name = event.target.value;
+                                                        updateFlow(newFlow);
+                                                    }
 												}}
 												type="text"
 												name="name"

From 11c53d63388c44fa30aa6a68b60f9fd30c7e79f2 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 24 Mar 2023 17:46:06 -0300
Subject: [PATCH 09/14]  set alert error for empty name

---
 src/frontend/src/modals/exportModal/index.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 7c09b6edad8..c1da32946ed 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -6,6 +6,7 @@ import {
 	ComputerDesktopIcon,
 } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
+import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils";
@@ -14,6 +15,7 @@ export default function ExportModal() {
 	const [open, setOpen] = useState(true);
 	const { closePopUp } = useContext(PopUpContext);
 	const ref = useRef();
+    const {setErrorData}= useContext(alertContext)
 	const { flows, tabIndex, updateFlow, downloadFlow } = useContext(TabsContext);
 	function setModalOpen(x: boolean) {
 		setOpen(x);
@@ -99,6 +101,9 @@ export default function ExportModal() {
                                                         let newFlow = flows[tabIndex];
                                                         newFlow.name = event.target.value;
                                                         updateFlow(newFlow);
+                                                    }
+                                                    else{
+                                                        setErrorData({title:"Flow name can't be empty"})
                                                     }
 												}}
 												type="text"

From 5f7be7d1a5090a95c1e6bb2cb5b8ef978fab619e Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 24 Mar 2023 19:40:25 -0300
Subject: [PATCH 10/14] error handling with hard reset

---
 src/frontend/package-lock.json                |  12 ++
 src/frontend/package.json                     |   1 +
 src/frontend/src/App.tsx                      | 139 +++++++++++-------
 .../components/CrashErrorComponent/index.tsx  |  31 ++++
 src/frontend/src/contexts/tabsContext.tsx     |   8 +-
 src/frontend/src/index.tsx                    |  27 ++--
 .../modals/importModal/buttonBox/index.tsx    |   6 +-
 src/frontend/src/modals/importModal/index.tsx |   5 +-
 src/frontend/src/types/tabs/index.ts          |   5 +-
 9 files changed, 163 insertions(+), 71 deletions(-)
 create mode 100644 src/frontend/src/components/CrashErrorComponent/index.tsx

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index ddb3a3a0d2f..f0a40a452d7 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -26,6 +26,7 @@
                 "react": "^18.2.0",
                 "react-cookie": "^4.1.1",
                 "react-dom": "^18.2.0",
+                "react-error-boundary": "^4.0.2",
                 "react-icons": "^4.7.1",
                 "react-laag": "^2.0.5",
                 "react-router-dom": "^6.8.1",
@@ -14960,6 +14961,17 @@
                 "react": "^18.2.0"
             }
         },
+        "node_modules/react-error-boundary": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.2.tgz",
+            "integrity": "sha512-/h21OS80hQ1m/s5UVOp1JKkC8XmUo0rOTRUliGSmWtvswkbbijuQ074K0QLEHwxwwesTt7ksR74/9EHImqWo+A==",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5"
+            },
+            "peerDependencies": {
+                "react": ">=16.13.1"
+            }
+        },
         "node_modules/react-error-overlay": {
             "version": "6.0.11",
             "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 15aa1e48bdf..312e52051ec 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -21,6 +21,7 @@
         "react": "^18.2.0",
         "react-cookie": "^4.1.1",
         "react-dom": "^18.2.0",
+        "react-error-boundary": "^4.0.2",
         "react-icons": "^4.7.1",
         "react-laag": "^2.0.5",
         "react-router-dom": "^6.8.1",
diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index f0944be3fc9..0e5f1887ddb 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -9,6 +9,9 @@ import ExtraSidebar from "./components/ExtraSidebarComponent";
 import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
 import TabsManagerComponent from "./pages/FlowPage/components/tabsManagerComponent";
+import { ErrorBoundary } from "react-error-boundary";
+import CrashErrorComponent from "./components/CrashErrorComponent";
+import { TabsContext } from "./contexts/tabsContext";
 
 export default function App() {
 	var _ = require("lodash");
@@ -21,7 +24,7 @@ export default function App() {
 		setShowSideBar(true);
 		setIsStackedOpen(true);
 	}, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]);
-
+	const {hardReset} = useContext(TabsContext)
 	const {
 		errorData,
 		errorOpen,
@@ -34,45 +37,62 @@ export default function App() {
 		setSuccessOpen,
 	} = useContext(alertContext);
 
-// Initialize state variable for the list of alerts
-const [alertsList, setAlertsList] = useState<Array<{type:string,data:{title:string,list?:Array<string>,link?:string},id:string}>>([]);
+	// Initialize state variable for the list of alerts
+	const [alertsList, setAlertsList] = useState<
+		Array<{
+			type: string;
+			data: { title: string; list?: Array<string>; link?: string };
+			id: string;
+		}>
+	>([]);
 
-// Use effect hook to update alertsList when a new alert is added
-useEffect(() => {
-	// If there is an error alert open with data, add it to the alertsList
-	if (errorOpen && errorData) {
-		setErrorOpen(false);
-		setAlertsList((old) => {
-			let newAlertsList = [
-				...old,
-				{ type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() },
-			];
-			return newAlertsList;
-		});
-	}
-	// If there is a notice alert open with data, add it to the alertsList
-	else if (noticeOpen && noticeData) {
-		setNoticeOpen(false);
-		setAlertsList((old) => {
-			let newAlertsList = [
-				...old,
-				{ type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() },
-			];
-			return newAlertsList;
-		});
-	}
-	// If there is a success alert open with data, add it to the alertsList
-	else if (successOpen && successData) {
-		setSuccessOpen(false);
-		setAlertsList((old) => {
-			let newAlertsList = [
-				...old,
-				{ type: "success", data: _.cloneDeep(successData), id: _.uniqueId() },
-			];
-			return newAlertsList;
-		});
-	}
-}, [_, errorData, errorOpen, noticeData, noticeOpen, setErrorOpen, setNoticeOpen, setSuccessOpen, successData, successOpen]);
+	// Use effect hook to update alertsList when a new alert is added
+	useEffect(() => {
+		// If there is an error alert open with data, add it to the alertsList
+		if (errorOpen && errorData) {
+			setErrorOpen(false);
+			setAlertsList((old) => {
+				let newAlertsList = [
+					...old,
+					{ type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() },
+				];
+				return newAlertsList;
+			});
+		}
+		// If there is a notice alert open with data, add it to the alertsList
+		else if (noticeOpen && noticeData) {
+			setNoticeOpen(false);
+			setAlertsList((old) => {
+				let newAlertsList = [
+					...old,
+					{ type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() },
+				];
+				return newAlertsList;
+			});
+		}
+		// If there is a success alert open with data, add it to the alertsList
+		else if (successOpen && successData) {
+			setSuccessOpen(false);
+			setAlertsList((old) => {
+				let newAlertsList = [
+					...old,
+					{ type: "success", data: _.cloneDeep(successData), id: _.uniqueId() },
+				];
+				return newAlertsList;
+			});
+		}
+	}, [
+		_,
+		errorData,
+		errorOpen,
+		noticeData,
+		noticeOpen,
+		setErrorOpen,
+		setNoticeOpen,
+		setSuccessOpen,
+		successData,
+		successOpen,
+	]);
 
 	const removeAlert = (id: string) => {
 		setAlertsList((prevAlertsList) =>
@@ -83,18 +103,27 @@ useEffect(() => {
 	return (
 		//need parent component with width and height
 		<div className="h-full flex flex-col">
-			<div className="flex grow-0 shrink basis-auto">
-			</div>
-			<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
-				<ExtraSidebar />
-				{/* Main area */}
-				<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
-					{/* Primary column */}
-					<div className="w-full h-full">
-						<TabsManagerComponent></TabsManagerComponent>
-					</div>
-				</main>
-			</div>
+			<div className="flex grow-0 shrink basis-auto"></div>
+			<ErrorBoundary
+				onReset={() => {
+					window.localStorage.removeItem("tabsData");
+					window.localStorage.clear();
+					hardReset()
+					window.location.href = window.location.href;
+				}}
+				FallbackComponent={CrashErrorComponent}
+			>
+				<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
+					<ExtraSidebar />
+					{/* Main area */}
+					<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
+						{/* Primary column */}
+						<div className="w-full h-full">
+							<TabsManagerComponent></TabsManagerComponent>
+						</div>
+					</main>
+				</div>
+			</ErrorBoundary>
 			<div></div>
 			<div className="flex z-40 flex-col-reverse fixed bottom-5 left-5">
 				{alertsList.map((alert) => (
@@ -126,7 +155,13 @@ useEffect(() => {
 					</div>
 				))}
 			</div>
-			<a target={"_blank"} href="https://logspace.ai/" className="absolute bottom-1 left-1 text-gray-500 text-xs cursor-pointer font-sans tracking-wide">Created by Logspace</a>
+			<a
+				target={"_blank"}
+				href="https://logspace.ai/"
+				className="absolute bottom-1 left-1 text-gray-500 text-xs cursor-pointer font-sans tracking-wide"
+			>
+				Created by Logspace
+			</a>
 		</div>
 	);
 }
diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/CrashErrorComponent/index.tsx
new file mode 100644
index 00000000000..7864e6d6587
--- /dev/null
+++ b/src/frontend/src/components/CrashErrorComponent/index.tsx
@@ -0,0 +1,31 @@
+export default function CrashErrorComponent({ error, resetErrorBoundary }) {
+	return (
+		<div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 z-50">
+			<div className="bg-white max-w-4xl h-1/3 min-h-fit rounded-lg shadow-lg p-8 text-start flex flex-col justify-evenly">
+				<h1 className="text-red-500 text-3xl mb-4">Oops! An unknown error has occurred.</h1>
+				<p className="text-gray-700 mb-4 text-xl">
+					Please click the 'Reset Application' button
+					to restore the application's state. If the error persists, please
+					create an issue on our GitHub page. We apologize for any inconvenience
+					this may have caused.   
+				</p>
+				<div className="flex justify-center">
+					<button
+						onClick={resetErrorBoundary}
+						className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4"
+					>
+						Reset Application
+					</button>
+					<a
+						href="https://github.com/logspace-ai/langflow/issues/new"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
+					>
+						Create Issue
+					</a>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index ae583344226..10c0b943e74 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -15,7 +15,8 @@ const TabsContextInitialValue: TabsContextType = {
 	downloadFlow: (flow:FlowType) => {},
 	uploadFlow: () => {},
 	lockChat: false,
-	setLockChat:(prevState:boolean)=>{}
+	setLockChat:(prevState:boolean)=>{},
+	hardReset:()=>{}
 };
 
 export const TabsContext = createContext<TabsContextType>(
@@ -54,6 +55,10 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 			newNodeId.current = cookieObject.nodeId;
 		}
 	}, []);
+	function hardReset(){
+		newNodeId.current=0;
+		setTabIndex(0);setFlows([]);setId(0);
+	}
 
 	/**
 	 * Downloads the current flow as a JSON file
@@ -172,6 +177,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 	return (
 		<TabsContext.Provider
 			value={{
+				hardReset,
 				lockChat,
 				setLockChat,
 				tabIndex,
diff --git a/src/frontend/src/index.tsx b/src/frontend/src/index.tsx
index 72d98cad629..e92450318da 100644
--- a/src/frontend/src/index.tsx
+++ b/src/frontend/src/index.tsx
@@ -1,18 +1,21 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import { BrowserRouter } from 'react-router-dom';
-import ContextWrapper from './contexts';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter } from "react-router-dom";
+import ContextWrapper from "./contexts";
+import CrashErrorComponent from "./components/CrashErrorComponent";
+import { ErrorBoundary } from "react-error-boundary";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+	document.getElementById("root") as HTMLElement
 );
 root.render(
-    <ContextWrapper>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </ContextWrapper>
+	<ContextWrapper>
+		<BrowserRouter>
+
+				<App />
+		</BrowserRouter>
+	</ContextWrapper>
 );
 reportWebVitals();
diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index 38d2e84bfb5..084981adc8a 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -9,6 +9,7 @@ export default function ButtonBox({
 	icon,
 	bgColor,
 	textColor,
+	deactivate
 }: {
 	onClick: () => void;
 	title: string;
@@ -16,9 +17,10 @@ export default function ButtonBox({
 	icon: ReactNode;
 	bgColor: string;
 	textColor: string;
+	deactivate?:boolean;
 }) {
 	return (
-		<button onClick={onClick}>
+		<button disabled={deactivate} onClick={onClick}>
 			<div
 				className={classNames(
 					"col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg text-center shadow border border-gray-300 hover:shadow-lg transform hover:scale-105",
@@ -36,7 +38,7 @@ export default function ButtonBox({
 					<h3 className="mt-6 text-lg font-semibold text-white">{title}</h3>
 					<div className="mt-1 flex flex-grow flex-col justify-between">
 						<dt className="sr-only">{title}</dt>
-						<dd className="text-sm text-gray-100">{description}</dd>
+						<dd className="text-sm text-gray-100">{deactivate? "cooming soon":description}</dd>
 					</div>
 				</div>
 			</div>
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index f4c09df1b02..c471f3955a2 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -88,13 +88,14 @@ export default function ImportModal() {
 									<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
 										<div className="flex h-full w-full justify-evenly items-center">
 											<ButtonBox
-												bgColor="bg-blue-500"
+												deactivate
+												bgColor="bg-slate-400"
 												description="Prebuilt Examples"
 												icon={
 													<DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
 												}
 												onClick={() => console.log("sdsds")}
-												textColor="text-blue-500"
+												textColor="text-slate-400"
 												title="Examples"
 											></ButtonBox>
 											<ButtonBox
diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts
index df2d76206ab..e872a3f587d 100644
--- a/src/frontend/src/types/tabs/index.ts
+++ b/src/frontend/src/types/tabs/index.ts
@@ -10,6 +10,7 @@ export type TabsContextType = {
 	incrementNodeId: () => number;
 	downloadFlow: (flow:FlowType) => void;
 	uploadFlow: () => void;
-	lockChat:boolean,
-	setLockChat:(prevState:boolean)=>void
+	lockChat:boolean;
+	setLockChat:(prevState:boolean)=>void;
+	hardReset:()=>void;
 };
\ No newline at end of file

From 1ec23f8a4d340fb74de1664e4eab37687765f7d1 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 24 Mar 2023 19:45:14 -0300
Subject: [PATCH 11/14] error handling for unexistent components import

---
 src/frontend/src/CustomNodes/GenericNode/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index acbdde47781..d7e8a71bb71 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -15,7 +15,9 @@ import { NodeDataType} from "../../types/flow";
 export default function GenericNode({ data, selected}:{data:NodeDataType,selected:boolean}) {
   const {types, deleteNode} = useContext(typesContext);
   const Icon = nodeIcons[types[data.type]];
-
+  if(!Icon){
+    return
+  }
 
   return (
     <div className={ classNames(selected?"border border-blue-500":"border dark:border-gray-700","prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center")}>

From f05e9f00c29385c004d84e33c40b1f04080104c4 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 27 Mar 2023 16:51:22 -0300
Subject: [PATCH 12/14] show erro when node can't be rendered by reactFlow

---
 .../src/CustomNodes/GenericNode/index.tsx     | 195 ++++++++++--------
 1 file changed, 110 insertions(+), 85 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index d7e8a71bb71..990fd458b25 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -1,94 +1,119 @@
+import { TrashIcon } from "@heroicons/react/24/outline";
 import {
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-import {
-  classNames,
-  nodeColors,
-  nodeIcons,
-  snakeToNormalCase,
+	classNames,
+	nodeColors,
+	nodeIcons,
+	snakeToNormalCase,
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
 import { typesContext } from "../../contexts/typesContext";
-import { useContext } from "react";
-import { NodeDataType} from "../../types/flow";
+import { useContext, useRef } from "react";
+import { NodeDataType } from "../../types/flow";
+import { alertContext } from "../../contexts/alertContext";
 
-export default function GenericNode({ data, selected}:{data:NodeDataType,selected:boolean}) {
-  const {types, deleteNode} = useContext(typesContext);
-  const Icon = nodeIcons[types[data.type]];
-  if(!Icon){
-    return
-  }
+export default function GenericNode({
+	data,
+	selected,
+}: {
+	data: NodeDataType;
+	selected: boolean;
+}) {
+	const { setErrorData } = useContext(alertContext);
+  const showError = useRef(true)
+	const { types, deleteNode } = useContext(typesContext);
+	const Icon = nodeIcons[types[data.type]];
+	if (!Icon) {
+		console.log(data);
+    if(showError.current){
+      setErrorData({
+        title: data.type?`The ${data.type} node could not be rendered, please review your json file`:
+          "There was a node that can't be rendered, please review your json file",
+      });
+      showError.current=false
+    }
+		return;
+	}
 
-  return (
-    <div className={ classNames(selected?"border border-blue-500":"border dark:border-gray-700","prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center")}>
-      <div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">
-        <div className="w-full flex items-center truncate gap-4 text-lg">
-          <Icon
-            className="w-10 h-10 p-1 rounded"
-            style={{ color: nodeColors[types[data.type]] }}
-          />
-          <div className="truncate">{data.type}</div>
-        </div>
-        <button onClick={() => {deleteNode(data.id)}}>
-          <TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
-        </button>
-      </div>
+	return (
+		<div
+			className={classNames(
+				selected ? "border border-blue-500" : "border dark:border-gray-700",
+				"prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center"
+			)}
+		>
+			<div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">
+				<div className="w-full flex items-center truncate gap-4 text-lg">
+					<Icon
+						className="w-10 h-10 p-1 rounded"
+						style={{ color: nodeColors[types[data.type]] }}
+					/>
+					<div className="truncate">{data.type}</div>
+				</div>
+				<button
+					onClick={() => {
+						deleteNode(data.id);
+					}}
+				>
+					<TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
+				</button>
+			</div>
 
-      <div className="w-full h-full py-5">
-        <div className="w-full text-gray-500 px-5 text-sm">
-          {data.node.description}
-        </div>
+			<div className="w-full h-full py-5">
+				<div className="w-full text-gray-500 px-5 text-sm">
+					{data.node.description}
+				</div>
 
-        <>
-          {Object.keys(data.node.template)
-            .filter((t) => t.charAt(0) !== "_")
-            .map((t:string, idx) => (
-              <div key={idx}>
-                {idx === 0 ? (
-                  <div className="px-5 py-2 mt-2 dark:text-white text-center">Inputs:</div>
-                ) : (
-                  <></>
-                )}
-                {data.node.template[t].show ? (
-                  <ParameterComponent
-                    
-                    data={data}
-                    color={
-                      nodeColors[types[data.node.template[t].type]] ??
-                      nodeColors[types[data.node.template[t].type]] ??
-                      "black"
-                    }
-                    title={
-                      snakeToNormalCase(t)
-                    }
-                    name={t}
-                    tooltipTitle={
-                      "Type: " +
-                      data.node.template[t].type +
-                      (data.node.template[t].list ? " list" : "")
-                    }
-                    required={data.node.template[t].required}
-                    id={data.node.template[t].type + "|" + t + "|" + data.id}
-                    left={true}
-                    type={data.node.template[t].type}
-                  />
-                ) : (
-                  <></>
-                )}
-              </div>
-            ))}
-          <div className="px-5 py-2 mt-2 dark:text-white text-center">Output:</div>
-          <ParameterComponent
-            data={data}
-            color={nodeColors[types[data.type]]}
-            title={data.type}
-            tooltipTitle={`Type: ${data.node.base_classes.join(' | ')}`}
-            id={[data.type, data.id, ...data.node.base_classes].join('|')}
-            type={'str'}
-            left={false}
-          />
-        </>
-      </div>
-    </div>
-  );
+				<>
+					{Object.keys(data.node.template)
+						.filter((t) => t.charAt(0) !== "_")
+						.map((t: string, idx) => (
+							<div key={idx}>
+								{idx === 0 ? (
+									<div className="px-5 py-2 mt-2 dark:text-white text-center">
+										Inputs:
+									</div>
+								) : (
+									<></>
+								)}
+								{data.node.template[t].show ? (
+									<ParameterComponent
+										data={data}
+										color={
+											nodeColors[types[data.node.template[t].type]] ??
+											nodeColors[types[data.node.template[t].type]] ??
+											"black"
+										}
+										title={snakeToNormalCase(t)}
+										name={t}
+										tooltipTitle={
+											"Type: " +
+											data.node.template[t].type +
+											(data.node.template[t].list ? " list" : "")
+										}
+										required={data.node.template[t].required}
+										id={data.node.template[t].type + "|" + t + "|" + data.id}
+										left={true}
+										type={data.node.template[t].type}
+									/>
+								) : (
+									<></>
+								)}
+							</div>
+						))}
+					<div className="px-5 py-2 mt-2 dark:text-white text-center">
+						Output:
+					</div>
+					<ParameterComponent
+						data={data}
+						color={nodeColors[types[data.type]]}
+						title={data.type}
+						tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
+						id={[data.type, data.id, ...data.node.base_classes].join("|")}
+						type={"str"}
+						left={false}
+					/>
+				</>
+			</div>
+		</div>
+	);
 }

From 5680645ec0fd2b573c23e0684137043091c68c7c Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 27 Mar 2023 17:17:47 -0300
Subject: [PATCH 13/14] DocLoader type added to utils

---
 src/frontend/src/index.tsx                | 2 --
 src/frontend/src/pages/FlowPage/index.tsx | 4 ----
 src/frontend/src/utils.ts                 | 7 +++++--
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/index.tsx b/src/frontend/src/index.tsx
index e92450318da..c71219a94d8 100644
--- a/src/frontend/src/index.tsx
+++ b/src/frontend/src/index.tsx
@@ -4,8 +4,6 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { BrowserRouter } from "react-router-dom";
 import ContextWrapper from "./contexts";
-import CrashErrorComponent from "./components/CrashErrorComponent";
-import { ErrorBoundary } from "react-error-boundary";
 
 const root = ReactDOM.createRoot(
 	document.getElementById("root") as HTMLElement
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 6471621af4c..602e0cd7f79 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -17,10 +17,6 @@ import GenericNode from "../../CustomNodes/GenericNode";
 import { alertContext } from "../../contexts/alertContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
-import {
-	ArrowDownTrayIcon,
-	ArrowUpTrayIcon,
-} from "@heroicons/react/24/outline";
 import ConnectionLineComponent from "./components/ConnectionLineComponent";
 import { FlowType, NodeType } from "../../types/flow";
 import { APIClassType } from "../../types/api";
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index dc24f8dbe21..21cca74e91f 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -7,6 +7,7 @@ import {
   WrenchScrewdriverIcon,
   ComputerDesktopIcon,
   Bars3CenterLeftIcon,
+  PaperClipIcon,
 } from "@heroicons/react/24/outline";
 import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
 import { FlowType } from "./types/flow";
@@ -71,7 +72,8 @@ export const nodeColors: {[char: string]: string} = {
   memories: "#FF9135",
   advanced: "#000000",
   chat: "#454173",
-  thought:"#272541"
+  thought:"#272541",
+  docloaders:"#10B981"
 };
 
 export const nodeNames:{[char: string]: string} = {
@@ -83,7 +85,7 @@ export const nodeNames:{[char: string]: string} = {
   memories: "Memories",
   advanced: "Advanced",
   chat: "Chat",
-
+  docloaders:"Document Loader"
 };
 
 export const nodeIcons:{[char: string]: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>} = {
@@ -95,6 +97,7 @@ export const nodeIcons:{[char: string]: React.ForwardRefExoticComponent<React.SV
   tools: WrenchScrewdriverIcon,
   advanced: ComputerDesktopIcon,
   chat: Bars3CenterLeftIcon,
+  docloaders:PaperClipIcon
 };
 
 export const bgColors = {

From fb96ccd878d7aeb06645767b430dc2711900d082 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 27 Mar 2023 18:14:00 -0300
Subject: [PATCH 14/14] null safety working properly

---
 src/frontend/package.json                     |  2 +-
 .../src/CustomNodes/GenericNode/index.tsx     | 26 ++++++++++---------
 .../extraSidebarComponent/index.tsx           |  4 +--
 src/frontend/src/utils.ts                     | 10 ++++---
 4 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/frontend/package.json b/src/frontend/package.json
index 1d9beeb99b5..312e52051ec 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -56,5 +56,5 @@
             "last 1 safari version"
         ]
     },
-    "proxy": "http://localhost:7860"
+    "proxy": "http://backend:7860"
 }
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 990fd458b25..ddb9524ee11 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -19,18 +19,19 @@ export default function GenericNode({
 	selected: boolean;
 }) {
 	const { setErrorData } = useContext(alertContext);
-  const showError = useRef(true)
+	const showError = useRef(true);
 	const { types, deleteNode } = useContext(typesContext);
 	const Icon = nodeIcons[types[data.type]];
 	if (!Icon) {
 		console.log(data);
-    if(showError.current){
-      setErrorData({
-        title: data.type?`The ${data.type} node could not be rendered, please review your json file`:
-          "There was a node that can't be rendered, please review your json file",
-      });
-      showError.current=false
-    }
+		if (showError.current) {
+			setErrorData({
+				title: data.type
+					? `The ${data.type} node could not be rendered, please review your json file`
+					: "There was a node that can't be rendered, please review your json file",
+			});
+			showError.current = false;
+		}
 		return;
 	}
 
@@ -45,7 +46,9 @@ export default function GenericNode({
 				<div className="w-full flex items-center truncate gap-4 text-lg">
 					<Icon
 						className="w-10 h-10 p-1 rounded"
-						style={{ color: nodeColors[types[data.type]] }}
+						style={{
+							color: nodeColors[types[data.type]] ?? nodeColors.unknown,
+						}}
 					/>
 					<div className="truncate">{data.type}</div>
 				</div>
@@ -80,8 +83,7 @@ export default function GenericNode({
 										data={data}
 										color={
 											nodeColors[types[data.node.template[t].type]] ??
-											nodeColors[types[data.node.template[t].type]] ??
-											"black"
+											nodeColors.unknown
 										}
 										title={snakeToNormalCase(t)}
 										name={t}
@@ -105,7 +107,7 @@ export default function GenericNode({
 					</div>
 					<ParameterComponent
 						data={data}
-						color={nodeColors[types[data.type]]}
+						color={nodeColors[types[data.type]] ?? nodeColors.unknown}
 						title={data.type}
 						tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
 						id={[data.type, data.id, ...data.node.base_classes].join("|")}
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index bea7393338c..e489432decb 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -55,7 +55,7 @@ export default function ExtraSidebar() {
       {Object.keys(data).map((d:keyof APIObjectType, i) => (
         <DisclosureComponent
           key={i}
-          button={{ title: nodeNames[d], Icon: nodeIcons[d] }}
+          button={{ title: nodeNames[d]??nodeNames.unknown, Icon: nodeIcons[d]??nodeIcons.unknown }}
         >
           <div className="p-2 flex flex-col gap-2">
             {Object.keys(data[d]).map((t: string, k) => (
@@ -63,7 +63,7 @@ export default function ExtraSidebar() {
                 <div
                   draggable
                   className={" cursor-grab border-l-8 rounded-l-md"}
-                  style={{ borderLeftColor: nodeColors[d] }}
+                  style={{ borderLeftColor: nodeColors[d]??nodeColors.unknown }}
                   onDragStart={(event) =>
                     onDragStart(event, {
                       type: t,
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 21cca74e91f..796cd6de41e 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -8,6 +8,7 @@ import {
   ComputerDesktopIcon,
   Bars3CenterLeftIcon,
   PaperClipIcon,
+  QuestionMarkCircleIcon,
 } from "@heroicons/react/24/outline";
 import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
 import { FlowType } from "./types/flow";
@@ -73,7 +74,8 @@ export const nodeColors: {[char: string]: string} = {
   advanced: "#000000",
   chat: "#454173",
   thought:"#272541",
-  docloaders:"#10B981"
+  docloaders:"#FF9135",
+  unknown:"#9CA3AF"
 };
 
 export const nodeNames:{[char: string]: string} = {
@@ -85,7 +87,8 @@ export const nodeNames:{[char: string]: string} = {
   memories: "Memories",
   advanced: "Advanced",
   chat: "Chat",
-  docloaders:"Document Loader"
+  docloaders:"Document Loader",
+  unknown:"Unknown"
 };
 
 export const nodeIcons:{[char: string]: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>} = {
@@ -97,7 +100,8 @@ export const nodeIcons:{[char: string]: React.ForwardRefExoticComponent<React.SV
   tools: WrenchScrewdriverIcon,
   advanced: ComputerDesktopIcon,
   chat: Bars3CenterLeftIcon,
-  docloaders:PaperClipIcon
+  docloaders:Bars3CenterLeftIcon,
+  unknown:QuestionMarkCircleIcon
 };
 
 export const bgColors = {