Merge branch 'dev' into merge_repo
This commit is contained in:
Ibis Prevedello
commit
13495cedc1
19 changed files with 862 additions and 690 deletions
|
|
@ -1,149 +1,144 @@
|
|||
import "reactflow/dist/style.css";
|
||||
import { useState, useRef, useEffect, useContext } from "react";
|
||||
import { ReactFlowProvider } from "reactflow";
|
||||
import { useState, useEffect, useContext } from "react";
|
||||
import "./App.css";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import ErrorAlert from "./alerts/error";
|
||||
import NoticeAlert from "./alerts/notice";
|
||||
import SuccessAlert from "./alerts/success";
|
||||
import ExtraSidebar from "./components/ExtraSidebarComponent";
|
||||
import { alertContext } from "./contexts/alertContext";
|
||||
import { alertContext } from "./contexts/alertContext";
|
||||
import { locationContext } from "./contexts/locationContext";
|
||||
import FlowPage from "./pages/FlowPage";
|
||||
import Sidebar from "./components/SidebarComponent";
|
||||
import Header from "./components/HeaderComponent";
|
||||
import { TabsProvider } from "./contexts/tabsContext";
|
||||
import { TabsManager } from "./pages/FlowPage/flowManager";
|
||||
|
||||
export default function App() {
|
||||
var _ = require("lodash");
|
||||
|
||||
var _ = require("lodash");
|
||||
|
||||
let { setAtual, setShowSideBar, setIsStackedOpen} =
|
||||
useContext(locationContext);
|
||||
let location = useLocation();
|
||||
useEffect(() => {
|
||||
setAtual(location.pathname.replace(/\/$/g, "").split("/"));
|
||||
setShowSideBar(true);
|
||||
setIsStackedOpen(true);
|
||||
}, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]);
|
||||
let { setCurrent, setShowSideBar, setIsStackedOpen } =
|
||||
useContext(locationContext);
|
||||
let location = useLocation();
|
||||
useEffect(() => {
|
||||
setCurrent(location.pathname.replace(/\/$/g, "").split("/"));
|
||||
setShowSideBar(true);
|
||||
setIsStackedOpen(true);
|
||||
}, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]);
|
||||
|
||||
const {
|
||||
errorData,
|
||||
errorOpen,
|
||||
setErrorOpen,
|
||||
noticeData,
|
||||
noticeOpen,
|
||||
setNoticeOpen,
|
||||
successData,
|
||||
successOpen,
|
||||
setSuccessOpen,
|
||||
} = useContext(alertContext);
|
||||
const {
|
||||
errorData,
|
||||
errorOpen,
|
||||
setErrorOpen,
|
||||
noticeData,
|
||||
noticeOpen,
|
||||
setNoticeOpen,
|
||||
successData,
|
||||
successOpen,
|
||||
setSuccessOpen,
|
||||
} = useContext(alertContext);
|
||||
|
||||
const [alertsList, setAlertsList] = useState([]);
|
||||
const [alertsList, setAlertsList] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (errorOpen && errorData) {
|
||||
setErrorOpen(false);
|
||||
setAlertsList((old) => {
|
||||
let newAlertsList = [
|
||||
...old,
|
||||
{ type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() },
|
||||
];
|
||||
return newAlertsList;
|
||||
});
|
||||
} else if (noticeOpen && noticeData) {
|
||||
setNoticeOpen(false);
|
||||
setAlertsList((old) => {
|
||||
let newAlertsList = [
|
||||
...old,
|
||||
{ type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() },
|
||||
];
|
||||
return newAlertsList;
|
||||
});
|
||||
} else if (successOpen && successData) {
|
||||
setSuccessOpen(false);
|
||||
setAlertsList((old) => {
|
||||
let newAlertsList = [
|
||||
...old,
|
||||
{ type: "success", data: _.cloneDeep(successData), id: _.uniqueId() },
|
||||
];
|
||||
return newAlertsList;
|
||||
});
|
||||
}
|
||||
}, [errorData, errorOpen, noticeData, noticeOpen, successData, successOpen]);
|
||||
useEffect(() => {
|
||||
if (errorOpen && errorData) {
|
||||
setErrorOpen(false);
|
||||
setAlertsList((old) => {
|
||||
let newAlertsList = [
|
||||
...old,
|
||||
{ type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() },
|
||||
];
|
||||
return newAlertsList;
|
||||
});
|
||||
} else if (noticeOpen && noticeData) {
|
||||
setNoticeOpen(false);
|
||||
setAlertsList((old) => {
|
||||
let newAlertsList = [
|
||||
...old,
|
||||
{ type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() },
|
||||
];
|
||||
return newAlertsList;
|
||||
});
|
||||
} else if (successOpen && successData) {
|
||||
setSuccessOpen(false);
|
||||
setAlertsList((old) => {
|
||||
let newAlertsList = [
|
||||
...old,
|
||||
{ type: "success", data: _.cloneDeep(successData), id: _.uniqueId() },
|
||||
];
|
||||
return newAlertsList;
|
||||
});
|
||||
}
|
||||
}, [errorData, errorOpen, noticeData, noticeOpen, successData, successOpen]);
|
||||
|
||||
const removeAlert = (id: number) => {
|
||||
setAlertsList((prevAlertsList) =>
|
||||
prevAlertsList.filter((alert) => alert.id !== id)
|
||||
);
|
||||
};
|
||||
const removeAlert = (id: number) => {
|
||||
setAlertsList((prevAlertsList) =>
|
||||
prevAlertsList.filter((alert) => alert.id !== id)
|
||||
);
|
||||
};
|
||||
|
||||
const user = {
|
||||
name: "Whitney Francis",
|
||||
email: "whitney.francis@example.com",
|
||||
imageUrl:
|
||||
"https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
|
||||
};
|
||||
const user = {
|
||||
name: "Whitney Francis",
|
||||
email: "whitney.francis@example.com",
|
||||
imageUrl:
|
||||
"https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
|
||||
};
|
||||
|
||||
const userNavigation = [
|
||||
{ name: "Your Projects", href: "/" },
|
||||
// {
|
||||
// name: "Account settings",
|
||||
// href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser",
|
||||
// },
|
||||
{ name: "Sign out", href: "/" },
|
||||
];
|
||||
const userNavigation = [
|
||||
{ name: "Your Projects", href: "/" },
|
||||
// {
|
||||
// name: "Account settings",
|
||||
// href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser",
|
||||
// },
|
||||
{ name: "Sign out", href: "/" },
|
||||
];
|
||||
|
||||
return (
|
||||
//need parent component with width and height
|
||||
<div className="h-full flex flex-col">
|
||||
|
||||
<div className="flex grow-0 shrink basis-auto">
|
||||
<Header userNavigation={userNavigation} user={user}></Header>
|
||||
</div>
|
||||
<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
|
||||
<Sidebar />
|
||||
<ExtraSidebar />
|
||||
return (
|
||||
//need parent component with width and height
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex grow-0 shrink basis-auto">
|
||||
<Header userNavigation={userNavigation} user={user}></Header>
|
||||
</div>
|
||||
<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
|
||||
<Sidebar />
|
||||
<ExtraSidebar />
|
||||
|
||||
{/* Main area */}
|
||||
<main className="min-w-0 flex-1 border-t border-gray-200 flex">
|
||||
{/* Primary column */}
|
||||
<div className="w-full h-full">
|
||||
<TabsManager></TabsManager>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div className="flex z-50 flex-col-reverse fixed bottom-5 left-5">
|
||||
{alertsList.map((alert) => (
|
||||
<div key={alert.id}>
|
||||
{alert.type === "error" ? (
|
||||
<ErrorAlert
|
||||
key={alert.id}
|
||||
title={alert.data.title}
|
||||
list={alert.data.list}
|
||||
id={alert.id}
|
||||
removeAlert={removeAlert}
|
||||
/>
|
||||
) : alert.type === "notice" ? (
|
||||
<NoticeAlert
|
||||
key={alert.id}
|
||||
title={alert.data.title}
|
||||
link={alert.data.link}
|
||||
id={alert.id}
|
||||
removeAlert={removeAlert}
|
||||
/>
|
||||
) : (
|
||||
<SuccessAlert
|
||||
key={alert.id}
|
||||
title={alert.data.title}
|
||||
id={alert.id}
|
||||
removeAlert={removeAlert}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
{/* Main area */}
|
||||
<main className="min-w-0 flex-1 border-t border-gray-200 flex">
|
||||
{/* Primary column */}
|
||||
<div className="w-full h-full">
|
||||
<TabsManager></TabsManager>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div className="flex z-50 flex-col-reverse fixed bottom-5 left-5">
|
||||
{alertsList.map((alert) => (
|
||||
<div key={alert.id}>
|
||||
{alert.type === "error" ? (
|
||||
<ErrorAlert
|
||||
key={alert.id}
|
||||
title={alert.data.title}
|
||||
list={alert.data.list}
|
||||
id={alert.id}
|
||||
removeAlert={removeAlert}
|
||||
/>
|
||||
) : alert.type === "notice" ? (
|
||||
<NoticeAlert
|
||||
key={alert.id}
|
||||
title={alert.data.title}
|
||||
link={alert.data.link}
|
||||
id={alert.id}
|
||||
removeAlert={removeAlert}
|
||||
/>
|
||||
) : (
|
||||
<SuccessAlert
|
||||
key={alert.id}
|
||||
title={alert.data.title}
|
||||
id={alert.id}
|
||||
removeAlert={removeAlert}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
const defaultErrorMessages ={
|
||||
deleteRLAS:"Could not remove label from record, please try again",
|
||||
addRLAS:"Could not label this record, please try again",
|
||||
deleteRecords:"Could not delete record, please try again later"
|
||||
}
|
||||
|
||||
|
||||
|
||||
export class CustomError extends Error{
|
||||
constructor(message:string){
|
||||
super(message)
|
||||
Object.setPrototypeOf(this,CustomError.prototype)
|
||||
}
|
||||
|
||||
getErrorMessage(): string{
|
||||
return defaultErrorMessages[this.message]?? "unknow error, please try again"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,15 @@
|
|||
import { Disclosure } from "@headlessui/react";
|
||||
import { ChevronLeftIcon } from "@heroicons/react/24/outline";
|
||||
import { ArrowUpTrayIcon, ChevronLeftIcon } from "@heroicons/react/24/outline";
|
||||
import { useContext } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { classNames } from "../../utils";
|
||||
import { locationContext } from "../../contexts/locationContext";
|
||||
import { TabsContext } from "../../contexts/tabsContext";
|
||||
|
||||
export default function ExtraSidebar() {
|
||||
const {uploadFlow} = useContext(TabsContext)
|
||||
const {
|
||||
atual,
|
||||
current,
|
||||
isStackedOpen,
|
||||
setIsStackedOpen,
|
||||
extraNavigation,
|
||||
|
|
@ -20,7 +22,7 @@ export default function ExtraSidebar() {
|
|||
isStackedOpen ? "w-60" : "w-0 "
|
||||
} flex-shrink-0 flex overflow-hidden flex-col border-r transition-all duration-500`}
|
||||
>
|
||||
<div className="w-60 overflow-y-auto scrollbar-hide h-full">
|
||||
<div className="w-60 overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
|
||||
<div className="flex pt-4 px-4 justify-between align-middle w-full">
|
||||
<span className="text-gray-900 text-lg ml-2 font-semibold">
|
||||
{extraNavigation.title}
|
||||
|
|
@ -32,7 +34,7 @@ export default function ExtraSidebar() {
|
|||
<ChevronLeftIcon className="h-6 w-6"></ChevronLeftIcon>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-grow flex-col">
|
||||
<div className="flex flex-grow flex-col w-full">
|
||||
{extraNavigation.options ? (
|
||||
<div className="p-4">
|
||||
<nav className="flex-1 space-y-1">
|
||||
|
|
@ -42,7 +44,7 @@ export default function ExtraSidebar() {
|
|||
<Link
|
||||
to={item.href}
|
||||
className={classNames(
|
||||
item.href.split("/")[2] === atual[4]
|
||||
item.href.split("/")[2] === current[4]
|
||||
? "bg-gray-100 text-gray-900"
|
||||
: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
|
||||
"group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
|
||||
|
|
@ -50,7 +52,7 @@ export default function ExtraSidebar() {
|
|||
>
|
||||
<item.icon
|
||||
className={classNames(
|
||||
item.href.split("/")[2] === atual[4]
|
||||
item.href.split("/")[2] === current[4]
|
||||
? "text-gray-500"
|
||||
: "text-gray-400 group-hover:text-gray-500",
|
||||
"mr-3 flex-shrink-0 h-6 w-6"
|
||||
|
|
@ -69,7 +71,7 @@ export default function ExtraSidebar() {
|
|||
<>
|
||||
<Disclosure.Button
|
||||
className={classNames(
|
||||
item.href.split("/")[2] === atual[4]
|
||||
item.href.split("/")[2] === current[4]
|
||||
? "bg-gray-100 text-gray-900"
|
||||
: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
|
||||
"group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
|
|
@ -102,7 +104,7 @@ export default function ExtraSidebar() {
|
|||
key={subItem.name}
|
||||
to={subItem.href}
|
||||
className={classNames(
|
||||
subItem.href.split("/")[3] === atual[5]
|
||||
subItem.href.split("/")[3] === current[5]
|
||||
? "bg-gray-100 text-gray-900"
|
||||
: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
|
||||
"group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
|
||||
|
|
@ -122,7 +124,11 @@ export default function ExtraSidebar() {
|
|||
) : (
|
||||
extraComponent
|
||||
)}
|
||||
{/* need to convert to multi stackbar logic */}
|
||||
</div>
|
||||
{/* <div className="w-full flex content-center justify-center mt-auto mb-8">
|
||||
<button onClick={()=>uploadFlow()} className="flex content-center justify-center py-3 px-6 border rounded-lg border-blue-500 text-blue-500 hover:text-white hover:bg-blue-500"><span>import flow</span><ArrowUpTrayIcon className=" ml-2 w-5 h-5"/> </button>
|
||||
</div> */}
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export default function Header({user, userNavigation}){
|
|||
<div className="min-w-0 flex-1 ml-5">
|
||||
<Breadcrumb />
|
||||
</div>
|
||||
{/* <div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
|
||||
<div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
|
||||
<div className="flex items-center space-x-8">
|
||||
<span className="inline-flex">
|
||||
<button type="button" {...triggerProps} className="-mx-1 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
|
||||
|
|
@ -56,7 +56,7 @@ export default function Header({user, userNavigation}){
|
|||
</button>{renderLayer(<div {...layerProps}><AlertDropdown closeFunction={()=>setIsOpen(false)} open={isOpen}></AlertDropdown></div>)}
|
||||
</span>
|
||||
|
||||
<Menu as="div" className="relative inline-block text-left">
|
||||
{/* <Menu as="div" className="relative inline-block text-left">
|
||||
<Menu.Button className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
|
||||
<span className="sr-only">Open user menu</span>
|
||||
<img className="h-8 w-8 rounded-full" src={user.imageUrl} alt="" />
|
||||
|
|
@ -100,9 +100,9 @@ export default function Header({user, userNavigation}){
|
|||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</Menu> */}
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@ import { useContext } from "react"
|
|||
import { locationContext } from "../../../contexts/locationContext";
|
||||
|
||||
export default function SidebarButton({item}){
|
||||
let {atual}= useContext(locationContext);
|
||||
let {current}= useContext(locationContext);
|
||||
return (
|
||||
<>
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
className={classNames(
|
||||
item.href.split("/")[1]=== atual[3]? 'bg-gray-900 text-white' : 'text-gray-400 hover:bg-gray-700',
|
||||
item.href.split("/")[1]=== current[3]? 'bg-gray-900 text-white' : 'text-gray-400 hover:bg-gray-700',
|
||||
'flex-shrink-0 inline-flex items-center justify-center h-14 w-14 rounded-lg'
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ function getPages(atual){
|
|||
}
|
||||
|
||||
export default function Breadcrumb(){
|
||||
let {atual} = useContext(locationContext);
|
||||
let {current} = useContext(locationContext);
|
||||
return (
|
||||
<div>
|
||||
<nav className="flex ml-2" aria-label="Breadcrumb">
|
||||
|
|
@ -35,7 +35,7 @@ export default function Breadcrumb(){
|
|||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
{getPages(atual).map((page) => (
|
||||
{getPages(current).map((page) => (
|
||||
<li key={page.href}>
|
||||
<div className="flex items-center">
|
||||
<ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
|
||||
|
|
|
|||
|
|
@ -9,13 +9,16 @@ import { useContext, useEffect, useRef, useState } from "react";
|
|||
import { sendAll } from "../../controllers/NodesServices";
|
||||
import { alertContext } from "../../contexts/alertContext";
|
||||
import { nodeColors } from "../../utils";
|
||||
import { TabsContext } from "../../contexts/tabsContext";
|
||||
|
||||
const _ = require("lodash");
|
||||
|
||||
export default function Chat({ reactFlowInstance }) {
|
||||
export default function Chat({flow, reactFlowInstance }) {
|
||||
const {updateFlow} = useContext(TabsContext)
|
||||
const [saveChat,setSaveChat] = useState(false)
|
||||
const [open, setOpen] = useState(true);
|
||||
const [chatValue, setChatValue] = useState("");
|
||||
const [chatHistory, setChatHistory] = useState([]);
|
||||
const [chatHistory, setChatHistory] = useState(flow.chat);
|
||||
const {setErrorData} = useContext(alertContext);
|
||||
const addChatHistory = (message, isSend) => {
|
||||
setChatHistory((old) => {
|
||||
|
|
@ -23,9 +26,18 @@ export default function Chat({ reactFlowInstance }) {
|
|||
newChat.push({ message, isSend });
|
||||
return newChat;
|
||||
});
|
||||
setSaveChat(chat=>!chat)
|
||||
};
|
||||
useEffect(()=>{
|
||||
ref.current.scrollIntoView({behavior: 'smooth'});
|
||||
console.log("flow")
|
||||
updateFlow({..._.cloneDeep(flow),chat:chatHistory})
|
||||
},[saveChat])
|
||||
useEffect(()=>{
|
||||
setChatHistory(flow.chat)
|
||||
},[flow])
|
||||
useEffect(()=>{
|
||||
if(ref.current)
|
||||
ref.current.scrollIntoView({behavior: 'smooth'});
|
||||
}, [chatHistory])
|
||||
function validateNodes(){
|
||||
if(reactFlowInstance.getNodes().some((n) => (n.data.node && Object.keys(n.data.node.template).some((t: any) => ((n.data.node.template[t].required && n.data.node.template[t].value === "") && (n.data.node.template[t].required && !reactFlowInstance.getEdges().some((e) => (e.sourceHandle.split('|')[1] === t && e.sourceHandle.split('|')[2] === n.id)))))))){
|
||||
|
|
@ -40,6 +52,29 @@ export default function Chat({ reactFlowInstance }) {
|
|||
return true;
|
||||
}
|
||||
const ref = useRef(null);
|
||||
|
||||
function sendMessage(){
|
||||
console.log(reactFlowInstance.toObject())
|
||||
if(chatValue !== ""){
|
||||
if(validateNodes()){
|
||||
if(validateChatNodes()){
|
||||
let message = chatValue;
|
||||
setChatValue("");
|
||||
addChatHistory(message, true);
|
||||
console.log({...reactFlowInstance.toObject(),message,chatHistory})
|
||||
sendAll({...reactFlowInstance.toObject(),message,chatHistory}).then((r) => {addChatHistory(r.data.result, false);});
|
||||
} else {
|
||||
setErrorData({title: 'Error sending message', list:['Chat nodes are missing.']})
|
||||
}
|
||||
|
||||
} else {
|
||||
setErrorData({title: 'Error sending message', list:['There are required fields not filled yet.']})
|
||||
}
|
||||
} else {
|
||||
setErrorData({title: 'Error sending message', list:['The message cannot be empty.']})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Transition
|
||||
|
|
@ -71,14 +106,14 @@ export default function Chat({ reactFlowInstance }) {
|
|||
{chatHistory.map((c, i) => (
|
||||
<div key={i}>
|
||||
{c.isSend ? (
|
||||
<div className="w-full text-start">
|
||||
<div className="text-start inline-block bg-gray-200 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tl-none">
|
||||
<div className="w-full text-end">
|
||||
<div className="text-start inline-block bg-gray-200 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tr-none">
|
||||
{c.message}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full text-end">
|
||||
<div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tr-none">
|
||||
<div className="w-full text-start">
|
||||
<div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tl-none">
|
||||
{c.message}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -90,6 +125,11 @@ export default function Chat({ reactFlowInstance }) {
|
|||
<div className="w-full bg-white border-t flex items-center justify-between p-3">
|
||||
<div className="relative w-full mt-1 rounded-md shadow-sm">
|
||||
<input
|
||||
onKeyDown={(event)=>{
|
||||
if(event.key==='Enter'){
|
||||
sendMessage()
|
||||
}
|
||||
}}
|
||||
type="text"
|
||||
value={chatValue}
|
||||
onChange={(e) => {
|
||||
|
|
@ -100,28 +140,7 @@ export default function Chat({ reactFlowInstance }) {
|
|||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
console.log(reactFlowInstance.toObject())
|
||||
if(chatValue !== ""){
|
||||
if(validateNodes()){
|
||||
if(validateChatNodes()){
|
||||
let message = chatValue;
|
||||
setChatValue("");
|
||||
addChatHistory(message, true);
|
||||
sendAll({...reactFlowInstance.toObject(),message}).then((r) => {addChatHistory(r.data.result, false);});
|
||||
} else {
|
||||
setErrorData({title: 'Error sending message', list:['Chat nodes are missing.']})
|
||||
}
|
||||
|
||||
} else {
|
||||
setErrorData({title: 'Error sending message', list:['There are required fields not filled yet.']})
|
||||
}
|
||||
} else {
|
||||
setErrorData({title: 'Error sending message', list:['The message cannot be empty.']})
|
||||
}
|
||||
|
||||
|
||||
}}
|
||||
onClick={() => sendMessage()}
|
||||
>
|
||||
<PaperAirplaneIcon
|
||||
className="h-5 w-5 text-gray-400 hover:text-gray-600"
|
||||
|
|
|
|||
|
|
@ -3,101 +3,146 @@ import { alertDropdownItem } from "../alerts/alertDropDown";
|
|||
|
||||
var _ = require("lodash");
|
||||
|
||||
type alertContextType=
|
||||
{
|
||||
errorData: {title: string, list?: Array<string>};
|
||||
setErrorData:(newState:{title: string, list?: Array<string>})=>void;
|
||||
errorOpen: boolean;
|
||||
setErrorOpen:(newState:boolean)=>void;
|
||||
noticeData: {title: string, link?: string};
|
||||
setNoticeData:(newState:{title: string, link?: string})=>void;
|
||||
noticeOpen: boolean;
|
||||
setNoticeOpen:(newState:boolean)=>void;
|
||||
successData: {title: string};
|
||||
setSuccessData:(newState:{title: string})=>void;
|
||||
successOpen: boolean;
|
||||
setSuccessOpen:(newState:boolean)=>void;
|
||||
notificationCenter:boolean
|
||||
setNotificationCenter:(newState:boolean)=>void;
|
||||
notificationList:Array<alertDropdownItem>;
|
||||
pushNotificationList:(Object)=>void
|
||||
clearNotificationList:()=>void,
|
||||
removeFromNotificationList:(index:number)=>void
|
||||
}
|
||||
//types for alertContextType
|
||||
type alertContextType = {
|
||||
errorData: { title: string; list?: Array<string> };
|
||||
setErrorData: (newState: { title: string; list?: Array<string> }) => void;
|
||||
errorOpen: boolean;
|
||||
setErrorOpen: (newState: boolean) => void;
|
||||
noticeData: { title: string; link?: string };
|
||||
setNoticeData: (newState: { title: string; link?: string }) => void;
|
||||
noticeOpen: boolean;
|
||||
setNoticeOpen: (newState: boolean) => void;
|
||||
successData: { title: string };
|
||||
setSuccessData: (newState: { title: string }) => void;
|
||||
successOpen: boolean;
|
||||
setSuccessOpen: (newState: boolean) => void;
|
||||
notificationCenter: boolean;
|
||||
setNotificationCenter: (newState: boolean) => void;
|
||||
notificationList: Array<alertDropdownItem>;
|
||||
pushNotificationList: (Object) => void;
|
||||
clearNotificationList: () => void;
|
||||
removeFromNotificationList: (index: number) => void;
|
||||
};
|
||||
|
||||
const initialValue= {
|
||||
errorData: {title:"", list:[]},
|
||||
setErrorData:()=>{},
|
||||
errorOpen: false,
|
||||
setErrorOpen:()=>{},
|
||||
noticeData: {title:"", link:""},
|
||||
setNoticeData:()=>{},
|
||||
noticeOpen: false,
|
||||
setNoticeOpen:()=>{},
|
||||
successData: {title:""},
|
||||
setSuccessData:()=>{},
|
||||
successOpen: false,
|
||||
setSuccessOpen:()=>{},
|
||||
notificationCenter:false,
|
||||
setNotificationCenter:()=>{},
|
||||
notificationList:[],
|
||||
pushNotificationList:()=>{},
|
||||
clearNotificationList:()=>{},
|
||||
removeFromNotificationList:()=>{}
|
||||
}
|
||||
//initial values to alertContextType
|
||||
const initialValue = {
|
||||
errorData: { title: "", list: [] },
|
||||
setErrorData: () => {},
|
||||
errorOpen: false,
|
||||
setErrorOpen: () => {},
|
||||
noticeData: { title: "", link: "" },
|
||||
setNoticeData: () => {},
|
||||
noticeOpen: false,
|
||||
setNoticeOpen: () => {},
|
||||
successData: { title: "" },
|
||||
setSuccessData: () => {},
|
||||
successOpen: false,
|
||||
setSuccessOpen: () => {},
|
||||
notificationCenter: false,
|
||||
setNotificationCenter: () => {},
|
||||
notificationList: [],
|
||||
pushNotificationList: () => {},
|
||||
clearNotificationList: () => {},
|
||||
removeFromNotificationList: () => {},
|
||||
};
|
||||
|
||||
export const alertContext = createContext<alertContextType>(initialValue);
|
||||
|
||||
export function AlertProvider({children}){
|
||||
const [errorData, setErrorDataState] = useState<{title:string,list?:Array<string>}>({title:"",list:[]});
|
||||
const [errorOpen, setErrorOpen] = useState(false);
|
||||
const [noticeData, setNoticeDataState] = useState<{title:string,link?:string}>({title:"",link:""});
|
||||
const [noticeOpen, setNoticeOpen] = useState(false);
|
||||
const [successData, setSuccessDataState] = useState<{title:string}>({title:""});
|
||||
const [successOpen, setSuccessOpen] = useState(false);
|
||||
const [notificationCenter,setNotificationCenter]=useState(false);
|
||||
const [notificationList,setNotificationList] = useState([])
|
||||
const pushNotificationList = (notification:alertDropdownItem)=>{
|
||||
setNotificationList((old) => {
|
||||
let newNotificationList = _.cloneDeep(old);
|
||||
newNotificationList.unshift(notification);
|
||||
return newNotificationList;
|
||||
})
|
||||
}
|
||||
function setErrorData (newState:{title: string, list?: Array<string>}){
|
||||
setErrorDataState(newState)
|
||||
setErrorOpen(true)
|
||||
if(newState.title){
|
||||
setNotificationCenter(true)
|
||||
pushNotificationList({type:"error",title:newState.title,list:newState.list, id:_.uniqueId()})
|
||||
}
|
||||
}
|
||||
function setNoticeData(newState:{title: string, link?: string}){
|
||||
setNoticeDataState(newState)
|
||||
setNoticeOpen(true)
|
||||
if(newState.title){
|
||||
setNotificationCenter(true)
|
||||
pushNotificationList({type:"notice",title:newState.title,link:newState.link, id:_.uniqueId()})
|
||||
}
|
||||
}
|
||||
function setSuccessData(newState:{title: string}){
|
||||
setSuccessDataState(newState)
|
||||
setSuccessOpen(true)
|
||||
if(newState.title){
|
||||
setNotificationCenter(true)
|
||||
pushNotificationList({type:"success",title:newState.title, id:_.uniqueId()})
|
||||
}
|
||||
}
|
||||
function clearNotificationList(){
|
||||
setNotificationList([])
|
||||
}
|
||||
function removeFromNotificationList(index:number){
|
||||
setNotificationList((prevAlertsList) => prevAlertsList.filter((alert) => alert.id !== index));
|
||||
}
|
||||
return (
|
||||
<alertContext.Provider value={{ removeFromNotificationList,clearNotificationList,notificationList,pushNotificationList,setNotificationCenter,notificationCenter,errorData, setErrorData,
|
||||
errorOpen,setErrorOpen, noticeData, setNoticeData, noticeOpen, setNoticeOpen, successData, setSuccessData, successOpen, setSuccessOpen}}>
|
||||
{children}
|
||||
</alertContext.Provider>
|
||||
)
|
||||
export function AlertProvider({ children }) {
|
||||
const [errorData, setErrorDataState] = useState<{
|
||||
title: string;
|
||||
list?: Array<string>;
|
||||
}>({ title: "", list: [] });
|
||||
const [errorOpen, setErrorOpen] = useState(false);
|
||||
const [noticeData, setNoticeDataState] = useState<{
|
||||
title: string;
|
||||
link?: string;
|
||||
}>({ title: "", link: "" });
|
||||
const [noticeOpen, setNoticeOpen] = useState(false);
|
||||
const [successData, setSuccessDataState] = useState<{ title: string }>({
|
||||
title: "",
|
||||
});
|
||||
const [successOpen, setSuccessOpen] = useState(false);
|
||||
const [notificationCenter, setNotificationCenter] = useState(false);
|
||||
const [notificationList, setNotificationList] = useState([]);
|
||||
const pushNotificationList = (notification: alertDropdownItem) => {
|
||||
setNotificationList((old) => {
|
||||
let newNotificationList = _.cloneDeep(old);
|
||||
newNotificationList.unshift(notification);
|
||||
return newNotificationList;
|
||||
});
|
||||
};
|
||||
function setErrorData(newState: { title: string; list?: Array<string> }) {
|
||||
setErrorDataState(newState);
|
||||
setErrorOpen(true);
|
||||
if (newState.title) {
|
||||
setNotificationCenter(true);
|
||||
pushNotificationList({
|
||||
type: "error",
|
||||
title: newState.title,
|
||||
list: newState.list,
|
||||
id: _.uniqueId(),
|
||||
});
|
||||
}
|
||||
}
|
||||
function setNoticeData(newState: { title: string; link?: string }) {
|
||||
setNoticeDataState(newState);
|
||||
setNoticeOpen(true);
|
||||
if (newState.title) {
|
||||
setNotificationCenter(true);
|
||||
pushNotificationList({
|
||||
type: "notice",
|
||||
title: newState.title,
|
||||
link: newState.link,
|
||||
id: _.uniqueId(),
|
||||
});
|
||||
}
|
||||
}
|
||||
function setSuccessData(newState: { title: string }) {
|
||||
setSuccessDataState(newState);
|
||||
setSuccessOpen(true);
|
||||
if (newState.title) {
|
||||
setNotificationCenter(true);
|
||||
pushNotificationList({
|
||||
type: "success",
|
||||
title: newState.title,
|
||||
id: _.uniqueId(),
|
||||
});
|
||||
}
|
||||
}
|
||||
function clearNotificationList() {
|
||||
setNotificationList([]);
|
||||
}
|
||||
function removeFromNotificationList(index: number) {
|
||||
setNotificationList((prevAlertsList) =>
|
||||
prevAlertsList.filter((alert) => alert.id !== index)
|
||||
);
|
||||
}
|
||||
return (
|
||||
<alertContext.Provider
|
||||
value={{
|
||||
removeFromNotificationList,
|
||||
clearNotificationList,
|
||||
notificationList,
|
||||
pushNotificationList,
|
||||
setNotificationCenter,
|
||||
notificationCenter,
|
||||
errorData,
|
||||
setErrorData,
|
||||
errorOpen,
|
||||
setErrorOpen,
|
||||
noticeData,
|
||||
setNoticeData,
|
||||
noticeOpen,
|
||||
setNoticeOpen,
|
||||
successData,
|
||||
setSuccessData,
|
||||
successOpen,
|
||||
setSuccessOpen,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</alertContext.Provider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { TabsProvider } from "./tabsContext";
|
|||
import { TypesProvider } from "./typesContext";
|
||||
|
||||
export default function ContextWrapper({ children }) {
|
||||
//element to wrap all context
|
||||
return (
|
||||
<>
|
||||
<LocationProvider>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,79 @@
|
|||
import { createContext, useState } from "react";
|
||||
|
||||
type locationContextType=
|
||||
{
|
||||
atual:Array<string>;
|
||||
setAtual:(newState:Array<string>)=>void;
|
||||
isStackedOpen: boolean;
|
||||
setIsStackedOpen:(newState:boolean)=>void;
|
||||
showSideBar:boolean;
|
||||
setShowSideBar:(newState:boolean)=>void;
|
||||
extraNavigation:{title:string, options?:Array<{name:string, href:string, icon: any, children?:Array<any>}>};
|
||||
setExtraNavigation:(newState:{title:string, options?:Array<{name:string, href:string, icon: any, children?:Array<any>}>}) => void;
|
||||
extraComponent:any;
|
||||
setExtraComponent:(newState:any) => void;
|
||||
}
|
||||
|
||||
const initialValue= {
|
||||
atual : window.location.pathname.replace(/\/$/g, '').split("/"),
|
||||
isStackedOpen:((window.innerWidth > 1024 && window.location.pathname.split("/")[1]) ? true : false),
|
||||
setAtual: ()=>{},
|
||||
setIsStackedOpen:()=>{},
|
||||
showSideBar: window.location.pathname.split("/")[1]?true:false,
|
||||
setShowSideBar:()=>{},
|
||||
extraNavigation: {title:""},
|
||||
setExtraNavigation:()=>{},
|
||||
extraComponent: <></>,
|
||||
setExtraComponent:()=>{},
|
||||
}
|
||||
|
||||
//types for location context
|
||||
type locationContextType = {
|
||||
current: Array<string>;
|
||||
setCurrent: (newState: Array<string>) => void;
|
||||
isStackedOpen: boolean;
|
||||
setIsStackedOpen: (newState: boolean) => void;
|
||||
showSideBar: boolean;
|
||||
setShowSideBar: (newState: boolean) => void;
|
||||
extraNavigation: {
|
||||
title: string;
|
||||
options?: Array<{
|
||||
name: string;
|
||||
href: string;
|
||||
icon: any;
|
||||
children?: Array<any>;
|
||||
}>;
|
||||
};
|
||||
setExtraNavigation: (newState: {
|
||||
title: string;
|
||||
options?: Array<{
|
||||
name: string;
|
||||
href: string;
|
||||
icon: any;
|
||||
children?: Array<any>;
|
||||
}>;
|
||||
}) => void;
|
||||
extraComponent: any;
|
||||
setExtraComponent: (newState: any) => void;
|
||||
};
|
||||
|
||||
//initial value for location context
|
||||
const initialValue = {
|
||||
//actual
|
||||
current: window.location.pathname.replace(/\/$/g, "").split("/"),
|
||||
isStackedOpen:
|
||||
window.innerWidth > 1024 && window.location.pathname.split("/")[1]
|
||||
? true
|
||||
: false,
|
||||
setCurrent: () => {},
|
||||
setIsStackedOpen: () => {},
|
||||
showSideBar: window.location.pathname.split("/")[1] ? true : false,
|
||||
setShowSideBar: () => {},
|
||||
extraNavigation: { title: "" },
|
||||
setExtraNavigation: () => {},
|
||||
extraComponent: <></>,
|
||||
setExtraComponent: () => {},
|
||||
};
|
||||
|
||||
export const locationContext = createContext<locationContextType>(initialValue);
|
||||
|
||||
export function LocationProvider({children}){
|
||||
const [atual,setAtual] = useState(initialValue.atual)
|
||||
const [isStackedOpen,setIsStackedOpen] = useState(initialValue.isStackedOpen)
|
||||
const [showSideBar,setShowSideBar] = useState(initialValue.showSideBar)
|
||||
const [extraNavigation, setExtraNavigation] = useState({title:""})
|
||||
const [extraComponent, setExtraComponent] = useState(<></>)
|
||||
return (
|
||||
<locationContext.Provider value={{isStackedOpen,setIsStackedOpen,atual,setAtual, showSideBar, setShowSideBar,extraNavigation, setExtraNavigation, extraComponent, setExtraComponent}}>
|
||||
{children}
|
||||
</locationContext.Provider>
|
||||
)
|
||||
export function LocationProvider({ children }) {
|
||||
const [current, setCurrent] = useState(initialValue.current);
|
||||
const [isStackedOpen, setIsStackedOpen] = useState(
|
||||
initialValue.isStackedOpen
|
||||
);
|
||||
const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar);
|
||||
const [extraNavigation, setExtraNavigation] = useState({ title: "" });
|
||||
const [extraComponent, setExtraComponent] = useState(<></>);
|
||||
return (
|
||||
<locationContext.Provider
|
||||
value={{
|
||||
isStackedOpen,
|
||||
setIsStackedOpen,
|
||||
current,
|
||||
setCurrent,
|
||||
showSideBar,
|
||||
setShowSideBar,
|
||||
extraNavigation,
|
||||
setExtraNavigation,
|
||||
extraComponent,
|
||||
setExtraComponent,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</locationContext.Provider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,33 @@
|
|||
import { createContext } from "react";
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState } from "react";
|
||||
|
||||
//context to set JSX element on the DOM
|
||||
export const PopUpContext = createContext({
|
||||
openPopUp: (popUpElement: JSX.Element) => {},
|
||||
closePopUp: () => {}
|
||||
openPopUp: (popUpElement: JSX.Element) => {},
|
||||
closePopUp: () => {},
|
||||
});
|
||||
|
||||
interface PopUpProviderProps {
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const PopUpProvider = ({ children }: PopUpProviderProps) => {
|
||||
const [popUpElement, setPopUpElement] = useState<JSX.Element | null>(null);
|
||||
const [popUpElement, setPopUpElement] = useState<JSX.Element | null>(null);
|
||||
|
||||
const openPopUp = (element: JSX.Element) => {
|
||||
setPopUpElement(element);
|
||||
};
|
||||
const openPopUp = (element: JSX.Element) => {
|
||||
setPopUpElement(element);
|
||||
};
|
||||
|
||||
const closePopUp = () => {
|
||||
setPopUpElement(null);
|
||||
};
|
||||
const closePopUp = () => {
|
||||
setPopUpElement(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<PopUpContext.Provider value={{ openPopUp, closePopUp }}>
|
||||
{children}
|
||||
{popUpElement}
|
||||
</PopUpContext.Provider>
|
||||
);
|
||||
return (
|
||||
<PopUpContext.Provider value={{ openPopUp, closePopUp }}>
|
||||
{children}
|
||||
{popUpElement}
|
||||
</PopUpContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default PopUpProvider;
|
||||
export default PopUpProvider;
|
||||
|
|
|
|||
|
|
@ -1,102 +1,158 @@
|
|||
import { createContext, useEffect, useState, useRef } from "react";
|
||||
import { example } from "../data_assets/example";
|
||||
|
||||
type flow={name:string,id:string,data:any}
|
||||
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>
|
||||
removeFlow:(id:string)=>void;
|
||||
addFlow:(flowData?:any)=>void;
|
||||
updateFlow:(newFlow:flow)=>void;
|
||||
incrementNodeId:()=>number,
|
||||
}
|
||||
type TabsContextType = {
|
||||
tabIndex: number;
|
||||
setTabIndex: (index: number) => void;
|
||||
flows: Array<flow>;
|
||||
removeFlow: (id: string) => void;
|
||||
addFlow: (flowData?: any) => void;
|
||||
updateFlow: (newFlow: flow) => void;
|
||||
incrementNodeId: () => number;
|
||||
downloadFlow: () => void;
|
||||
uploadFlow: () => void;
|
||||
};
|
||||
|
||||
const TabsContextInitialValue = {
|
||||
tabIndex : 0,
|
||||
setTabIndex:(index:number)=>{},
|
||||
flows:[],
|
||||
removeFlow:(id:string)=>{},
|
||||
addFlow:(flowData?:any)=>{},
|
||||
updateFlow:(newFlow:flow)=>{},
|
||||
incrementNodeId:()=>0,
|
||||
|
||||
tabIndex: 0,
|
||||
setTabIndex: (index: number) => {},
|
||||
flows: [],
|
||||
removeFlow: (id: string) => {},
|
||||
addFlow: (flowData?: any) => {},
|
||||
updateFlow: (newFlow: flow) => {},
|
||||
incrementNodeId: () => 0,
|
||||
downloadFlow: () => {},
|
||||
uploadFlow: () => {},
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
export const TabsContext = createContext<TabsContextType>(TabsContextInitialValue)
|
||||
|
||||
let _ = require('lodash');
|
||||
|
||||
export function TabsProvider({children}){
|
||||
const [tabIndex,setTabIndex] = useState(0)
|
||||
const [flows,setFlows] = useState<Array<flow>>([])
|
||||
const [id, setId] = useState(0);
|
||||
|
||||
const newNodeId = useRef(0);
|
||||
function incrementNodeId(){
|
||||
newNodeId.current = newNodeId.current + 1;
|
||||
return newNodeId.current;
|
||||
}
|
||||
useEffect(() => {
|
||||
if(flows.length !== 0)
|
||||
window.localStorage.setItem('tabsData', JSON.stringify({tabIndex, flows, id, nodeId: newNodeId.current}));
|
||||
}, [flows, id, tabIndex, newNodeId]);
|
||||
|
||||
useEffect(() => {
|
||||
let cookie = window.localStorage.getItem('tabsData');
|
||||
if(cookie){
|
||||
let cookieObject = JSON.parse(cookie);
|
||||
setTabIndex(cookieObject.tabIndex);
|
||||
setFlows(cookieObject.flows);
|
||||
setId(cookieObject.id);
|
||||
newNodeId.current= cookieObject.nodeId;
|
||||
}
|
||||
}, [])
|
||||
|
||||
function removeFlow(id:string){
|
||||
setFlows(prevState=>{
|
||||
const newFlows = [...prevState];
|
||||
const index = newFlows.findIndex(flow=>flow.id===id);
|
||||
if(index >= 0){
|
||||
if(index===tabIndex){
|
||||
setTabIndex(flows.length-2);
|
||||
newFlows.splice(index,1);
|
||||
} else {
|
||||
let flowId = flows[tabIndex].id;
|
||||
newFlows.splice(index,1);
|
||||
setTabIndex(newFlows.findIndex(flow=>flow.id === flowId));
|
||||
}
|
||||
|
||||
}
|
||||
return newFlows;
|
||||
});
|
||||
}
|
||||
function addFlow(flowData?:flow) {
|
||||
const data = flowData?flowData:null
|
||||
let newFlow: flow = {name: "flow"+id, id: id.toString(), data}
|
||||
setId((old) => old+1);
|
||||
setFlows(prevState => {
|
||||
const newFlows = [...prevState, newFlow];
|
||||
return newFlows;
|
||||
});
|
||||
setTabIndex(flows.length);
|
||||
}
|
||||
function updateFlow(newFlow:flow){
|
||||
setFlows(prevState=>{
|
||||
const newFlows = [...prevState];
|
||||
const index = newFlows.findIndex(flow=>flow.id===newFlow.id)
|
||||
if(index!==-1){
|
||||
newFlows[index].data = newFlow.data
|
||||
newFlows[index].name = newFlow.name
|
||||
}
|
||||
return newFlows;
|
||||
});
|
||||
}
|
||||
|
||||
return(
|
||||
<TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow}}>
|
||||
{children}
|
||||
</TabsContext.Provider>
|
||||
)
|
||||
export const TabsContext = createContext<TabsContextType>(
|
||||
TabsContextInitialValue
|
||||
);
|
||||
|
||||
let _ = require("lodash");
|
||||
|
||||
export function TabsProvider({ children }) {
|
||||
const [tabIndex, setTabIndex] = useState(0);
|
||||
const [flows, setFlows] = useState<Array<flow>>([]);
|
||||
const [id, setId] = useState(0);
|
||||
|
||||
const newNodeId = useRef(0);
|
||||
function incrementNodeId() {
|
||||
newNodeId.current = newNodeId.current + 1;
|
||||
return newNodeId.current;
|
||||
}
|
||||
useEffect(() => {
|
||||
if (flows.length !== 0)
|
||||
window.localStorage.setItem(
|
||||
"tabsData",
|
||||
JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current })
|
||||
);
|
||||
}, [flows, id, tabIndex, newNodeId]);
|
||||
|
||||
useEffect(() => {
|
||||
let cookie = window.localStorage.getItem("tabsData");
|
||||
if (cookie) {
|
||||
let cookieObject = JSON.parse(cookie);
|
||||
setTabIndex(cookieObject.tabIndex);
|
||||
setFlows(cookieObject.flows);
|
||||
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();
|
||||
}
|
||||
|
||||
function uploadFlow() {
|
||||
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) => {
|
||||
console.log(JSON.parse(text),"json from upload")
|
||||
addFlow(JSON.parse(text));
|
||||
});
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
}
|
||||
|
||||
function removeFlow(id: string) {
|
||||
setFlows((prevState) => {
|
||||
const newFlows = [...prevState];
|
||||
const index = newFlows.findIndex((flow) => flow.id === id);
|
||||
if (index >= 0) {
|
||||
if (index === tabIndex) {
|
||||
setTabIndex(flows.length - 2);
|
||||
newFlows.splice(index, 1);
|
||||
} else {
|
||||
let flowId = flows[tabIndex].id;
|
||||
newFlows.splice(index, 1);
|
||||
setTabIndex(newFlows.findIndex((flow) => flow.id === flowId));
|
||||
}
|
||||
}
|
||||
return newFlows;
|
||||
});
|
||||
}
|
||||
function addFlow(flow?: flow) {
|
||||
const data = flow?.data ? flow.data : null;
|
||||
let newFlow: flow = {
|
||||
name: flow ? flow.name : "flow" + id,
|
||||
id: id.toString(),
|
||||
data,
|
||||
chat: flow ? flow.chat : [],
|
||||
};
|
||||
setId((old) => old + 1);
|
||||
setFlows((prevState) => {
|
||||
const newFlows = [...prevState, newFlow];
|
||||
return newFlows;
|
||||
});
|
||||
setTabIndex(flows.length);
|
||||
}
|
||||
function updateFlow(newFlow: flow) {
|
||||
console.log(newFlow);
|
||||
setFlows((prevState) => {
|
||||
const newFlows = [...prevState];
|
||||
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;
|
||||
}
|
||||
return newFlows;
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<TabsContext.Provider
|
||||
value={{
|
||||
tabIndex,
|
||||
setTabIndex,
|
||||
flows,
|
||||
incrementNodeId,
|
||||
removeFlow,
|
||||
addFlow,
|
||||
updateFlow,
|
||||
downloadFlow,
|
||||
uploadFlow,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</TabsContext.Provider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,44 @@
|
|||
import { ReactEventHandler, createContext, useState } from "react";
|
||||
import { createContext, useState } from "react";
|
||||
import { ReactFlowInstance } from "reactflow";
|
||||
|
||||
type typesContextType=
|
||||
{
|
||||
reactFlowInstance: ReactFlowInstance;
|
||||
setReactFlowInstance: any;
|
||||
deleteNode:(idx:number)=>void;
|
||||
types: {};
|
||||
setTypes:(newState:{})=>void;
|
||||
//context to share types adn functions from nodes to flow
|
||||
type typesContextType = {
|
||||
reactFlowInstance: ReactFlowInstance;
|
||||
setReactFlowInstance: any;
|
||||
deleteNode: (idx: number) => void;
|
||||
types: {};
|
||||
setTypes: (newState: {}) => void;
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
const initialValue= {
|
||||
reactFlowInstance: null,
|
||||
setReactFlowInstance: ()=>{},
|
||||
deleteNode: ()=>{},
|
||||
types: {},
|
||||
setTypes:()=>{},
|
||||
}
|
||||
const initialValue = {
|
||||
reactFlowInstance: null,
|
||||
setReactFlowInstance: () => {},
|
||||
deleteNode: () => {},
|
||||
types: {},
|
||||
setTypes: () => {},
|
||||
};
|
||||
|
||||
export const typesContext = createContext<typesContextType>(initialValue);
|
||||
|
||||
export function TypesProvider({children}){
|
||||
const [types, setTypes] = useState({});
|
||||
const [reactFlowInstance, setReactFlowInstance] = useState(null);
|
||||
function deleteNode(idx){
|
||||
reactFlowInstance.setNodes(
|
||||
reactFlowInstance.getNodes().filter((n) => n.id !== idx)
|
||||
);
|
||||
}
|
||||
return (
|
||||
<typesContext.Provider value={{ types, setTypes, reactFlowInstance, setReactFlowInstance, deleteNode}}>
|
||||
{children}
|
||||
</typesContext.Provider>
|
||||
)
|
||||
export function TypesProvider({ children }) {
|
||||
const [types, setTypes] = useState({});
|
||||
const [reactFlowInstance, setReactFlowInstance] = useState(null);
|
||||
function deleteNode(idx) {
|
||||
reactFlowInstance.setNodes(
|
||||
reactFlowInstance.getNodes().filter((n) => n.id !== idx)
|
||||
);
|
||||
}
|
||||
return (
|
||||
<typesContext.Provider
|
||||
value={{
|
||||
types,
|
||||
setTypes,
|
||||
reactFlowInstance,
|
||||
setReactFlowInstance,
|
||||
deleteNode,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</typesContext.Provider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ import {
|
|||
|
||||
export const sidebarNavigation = [
|
||||
{ name: 'Home', href: '/', icon: HomeIcon, current: true },
|
||||
{ name: 'Table', href: '/table/', icon: TableCellsIcon, current: false },
|
||||
//{ name: 'Train', href: '#', icon: BoltIcon, current: false },
|
||||
//{ name: 'Model Details', href: '#', icon: LightBulbIcon, current: false },
|
||||
//{ name: 'Deploy', href: '#', icon: RocketLaunchIcon, current: false },
|
||||
{ name: 'Settings', href: '/settings/', icon: Cog6ToothIcon, current: false },
|
||||
// { name: 'Table', href: '/table/', icon: TableCellsIcon, current: false },
|
||||
// //{ name: 'Train', href: '#', icon: BoltIcon, current: false },
|
||||
// //{ name: 'Model Details', href: '#', icon: LightBulbIcon, current: false },
|
||||
// //{ name: 'Deploy', href: '#', icon: RocketLaunchIcon, current: false },
|
||||
// { name: 'Settings', href: '/settings/', icon: Cog6ToothIcon, current: false },
|
||||
]
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export default function ExtraSidebar() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<div className="mt-4 w-full">
|
||||
{Object.keys(data).map((d, i) => (
|
||||
<DisclosureComponent
|
||||
key={i}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
|
||||
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
|
||||
import { useContext, useRef, useState } from "react";
|
||||
import { TabsContext } from "../../../../contexts/tabsContext";
|
||||
|
|
@ -5,76 +6,85 @@ import { TabsContext } from "../../../../contexts/tabsContext";
|
|||
var _ = require("lodash");
|
||||
|
||||
export default function TabComponent({ selected, flow, onClick }) {
|
||||
const { removeFlow, updateFlow,flows } = useContext(TabsContext);
|
||||
const [isRename, setIsRename] = useState(false);
|
||||
const [value, setValue] = useState("");
|
||||
return (
|
||||
<>
|
||||
{flow ? (
|
||||
!selected ? (
|
||||
<div
|
||||
className="flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-t border-t-transparent border-gray-300 -ml-px"
|
||||
onClick={onClick}
|
||||
>
|
||||
{flow.name}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeFlow(flow.id);
|
||||
}}
|
||||
>
|
||||
<XMarkIcon className="h-4 hover:bg-white rounded-full" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 px-4 py-1.5 rounded-t-xl -ml-px">
|
||||
{isRename ? (
|
||||
<input
|
||||
autoFocus
|
||||
className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md w-28"
|
||||
onBlur={() => {
|
||||
setIsRename(false);
|
||||
if (value !== "") {
|
||||
let newFlow = _.cloneDeep(flow);
|
||||
newFlow.name = value;
|
||||
updateFlow(newFlow);
|
||||
}
|
||||
}}
|
||||
value={value}
|
||||
onChange={(e) => {
|
||||
setValue(e.target.value);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="text-left truncate"
|
||||
onDoubleClick={() => {
|
||||
setIsRename(true);
|
||||
setValue(flow.name);
|
||||
}}
|
||||
>
|
||||
{flow.name}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
removeFlow(flow.id);
|
||||
}}
|
||||
>
|
||||
{flows.length>1&& <XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="h-full py-1.5 flex justify-center items-center">
|
||||
<button
|
||||
className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-gray-300 -ml-px border-t border-t-transparent"
|
||||
onClick={onClick}
|
||||
>
|
||||
<PlusIcon className="h-5 rounded-full hover:bg-white" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
const { removeFlow, updateFlow, flows, downloadFlow } =
|
||||
useContext(TabsContext);
|
||||
const [isRename, setIsRename] = useState(false);
|
||||
const [value, setValue] = useState("");
|
||||
return (
|
||||
<>
|
||||
{flow ? (
|
||||
!selected ? (
|
||||
<div
|
||||
className="flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-t border-t-transparent border-gray-300 -ml-px"
|
||||
onClick={onClick}
|
||||
>
|
||||
{flow.name}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeFlow(flow.id);
|
||||
}}
|
||||
>
|
||||
<XMarkIcon className="h-4 hover:bg-white rounded-full" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 px-4 py-1.5 rounded-t-xl -ml-px">
|
||||
{isRename ? (
|
||||
<input
|
||||
autoFocus
|
||||
className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md w-28"
|
||||
onBlur={() => {
|
||||
setIsRename(false);
|
||||
if (value !== "") {
|
||||
let newFlow = _.cloneDeep(flow);
|
||||
newFlow.name = value;
|
||||
updateFlow(newFlow);
|
||||
}
|
||||
}}
|
||||
value={value}
|
||||
onChange={(e) => {
|
||||
setValue(e.target.value);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="text-left truncate"
|
||||
onDoubleClick={() => {
|
||||
setIsRename(true);
|
||||
setValue(flow.name);
|
||||
}}
|
||||
>
|
||||
{flow.name}
|
||||
</span>
|
||||
{/* <ArrowDownTrayIcon
|
||||
onClick={() => downloadFlow()}
|
||||
className="w-4 h-4 hover:text-blue-500 cursor-pointer"
|
||||
/> */}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
removeFlow(flow.id);
|
||||
}}
|
||||
>
|
||||
{flows.length > 1 && (
|
||||
<XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="h-full py-1.5 flex justify-center items-center">
|
||||
<button
|
||||
className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-gray-300 -ml-px border-t border-t-transparent"
|
||||
onClick={onClick}
|
||||
>
|
||||
<PlusIcon className="h-5 rounded-full hover:bg-white" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import { useCallback, useContext, useEffect, useRef, useState } from "react";
|
||||
import ReactFlow, {
|
||||
Background,
|
||||
Controls,
|
||||
addEdge,
|
||||
useEdgesState,
|
||||
useNodesState,
|
||||
ReactFlowProvider,
|
||||
useReactFlow,
|
||||
Background,
|
||||
Controls,
|
||||
addEdge,
|
||||
useEdgesState,
|
||||
useNodesState,
|
||||
ReactFlowProvider,
|
||||
useReactFlow,
|
||||
ControlButton,
|
||||
} from "reactflow";
|
||||
import { locationContext } from "../../contexts/locationContext";
|
||||
import ExtraSidebar from "./components/extraSidebarComponent";
|
||||
|
|
@ -20,164 +21,181 @@ import BooleanNode from "../../CustomNodes/BooleanNode";
|
|||
import { alertContext } from "../../contexts/alertContext";
|
||||
import { TabsContext } from "../../contexts/tabsContext";
|
||||
import { typesContext } from "../../contexts/typesContext";
|
||||
import {
|
||||
ArrowDownTrayIcon,
|
||||
ArrowUpTrayIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
const nodeTypes = {
|
||||
genericNode: GenericNode,
|
||||
inputNode: InputNode,
|
||||
chatInputNode: ChatInputNode,
|
||||
chatOutputNode: ChatOutputNode,
|
||||
booleanNode: BooleanNode,
|
||||
genericNode: GenericNode,
|
||||
inputNode: InputNode,
|
||||
chatInputNode: ChatInputNode,
|
||||
chatOutputNode: ChatOutputNode,
|
||||
booleanNode: BooleanNode,
|
||||
};
|
||||
|
||||
var _ = require("lodash");
|
||||
|
||||
export default function FlowPage({ flow }) {
|
||||
let { updateFlow, incrementNodeId } = useContext(TabsContext);
|
||||
const { types, reactFlowInstance, setReactFlowInstance } =
|
||||
useContext(typesContext);
|
||||
const reactFlowWrapper = useRef(null);
|
||||
let { updateFlow, incrementNodeId, downloadFlow, uploadFlow } =
|
||||
useContext(TabsContext);
|
||||
const { types, reactFlowInstance, setReactFlowInstance } =
|
||||
useContext(typesContext);
|
||||
const reactFlowWrapper = useRef(null);
|
||||
|
||||
function getId(){
|
||||
return `dndnode_}`+incrementNodeId();
|
||||
};
|
||||
function getId() {
|
||||
return `dndnode_` + incrementNodeId();
|
||||
}
|
||||
|
||||
const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
|
||||
const { setErrorData } = useContext(alertContext);
|
||||
const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
|
||||
const { setErrorData } = useContext(alertContext);
|
||||
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState(
|
||||
flow.data?.nodes ?? []
|
||||
);
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState(
|
||||
flow.data?.edges ?? []
|
||||
);
|
||||
const {setViewport} = useReactFlow()
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState(
|
||||
flow.data?.nodes ?? []
|
||||
);
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState(
|
||||
flow.data?.edges ?? []
|
||||
);
|
||||
const { setViewport } = useReactFlow();
|
||||
|
||||
useEffect(() => {
|
||||
if (reactFlowInstance && flow) {
|
||||
flow.data = reactFlowInstance.toObject();
|
||||
updateFlow(flow);
|
||||
}
|
||||
}, [nodes, edges]);
|
||||
useEffect(() => {
|
||||
if (reactFlowInstance && flow) {
|
||||
flow.data = reactFlowInstance.toObject();
|
||||
updateFlow(flow);
|
||||
}
|
||||
}, [nodes, edges]);
|
||||
|
||||
useEffect(() => {
|
||||
setNodes(flow?.data?.nodes ?? []);
|
||||
setEdges(flow?.data?.edges ?? []);
|
||||
if (reactFlowInstance) {
|
||||
setViewport(
|
||||
flow?.data?.viewport ?? { x: 1, y: 0, zoom: 1 }
|
||||
);
|
||||
}
|
||||
}, [flow, reactFlowInstance, setEdges, setNodes]);
|
||||
useEffect(() => {
|
||||
setNodes(flow?.data?.nodes ?? []);
|
||||
setEdges(flow?.data?.edges ?? []);
|
||||
if (reactFlowInstance) {
|
||||
setViewport(flow?.data?.viewport ?? { x: 1, y: 0, zoom: 1 });
|
||||
}
|
||||
}, [flow, reactFlowInstance, setEdges, setNodes]);
|
||||
|
||||
useEffect(() => {
|
||||
setExtraComponent(<ExtraSidebar />);
|
||||
setExtraNavigation({ title: "Nodes" });
|
||||
}, [setExtraComponent, setExtraNavigation]);
|
||||
useEffect(() => {
|
||||
setExtraComponent(<ExtraSidebar />);
|
||||
setExtraNavigation({ title: "Nodes" });
|
||||
}, [setExtraComponent, setExtraNavigation]);
|
||||
|
||||
const onEdgesChangeMod = useCallback(
|
||||
(s) => {
|
||||
onEdgesChange(s);
|
||||
setNodes((x) => {
|
||||
let newX = _.cloneDeep(x);
|
||||
return newX;
|
||||
});
|
||||
},
|
||||
[onEdgesChange, setNodes]
|
||||
);
|
||||
const onEdgesChangeMod = useCallback(
|
||||
(s) => {
|
||||
onEdgesChange(s);
|
||||
setNodes((x) => {
|
||||
let newX = _.cloneDeep(x);
|
||||
return newX;
|
||||
});
|
||||
},
|
||||
[onEdgesChange, setNodes]
|
||||
);
|
||||
|
||||
const onConnect = useCallback(
|
||||
(params) => {
|
||||
setEdges((eds) =>
|
||||
addEdge({ ...params, className: "animate-pulse" }, eds)
|
||||
);
|
||||
setNodes((x) => {
|
||||
let newX = _.cloneDeep(x);
|
||||
return newX;
|
||||
});
|
||||
},
|
||||
[setEdges, setNodes]
|
||||
);
|
||||
const onConnect = useCallback(
|
||||
(params) => {
|
||||
setEdges((eds) =>
|
||||
addEdge({ ...params, className: "animate-pulse" }, eds)
|
||||
);
|
||||
setNodes((x) => {
|
||||
let newX = _.cloneDeep(x);
|
||||
return newX;
|
||||
});
|
||||
},
|
||||
[setEdges, setNodes]
|
||||
);
|
||||
|
||||
const onDragOver = useCallback((event) => {
|
||||
event.preventDefault();
|
||||
event.dataTransfer.dropEffect = "move";
|
||||
}, []);
|
||||
const onDragOver = useCallback((event) => {
|
||||
event.preventDefault();
|
||||
event.dataTransfer.dropEffect = "move";
|
||||
}, []);
|
||||
|
||||
const onDrop = useCallback(
|
||||
(event) => {
|
||||
event.preventDefault();
|
||||
const onDrop = useCallback(
|
||||
(event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
|
||||
let data = JSON.parse(event.dataTransfer.getData("json"));
|
||||
if (
|
||||
data.type !== "chatInput" ||
|
||||
(data.type === "chatInput" &&
|
||||
!reactFlowInstance.getNodes().some((n) => n.type === "chatInputNode"))
|
||||
) {
|
||||
const position = reactFlowInstance.project({
|
||||
x: event.clientX - reactflowBounds.left,
|
||||
y: event.clientY - reactflowBounds.top,
|
||||
});
|
||||
let newId = getId();
|
||||
const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
|
||||
let data = JSON.parse(event.dataTransfer.getData("json"));
|
||||
if (
|
||||
data.type !== "chatInput" ||
|
||||
(data.type === "chatInput" &&
|
||||
!reactFlowInstance.getNodes().some((n) => n.type === "chatInputNode"))
|
||||
) {
|
||||
const position = reactFlowInstance.project({
|
||||
x: event.clientX - reactflowBounds.left,
|
||||
y: event.clientY - reactflowBounds.top,
|
||||
});
|
||||
let newId = getId();
|
||||
|
||||
const newNode = {
|
||||
id: newId,
|
||||
type:
|
||||
data.type === "str"
|
||||
? "inputNode"
|
||||
: data.type === "chatInput"
|
||||
? "chatInputNode"
|
||||
: data.type === "chatOutput"
|
||||
? "chatOutputNode"
|
||||
: data.type === "bool"
|
||||
? "booleanNode"
|
||||
: "genericNode",
|
||||
position,
|
||||
data: {
|
||||
...data,
|
||||
id: newId,
|
||||
value: null,
|
||||
},
|
||||
};
|
||||
setNodes((nds) => nds.concat(newNode));
|
||||
} else {
|
||||
setErrorData({
|
||||
title: "Error creating node",
|
||||
list: ["There can't be more than one chat input."],
|
||||
});
|
||||
}
|
||||
},
|
||||
[reactFlowInstance, setErrorData, setNodes]
|
||||
);
|
||||
const newNode = {
|
||||
id: newId,
|
||||
type:
|
||||
data.type === "str"
|
||||
? "inputNode"
|
||||
: data.type === "chatInput"
|
||||
? "chatInputNode"
|
||||
: data.type === "chatOutput"
|
||||
? "chatOutputNode"
|
||||
: data.type === "bool"
|
||||
? "booleanNode"
|
||||
: "genericNode",
|
||||
position,
|
||||
data: {
|
||||
...data,
|
||||
id: newId,
|
||||
value: null,
|
||||
},
|
||||
};
|
||||
setNodes((nds) => nds.concat(newNode));
|
||||
} else {
|
||||
setErrorData({
|
||||
title: "Error creating node",
|
||||
list: ["There can't be more than one chat input."],
|
||||
});
|
||||
}
|
||||
},
|
||||
[reactFlowInstance, setErrorData, setNodes]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="w-full h-full" ref={reactFlowWrapper}>
|
||||
{Object.keys(types).length > 0 ? (
|
||||
<>
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
onMove={() =>
|
||||
updateFlow({ ...flow, data: reactFlowInstance.toObject() })
|
||||
}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChangeMod}
|
||||
onConnect={onConnect}
|
||||
onLoad={setReactFlowInstance}
|
||||
onInit={setReactFlowInstance}
|
||||
nodeTypes={nodeTypes}
|
||||
connectionLineComponent={connection}
|
||||
onDragOver={onDragOver}
|
||||
onDrop={onDrop}
|
||||
>
|
||||
<Background />
|
||||
<Controls></Controls>
|
||||
</ReactFlow>
|
||||
<Chat reactFlowInstance={reactFlowInstance} />
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="w-full h-full" ref={reactFlowWrapper}>
|
||||
{Object.keys(types).length > 0 ? (
|
||||
<>
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
onMove={() =>
|
||||
updateFlow({ ...flow, data: reactFlowInstance.toObject() })
|
||||
}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChangeMod}
|
||||
onConnect={onConnect}
|
||||
onLoad={setReactFlowInstance}
|
||||
onInit={setReactFlowInstance}
|
||||
nodeTypes={nodeTypes}
|
||||
connectionLineComponent={connection}
|
||||
onDragOver={onDragOver}
|
||||
onDrop={onDrop}
|
||||
>
|
||||
<Background />
|
||||
<Controls>
|
||||
<ControlButton
|
||||
className="text-black hover:text-blue-500"
|
||||
onClick={() => uploadFlow()}
|
||||
>
|
||||
<ArrowUpTrayIcon />
|
||||
</ControlButton>
|
||||
|
||||
<ControlButton
|
||||
className="text-black hover:text-blue-500"
|
||||
onClick={() => downloadFlow()}
|
||||
>
|
||||
<ArrowDownTrayIcon />
|
||||
</ControlButton>
|
||||
</Controls>
|
||||
</ReactFlow>
|
||||
<Chat flow={flow} reactFlowInstance={reactFlowInstance} />
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
1
space_flow/src/react-app-env.d.ts
vendored
1
space_flow/src/react-app-env.d.ts
vendored
|
|
@ -1 +0,0 @@
|
|||
/// <reference types="react-scripts" />
|
||||
|
|
@ -1 +0,0 @@
|
|||
import '@testing-library/jest-dom';
|
||||
Loading…
Add table
Add a link
Reference in a new issue