jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

debugging from upload flow

Browse source
This commit is contained in:
anovazzi1 2023-02-27 12:59:38 -03:00
commit 8ea68be22b
1 changed files with 149 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

113
space_flow/src/contexts/tabsContext.tsx
View file

@ -1,18 +1,23 @@
import { createContext, useEffect, useState, useRef } from "react";
type flow={name:string,id:string,data:any,chat:Array<{message:string,isSend:boolean}>}
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,
downloadFlow:()=>void,
uploadFlow:()=>void
}
incrementNodeId: () => number;
downloadFlow: () => void;
uploadFlow: () => void;
};
const TabsContextInitialValue = {
tabIndex: 0,
@ -23,17 +28,18 @@ const TabsContextInitialValue = {
updateFlow: (newFlow: flow) => {},
incrementNodeId: () => 0,
downloadFlow: () => {},
uploadFlow:()=>{}
uploadFlow: () => {},
};
}
export const TabsContext = createContext<TabsContextType>(
TabsContextInitialValue
);
export const TabsContext = createContext<TabsContextType>(TabsContextInitialValue)
let _ = require('lodash');
let _ = require("lodash");
export function TabsProvider({ children }) {
const [tabIndex,setTabIndex] = useState(0)
const [flows,setFlows] = useState<Array<flow>>([])
const [tabIndex, setTabIndex] = useState(0);
const [flows, setFlows] = useState<Array<flow>>([]);
const [id, setId] = useState(0);
const newNodeId = useRef(0);
@ -43,11 +49,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);
@ -55,32 +64,36 @@ 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()
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'
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 =>addFlow(JSON.parse(text)))
file.text().then((text) => {
console.log(JSON.parse(text),"json from upload")
addFlow(JSON.parse(text));
});
}
}
input.click()
};
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);
@ -88,40 +101,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) {
const data = flowData?.data?flowData:null
let newFlow: flow = {name:flowData?flowData.name:"flow"+id, id: id.toString(), data,chat:flowData?flowData.chat:[]}
const data = flowData?.data ? flowData : null;
let newFlow: flow = {
name: flowData ? flowData.name : "flow" + id,
id: id.toString(),
data,
chat: flowData ? flowData.chat : [],
};
setId((old) => old + 1);
setFlows(prevState => {
setFlows((prevState) => {
const newFlows = [...prevState, newFlow];
return newFlows;
});
setTabIndex(flows.length);
}
function updateFlow(newFlow: flow) {
console.log(newFlow)
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].name = newFlow.name
newFlows[index].chat = newFlow.chat
newFlows[index].data = newFlow.data;
newFlows[index].name = newFlow.name;
newFlows[index].chat = newFlow.chat;
}
return newFlows;
});
}
return (
<TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow, downloadFlow, uploadFlow}}>
<TabsContext.Provider
value={{
tabIndex,
setTabIndex,
flows,
incrementNodeId,
removeFlow,
addFlow,
updateFlow,
downloadFlow,
uploadFlow,
}}
>
{children}
</TabsContext.Provider>
)
);
}