export flow improved, auto-remove api keys and added description when export flow

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",

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"
-}
+}

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."})
 	}
 
 	/**

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>
+	);
+}

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"
 											/>

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" />

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

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
+}