Merge remote-tracking branch 'origin/export_improvement' into dev

README.md

@@ -34,6 +34,18 @@ Creating flows with LangFlow is easy. Simply drag sidebar components onto the ca
 
 Explore by editing prompt parameters, link chains and agents, track an agent's thought process, and export your flow.
 
+Once you're done, you can export your flow as a JSON file to use with LangChain.
+To do so, click the "Export" button in the top right corner of the canvas, then
+in Python, you can load the flow with:
+
+```python
+from langflow import load_flow_from_json
+
+flow = load_flow_from_json("path/to/flow.json")
+# Now you can use it like any chain
+flow("Hey, have you heard of LangFlow?")
+```
+
 
 ## 👋 Contributing
 

src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx

@@ -4,17 +4,24 @@ import TabComponent from "../tabComponent";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import FlowPage from "../..";
 import { darkContext } from "../../../../contexts/darkContext";
-import { BellIcon, MoonIcon, SunIcon } from "@heroicons/react/24/outline";
+import {
+	ArrowDownTrayIcon,
+	ArrowUpTrayIcon,
+	BellIcon,
+	MoonIcon,
+	SunIcon,
+} from "@heroicons/react/24/outline";
 import { PopUpContext } from "../../../../contexts/popUpContext";
 import AlertDropdown from "../../../../alerts/alertDropDown";
 import { alertContext } from "../../../../contexts/alertContext";
 
 export default function TabsManagerComponent() {
-	const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
+	const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } = useContext(TabsContext);
 	const { openPopUp } = useContext(PopUpContext);
-	const AlertWidth = 256
+	const AlertWidth = 256;
 	const { dark, setDark } = useContext(darkContext);
-	const {notificationCenter, setNotificationCenter} = useContext(alertContext)
+	const { notificationCenter, setNotificationCenter } =
+		useContext(alertContext);
 	useEffect(() => {
 		//create the first flow
 		if (flows.length === 0) {
@@ -43,6 +50,12 @@ export default function TabsManagerComponent() {
 					flow={null}
 				/>
 				<div className="ml-auto mr-2 flex gap-3">
+					<button onClick={() => uploadFlow()} className="flex items-center gap-1 text-gray-400 hover:text-gray-500">
+						Import <ArrowUpTrayIcon className="w-5 h-5" />
+					</button>
+					<button onClick={() => downloadFlow()} className="flex items-center gap-1 text-gray-400 hover:text-gray-500">
+						Export <ArrowDownTrayIcon className="h-5 w-5" />
+					</button>
 					<button
 						className="text-gray-400 hover:text-gray-500 "
 						onClick={() => {
@@ -58,13 +71,23 @@ export default function TabsManagerComponent() {
 					<button
 						className="text-gray-400 hover:text-gray-500 relative"
 						onClick={(event: React.MouseEvent<HTMLElement>) => {
-							setNotificationCenter(false)
+							setNotificationCenter(false);
-							const top = (event.target as Element).getBoundingClientRect().top
+							const top = (event.target as Element).getBoundingClientRect().top;
-							const left = (event.target as Element).getBoundingClientRect().left
+							const left = (event.target as Element).getBoundingClientRect()
-							openPopUp(<div className="z-10 absolute" style={{top:top+20, left:left-AlertWidth}}><AlertDropdown/></div>)
+								.left;
+							openPopUp(
+								<div
+									className="z-10 absolute"
+									style={{ top: top + 20, left: left - AlertWidth }}
+								>
+									<AlertDropdown />
+								</div>
+							);
 						}}
 					>
-						{notificationCenter&&<div className='absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]'></div>}
+						{notificationCenter && (
+							<div className="absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]"></div>
+						)}
 						<BellIcon className="h-5 w-5" aria-hidden="true" />
 					</button>
 				</div>

src/frontend/src/pages/FlowPage/index.tsx

@@ -182,17 +182,6 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
 					>
 						<Background className="dark:bg-gray-900"/>
 						<Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600">
-							<ControlButton
-								onClick={() => uploadFlow()}
-							>
-								<ArrowUpTrayIcon />
-							</ControlButton>
-
-							<ControlButton
-								onClick={() => downloadFlow()}
-							>
-								<ArrowDownTrayIcon />
-							</ControlButton>
 						</Controls>
 					</ReactFlow>
 					<Chat flow={flow} reactFlowInstance={reactFlowInstance} />