diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index dffaa4665..ddb3a3a0d 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 9afe85ebc..15aa1e48b 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 fa52a6955..ae5833442 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 000000000..50e16f403 --- /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 ( + + + +
+ + +
+
+ + +
+ +
+
+
+
+
+
+ + Export as + +
+
+
+
+ + { + 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" + /> +
+
+ + +
+
+ +
+
+ +
+
+
+ + +
+
+
+ + ); +} diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx index c069a4375..f4c09df1b 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() {
-