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

Formatting

Browse source
This commit is contained in:
Gabriel Almeida 2023-05-27 13:01:20 -03:00
commit 276a06976d
65 changed files with 4515 additions and 4390 deletions
Download patch file Download diff file Expand all files Collapse all files

364
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -17,191 +17,191 @@ import IntComponent from "../../../../components/intComponent";
import PromptAreaComponent from "../../../../components/promptComponent"; import PromptAreaComponent from "../../../../components/promptComponent";
export default function ParameterComponent({ export default function ParameterComponent({
left, left,
id, id,
data, data,
tooltipTitle, tooltipTitle,
title, title,
color, color,
type, type,
name = "", name = "",
required = false, required = false,
}: ParameterComponentType) { }: ParameterComponentType) {
const ref = useRef(null); const ref = useRef(null);
const updateNodeInternals = useUpdateNodeInternals(); const updateNodeInternals = useUpdateNodeInternals();
const [position, setPosition] = useState(0); const [position, setPosition] = useState(0);
useEffect(() => { useEffect(() => {
if (ref.current && ref.current.offsetTop && ref.current.clientHeight) { if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
setPosition(ref.current.offsetTop + ref.current.clientHeight / 2); setPosition(ref.current.offsetTop + ref.current.clientHeight / 2);
updateNodeInternals(data.id); updateNodeInternals(data.id);
} }
}, [data.id, ref, updateNodeInternals]); }, [data.id, ref, updateNodeInternals]);
useEffect(() => { useEffect(() => {
updateNodeInternals(data.id); updateNodeInternals(data.id);
}, [data.id, position, updateNodeInternals]); }, [data.id, position, updateNodeInternals]);
const [enabled, setEnabled] = useState( const [enabled, setEnabled] = useState(
data.node.template[name]?.value ?? false data.node.template[name]?.value ?? false
); );
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
let disabled = let disabled =
reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false; reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
const { save } = useContext(TabsContext); const { save } = useContext(TabsContext);
return ( return (
<div <div
ref={ref} ref={ref}
className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-gray-800 dark:text-white mt-1 px-5 py-2" className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
> >
<> <>
<div className={"text-sm truncate w-full " + (left ? "" : "text-end")}> <div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
{title} {title}
<span className="text-red-600">{required ? " *" : ""}</span> <span className="text-red-600">{required ? " *" : ""}</span>
</div> </div>
{left && {left &&
(type === "str" || (type === "str" ||
type === "bool" || type === "bool" ||
type === "float" || type === "float" ||
type === "code" || type === "code" ||
type === "prompt" || type === "prompt" ||
type === "file" || type === "file" ||
type === "int") ? ( type === "int") ? (
<></> <></>
) : ( ) : (
<Tooltip title={tooltipTitle + (required ? " (required)" : "")}> <Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
<Handle <Handle
type={left ? "target" : "source"} type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right} position={left ? Position.Left : Position.Right}
id={id} id={id}
isValidConnection={(connection) => isValidConnection={(connection) =>
isValidConnection(connection, reactFlowInstance) isValidConnection(connection, reactFlowInstance)
} }
className={classNames( className={classNames(
left ? "-ml-0.5 " : "-mr-0.5 ", left ? "-ml-0.5 " : "-mr-0.5 ",
"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800" "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
)} )}
style={{ style={{
borderColor: color, borderColor: color,
top: position, top: position,
}} }}
></Handle> ></Handle>
</Tooltip> </Tooltip>
)} )}
{left === true && {left === true &&
type === "str" && type === "str" &&
!data.node.template[name].options ? ( !data.node.template[name].options ? (
<div className="mt-2 w-full"> <div className="mt-2 w-full">
{data.node.template[name].list ? ( {data.node.template[name].list ? (
<InputListComponent <InputListComponent
disabled={disabled} disabled={disabled}
value={ value={
!data.node.template[name].value || !data.node.template[name].value ||
data.node.template[name].value === "" data.node.template[name].value === ""
? [""] ? [""]
: data.node.template[name].value : data.node.template[name].value
} }
onChange={(t: string[]) => { onChange={(t: string[]) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
) : data.node.template[name].multiline ? ( ) : data.node.template[name].multiline ? (
<TextAreaComponent <TextAreaComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
) : ( ) : (
<InputComponent <InputComponent
disabled={disabled} disabled={disabled}
password={data.node.template[name].password ?? false} password={data.node.template[name].password ?? false}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t) => { onChange={(t) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
)} )}
</div> </div>
) : left === true && type === "bool" ? ( ) : left === true && type === "bool" ? (
<div className="mt-2"> <div className="mt-2">
<ToggleComponent <ToggleComponent
disabled={disabled} disabled={disabled}
enabled={enabled} enabled={enabled}
setEnabled={(t) => { setEnabled={(t) => {
data.node.template[name].value = t; data.node.template[name].value = t;
setEnabled(t); setEnabled(t);
save(); save();
}} }}
/> />
</div> </div>
) : left === true && type === "float" ? ( ) : left === true && type === "float" ? (
<FloatComponent <FloatComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t) => { onChange={(t) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
) : left === true && ) : left === true &&
type === "str" && type === "str" &&
data.node.template[name].options ? ( data.node.template[name].options ? (
<Dropdown <Dropdown
options={data.node.template[name].options} options={data.node.template[name].options}
onSelect={(newValue) => (data.node.template[name].value = newValue)} onSelect={(newValue) => (data.node.template[name].value = newValue)}
value={data.node.template[name].value ?? "Choose an option"} value={data.node.template[name].value ?? "Choose an option"}
></Dropdown> ></Dropdown>
) : left === true && type === "code" ? ( ) : left === true && type === "code" ? (
<CodeAreaComponent <CodeAreaComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
) : left === true && type === "file" ? ( ) : left === true && type === "file" ? (
<InputFileComponent <InputFileComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[name].value = t; data.node.template[name].value = t;
}} }}
fileTypes={data.node.template[name].fileTypes} fileTypes={data.node.template[name].fileTypes}
suffixes={data.node.template[name].suffixes} suffixes={data.node.template[name].suffixes}
onFileChange={(t: string) => { onFileChange={(t: string) => {
data.node.template[name].content = t; data.node.template[name].content = t;
save(); save();
}} }}
></InputFileComponent> ></InputFileComponent>
) : left === true && type === "int" ? ( ) : left === true && type === "int" ? (
<IntComponent <IntComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t) => { onChange={(t) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
) : left === true && type === "prompt" ? ( ) : left === true && type === "prompt" ? (
<PromptAreaComponent <PromptAreaComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
) : ( ) : (
<></> <></>
)} )}
</> </>
</div> </div>
); );
} }

293
src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
View file

@ -1,8 +1,8 @@
import { import {
XCircleIcon, XCircleIcon,
XMarkIcon, XMarkIcon,
InformationCircleIcon, InformationCircleIcon,
CheckCircleIcon, CheckCircleIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
@ -10,145 +10,152 @@ import { useState } from "react";
import { SingleAlertComponentType } from "../../../../types/alerts"; import { SingleAlertComponentType } from "../../../../types/alerts";
export default function SingleAlert({ export default function SingleAlert({
dropItem, dropItem,
removeAlert, removeAlert,
}: SingleAlertComponentType) { }: SingleAlertComponentType) {
const [show, setShow] = useState(true); const [show, setShow] = useState(true);
const type = dropItem.type; const type = dropItem.type;
return ( return (
<Transition <Transition
className="relative" className="relative"
show={show} show={show}
appear={true} appear={true}
enter="transition-transform duration-500 ease-out" enter="transition-transform duration-500 ease-out"
enterFrom={"transform translate-x-[-100%]"} enterFrom={"transform translate-x-[-100%]"}
enterTo={"transform translate-x-0"} enterTo={"transform translate-x-0"}
leave="transition-transform duration-500 ease-in" leave="transition-transform duration-500 ease-in"
leaveFrom={"transform translate-x-0"} leaveFrom={"transform translate-x-0"}
leaveTo={"transform translate-x-[-100%]"} leaveTo={"transform translate-x-[-100%]"}
> >
{type === "error" ? ( {type === "error" ? (
<div <div
className="flex bg-red-50 dark:bg-red-900 rounded-md p-3 mb-2 mx-2" className="flex bg-red-50 dark:bg-red-900 rounded-md p-3 mb-2 mx-2"
key={dropItem.id} key={dropItem.id}
> >
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<XCircleIcon className="h-5 w-5 text-red-400 dark:text-red-50" aria-hidden="true" /> <XCircleIcon
</div> className="h-5 w-5 text-red-400 dark:text-red-50"
<div className="ml-3"> aria-hidden="true"
<h3 className="text-sm break-words font-medium text-red-800 dark:text-white/80"> />
{dropItem.title} </div>
</h3> <div className="ml-3">
{dropItem.list ? ( <h3 className="text-sm break-words font-medium text-red-800 dark:text-white/80">
<div className="mt-2 text-sm text-red-700 dark:text-red-50"> {dropItem.title}
<ul className="list-disc space-y-1 pl-5"> </h3>
{dropItem.list.map((item, idx) => ( {dropItem.list ? (
<li className="break-words" key={idx}>{item}</li> <div className="mt-2 text-sm text-red-700 dark:text-red-50">
))} <ul className="list-disc space-y-1 pl-5">
</ul> {dropItem.list.map((item, idx) => (
</div> <li className="break-words" key={idx}>
) : ( {item}
<></> </li>
)} ))}
</div> </ul>
<div className="ml-auto pl-3"> </div>
<div className="-mx-1.5 -my-1.5"> ) : (
<button <></>
type="button" )}
onClick={() => { </div>
setShow(false); <div className="ml-auto pl-3">
setTimeout(() => { <div className="-mx-1.5 -my-1.5">
removeAlert(dropItem.id); <button
}, 500); type="button"
}} onClick={() => {
className="inline-flex rounded-md bg-red-50 dark:bg-transparent p-1.5 text-red-500 dark:text-red-50" setShow(false);
> setTimeout(() => {
<span className="sr-only">Dismiss</span> removeAlert(dropItem.id);
<XMarkIcon className="h-5 w-5" aria-hidden="true" /> }, 500);
</button> }}
</div> className="inline-flex rounded-md bg-red-50 dark:bg-transparent p-1.5 text-red-500 dark:text-red-50"
</div> >
</div> <span className="sr-only">Dismiss</span>
) : type === "notice" ? ( <XMarkIcon className="h-5 w-5" aria-hidden="true" />
<div </button>
className="flex rounded-md bg-blue-50 dark:bg-blue-900 p-3 mb-2 mx-2" </div>
key={dropItem.id} </div>
> </div>
<div className="flex-shrink-0"> ) : type === "notice" ? (
<InformationCircleIcon <div
className="h-5 w-5 text-blue-400 dark:text-blue-50" className="flex rounded-md bg-blue-50 dark:bg-blue-900 p-3 mb-2 mx-2"
aria-hidden="true" key={dropItem.id}
/> >
</div> <div className="flex-shrink-0">
<div className="ml-3 flex-1 md:flex md:justify-between"> <InformationCircleIcon
<p className="text-sm text-blue-700 dark:text-white/80">{dropItem.title}</p> className="h-5 w-5 text-blue-400 dark:text-blue-50"
<p className="mt-3 text-sm md:mt-0 md:ml-6"> aria-hidden="true"
{dropItem.link ? ( />
<Link </div>
to={dropItem.link} <div className="ml-3 flex-1 md:flex md:justify-between">
className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 dark:hover:text-blue-100 hover:text-blue-600" <p className="text-sm text-blue-700 dark:text-white/80">
> {dropItem.title}
Details </p>
</Link> <p className="mt-3 text-sm md:mt-0 md:ml-6">
) : ( {dropItem.link ? (
<></> <Link
)} to={dropItem.link}
</p> className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 dark:hover:text-blue-100 hover:text-blue-600"
</div> >
<div className="ml-auto pl-3"> Details
<div className="-mx-1.5 -my-1.5"> </Link>
<button ) : (
type="button" <></>
onClick={() => { )}
setShow(false); </p>
setTimeout(() => { </div>
removeAlert(dropItem.id); <div className="ml-auto pl-3">
}, 500); <div className="-mx-1.5 -my-1.5">
}} <button
className="inline-flex rounded-md bg-blue-50 dark:bg-transparent p-1.5 text-blue-500 dark:text-blue-50" type="button"
> onClick={() => {
<span className="sr-only">Dismiss</span> setShow(false);
<XMarkIcon className="h-5 w-5" aria-hidden="true" /> setTimeout(() => {
</button> removeAlert(dropItem.id);
</div> }, 500);
</div> }}
</div> className="inline-flex rounded-md bg-blue-50 dark:bg-transparent p-1.5 text-blue-500 dark:text-blue-50"
) : ( >
<div <span className="sr-only">Dismiss</span>
className="flex bg-green-50 dark:bg-green-900 p-3 mb-2 mx-2 rounded-md" <XMarkIcon className="h-5 w-5" aria-hidden="true" />
key={dropItem.id} </button>
> </div>
<div className="flex-shrink-0"> </div>
<CheckCircleIcon </div>
className="h-5 w-5 text-green-400 dark:text-green-50" ) : (
aria-hidden="true" <div
/> className="flex bg-green-50 dark:bg-green-900 p-3 mb-2 mx-2 rounded-md"
</div> key={dropItem.id}
<div className="ml-3"> >
<p className="text-sm font-medium text-green-800 dark:bg-white/80"> <div className="flex-shrink-0">
{dropItem.title} <CheckCircleIcon
</p> className="h-5 w-5 text-green-400 dark:text-green-50"
</div> aria-hidden="true"
<div className="ml-auto pl-3"> />
<div className="-mx-1.5 -my-1.5"> </div>
<button <div className="ml-3">
type="button" <p className="text-sm font-medium text-green-800 dark:bg-white/80">
onClick={() => { {dropItem.title}
setShow(false); </p>
setTimeout(() => { </div>
removeAlert(dropItem.id); <div className="ml-auto pl-3">
}, 500); <div className="-mx-1.5 -my-1.5">
}} <button
className="inline-flex rounded-md bg-green-50 dark:bg-transparent p-1.5 text-green-500 dark:text-green-50" type="button"
> onClick={() => {
<span className="sr-only">Dismiss</span> setShow(false);
<XMarkIcon className="h-5 w-5" aria-hidden="true" /> setTimeout(() => {
</button> removeAlert(dropItem.id);
</div> }, 500);
</div> }}
</div> className="inline-flex rounded-md bg-green-50 dark:bg-transparent p-1.5 text-green-500 dark:text-green-50"
)} >
</Transition> <span className="sr-only">Dismiss</span>
); <XMarkIcon className="h-5 w-5" aria-hidden="true" />
</button>
</div>
</div>
</div>
)}
</Transition>
);
} }

106
src/frontend/src/alerts/alertDropDown/index.tsx
View file

@ -7,60 +7,60 @@ import { AlertDropdownType } from "../../types/alerts";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { useOnClickOutside } from "../hooks/useOnClickOutside"; import { useOnClickOutside } from "../hooks/useOnClickOutside";
export default function AlertDropdown({}: AlertDropdownType) { export default function AlertDropdown({}: AlertDropdownType) {
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const componentRef = useRef<HTMLDivElement>(null); const componentRef = useRef<HTMLDivElement>(null);
// Use the custom hook // Use the custom hook
useOnClickOutside(componentRef, () => { useOnClickOutside(componentRef, () => {
closePopUp(); closePopUp();
}); });
const { const {
notificationList, notificationList,
clearNotificationList, clearNotificationList,
removeFromNotificationList, removeFromNotificationList,
} = useContext(alertContext); } = useContext(alertContext);
return ( return (
<div <div
ref={componentRef} ref={componentRef}
className="z-10 py-3 pb-4 px-2 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col" className="z-10 py-3 pb-4 px-2 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
> >
<div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800 dark:text-gray-200"> <div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800 dark:text-gray-200">
Notifications Notifications
<div className="flex gap-3 pr-3 "> <div className="flex gap-3 pr-3 ">
<button <button
className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500" className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
onClick={() => { onClick={() => {
closePopUp(); closePopUp();
setTimeout(clearNotificationList, 100); setTimeout(clearNotificationList, 100);
}} }}
> >
<TrashIcon className="w-[1.1rem] h-[1.1rem]" /> <TrashIcon className="w-[1.1rem] h-[1.1rem]" />
</button> </button>
<button <button
className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500" className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
onClick={closePopUp} onClick={closePopUp}
> >
<XMarkIcon className="h-5 w-5" /> <XMarkIcon className="h-5 w-5" />
</button> </button>
</div> </div>
</div> </div>
<div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-gray-900 dark:text-gray-300"> <div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-gray-900 dark:text-gray-300">
{notificationList.length !== 0 ? ( {notificationList.length !== 0 ? (
notificationList.map((alertItem, index) => ( notificationList.map((alertItem, index) => (
<SingleAlert <SingleAlert
key={alertItem.id} key={alertItem.id}
dropItem={alertItem} dropItem={alertItem}
removeAlert={removeFromNotificationList} removeAlert={removeFromNotificationList}
/> />
)) ))
) : ( ) : (
<div className="h-full w-full pb-16 text-gray-500 dark:text-gray-500 flex justify-center items-center"> <div className="h-full w-full pb-16 text-gray-500 dark:text-gray-500 flex justify-center items-center">
No new notifications No new notifications
</div> </div>
)} )}
</div> </div>
</div> </div>
); );
} }

121
src/frontend/src/alerts/error/index.tsx
View file

@ -4,63 +4,68 @@ import { useEffect, useState } from "react";
import { ErrorAlertType } from "../../types/alerts"; import { ErrorAlertType } from "../../types/alerts";
export default function ErrorAlert({ export default function ErrorAlert({
title, title,
list = [], list = [],
id, id,
removeAlert, removeAlert,
}: ErrorAlertType) { }: ErrorAlertType) {
const [show, setShow] = useState(true); const [show, setShow] = useState(true);
useEffect(() => { useEffect(() => {
if (show) { if (show) {
setTimeout(() => { setTimeout(() => {
setShow(false); setShow(false);
setTimeout(() => { setTimeout(() => {
removeAlert(id); removeAlert(id);
}, 500); }, 500);
}, 5000); }, 5000);
} }
}, [id, removeAlert, show]); }, [id, removeAlert, show]);
return ( return (
<Transition <Transition
className="relative" className="relative"
show={show} show={show}
appear={true} appear={true}
enter="transition-transform duration-500 ease-out" enter="transition-transform duration-500 ease-out"
enterFrom={"transform translate-x-[-100%]"} enterFrom={"transform translate-x-[-100%]"}
enterTo={"transform translate-x-0"} enterTo={"transform translate-x-0"}
leave="transition-transform duration-500 ease-in" leave="transition-transform duration-500 ease-in"
leaveFrom={"transform translate-x-0"} leaveFrom={"transform translate-x-0"}
leaveTo={"transform translate-x-[-100%]"} leaveTo={"transform translate-x-[-100%]"}
> >
<div <div
onClick={() => { onClick={() => {
setShow(false); setShow(false);
setTimeout(() => { setTimeout(() => {
removeAlert(id); removeAlert(id);
}, 500); }, 500);
}} }}
className="rounded-md w-96 mt-6 shadow-xl bg-red-50 dark:bg-red-900 p-4 cursor-pointer" className="rounded-md w-96 mt-6 shadow-xl bg-red-50 dark:bg-red-900 p-4 cursor-pointer"
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<XCircleIcon className="h-5 w-5 text-red-400 dark:text-red-50" aria-hidden="true" /> <XCircleIcon
</div> className="h-5 w-5 text-red-400 dark:text-red-50"
<div className="ml-3"> aria-hidden="true"
<h3 className="text-sm font-medium text-red-800 dark:text-white/80">{title}</h3> />
{list.length !== 0 ? ( </div>
<div className="mt-2 text-sm text-red-700 dark:text-red-50"> <div className="ml-3">
<ul className="list-disc space-y-1 pl-5"> <h3 className="text-sm font-medium text-red-800 dark:text-white/80">
{list.map((item, index) => ( {title}
<li key={index}>{item}</li> </h3>
))} {list.length !== 0 ? (
</ul> <div className="mt-2 text-sm text-red-700 dark:text-red-50">
</div> <ul className="list-disc space-y-1 pl-5">
) : ( {list.map((item, index) => (
<></> <li key={index}>{item}</li>
)} ))}
</div> </ul>
</div> </div>
</div> ) : (
</Transition> <></>
); )}
</div>
</div>
</div>
</Transition>
);
} }

50
src/frontend/src/alerts/hooks/useOnClickOutside/index.ts
View file

@ -1,33 +1,33 @@
import { useEffect } from "react"; import { useEffect } from "react";
export function useOnClickOutside(ref, handler) { export function useOnClickOutside(ref, handler) {
useEffect(() => { useEffect(() => {
const listener = (event) => { const listener = (event) => {
// Do nothing if clicking ref's element or its children // Do nothing if clicking ref's element or its children
if (!ref.current || ref.current.contains(event.target)) { if (!ref.current || ref.current.contains(event.target)) {
return; return;
} }
handler(event); handler(event);
}; };
// Attach the listener to the document // Attach the listener to the document
document.addEventListener("mousedown", listener, { passive: true }); document.addEventListener("mousedown", listener, { passive: true });
// Attach the listener to the react-flow instance // Attach the listener to the react-flow instance
const reactFlowContainer = document.querySelector(".react-flow"); const reactFlowContainer = document.querySelector(".react-flow");
if (reactFlowContainer) { if (reactFlowContainer) {
reactFlowContainer.addEventListener("mousedown", listener, { reactFlowContainer.addEventListener("mousedown", listener, {
passive: true, passive: true,
}); });
} }
// Clean up the listener when the component is unmounted // Clean up the listener when the component is unmounted
return () => { return () => {
document.removeEventListener("mousedown", listener); document.removeEventListener("mousedown", listener);
if (reactFlowContainer) { if (reactFlowContainer) {
reactFlowContainer.removeEventListener("mousedown", listener); reactFlowContainer.removeEventListener("mousedown", listener);
} }
}; };
}, [ref, handler]); // Rerun only if ref or handler changes }, [ref, handler]); // Rerun only if ref or handler changes
} }

116
src/frontend/src/alerts/notice/index.tsx
View file

@ -5,63 +5,63 @@ import { Link } from "react-router-dom";
import { NoticeAlertType } from "../../types/alerts"; import { NoticeAlertType } from "../../types/alerts";
export default function NoticeAlert({ export default function NoticeAlert({
title, title,
link = "", link = "",
id, id,
removeAlert, removeAlert,
}: NoticeAlertType) { }: NoticeAlertType) {
const [show, setShow] = useState(true); const [show, setShow] = useState(true);
useEffect(() => { useEffect(() => {
if (show) { if (show) {
setTimeout(() => { setTimeout(() => {
setShow(false); setShow(false);
setTimeout(() => { setTimeout(() => {
removeAlert(id); removeAlert(id);
}, 500); }, 500);
}, 5000); }, 5000);
} }
}, [id, removeAlert, show]); }, [id, removeAlert, show]);
return ( return (
<Transition <Transition
show={show} show={show}
enter="transition-transform duration-500 ease-out" enter="transition-transform duration-500 ease-out"
enterFrom={"transform translate-x-[-100%]"} enterFrom={"transform translate-x-[-100%]"}
enterTo={"transform translate-x-0"} enterTo={"transform translate-x-0"}
leave="transition-transform duration-500 ease-in" leave="transition-transform duration-500 ease-in"
leaveFrom={"transform translate-x-0"} leaveFrom={"transform translate-x-0"}
leaveTo={"transform translate-x-[-100%]"} leaveTo={"transform translate-x-[-100%]"}
> >
<div <div
onClick={() => { onClick={() => {
setShow(false); setShow(false);
removeAlert(id); removeAlert(id);
}} }}
className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 dark:bg-blue-900 p-4" className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 dark:bg-blue-900 p-4"
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<InformationCircleIcon <InformationCircleIcon
className="h-5 w-5 text-blue-400 dark:text-blue-50" className="h-5 w-5 text-blue-400 dark:text-blue-50"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="ml-3 flex-1 md:flex md:justify-between"> <div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-blue-700 dark:text-white/80">{title}</p> <p className="text-sm text-blue-700 dark:text-white/80">{title}</p>
<p className="mt-3 text-sm md:mt-0 md:ml-6"> <p className="mt-3 text-sm md:mt-0 md:ml-6">
{link !== "" ? ( {link !== "" ? (
<Link <Link
to={link} to={link}
className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 hover:dark:text-blue-10 hover:text-blue-600" className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 hover:dark:text-blue-10 hover:text-blue-600"
> >
Details Details
</Link> </Link>
) : ( ) : (
<></> <></>
)} )}
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</Transition> </Transition>
); );
} }

92
src/frontend/src/alerts/success/index.tsx
View file

@ -4,50 +4,52 @@ import { useEffect, useState } from "react";
import { SuccessAlertType } from "../../types/alerts"; import { SuccessAlertType } from "../../types/alerts";
export default function SuccessAlert({ export default function SuccessAlert({
title, title,
id, id,
removeAlert, removeAlert,
}: SuccessAlertType) { }: SuccessAlertType) {
const [show, setShow] = useState(true); const [show, setShow] = useState(true);
useEffect(() => { useEffect(() => {
if (show) { if (show) {
setTimeout(() => { setTimeout(() => {
setShow(false); setShow(false);
setTimeout(() => { setTimeout(() => {
removeAlert(id); removeAlert(id);
}, 500); }, 500);
}, 5000); }, 5000);
} }
}, [id, removeAlert, show]); }, [id, removeAlert, show]);
return ( return (
<Transition <Transition
show={show} show={show}
enter="transition-transform duration-500 ease-out" enter="transition-transform duration-500 ease-out"
enterFrom={"transform translate-x-[-100%]"} enterFrom={"transform translate-x-[-100%]"}
enterTo={"transform translate-x-0"} enterTo={"transform translate-x-0"}
leave="transition-transform duration-500 ease-in" leave="transition-transform duration-500 ease-in"
leaveFrom={"transform translate-x-0"} leaveFrom={"transform translate-x-0"}
leaveTo={"transform translate-x-[-100%]"} leaveTo={"transform translate-x-[-100%]"}
> >
<div <div
onClick={() => { onClick={() => {
setShow(false); setShow(false);
removeAlert(id); removeAlert(id);
}} }}
className="rounded-md w-96 mt-6 shadow-xl bg-green-50 dark:bg-green-900 p-4" className="rounded-md w-96 mt-6 shadow-xl bg-green-50 dark:bg-green-900 p-4"
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<CheckCircleIcon <CheckCircleIcon
className="h-5 w-5 text-green-400 dark:text-green-50" className="h-5 w-5 text-green-400 dark:text-green-50"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="ml-3"> <div className="ml-3">
<p className="text-sm font-medium text-green-800 dark:text-white/80">{title}</p> <p className="text-sm font-medium text-green-800 dark:text-white/80">
</div> {title}
</div> </p>
</div> </div>
</Transition> </div>
); </div>
</Transition>
);
} }

62
src/frontend/src/components/CrashErrorComponent/index.tsx
View file

@ -1,33 +1,33 @@
export default function CrashErrorComponent({ error, resetErrorBoundary }) { export default function CrashErrorComponent({ error, resetErrorBoundary }) {
return ( return (
<div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 z-50"> <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 z-50">
<div className="bg-white max-w-4xl h-1/3 min-h-fit rounded-lg shadow-lg p-8 text-start flex flex-col justify-evenly"> <div className="bg-white max-w-4xl h-1/3 min-h-fit rounded-lg shadow-lg p-8 text-start flex flex-col justify-evenly">
<h1 className="text-red-500 text-3xl mb-4"> <h1 className="text-red-500 text-3xl mb-4">
Oops! An unknown error has occurred. Oops! An unknown error has occurred.
</h1> </h1>
<p className="text-gray-700 mb-4 text-xl"> <p className="text-gray-700 mb-4 text-xl">
Please click the 'Reset Application' button to restore the Please click the 'Reset Application' button to restore the
application's state. If the error persists, please create an issue on application's state. If the error persists, please create an issue on
our GitHub page. We apologize for any inconvenience this may have our GitHub page. We apologize for any inconvenience this may have
caused. caused.
</p> </p>
<div className="flex justify-center"> <div className="flex justify-center">
<button <button
onClick={resetErrorBoundary} onClick={resetErrorBoundary}
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4"
> >
Reset Application Reset Application
</button> </button>
<a <a
href="https://github.com/logspace-ai/langflow/issues/new" href="https://github.com/logspace-ai/langflow/issues/new"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded" className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
> >
Create Issue Create Issue
</a> </a>
</div> </div>
</div> </div>
</div> </div>
); );
} }

230
src/frontend/src/components/ExtraSidebarComponent/index.tsx
View file

@ -6,119 +6,119 @@ import { classNames } from "../../utils";
import { locationContext } from "../../contexts/locationContext"; import { locationContext } from "../../contexts/locationContext";
export default function ExtraSidebar() { export default function ExtraSidebar() {
const { const {
current, current,
isStackedOpen, isStackedOpen,
setIsStackedOpen, setIsStackedOpen,
extraNavigation, extraNavigation,
extraComponent, extraComponent,
} = useContext(locationContext); } = useContext(locationContext);
return ( return (
<> <>
<aside <aside
className={` ${ className={` ${
isStackedOpen ? "w-52" : "w-0 " isStackedOpen ? "w-52" : "w-0 "
} flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`} } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
> >
<div className="w-52 dark:bg-gray-800 border dark:border-gray-700 overflow-y-auto scrollbar-hide h-full flex flex-col items-start"> <div className="w-52 dark:bg-gray-800 border dark:border-gray-700 overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
<div className="flex pt-1 px-4 justify-between align-middle w-full"> <div className="flex pt-1 px-4 justify-between align-middle w-full">
<span className="text-gray-900 dark:text-white py-[2px] font-medium "> <span className="text-gray-900 dark:text-white py-[2px] font-medium ">
{extraNavigation.title} {extraNavigation.title}
</span> </span>
</div> </div>
<div className="flex flex-grow flex-col w-full"> <div className="flex flex-grow flex-col w-full">
{extraNavigation.options ? ( {extraNavigation.options ? (
<div className="p-4"> <div className="p-4">
<nav className="flex-1 space-y-1"> <nav className="flex-1 space-y-1">
{extraNavigation.options.map((item) => {extraNavigation.options.map((item) =>
!item.children ? ( !item.children ? (
<div key={item.name}> <div key={item.name}>
<Link <Link
to={item.href} to={item.href}
className={classNames( className={classNames(
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "bg-gray-100 text-gray-900" ? "bg-gray-100 text-gray-900"
: "bg-white text-gray-600 hover:bg-gray-50 hover: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" "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
)} )}
> >
<item.icon <item.icon
className={classNames( className={classNames(
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "text-gray-500" ? "text-gray-500"
: "text-gray-400 group-hover:text-gray-500", : "text-gray-400 group-hover:text-gray-500",
"mr-3 flex-shrink-0 h-6 w-6" "mr-3 flex-shrink-0 h-6 w-6"
)} )}
/> />
{item.name} {item.name}
</Link> </Link>
</div> </div>
) : ( ) : (
<Disclosure <Disclosure
as="div" as="div"
key={item.name} key={item.name}
className="space-y-1" className="space-y-1"
> >
{({ open }) => ( {({ open }) => (
<> <>
<Disclosure.Button <Disclosure.Button
className={classNames( className={classNames(
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "bg-gray-100 text-gray-900" ? "bg-gray-100 text-gray-900"
: "bg-white text-gray-600 hover:bg-gray-50 hover: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" "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"
)} )}
> >
<item.icon <item.icon
className="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500" className="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
aria-hidden="true" aria-hidden="true"
/> />
<span className="flex-1">{item.name}</span> <span className="flex-1">{item.name}</span>
<svg <svg
className={classNames( className={classNames(
open open
? "text-gray-400 rotate-90" ? "text-gray-400 rotate-90"
: "text-gray-300", : "text-gray-300",
"ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-gray-400" "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-gray-400"
)} )}
viewBox="0 0 20 20" viewBox="0 0 20 20"
aria-hidden="true" aria-hidden="true"
> >
<path <path
d="M6 6L14 10L6 14V6Z" d="M6 6L14 10L6 14V6Z"
fill="currentColor" fill="currentColor"
/> />
</svg> </svg>
</Disclosure.Button> </Disclosure.Button>
<Disclosure.Panel className="space-y-1"> <Disclosure.Panel className="space-y-1">
{item.children.map((subItem) => ( {item.children.map((subItem) => (
<Link <Link
key={subItem.name} key={subItem.name}
to={subItem.href} to={subItem.href}
className={classNames( className={classNames(
subItem.href.split("/")[3] === current[5] subItem.href.split("/")[3] === current[5]
? "bg-gray-100 text-gray-900" ? "bg-gray-100 text-gray-900"
: "bg-white text-gray-600 hover:bg-gray-50 hover: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" "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
)} )}
> >
{subItem.name} {subItem.name}
</Link> </Link>
))} ))}
</Disclosure.Panel> </Disclosure.Panel>
</> </>
)} )}
</Disclosure> </Disclosure>
) )
)} )}
</nav> </nav>
</div> </div>
) : ( ) : (
extraComponent extraComponent
)} )}
</div> </div>
</div> </div>
</aside> </aside>
</> </>
); );
} }

22
src/frontend/src/components/LightTooltipComponent/index.tsx
View file

@ -2,16 +2,16 @@ import { styled } from "@mui/material/styles";
import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip"; import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
export const LightTooltip = styled(({ className, ...props }: TooltipProps) => ( export const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
<Tooltip {...props} classes={{ popper: className }} /> <Tooltip {...props} classes={{ popper: className }} />
))(({ theme }) => ({ ))(({ theme }) => ({
[`& .${tooltipClasses.tooltip}`]: { [`& .${tooltipClasses.tooltip}`]: {
backgroundColor: theme.palette.common.white, backgroundColor: theme.palette.common.white,
color: "rgba(0, 0, 0, 0.87)", color: "rgba(0, 0, 0, 0.87)",
boxShadow: theme.shadows[2], boxShadow: theme.shadows[2],
fontSize: 14, fontSize: 14,
}, },
[`& .${tooltipClasses.arrow}:before`]: { [`& .${tooltipClasses.arrow}:before`]: {
color: theme.palette.common.white, color: theme.palette.common.white,
boxShadow: theme.shadows[1], boxShadow: theme.shadows[1],
}, },
})); }));

16
src/frontend/src/components/TooltipComponent/index.tsx
View file

@ -3,13 +3,13 @@ import { LightTooltip } from "../LightTooltipComponent";
import { TooltipComponentType } from "../../types/components"; import { TooltipComponentType } from "../../types/components";
export default function Tooltip({ export default function Tooltip({
children, children,
title, title,
placement, placement,
}: TooltipComponentType) { }: TooltipComponentType) {
return ( return (
<LightTooltip placement={placement} title={title} arrow> <LightTooltip placement={placement} title={title} arrow>
{children} {children}
</LightTooltip> </LightTooltip>
); );
} }

96
src/frontend/src/components/chatComponent/chatMessage/index.tsx
View file

@ -1,7 +1,7 @@
import { import {
ChatBubbleLeftEllipsisIcon, ChatBubbleLeftEllipsisIcon,
ChatBubbleOvalLeftEllipsisIcon, ChatBubbleOvalLeftEllipsisIcon,
PlusSmallIcon, PlusSmallIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { useState } from "react"; import { useState } from "react";
import { ChatMessageType } from "../../../types/chat"; import { ChatMessageType } from "../../../types/chat";
@ -10,49 +10,49 @@ import Convert from "ansi-to-html";
const convert = new Convert({ newline: true }); const convert = new Convert({ newline: true });
export default function ChatMessage({ chat }: { chat: ChatMessageType }) { export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
const [hidden, setHidden] = useState(true); const [hidden, setHidden] = useState(true);
return ( return (
<div> <div>
{!chat.isSend ? ( {!chat.isSend ? (
<div className="w-full text-start"> <div className="w-full text-start">
<div <div
style={{ backgroundColor: nodeColors["chat"] }} style={{ backgroundColor: nodeColors["chat"] }}
className=" relative text-start inline-block text-white rounded-xl overflow-hidden w-fit max-w-[280px] text-sm font-normal rounded-tl-none" className=" relative text-start inline-block text-white rounded-xl overflow-hidden w-fit max-w-[280px] text-sm font-normal rounded-tl-none"
> >
{hidden && chat.thought && chat.thought !== "" && ( {hidden && chat.thought && chat.thought !== "" && (
<div <div
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
className="absolute top-2 right-2 cursor-pointer" className="absolute top-2 right-2 cursor-pointer"
> >
<ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce" /> <ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce" />
</div> </div>
)} )}
{chat.thought && chat.thought !== "" && !hidden && ( {chat.thought && chat.thought !== "" && !hidden && (
<div <div
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
style={{ backgroundColor: nodeColors["thought"] }} style={{ backgroundColor: nodeColors["thought"] }}
className=" text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer" className=" text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: convert.toHtml(chat.thought), __html: convert.toHtml(chat.thought),
}} }}
></div> ></div>
)} )}
{chat.thought && chat.thought !== "" && !hidden && <br></br>} {chat.thought && chat.thought !== "" && !hidden && <br></br>}
<div <div
className="w-full rounded-b-md px-4 pb-3 pt-3 pr-8" className="w-full rounded-b-md px-4 pb-3 pt-3 pr-8"
style={{ backgroundColor: nodeColors["chat"] }} style={{ backgroundColor: nodeColors["chat"] }}
> >
{chat.message} {chat.message}
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<div className="w-full text-end"> <div className="w-full text-end">
<div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-gray-700 bg-gray-200 font-normal rounded-tr-none"> <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-gray-700 bg-gray-200 font-normal rounded-tr-none">
{chat.message} {chat.message}
</div> </div>
</div> </div>
)} )}
</div> </div>
); );
} }

44
src/frontend/src/components/chatComponent/index.tsx
View file

@ -7,26 +7,26 @@ import ChatModal from "../../modals/chatModal";
import _ from "lodash"; import _ from "lodash";
export default function Chat({ flow }: ChatType) { export default function Chat({ flow }: ChatType) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
useEffect(() => { useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => { const handleKeyDown = (event: KeyboardEvent) => {
if ( if (
(event.key === "K" || event.key === "k") && (event.key === "K" || event.key === "k") &&
(event.metaKey || event.ctrlKey) (event.metaKey || event.ctrlKey)
) { ) {
event.preventDefault(); event.preventDefault();
setOpen((oldState) => !oldState); setOpen((oldState) => !oldState);
} }
}; };
document.addEventListener("keydown", handleKeyDown); document.addEventListener("keydown", handleKeyDown);
return () => { return () => {
document.removeEventListener("keydown", handleKeyDown); document.removeEventListener("keydown", handleKeyDown);
}; };
}, []); }, []);
return ( return (
<> <>
<ChatModal key={flow.id} flow={flow} open={open} setOpen={setOpen} /> <ChatModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
<ChatTrigger open={open} setOpen={setOpen} /> <ChatTrigger open={open} setOpen={setOpen} />
</> </>
); );
} }

110
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -6,60 +6,60 @@ import TextAreaModal from "../../modals/textAreaModal";
import { TextAreaComponentType } from "../../types/components"; import { TextAreaComponentType } from "../../types/components";
export default function CodeAreaComponent({ export default function CodeAreaComponent({
value, value,
onChange, onChange,
disabled, disabled,
}: TextAreaComponentType) { }: TextAreaComponentType) {
const [myValue, setMyValue] = useState(value); const [myValue, setMyValue] = useState(value);
const { openPopUp } = useContext(PopUpContext); const { openPopUp } = useContext(PopUpContext);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue(""); setMyValue("");
onChange(""); onChange("");
} }
}, [disabled, onChange]); }, [disabled, onChange]);
return ( return (
<div <div
className={ className={
disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full" disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
} }
> >
<div className="w-full flex items-center gap-3"> <div className="w-full flex items-center gap-3">
<span <span
onClick={() => { onClick={() => {
openPopUp( openPopUp(
<CodeAreaModal <CodeAreaModal
value={myValue} value={myValue}
setValue={(t: string) => { setValue={(t: string) => {
setMyValue(t); setMyValue(t);
onChange(t); onChange(t);
}} }}
/> />
); );
}} }}
className={ className={
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "") (disabled ? " bg-gray-200" : "")
} }
> >
{myValue !== "" ? myValue : "Text empty"} {myValue !== "" ? myValue : "Text empty"}
</span> </span>
<button <button
onClick={() => { onClick={() => {
openPopUp( openPopUp(
<CodeAreaModal <CodeAreaModal
value={myValue} value={myValue}
setValue={(t: string) => { setValue={(t: string) => {
setMyValue(t); setMyValue(t);
onChange(t); onChange(t);
}} }}
/> />
); );
}} }}
> >
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" /> <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
</button> </button>
</div> </div>
</div> </div>
); );
} }

166
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -5,90 +5,90 @@ import { DropDownComponentType } from "../../types/components";
import { classNames } from "../../utils"; import { classNames } from "../../utils";
export default function Dropdown({ export default function Dropdown({
value, value,
options, options,
onSelect, onSelect,
}: DropDownComponentType) { }: DropDownComponentType) {
let [internalValue, setInternalValue] = useState( let [internalValue, setInternalValue] = useState(
value === "" || !value ? "Choose an option" : value value === "" || !value ? "Choose an option" : value
); );
return ( return (
<> <>
<Listbox <Listbox
value={internalValue} value={internalValue}
onChange={(value) => { onChange={(value) => {
setInternalValue(value); setInternalValue(value);
onSelect(value); onSelect(value);
}} }}
> >
{({ open }) => ( {({ open }) => (
<> <>
<div className="relative mt-1"> <div className="relative mt-1">
<Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"> <Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
<span className="block w-max truncate">{internalValue}</span> <span className="block w-max truncate">{internalValue}</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"> <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon <ChevronUpDownIcon
className="h-5 w-5 text-gray-400" className="h-5 w-5 text-gray-400"
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
</Listbox.Button> </Listbox.Button>
<Transition <Transition
show={open} show={open}
as={Fragment} as={Fragment}
leave="transition ease-in duration-100" leave="transition ease-in duration-100"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full dark:bg-gray-800 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"> <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full dark:bg-gray-800 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{options.map((option, id) => ( {options.map((option, id) => (
<Listbox.Option <Listbox.Option
key={id} key={id}
className={({ active }) => className={({ active }) =>
classNames( classNames(
active active
? "text-white bg-indigo-600 dark:bg-indigo-500" ? "text-white bg-indigo-600 dark:bg-indigo-500"
: "text-gray-900", : "text-gray-900",
"relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800" "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
) )
} }
value={option} value={option}
> >
{({ selected, active }) => ( {({ selected, active }) => (
<> <>
<span <span
className={classNames( className={classNames(
selected ? "font-semibold" : "font-normal", selected ? "font-semibold" : "font-normal",
"block truncate" "block truncate"
)} )}
> >
{option} {option}
</span> </span>
{selected ? ( {selected ? (
<span <span
className={classNames( className={classNames(
active ? "text-white" : "text-indigo-600", active ? "text-white" : "text-indigo-600",
"absolute inset-y-0 right-0 flex items-center pr-4" "absolute inset-y-0 right-0 flex items-center pr-4"
)} )}
> >
<CheckIcon <CheckIcon
className="h-5 w-5" className="h-5 w-5"
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
) : null} ) : null}
</> </>
)} )}
</Listbox.Option> </Listbox.Option>
))} ))}
</Listbox.Options> </Listbox.Options>
</Transition> </Transition>
</div> </div>
</> </>
)} )}
</Listbox> </Listbox>
</> </>
); );
} }

55
src/frontend/src/components/floatComponent/index.tsx
View file

@ -3,33 +3,32 @@ import { FloatComponentType } from "../../types/components";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
export default function FloatComponent({ export default function FloatComponent({
value, value,
onChange, onChange,
disabled, disabled,
}: FloatComponentType) { }: FloatComponentType) {
const [myValue, setMyValue] = useState(value ?? ""); const [myValue, setMyValue] = useState(value ?? "");
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue(""); setMyValue("");
onChange(""); onChange("");
} }
}, [disabled, onChange]); }, [disabled, onChange]);
return ( return (
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}> <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<input <input
type="number" type="number"
value={myValue} value={myValue}
className={ className={
"block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200 dark:bg-gray-700" : "") (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
} }
placeholder="Type a number from zero to one" placeholder="Type a number from zero to one"
onChange={(e) => { onChange={(e) => {
setMyValue(e.target.value); setMyValue(e.target.value);
onChange(e.target.value); onChange(e.target.value);
}} }}
/>
/> </div>
</div> );
);
} }

159
src/frontend/src/components/inputComponent/index.tsx
View file

@ -4,85 +4,84 @@ import { classNames } from "../../utils";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
export default function InputComponent({ export default function InputComponent({
value, value,
onChange, onChange,
disabled, disabled,
password, password,
}: InputComponentType) { }: InputComponentType) {
const [myValue, setMyValue] = useState(value ?? ""); const [myValue, setMyValue] = useState(value ?? "");
const [pwdVisible, setPwdVisible] = useState(false); const [pwdVisible, setPwdVisible] = useState(false);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue(""); setMyValue("");
onChange(""); onChange("");
} }
}, [disabled, onChange]); }, [disabled, onChange]);
return ( return (
<div <div
className={ className={
disabled disabled
? "relative pointer-events-none cursor-not-allowed" ? "relative pointer-events-none cursor-not-allowed"
: "relative" : "relative"
} }
> >
<input <input
value={myValue} value={myValue}
className={classNames(
className={classNames( "block w-full pr-12 form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
"block w-full pr-12 form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm", disabled ? " bg-gray-200 dark:bg-gray-700" : "",
disabled ? " bg-gray-200 dark:bg-gray-700" : "", password && !pwdVisible && myValue !== "" ? "password" : ""
password && !pwdVisible && myValue !== "" ? "password" : "" )}
)} placeholder="Type a text"
placeholder="Type a text" onChange={(e) => {
onChange={(e) => { setMyValue(e.target.value);
setMyValue(e.target.value); onChange(e.target.value);
onChange(e.target.value); }}
}} />
/> <button
<button className="absolute inset-y-0 right-0 items-center px-4 text-gray-600"
className="absolute inset-y-0 right-0 items-center px-4 text-gray-600" onClick={() => {
onClick={() => { setPwdVisible(!pwdVisible);
setPwdVisible(!pwdVisible); }}
}} >
> {password &&
{password && (pwdVisible ? (
(pwdVisible ? ( <svg
<svg xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" fill="none"
fill="none" viewBox="0 0 24 24"
viewBox="0 0 24 24" strokeWidth={1.5}
strokeWidth={1.5} stroke="currentColor"
stroke="currentColor" className="w-5 h-5"
className="w-5 h-5" >
> <path
<path strokeLinecap="round"
strokeLinecap="round" strokeLinejoin="round"
strokeLinejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
/> </svg>
</svg> ) : (
) : ( <svg
<svg xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" fill="none"
fill="none" viewBox="0 0 24 24"
viewBox="0 0 24 24" strokeWidth={1.5}
strokeWidth={1.5} stroke="currentColor"
stroke="currentColor" className="w-5 h-5"
className="w-5 h-5" >
> <path
<path strokeLinecap="round"
strokeLinecap="round" strokeLinejoin="round"
strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
/> <path
<path strokeLinecap="round"
strokeLinecap="round" strokeLinejoin="round"
strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
/> </svg>
</svg> ))}
))} </button>
</button> </div>
</div> );
);
} }

148
src/frontend/src/components/inputFileComponent/index.tsx
View file

@ -4,83 +4,83 @@ import { alertContext } from "../../contexts/alertContext";
import { FileComponentType } from "../../types/components"; import { FileComponentType } from "../../types/components";
export default function InputFileComponent({ export default function InputFileComponent({
value, value,
onChange, onChange,
disabled, disabled,
suffixes, suffixes,
fileTypes, fileTypes,
onFileChange, onFileChange,
}: FileComponentType) { }: FileComponentType) {
const [myValue, setMyValue] = useState(value); const [myValue, setMyValue] = useState(value);
const { setErrorData } = useContext(alertContext); const { setErrorData } = useContext(alertContext);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue(""); setMyValue("");
onChange(""); onChange("");
onFileChange(""); onFileChange("");
} }
}, [disabled, onChange]); }, [disabled, onChange]);
function attachFile(fileReadEvent: ProgressEvent<FileReader>) { function attachFile(fileReadEvent: ProgressEvent<FileReader>) {
fileReadEvent.preventDefault(); fileReadEvent.preventDefault();
const file = fileReadEvent.target.result; const file = fileReadEvent.target.result;
onFileChange(file as string); onFileChange(file as string);
} }
function checkFileType(fileName: string): boolean { function checkFileType(fileName: string): boolean {
for (let index = 0; index < suffixes.length; index++) { for (let index = 0; index < suffixes.length; index++) {
if (fileName.endsWith(suffixes[index])) { if (fileName.endsWith(suffixes[index])) {
return true; return true;
} }
} }
return false; return false;
} }
const handleButtonClick = () => { const handleButtonClick = () => {
const input = document.createElement("input"); const input = document.createElement("input");
input.type = "file"; input.type = "file";
input.accept = suffixes.join(","); input.accept = suffixes.join(",");
input.style.display = "none"; input.style.display = "none";
input.multiple = false; input.multiple = false;
input.onchange = (e: Event) => { input.onchange = (e: Event) => {
const file = (e.target as HTMLInputElement).files?.[0]; const file = (e.target as HTMLInputElement).files?.[0];
const fileData = new FileReader(); const fileData = new FileReader();
fileData.onload = attachFile; fileData.onload = attachFile;
if (file && checkFileType(file.name)) { if (file && checkFileType(file.name)) {
fileData.readAsDataURL(file); fileData.readAsDataURL(file);
setMyValue(file.name); setMyValue(file.name);
onChange(file.name); onChange(file.name);
} else { } else {
setErrorData({ setErrorData({
title: title:
"Please select a valid file. Only files this files are allowed:", "Please select a valid file. Only files this files are allowed:",
list: fileTypes, list: fileTypes,
}); });
} }
}; };
input.click(); input.click();
}; };
return ( return (
<div <div
className={ className={
disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full" disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
} }
> >
<div className="w-full flex items-center gap-3"> <div className="w-full flex items-center gap-3">
<span <span
onClick={handleButtonClick} onClick={handleButtonClick}
className={ className={
"truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "") (disabled ? " bg-gray-200" : "")
} }
> >
{myValue !== "" ? myValue : "No file"} {myValue !== "" ? myValue : "No file"}
</span> </span>
<button onClick={handleButtonClick}> <button onClick={handleButtonClick}>
<DocumentMagnifyingGlassIcon className="w-8 h-8 hover:text-blue-600" /> <DocumentMagnifyingGlassIcon className="w-8 h-8 hover:text-blue-600" />
</button> </button>
</div> </div>
</div> </div>
); );
} }

134
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -6,72 +6,72 @@ import { TabsContext } from "../../contexts/tabsContext";
import _ from "lodash"; import _ from "lodash";
export default function InputListComponent({ export default function InputListComponent({
value, value,
onChange, onChange,
disabled, disabled,
}: InputListComponentType) { }: InputListComponentType) {
const [inputList, setInputList] = useState(value ?? [""]); const [inputList, setInputList] = useState(value ?? [""]);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setInputList([""]); setInputList([""]);
onChange([""]); onChange([""]);
} }
}, [disabled, onChange]); }, [disabled, onChange]);
return ( return (
<div <div
className={ className={
(disabled ? "pointer-events-none cursor-not-allowed" : "") + (disabled ? "pointer-events-none cursor-not-allowed" : "") +
"flex flex-col gap-3" "flex flex-col gap-3"
} }
> >
{inputList.map((i, idx) => ( {inputList.map((i, idx) => (
<div key={idx} className="w-full flex gap-3"> <div key={idx} className="w-full flex gap-3">
<input <input
type="text" type="text"
value={i} value={i}
className={ className={
"block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "") (disabled ? " bg-gray-200" : "")
} }
placeholder="Type a text" placeholder="Type a text"
onChange={(e) => { onChange={(e) => {
setInputList((old) => { setInputList((old) => {
let newInputList = _.cloneDeep(old); let newInputList = _.cloneDeep(old);
newInputList[idx] = e.target.value; newInputList[idx] = e.target.value;
return newInputList; return newInputList;
}); });
onChange(inputList); onChange(inputList);
}} }}
/> />
{idx === inputList.length - 1 ? ( {idx === inputList.length - 1 ? (
<button <button
onClick={() => { onClick={() => {
setInputList((old) => { setInputList((old) => {
let newInputList = _.cloneDeep(old); let newInputList = _.cloneDeep(old);
newInputList.push(""); newInputList.push("");
return newInputList; return newInputList;
}); });
onChange(inputList); onChange(inputList);
}} }}
> >
<PlusIcon className="w-4 h-4 hover:text-blue-600" /> <PlusIcon className="w-4 h-4 hover:text-blue-600" />
</button> </button>
) : ( ) : (
<button <button
onClick={() => { onClick={() => {
setInputList((old) => { setInputList((old) => {
let newInputList = _.cloneDeep(old); let newInputList = _.cloneDeep(old);
newInputList.splice(idx, 1); newInputList.splice(idx, 1);
return newInputList; return newInputList;
}); });
onChange(inputList); onChange(inputList);
}} }}
> >
<XMarkIcon className="w-4 h-4 hover:text-red-600" /> <XMarkIcon className="w-4 h-4 hover:text-red-600" />
</button> </button>
)} )}
</div> </div>
))} ))}
</div> </div>
); );
} }

88
src/frontend/src/components/intComponent/index.tsx
View file

@ -3,50 +3,48 @@ import { FloatComponentType } from "../../types/components";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
export default function IntComponent({ export default function IntComponent({
value, value,
onChange, onChange,
disabled, disabled,
}: FloatComponentType) { }: FloatComponentType) {
const [myValue, setMyValue] = useState(value ?? ""); const [myValue, setMyValue] = useState(value ?? "");
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue(""); setMyValue("");
onChange(""); onChange("");
} }
}, [disabled, onChange]); }, [disabled, onChange]);
return ( return (
<div <div
className={ className={
disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full" disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
} }
> >
<input <input
onKeyDown={(event) => { onKeyDown={(event) => {
if ( if (
event.key !== "Backspace" && event.key !== "Backspace" &&
event.key !== "Enter" && event.key !== "Enter" &&
event.key !== "Delete" && event.key !== "Delete" &&
event.key !== "ArrowLeft" && event.key !== "ArrowLeft" &&
event.key !== "ArrowRight" && event.key !== "ArrowRight" &&
!/^[-]?\d*$/.test(event.key) !/^[-]?\d*$/.test(event.key)
) { ) {
event.preventDefault(); event.preventDefault();
} }
}} }}
type="number" type="number"
value={myValue} value={myValue}
className={ className={
"block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200 dark:bg-gray-700" : "") (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
} }
placeholder="Type a integer number" placeholder="Type a integer number"
onChange={(e) => { onChange={(e) => {
setMyValue(e.target.value); setMyValue(e.target.value);
onChange(e.target.value); onChange(e.target.value);
}} }}
/>
/> </div>
);
</div>
);
} }

46
src/frontend/src/components/loadingComponent/index.tsx
View file

@ -1,28 +1,28 @@
type LoadingComponentProps = { type LoadingComponentProps = {
remSize: number; remSize: number;
}; };
export default function LoadingComponent({ remSize }: LoadingComponentProps) { export default function LoadingComponent({ remSize }: LoadingComponentProps) {
return ( return (
<div role="status" className="w-min m-auto"> <div role="status" className="w-min m-auto">
<svg <svg
aria-hidden="true" aria-hidden="true"
className={`w-${remSize} h-${remSize} mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600`} className={`w-${remSize} h-${remSize} mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600`}
viewBox="0 0 100 101" viewBox="0 0 100 101"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor" fill="currentColor"
/> />
<path <path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill" fill="currentFill"
/> />
</svg> </svg>
<br></br> <br></br>
<span className="animate-pulse text-blue-600 text-lg">Loading...</span> <span className="animate-pulse text-blue-600 text-lg">Loading...</span>
</div> </div>
); );
} }

110
src/frontend/src/components/promptComponent/index.tsx
View file

@ -7,60 +7,60 @@ import { TextAreaComponentType } from "../../types/components";
import PromptAreaModal from "../../modals/promptModal"; import PromptAreaModal from "../../modals/promptModal";
export default function PromptAreaComponent({ export default function PromptAreaComponent({
value, value,
onChange, onChange,
disabled, disabled,
}: TextAreaComponentType) { }: TextAreaComponentType) {
const [myValue, setMyValue] = useState(value); const [myValue, setMyValue] = useState(value);
const { openPopUp } = useContext(PopUpContext); const { openPopUp } = useContext(PopUpContext);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue(""); setMyValue("");
onChange(""); onChange("");
} }
}, [disabled, onChange]); }, [disabled, onChange]);
return ( return (
<div <div
className={ className={
disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full" disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"
} }
> >
<div className="w-full flex items-center gap-3"> <div className="w-full flex items-center gap-3">
<span <span
onClick={() => { onClick={() => {
openPopUp( openPopUp(
<PromptAreaModal <PromptAreaModal
value={myValue} value={myValue}
setValue={(t: string) => { setValue={(t: string) => {
setMyValue(t); setMyValue(t);
onChange(t); onChange(t);
}} }}
/> />
); );
}} }}
className={ className={
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "") (disabled ? " bg-gray-200" : "")
} }
> >
{myValue !== "" ? myValue : "Text empty"} {myValue !== "" ? myValue : "Text empty"}
</span> </span>
<button <button
onClick={() => { onClick={() => {
openPopUp( openPopUp(
<PromptAreaModal <PromptAreaModal
value={myValue} value={myValue}
setValue={(t: string) => { setValue={(t: string) => {
setMyValue(t); setMyValue(t);
onChange(t); onChange(t);
}} }}
/> />
); );
}} }}
> >
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" /> <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
</button> </button>
</div> </div>
</div> </div>
); );
} }

37
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -4,7 +4,11 @@ import { PopUpContext } from "../../contexts/popUpContext";
import TextAreaModal from "../../modals/textAreaModal"; import TextAreaModal from "../../modals/textAreaModal";
import { TextAreaComponentType } from "../../types/components"; import { TextAreaComponentType } from "../../types/components";
export default function TextAreaComponent({ value, onChange, disabled }:TextAreaComponentType) { export default function TextAreaComponent({
value,
onChange,
disabled,
}: TextAreaComponentType) {
const [myValue, setMyValue] = useState(value); const [myValue, setMyValue] = useState(value);
const { openPopUp } = useContext(PopUpContext); const { openPopUp } = useContext(PopUpContext);
useEffect(() => { useEffect(() => {
@ -16,16 +20,39 @@ export default function TextAreaComponent({ value, onChange, disabled }:TextArea
return ( return (
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}> <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<div className="w-full flex items-center gap-3"> <div className="w-full flex items-center gap-3">
<span onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}} <span
onClick={() => {
openPopUp(
<TextAreaModal
value={myValue}
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
/>
);
}}
className={ className={
"truncate block w-full text-gray-500 dark:text-gray-100 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + "truncate block w-full text-gray-500 dark:text-gray-100 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "") (disabled ? " bg-gray-200" : "")
} }
> >
{myValue !== "" ? myValue : 'Text empty'} {myValue !== "" ? myValue : "Text empty"}
</span> </span>
<button onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}> <button
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" /> onClick={() => {
openPopUp(
<TextAreaModal
value={myValue}
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
/>
);
}}
>
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
</button> </button>
</div> </div>
</div> </div>

106
src/frontend/src/components/toggleComponent/index.tsx
View file

@ -4,59 +4,57 @@ import { useEffect } from "react";
import { ToggleComponentType } from "../../types/components"; import { ToggleComponentType } from "../../types/components";
export default function ToggleComponent({ export default function ToggleComponent({
enabled, enabled,
setEnabled, setEnabled,
disabled, disabled,
}: ToggleComponentType) { }: ToggleComponentType) {
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setEnabled(false); setEnabled(false);
} }
}, [disabled, setEnabled]); }, [disabled, setEnabled]);
return ( return (
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}> <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<Switch <Switch
checked={enabled} checked={enabled}
onChange={(x: boolean) => { onChange={(x: boolean) => {
setEnabled(x); setEnabled(x);
}} }}
className={classNames( className={classNames(
enabled ? 'bg-indigo-600' : 'bg-gray-200', enabled ? "bg-indigo-600" : "bg-gray-200",
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2' "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
)} )}
> >
<span className="sr-only">Use setting</span> <span className="sr-only">Use setting</span>
<span <span
className={classNames( className={classNames(
enabled ? "translate-x-5" : "translate-x-0", enabled ? "translate-x-5" : "translate-x-0",
"pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out", "pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out",
disabled disabled
? "bg-gray-200 dark:bg-gray-600" ? "bg-gray-200 dark:bg-gray-600"
: "bg-white dark:bg-gray-800" : "bg-white dark:bg-gray-800"
)} )}
> >
<span <span
className={classNames( className={classNames(
enabled enabled
? "opacity-0 ease-out duration-100" ? "opacity-0 ease-out duration-100"
: "opacity-100 ease-in duration-200", : "opacity-100 ease-in duration-200",
"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
)} )}
aria-hidden="true" aria-hidden="true"
> ></span>
</span> <span
<span className={classNames(
className={classNames( enabled
enabled ? "opacity-100 ease-in duration-200"
? "opacity-100 ease-in duration-200" : "opacity-0 ease-out duration-100",
: "opacity-0 ease-out duration-100", "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" )}
)} aria-hidden="true"
aria-hidden="true" ></span>
> </span>
</span> </Switch>
</span> </div>
</Switch> );
</div>
);
} }

294
src/frontend/src/contexts/alertContext.tsx
View file

@ -5,161 +5,161 @@ import _ from "lodash";
//types for alertContextType //types for alertContextType
type alertContextType = { type alertContextType = {
errorData: { title: string; list?: Array<string> }; errorData: { title: string; list?: Array<string> };
setErrorData: (newState: { title: string; list?: Array<string> }) => void; setErrorData: (newState: { title: string; list?: Array<string> }) => void;
errorOpen: boolean; errorOpen: boolean;
setErrorOpen: (newState: boolean) => void; setErrorOpen: (newState: boolean) => void;
noticeData: { title: string; link?: string }; noticeData: { title: string; link?: string };
setNoticeData: (newState: { title: string; link?: string }) => void; setNoticeData: (newState: { title: string; link?: string }) => void;
noticeOpen: boolean; noticeOpen: boolean;
setNoticeOpen: (newState: boolean) => void; setNoticeOpen: (newState: boolean) => void;
successData: { title: string }; successData: { title: string };
setSuccessData: (newState: { title: string }) => void; setSuccessData: (newState: { title: string }) => void;
successOpen: boolean; successOpen: boolean;
setSuccessOpen: (newState: boolean) => void; setSuccessOpen: (newState: boolean) => void;
notificationCenter: boolean; notificationCenter: boolean;
setNotificationCenter: (newState: boolean) => void; setNotificationCenter: (newState: boolean) => void;
notificationList: Array<AlertItemType>; notificationList: Array<AlertItemType>;
pushNotificationList: (Object: AlertItemType) => void; pushNotificationList: (Object: AlertItemType) => void;
clearNotificationList: () => void; clearNotificationList: () => void;
removeFromNotificationList: (index: string) => void; removeFromNotificationList: (index: string) => void;
}; };
//initial values to alertContextType //initial values to alertContextType
const initialValue: alertContextType = { const initialValue: alertContextType = {
errorData: { title: "", list: [] }, errorData: { title: "", list: [] },
setErrorData: () => {}, setErrorData: () => {},
errorOpen: false, errorOpen: false,
setErrorOpen: () => {}, setErrorOpen: () => {},
noticeData: { title: "", link: "" }, noticeData: { title: "", link: "" },
setNoticeData: () => {}, setNoticeData: () => {},
noticeOpen: false, noticeOpen: false,
setNoticeOpen: () => {}, setNoticeOpen: () => {},
successData: { title: "" }, successData: { title: "" },
setSuccessData: () => {}, setSuccessData: () => {},
successOpen: false, successOpen: false,
setSuccessOpen: () => {}, setSuccessOpen: () => {},
notificationCenter: false, notificationCenter: false,
setNotificationCenter: () => {}, setNotificationCenter: () => {},
notificationList: [], notificationList: [],
pushNotificationList: () => {}, pushNotificationList: () => {},
clearNotificationList: () => {}, clearNotificationList: () => {},
removeFromNotificationList: () => {}, removeFromNotificationList: () => {},
}; };
export const alertContext = createContext<alertContextType>(initialValue); export const alertContext = createContext<alertContextType>(initialValue);
export function AlertProvider({ children }: { children: ReactNode }) { export function AlertProvider({ children }: { children: ReactNode }) {
const [errorData, setErrorDataState] = useState<{ const [errorData, setErrorDataState] = useState<{
title: string; title: string;
list?: Array<string>; list?: Array<string>;
}>({ title: "", list: [] }); }>({ title: "", list: [] });
const [errorOpen, setErrorOpen] = useState(false); const [errorOpen, setErrorOpen] = useState(false);
const [noticeData, setNoticeDataState] = useState<{ const [noticeData, setNoticeDataState] = useState<{
title: string; title: string;
link?: string; link?: string;
}>({ title: "", link: "" }); }>({ title: "", link: "" });
const [noticeOpen, setNoticeOpen] = useState(false); const [noticeOpen, setNoticeOpen] = useState(false);
const [successData, setSuccessDataState] = useState<{ title: string }>({ const [successData, setSuccessDataState] = useState<{ title: string }>({
title: "", title: "",
}); });
const [successOpen, setSuccessOpen] = useState(false); const [successOpen, setSuccessOpen] = useState(false);
const [notificationCenter, setNotificationCenter] = useState(false); const [notificationCenter, setNotificationCenter] = useState(false);
const [notificationList, setNotificationList] = useState([]); const [notificationList, setNotificationList] = useState([]);
const pushNotificationList = (notification: AlertItemType) => { const pushNotificationList = (notification: AlertItemType) => {
setNotificationList((old) => { setNotificationList((old) => {
let newNotificationList = _.cloneDeep(old); let newNotificationList = _.cloneDeep(old);
newNotificationList.unshift(notification); newNotificationList.unshift(notification);
return newNotificationList; return newNotificationList;
}); });
}; };
/** /**
* Sets the error data state, opens the error dialog and pushes the new error notification to the notification list * Sets the error data state, opens the error dialog and pushes the new error notification to the notification list
* @param newState An object containing the new error data, including title and optional list of error messages * @param newState An object containing the new error data, including title and optional list of error messages
*/ */
function setErrorData(newState: { title: string; list?: Array<string> }) { function setErrorData(newState: { title: string; list?: Array<string> }) {
setErrorDataState(newState); setErrorDataState(newState);
setErrorOpen(true); setErrorOpen(true);
if (newState.title) { if (newState.title) {
setNotificationCenter(true); setNotificationCenter(true);
pushNotificationList({ pushNotificationList({
type: "error", type: "error",
title: newState.title, title: newState.title,
list: newState.list, list: newState.list,
id: _.uniqueId(), id: _.uniqueId(),
}); });
} }
} }
/** /**
* Sets the state of the notice data and opens the notice modal, also adds a new notice to the notification center if the title is defined. * Sets the state of the notice data and opens the notice modal, also adds a new notice to the notification center if the title is defined.
* @param newState An object containing the title of the notice and optionally a link. * @param newState An object containing the title of the notice and optionally a link.
*/ */
function setNoticeData(newState: { title: string; link?: string }) { function setNoticeData(newState: { title: string; link?: string }) {
setNoticeDataState(newState); setNoticeDataState(newState);
setNoticeOpen(true); setNoticeOpen(true);
if (newState.title) { if (newState.title) {
// Add new notice to notification center // Add new notice to notification center
setNotificationCenter(true); setNotificationCenter(true);
pushNotificationList({ pushNotificationList({
type: "notice", type: "notice",
title: newState.title, title: newState.title,
link: newState.link, link: newState.link,
id: _.uniqueId(), id: _.uniqueId(),
}); });
} }
} }
/** /**
* Update the success data state and show a success alert notification. * Update the success data state and show a success alert notification.
* @param newState - A state object with a "title" property to set in the success data state. * @param newState - A state object with a "title" property to set in the success data state.
*/ */
function setSuccessData(newState: { title: string }) { function setSuccessData(newState: { title: string }) {
setSuccessDataState(newState); // update the success data state with the provided new state setSuccessDataState(newState); // update the success data state with the provided new state
setSuccessOpen(true); // open the success alert setSuccessOpen(true); // open the success alert
// If the new state has a "title" property, add a new success notification to the list // If the new state has a "title" property, add a new success notification to the list
if (newState.title) { if (newState.title) {
setNotificationCenter(true); // show the notification center setNotificationCenter(true); // show the notification center
pushNotificationList({ pushNotificationList({
// add the new notification to the list // add the new notification to the list
type: "success", type: "success",
title: newState.title, title: newState.title,
id: _.uniqueId(), id: _.uniqueId(),
}); });
} }
} }
function clearNotificationList() { function clearNotificationList() {
setNotificationList([]); setNotificationList([]);
} }
function removeFromNotificationList(index: string) { function removeFromNotificationList(index: string) {
// set the notification list to a new array that filters out the alert with the matching id // set the notification list to a new array that filters out the alert with the matching id
setNotificationList((prevAlertsList) => setNotificationList((prevAlertsList) =>
prevAlertsList.filter((alert) => alert.id !== index) prevAlertsList.filter((alert) => alert.id !== index)
); );
} }
return ( return (
<alertContext.Provider <alertContext.Provider
value={{ value={{
removeFromNotificationList, removeFromNotificationList,
clearNotificationList, clearNotificationList,
notificationList, notificationList,
pushNotificationList, pushNotificationList,
setNotificationCenter, setNotificationCenter,
notificationCenter, notificationCenter,
errorData, errorData,
setErrorData, setErrorData,
errorOpen, errorOpen,
setErrorOpen, setErrorOpen,
noticeData, noticeData,
setNoticeData, setNoticeData,
noticeOpen, noticeOpen,
setNoticeOpen, setNoticeOpen,
successData, successData,
setSuccessData, setSuccessData,
successOpen, successOpen,
setSuccessOpen, setSuccessOpen,
}} }}
> >
{children} {children}
</alertContext.Provider> </alertContext.Provider>
); );
} }

44
src/frontend/src/contexts/darkContext.tsx
View file

@ -1,34 +1,34 @@
import { createContext, useEffect, useState } from "react"; import { createContext, useEffect, useState } from "react";
type darkContextType = { type darkContextType = {
dark: {}; dark: {};
setDark: (newState: {}) => void; setDark: (newState: {}) => void;
}; };
const initialValue = { const initialValue = {
dark: {}, dark: {},
setDark: () => {}, setDark: () => {},
}; };
export const darkContext = createContext<darkContextType>(initialValue); export const darkContext = createContext<darkContextType>(initialValue);
export function DarkProvider({ children }) { export function DarkProvider({ children }) {
const [dark, setDark] = useState(false); const [dark, setDark] = useState(false);
useEffect(() => { useEffect(() => {
if (dark) { if (dark) {
document.getElementById("body").classList.add("dark"); document.getElementById("body").classList.add("dark");
} else { } else {
document.getElementById("body").classList.remove("dark"); document.getElementById("body").classList.remove("dark");
} }
}, [dark]); }, [dark]);
return ( return (
<darkContext.Provider <darkContext.Provider
value={{ value={{
dark, dark,
setDark, setDark,
}} }}
> >
{children} {children}
</darkContext.Provider> </darkContext.Provider>
); );
} }

32
src/frontend/src/contexts/index.tsx
View file

@ -7,20 +7,20 @@ import { TabsProvider } from "./tabsContext";
import { TypesProvider } from "./typesContext"; import { TypesProvider } from "./typesContext";
export default function ContextWrapper({ children }: { children: ReactNode }) { export default function ContextWrapper({ children }: { children: ReactNode }) {
//element to wrap all context //element to wrap all context
return ( return (
<> <>
<DarkProvider> <DarkProvider>
<TypesProvider> <TypesProvider>
<LocationProvider> <LocationProvider>
<AlertProvider> <AlertProvider>
<TabsProvider> <TabsProvider>
<PopUpProvider>{children}</PopUpProvider> <PopUpProvider>{children}</PopUpProvider>
</TabsProvider> </TabsProvider>
</AlertProvider> </AlertProvider>
</LocationProvider> </LocationProvider>
</TypesProvider> </TypesProvider>
</DarkProvider> </DarkProvider>
</> </>
); );
} }

130
src/frontend/src/contexts/locationContext.tsx
View file

@ -2,78 +2,78 @@ import { createContext, ReactNode, useState } from "react";
//types for location context //types for location context
type locationContextType = { type locationContextType = {
current: Array<string>; current: Array<string>;
setCurrent: (newState: Array<string>) => void; setCurrent: (newState: Array<string>) => void;
isStackedOpen: boolean; isStackedOpen: boolean;
setIsStackedOpen: (newState: boolean) => void; setIsStackedOpen: (newState: boolean) => void;
showSideBar: boolean; showSideBar: boolean;
setShowSideBar: (newState: boolean) => void; setShowSideBar: (newState: boolean) => void;
extraNavigation: { extraNavigation: {
title: string; title: string;
options?: Array<{ options?: Array<{
name: string; name: string;
href: string; href: string;
icon: any; icon: any;
children?: Array<any>; children?: Array<any>;
}>; }>;
}; };
setExtraNavigation: (newState: { setExtraNavigation: (newState: {
title: string; title: string;
options?: Array<{ options?: Array<{
name: string; name: string;
href: string; href: string;
icon: any; icon: any;
children?: Array<any>; children?: Array<any>;
}>; }>;
}) => void; }) => void;
extraComponent: any; extraComponent: any;
setExtraComponent: (newState: any) => void; setExtraComponent: (newState: any) => void;
}; };
//initial value for location context //initial value for location context
const initialValue = { const initialValue = {
//actual //actual
current: window.location.pathname.replace(/\/$/g, "").split("/"), current: window.location.pathname.replace(/\/$/g, "").split("/"),
isStackedOpen: isStackedOpen:
window.innerWidth > 1024 && window.location.pathname.split("/")[1] window.innerWidth > 1024 && window.location.pathname.split("/")[1]
? true ? true
: false, : false,
setCurrent: () => {}, setCurrent: () => {},
setIsStackedOpen: () => {}, setIsStackedOpen: () => {},
showSideBar: window.location.pathname.split("/")[1] ? true : false, showSideBar: window.location.pathname.split("/")[1] ? true : false,
setShowSideBar: () => {}, setShowSideBar: () => {},
extraNavigation: { title: "" }, extraNavigation: { title: "" },
setExtraNavigation: () => {}, setExtraNavigation: () => {},
extraComponent: <></>, extraComponent: <></>,
setExtraComponent: () => {}, setExtraComponent: () => {},
}; };
export const locationContext = createContext<locationContextType>(initialValue); export const locationContext = createContext<locationContextType>(initialValue);
export function LocationProvider({ children }: { children: ReactNode }) { export function LocationProvider({ children }: { children: ReactNode }) {
const [current, setCurrent] = useState(initialValue.current); const [current, setCurrent] = useState(initialValue.current);
const [isStackedOpen, setIsStackedOpen] = useState( const [isStackedOpen, setIsStackedOpen] = useState(
initialValue.isStackedOpen initialValue.isStackedOpen
); );
const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar); const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar);
const [extraNavigation, setExtraNavigation] = useState({ title: "" }); const [extraNavigation, setExtraNavigation] = useState({ title: "" });
const [extraComponent, setExtraComponent] = useState(<></>); const [extraComponent, setExtraComponent] = useState(<></>);
return ( return (
<locationContext.Provider <locationContext.Provider
value={{ value={{
isStackedOpen, isStackedOpen,
setIsStackedOpen, setIsStackedOpen,
current, current,
setCurrent, setCurrent,
showSideBar, showSideBar,
setShowSideBar, setShowSideBar,
extraNavigation, extraNavigation,
setExtraNavigation, setExtraNavigation,
extraComponent, extraComponent,
setExtraComponent, setExtraComponent,
}} }}
> >
{children} {children}
</locationContext.Provider> </locationContext.Provider>
); );
} }

32
src/frontend/src/contexts/popUpContext.tsx
View file

@ -3,31 +3,31 @@ import React, { useState } from "react";
// context to set JSX element on the DOM // context to set JSX element on the DOM
export const PopUpContext = createContext({ export const PopUpContext = createContext({
openPopUp: (popUpElement: JSX.Element) => {}, openPopUp: (popUpElement: JSX.Element) => {},
closePopUp: () => {}, closePopUp: () => {},
}); });
interface PopUpProviderProps { interface PopUpProviderProps {
children: React.ReactNode; children: React.ReactNode;
} }
const PopUpProvider = ({ children }: PopUpProviderProps) => { const PopUpProvider = ({ children }: PopUpProviderProps) => {
const [popUpElements, setPopUpElements] = useState<JSX.Element[]>([]); const [popUpElements, setPopUpElements] = useState<JSX.Element[]>([]);
const openPopUp = (element: JSX.Element) => { const openPopUp = (element: JSX.Element) => {
setPopUpElements((prevPopUps) => [element, ...prevPopUps]); setPopUpElements((prevPopUps) => [element, ...prevPopUps]);
}; };
const closePopUp = () => { const closePopUp = () => {
setPopUpElements((prevPopUps) => prevPopUps.slice(1)); setPopUpElements((prevPopUps) => prevPopUps.slice(1));
}; };
return ( return (
<PopUpContext.Provider value={{ openPopUp, closePopUp }}> <PopUpContext.Provider value={{ openPopUp, closePopUp }}>
{children} {children}
{popUpElements[0]} {popUpElements[0]}
</PopUpContext.Provider> </PopUpContext.Provider>
); );
}; };
export default PopUpProvider; export default PopUpProvider;

606
src/frontend/src/contexts/tabsContext.tsx
View file

@ -1,10 +1,10 @@
import { import {
createContext, createContext,
useEffect, useEffect,
useState, useState,
useRef, useRef,
ReactNode, ReactNode,
useContext, useContext,
} from "react"; } from "react";
import { FlowType, NodeType } from "../types/flow"; import { FlowType, NodeType } from "../types/flow";
import { LangFlowState, TabsContextType } from "../types/tabs"; import { LangFlowState, TabsContextType } from "../types/tabs";
@ -16,328 +16,332 @@ import { v4 as uuidv4 } from "uuid";
import { addEdge } from "reactflow"; import { addEdge } from "reactflow";
const TabsContextInitialValue: TabsContextType = { const TabsContextInitialValue: TabsContextType = {
save: () => {}, save: () => {},
tabIndex: 0, tabIndex: 0,
setTabIndex: (index: number) => {}, setTabIndex: (index: number) => {},
flows: [], flows: [],
removeFlow: (id: string) => {}, removeFlow: (id: string) => {},
addFlow: (flowData?: any) => {}, addFlow: (flowData?: any) => {},
updateFlow: (newFlow: FlowType) => {}, updateFlow: (newFlow: FlowType) => {},
incrementNodeId: () => uuidv4(), incrementNodeId: () => uuidv4(),
downloadFlow: (flow: FlowType) => {}, downloadFlow: (flow: FlowType) => {},
uploadFlow: () => {}, uploadFlow: () => {},
hardReset: () => {}, hardReset: () => {},
disableCopyPaste:false, disableCopyPaste: false,
setDisableCopyPaste:(state:boolean)=>{}, setDisableCopyPaste: (state: boolean) => {},
getNodeId: () => "", getNodeId: () => "",
paste: (selection: {nodes: any, edges: any}, position: {x: number, y: number}) => {}, paste: (
selection: { nodes: any; edges: any },
position: { x: number; y: number }
) => {},
}; };
export const TabsContext = createContext<TabsContextType>( export const TabsContext = createContext<TabsContextType>(
TabsContextInitialValue TabsContextInitialValue
); );
export function TabsProvider({ children }: { children: ReactNode }) { export function TabsProvider({ children }: { children: ReactNode }) {
const { setNoticeData } = useContext(alertContext); const { setNoticeData } = useContext(alertContext);
const [tabIndex, setTabIndex] = useState(0); const [tabIndex, setTabIndex] = useState(0);
const [flows, setFlows] = useState<Array<FlowType>>([]); const [flows, setFlows] = useState<Array<FlowType>>([]);
const [id, setId] = useState(uuidv4()); const [id, setId] = useState(uuidv4());
const { templates, reactFlowInstance } = useContext(typesContext); const { templates, reactFlowInstance } = useContext(typesContext);
const newNodeId = useRef(uuidv4()); const newNodeId = useRef(uuidv4());
function incrementNodeId() { function incrementNodeId() {
newNodeId.current = uuidv4(); newNodeId.current = uuidv4();
return newNodeId.current; return newNodeId.current;
} }
function save() { function save() {
let Saveflows = [...flows]; let Saveflows = [...flows];
if (Saveflows.length !== 0) if (Saveflows.length !== 0)
Saveflows.forEach((flow) => { Saveflows.forEach((flow) => {
if(flow.data && flow.data?.nodes) flow.data?.nodes.forEach((node) => { if (flow.data && flow.data?.nodes)
console.log(node.data.type) flow.data?.nodes.forEach((node) => {
Object.keys(node.data.node.template).forEach((key) => { console.log(node.data.type);
console.log(node.data.node.template[key].type) Object.keys(node.data.node.template).forEach((key) => {
if(node.data.node.template[key].type==="file"){ console.log(node.data.node.template[key].type);
console.log(node.data.node.template[key]) if (node.data.node.template[key].type === "file") {
node.data.node.template[key].content = ""; console.log(node.data.node.template[key]);
} node.data.node.template[key].content = "";
}) }
}) });
}) });
window.localStorage.setItem( });
"tabsData", window.localStorage.setItem(
JSON.stringify({ tabIndex, flows:Saveflows, id}) "tabsData",
); JSON.stringify({ tabIndex, flows: Saveflows, id })
} );
useEffect(() => { }
//save tabs locally useEffect(() => {
save(); //save tabs locally
}, [flows, id, tabIndex, newNodeId]); save();
}, [flows, id, tabIndex, newNodeId]);
useEffect(() => { useEffect(() => {
//get tabs locally saved //get tabs locally saved
let cookie = window.localStorage.getItem("tabsData"); let cookie = window.localStorage.getItem("tabsData");
if (cookie && Object.keys(templates).length > 0) { if (cookie && Object.keys(templates).length > 0) {
let cookieObject: LangFlowState = JSON.parse(cookie); let cookieObject: LangFlowState = JSON.parse(cookie);
cookieObject.flows.forEach((flow) => { cookieObject.flows.forEach((flow) => {
flow.data.nodes.forEach((node) => { flow.data.nodes.forEach((node) => {
if (Object.keys(templates[node.data.type]["template"]).length > 0) { if (Object.keys(templates[node.data.type]["template"]).length > 0) {
node.data.node.template = updateTemplate( node.data.node.template = updateTemplate(
templates[node.data.type][ templates[node.data.type][
"template" "template"
] as unknown as APITemplateType, ] as unknown as APITemplateType,
node.data.node.template as APITemplateType node.data.node.template as APITemplateType
); );
} }
}); });
}); });
setTabIndex(cookieObject.tabIndex); setTabIndex(cookieObject.tabIndex);
setFlows(cookieObject.flows); setFlows(cookieObject.flows);
setId(cookieObject.id); setId(cookieObject.id);
} }
}, [templates]); }, [templates]);
function hardReset() { function hardReset() {
newNodeId.current = uuidv4(); newNodeId.current = uuidv4();
setTabIndex(0); setTabIndex(0);
setFlows([]); setFlows([]);
setId(uuidv4()); setId(uuidv4());
} }
/** /**
* Downloads the current flow as a JSON file * Downloads the current flow as a JSON file
*/ */
function downloadFlow(flow: FlowType) { function downloadFlow(flow: FlowType) {
// create a data URI with the current flow data // create a data URI with the current flow data
const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent( const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
JSON.stringify(flow) JSON.stringify(flow)
)}`; )}`;
// create a link element and set its properties // create a link element and set its properties
const link = document.createElement("a"); const link = document.createElement("a");
link.href = jsonString; link.href = jsonString;
link.download = `${flows[tabIndex].name}.json`; link.download = `${flows[tabIndex].name}.json`;
// simulate a click on the link element to trigger the download // simulate a click on the link element to trigger the download
link.click(); link.click();
setNoticeData({ setNoticeData({
title: "Warning: Critical data,JSON file may including API keys.", title: "Warning: Critical data,JSON file may including API keys.",
}); });
} }
function getNodeId() { function getNodeId() {
return `dndnode_` + incrementNodeId(); return `dndnode_` + incrementNodeId();
} }
/** /**
* Creates a file input and listens to a change event to upload a JSON flow file. * Creates a file input and listens to a change event to upload a JSON flow file.
* If the file type is application/json, the file is read and parsed into a JSON object. * If the file type is application/json, the file is read and parsed into a JSON object.
* The resulting JSON object is passed to the addFlow function. * The resulting JSON object is passed to the addFlow function.
*/ */
function uploadFlow() { function uploadFlow() {
// create a file input // create a file input
const input = document.createElement("input"); const input = document.createElement("input");
input.type = "file"; input.type = "file";
// add a change event listener to the file input // add a change event listener to the file input
input.onchange = (e: Event) => { input.onchange = (e: Event) => {
// check if the file type is application/json // check if the file type is application/json
if ((e.target as HTMLInputElement).files[0].type === "application/json") { if ((e.target as HTMLInputElement).files[0].type === "application/json") {
// get the file from the file input // get the file from the file input
const file = (e.target as HTMLInputElement).files[0]; const file = (e.target as HTMLInputElement).files[0];
// read the file as text // read the file as text
file.text().then((text) => { file.text().then((text) => {
// parse the text into a JSON object // parse the text into a JSON object
let flow: FlowType = JSON.parse(text); let flow: FlowType = JSON.parse(text);
addFlow(flow); addFlow(flow);
}); });
} }
}; };
// trigger the file input click event to open the file dialog // trigger the file input click event to open the file dialog
input.click(); input.click();
} }
/** /**
* Removes a flow from an array of flows based on its id. * Removes a flow from an array of flows based on its id.
* Updates the state of flows and tabIndex using setFlows and setTabIndex hooks. * Updates the state of flows and tabIndex using setFlows and setTabIndex hooks.
* @param {string} id - The id of the flow to remove. * @param {string} id - The id of the flow to remove.
*/ */
function removeFlow(id: string) { function removeFlow(id: string) {
setFlows((prevState) => { setFlows((prevState) => {
const newFlows = [...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 >= 0) {
if (index === tabIndex) { if (index === tabIndex) {
setTabIndex(flows.length - 2); setTabIndex(flows.length - 2);
newFlows.splice(index, 1); newFlows.splice(index, 1);
} else { } else {
let flowId = flows[tabIndex].id; let flowId = flows[tabIndex].id;
newFlows.splice(index, 1); newFlows.splice(index, 1);
setTabIndex(newFlows.findIndex((flow) => flow.id === flowId)); setTabIndex(newFlows.findIndex((flow) => flow.id === flowId));
} }
} }
return newFlows; return newFlows;
}); });
} }
/** /**
* Add a new flow to the list of flows. * Add a new flow to the list of flows.
* @param flow Optional flow to add. * @param flow Optional flow to add.
*/ */
function paste(selectionInstance, position){ function paste(selectionInstance, position) {
let minimumX = Infinity; let minimumX = Infinity;
let minimumY = Infinity; let minimumY = Infinity;
let idsMap = {}; let idsMap = {};
let nodes = reactFlowInstance.getNodes(); let nodes = reactFlowInstance.getNodes();
let edges = reactFlowInstance.getEdges(); let edges = reactFlowInstance.getEdges();
selectionInstance.nodes.forEach((n) => { selectionInstance.nodes.forEach((n) => {
if (n.position.y < minimumY) { if (n.position.y < minimumY) {
minimumY = n.position.y; minimumY = n.position.y;
} }
if (n.position.x < minimumX) { if (n.position.x < minimumX) {
minimumX = n.position.x; minimumX = n.position.x;
} }
}); });
const insidePosition = reactFlowInstance.project(position); const insidePosition = reactFlowInstance.project(position);
selectionInstance.nodes.forEach((n) => { selectionInstance.nodes.forEach((n) => {
// Generate a unique node ID // Generate a unique node ID
let newId = getNodeId(); let newId = getNodeId();
idsMap[n.id] = newId; idsMap[n.id] = newId;
// Create a new node object // Create a new node object
const newNode: NodeType = { const newNode: NodeType = {
id: newId, id: newId,
type: "genericNode", type: "genericNode",
position: { position: {
x: insidePosition.x + n.position.x - minimumX, x: insidePosition.x + n.position.x - minimumX,
y: insidePosition.y + n.position.y - minimumY, y: insidePosition.y + n.position.y - minimumY,
}, },
data: { data: {
...n.data, ...n.data,
id: newId, id: newId,
}, },
}; };
// Add the new node to the list of nodes in state // Add the new node to the list of nodes in state
nodes = nodes nodes = nodes
.map((e) => ({ ...e, selected: false })) .map((e) => ({ ...e, selected: false }))
.concat({ ...newNode, selected: false }) .concat({ ...newNode, selected: false });
}); });
reactFlowInstance.setNodes(nodes); reactFlowInstance.setNodes(nodes);
selectionInstance.edges.forEach((e) => { selectionInstance.edges.forEach((e) => {
let source = idsMap[e.source]; let source = idsMap[e.source];
let target = idsMap[e.target]; let target = idsMap[e.target];
let sourceHandleSplitted = e.sourceHandle.split("|"); let sourceHandleSplitted = e.sourceHandle.split("|");
let sourceHandle = let sourceHandle =
sourceHandleSplitted[0] + sourceHandleSplitted[0] +
"|" + "|" +
source + source +
"|" + "|" +
sourceHandleSplitted.slice(2).join("|"); sourceHandleSplitted.slice(2).join("|");
let targetHandleSplitted = e.targetHandle.split("|"); let targetHandleSplitted = e.targetHandle.split("|");
let targetHandle = let targetHandle =
targetHandleSplitted.slice(0, -1).join("|") + "|" + target; targetHandleSplitted.slice(0, -1).join("|") + "|" + target;
let id = let id =
"reactflow__edge-" + "reactflow__edge-" +
source + source +
sourceHandle + sourceHandle +
"-" + "-" +
target + target +
targetHandle; targetHandle;
edges = addEdge( edges = addEdge(
{ {
source, source,
target, target,
sourceHandle, sourceHandle,
targetHandle, targetHandle,
id, id,
className: "animate-pulse", className: "animate-pulse",
selected: false, selected: false,
}, },
edges.map((e) => ({ ...e, selected: false })) edges.map((e) => ({ ...e, selected: false }))
); );
}); });
reactFlowInstance.setEdges(edges); reactFlowInstance.setEdges(edges);
}; }
function addFlow(flow?: FlowType) { function addFlow(flow?: FlowType) {
// Get data from the flow or set it to null if there's no flow provided. // Get data from the flow or set it to null if there's no flow provided.
const data = flow?.data ? flow.data : null; const data = flow?.data ? flow.data : null;
const description = flow?.description ? flow.description : ""; const description = flow?.description ? flow.description : "";
if (data) { if (data) {
data.nodes.forEach((node) => { data.nodes.forEach((node) => {
if (Object.keys(templates[node.data.type]["template"]).length > 0) { if (Object.keys(templates[node.data.type]["template"]).length > 0) {
node.data.node.template = updateTemplate( node.data.node.template = updateTemplate(
templates[node.data.type]["template"] as unknown as APITemplateType, templates[node.data.type]["template"] as unknown as APITemplateType,
node.data.node.template as APITemplateType node.data.node.template as APITemplateType
); );
} }
}); });
} }
// Create a new flow with a default name if no flow is provided. // Create a new flow with a default name if no flow is provided.
let newFlow: FlowType = { let newFlow: FlowType = {
description, description,
name: flow?.name ?? "New Flow", name: flow?.name ?? "New Flow",
id: uuidv4(), id: uuidv4(),
data, data,
}; };
// Increment the ID counter. // Increment the ID counter.
setId(uuidv4()); setId(uuidv4());
// Add the new flow to the list of flows. // Add the new flow to the list of flows.
setFlows((prevState) => { setFlows((prevState) => {
const newFlows = [...prevState, newFlow]; const newFlows = [...prevState, newFlow];
return newFlows; return newFlows;
}); });
// Set the tab index to the new flow. // Set the tab index to the new flow.
setTabIndex(flows.length); setTabIndex(flows.length);
} }
/** /**
* Updates an existing flow with new data * Updates an existing flow with new data
* @param newFlow - The new flow object containing the updated data * @param newFlow - The new flow object containing the updated data
*/ */
function updateFlow(newFlow: FlowType) { function updateFlow(newFlow: FlowType) {
setFlows((prevState) => { setFlows((prevState) => {
const newFlows = [...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) { if (index !== -1) {
newFlows[index].description = newFlow.description ?? ""; newFlows[index].description = newFlow.description ?? "";
newFlows[index].data = newFlow.data; newFlows[index].data = newFlow.data;
newFlows[index].name = newFlow.name; newFlows[index].name = newFlow.name;
} }
return newFlows; return newFlows;
}); });
} }
const [disableCopyPaste, setDisableCopyPaste] = useState(false); const [disableCopyPaste, setDisableCopyPaste] = useState(false);
return ( return (
<TabsContext.Provider <TabsContext.Provider
value={{ value={{
disableCopyPaste, disableCopyPaste,
setDisableCopyPaste, setDisableCopyPaste,
save, save,
hardReset, hardReset,
tabIndex, tabIndex,
setTabIndex, setTabIndex,
flows, flows,
incrementNodeId, incrementNodeId,
removeFlow, removeFlow,
addFlow, addFlow,
updateFlow, updateFlow,
downloadFlow, downloadFlow,
uploadFlow, uploadFlow,
getNodeId, getNodeId,
paste, paste,
}} }}
> >
{children} {children}
</TabsContext.Provider> </TabsContext.Provider>
); );
} }

36
src/frontend/src/controllers/API/index.ts
View file

@ -4,40 +4,40 @@ import axios, { AxiosResponse } from "axios";
import { FlowType } from "../../types/flow"; import { FlowType } from "../../types/flow";
export async function getAll(): Promise<AxiosResponse<APIObjectType>> { export async function getAll(): Promise<AxiosResponse<APIObjectType>> {
return await axios.get(`/all`); return await axios.get(`/all`);
} }
export async function sendAll(data: sendAllProps) { export async function sendAll(data: sendAllProps) {
return await axios.post(`/predict`, data); return await axios.post(`/predict`, data);
} }
export async function checkCode( export async function checkCode(
code: string code: string
): Promise<AxiosResponse<errorsTypeAPI>> { ): Promise<AxiosResponse<errorsTypeAPI>> {
return await axios.post("/validate/code", { code }); return await axios.post("/validate/code", { code });
} }
export async function checkPrompt( export async function checkPrompt(
template: string template: string
): Promise<AxiosResponse<PromptTypeAPI>> { ): Promise<AxiosResponse<PromptTypeAPI>> {
return await axios.post("/validate/prompt", { template }); return await axios.post("/validate/prompt", { template });
} }
export async function getExamples(): Promise<FlowType[]> { export async function getExamples(): Promise<FlowType[]> {
const url = const url =
"https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples"; "https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples";
const response = await axios.get(url); const response = await axios.get(url);
const jsonFiles = response.data.filter((file: any) => { const jsonFiles = response.data.filter((file: any) => {
return file.name.endsWith(".json"); return file.name.endsWith(".json");
}); });
const contentsPromises = jsonFiles.map(async (file: any) => { const contentsPromises = jsonFiles.map(async (file: any) => {
const contentResponse = await axios.get(file.download_url); const contentResponse = await axios.get(file.download_url);
return contentResponse.data; return contentResponse.data;
}); });
const contents = await Promise.all(contentsPromises); const contents = await Promise.all(contentsPromises);
return contents; return contents;
} }

14
src/frontend/src/index.tsx
View file

@ -5,16 +5,16 @@ import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom"; import { BrowserRouter } from "react-router-dom";
import ContextWrapper from "./contexts"; import ContextWrapper from "./contexts";
import './index.css'; import "./index.css";
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement document.getElementById("root") as HTMLElement
); );
root.render( root.render(
<ContextWrapper> <ContextWrapper>
<BrowserRouter> <BrowserRouter>
<App /> <App />
</BrowserRouter> </BrowserRouter>
</ContextWrapper> </ContextWrapper>
); );
reportWebVitals(); reportWebVitals();

318
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -1,6 +1,10 @@
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react'; import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
import { XMarkIcon, CommandLineIcon, CodeBracketSquareIcon } from "@heroicons/react/24/outline"; import {
XMarkIcon,
CommandLineIcon,
CodeBracketSquareIcon,
} from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react"; import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/mode-python";
@ -9,42 +13,40 @@ import "ace-builds/src-noconflict/theme-twilight";
import "ace-builds/src-noconflict/ext-language_tools"; import "ace-builds/src-noconflict/ext-language_tools";
// import "ace-builds/webpack-resolver"; // import "ace-builds/webpack-resolver";
import { darkContext } from "../../contexts/darkContext"; import { darkContext } from "../../contexts/darkContext";
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'; import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
export default function ApiModal({ flowName }) { export default function ApiModal({ flowName }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const { dark } = useContext(darkContext); const { dark } = useContext(darkContext);
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const [activeTab, setActiveTab] = useState(0); const [activeTab, setActiveTab] = useState(0);
const ref = useRef(); const ref = useRef();
const [isCopied, setIsCopied] = useState<Boolean>(false); const [isCopied, setIsCopied] = useState<Boolean>(false);
const copyToClipboard = () => { const copyToClipboard = () => {
if (!navigator.clipboard || !navigator.clipboard.writeText) { if (!navigator.clipboard || !navigator.clipboard.writeText) {
return; return;
} }
navigator.clipboard.writeText(tabs[activeTab].code).then(() => { navigator.clipboard.writeText(tabs[activeTab].code).then(() => {
setIsCopied(true); setIsCopied(true);
setTimeout(() => { setTimeout(() => {
setIsCopied(false); setIsCopied(false);
}, 2000); }, 2000);
}); });
}; };
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
setTimeout(() => { setTimeout(() => {
closePopUp(); closePopUp();
}, 300); }, 300);
} }
} }
const pythonApiCode = `import requests const pythonApiCode = `import requests
import json import json
API_URL = "${window.location.protocol}//${window.location.host}/predict" API_URL = "${window.location.protocol}//${window.location.host}/predict"
@ -58,130 +60,142 @@ def predict(message):
print(predict("Your message"))`; print(predict("Your message"))`;
const pythonCode = `from langflow import load_flow_from_json const pythonCode = `from langflow import load_flow_from_json
flow = load_flow_from_json("${flowName}.json") flow = load_flow_from_json("${flowName}.json")
# Now you can use it like any chain # Now you can use it like any chain
flow("Hey, have you heard of LangFlow?")`; flow("Hey, have you heard of LangFlow?")`;
const tabs = [ const tabs = [
{ {
name: "Python API", name: "Python API",
mode: "python", mode: "python",
image: "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w", image:
code: pythonApiCode, "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
}, code: pythonApiCode,
{ },
name: "Python Code", {
mode: "python", name: "Python Code",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", mode: "python",
code: pythonCode, image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
}, code: pythonCode,
},
];
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">
return ( <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Root show={open} appear={true} as={Fragment}> <Transition.Child
<Dialog as={Fragment}
as="div" enter="ease-out duration-300"
className="relative z-10" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
onClose={setModalOpen} enterTo="opacity-100 translate-y-0 sm:scale-100"
initialFocus={ref} leave="ease-in duration-200"
> leaveFrom="opacity-100 translate-y-0 sm:scale-100"
<Transition.Child leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
as={Fragment} >
enter="ease-out duration-300" <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]">
enterFrom="opacity-0" <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
enterTo="opacity-100" <button
leave="ease-in duration-200" type="button"
leaveFrom="opacity-100" className="rounded-md text-gray-400 hover:text-gray-500"
leaveTo="opacity-0" onClick={() => {
> setModalOpen(false);
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" /> }}
</Transition.Child> >
<span className="sr-only">Close</span>
<div className="fixed inset-0 z-10 overflow-y-auto"> <XMarkIcon className="h-6 w-6" aria-hidden="true" />
<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> </button>
<Transition.Child </div>
as={Fragment} <div className="h-full w-full flex flex-col justify-center items-center">
enter="ease-out duration-300" <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" <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">
enterTo="opacity-100 translate-y-0 sm:scale-100" <CodeBracketSquareIcon
leave="ease-in duration-200" className="h-6 w-6 text-blue-600"
leaveFrom="opacity-100 translate-y-0 sm:scale-100" aria-hidden="true"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" />
> </div>
<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="mt-4 text-center sm:ml-4 sm:text-left">
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block"> <Dialog.Title
<button as="h3"
type="button" className="text-lg font-medium dark:text-white leading-10 text-gray-900"
className="rounded-md text-gray-400 hover:text-gray-500" >
onClick={() => { Code
setModalOpen(false); </Dialog.Title>
}} </div>
> </div>
<span className="sr-only">Close</span> <div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> <div className="flex flex-col h-full w-full ">
</button> <div className="flex px-5 z-10">
</div> {tabs.map((tab, index) => (
<div className="h-full w-full flex flex-col justify-center items-center"> <button
<div className="flex w-full pb-4 z-10 justify-center shadow-sm"> onClick={() => {
<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"> setActiveTab(index);
<CodeBracketSquareIcon }}
className="h-6 w-6 text-blue-600" className={
aria-hidden="true" "p-2 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " +
/> (activeTab === index
</div> ? " bg-white dark:bg-gray-800"
<div className="mt-4 text-center sm:ml-4 sm:text-left"> : "bg-gray-100 dark:bg-gray-900")
<Dialog.Title }
as="h3" >
className="text-lg font-medium dark:text-white leading-10 text-gray-900" {tab.name}
> <img src={tab.image} className="w-6" />
Code </button>
</Dialog.Title> ))}
</div> </div>
</div> <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
<div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center"> <div className="w-full flex items-center justify-between mb-2">
<div className="flex flex-col h-full w-full "> <span className="text-sm text-gray-500 dark:text-gray-300">
<div className="flex px-5 z-10"> Export your flow to use it with this code.
{tabs.map((tab, index) => ( </span>
<button onClick={() => { <button
setActiveTab(index); className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
}} className={"p-2 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " + (activeTab === index ? " bg-white dark:bg-gray-800" : "bg-gray-100 dark:bg-gray-900")}> onClick={copyToClipboard}
{tab.name} >
<img src={tab.image} className="w-6" /> {isCopied ? (
</button> <IconCheck size={18} />
))} ) : (
</div> <IconClipboard size={18} />
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800"> )}
<div className="w-full flex items-center justify-between mb-2"> {isCopied ? "Copied!" : "Copy code"}
<span className="text-sm text-gray-500 dark:text-gray-300"> </button>
Export your flow to use it with this code. </div>
</span> <SyntaxHighlighter
<button className="h-[370px]"
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300" language={tabs[activeTab].mode}
onClick={copyToClipboard} style={oneDark}
> customStyle={{ margin: 0 }}
{isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />} >
{isCopied ? 'Copied!' : 'Copy code'} {tabs[activeTab].code}
</button> </SyntaxHighlighter>
</div> </div>
<SyntaxHighlighter </div>
className="h-[370px]" </div>
language={tabs[activeTab].mode} </div>
style={oneDark} </Dialog.Panel>
customStyle={{ margin: 0 }} </Transition.Child>
> </div>
{tabs[activeTab].code} </div>
</SyntaxHighlighter> </Dialog>
</div> </Transition.Root>
</div> );
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
} }

296
src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
View file

@ -13,154 +13,154 @@ import CodeAreaComponent from "../../../../components/codeAreaComponent";
import { classNames } from "../../../../utils"; import { classNames } from "../../../../utils";
export default function ModalField({ data, title, required, id, name, type }) { export default function ModalField({ data, title, required, id, name, type }) {
const { save } = useContext(TabsContext); const { save } = useContext(TabsContext);
const [enabled, setEnabled] = useState( const [enabled, setEnabled] = useState(
data.node.template[name]?.value ?? false data.node.template[name]?.value ?? false
); );
const display = const display =
type === "str" || type === "str" ||
type === "int" || type === "int" ||
type === "prompt" || type === "prompt" ||
type === "bool" || type === "bool" ||
type === "float" || type === "float" ||
type === "file" || type === "file" ||
type === "code"; type === "code";
return ( return (
<div <div
className={classNames( className={classNames(
"flex flex-row w-full items-center justify-between", "flex flex-row w-full items-center justify-between",
display ? "" : "hidden" display ? "" : "hidden"
)} )}
> >
{display && ( {display && (
<div> <div>
<span className="mx-2 dark:text-gray-300">{title}</span> <span className="mx-2 dark:text-gray-300">{title}</span>
<span className="text-red-600">{required ? " *" : ""}</span> <span className="text-red-600">{required ? " *" : ""}</span>
</div> </div>
)} )}
{type === "str" && !data.node.template[name].options ? ( {type === "str" && !data.node.template[name].options ? (
<div className="w-1/2"> <div className="w-1/2">
{data.node.template[name].list ? ( {data.node.template[name].list ? (
<InputListComponent <InputListComponent
disabled={false} disabled={false}
value={ value={
!data.node.template[name].value || !data.node.template[name].value ||
data.node.template[name].value === "" data.node.template[name].value === ""
? [""] ? [""]
: data.node.template[name].value : data.node.template[name].value
} }
onChange={(t: string[]) => { onChange={(t: string[]) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
) : data.node.template[name].multiline ? ( ) : data.node.template[name].multiline ? (
<TextAreaComponent <TextAreaComponent
disabled={false} disabled={false}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
) : ( ) : (
<InputComponent <InputComponent
disabled={false} disabled={false}
password={data.node.template[name].password ?? false} password={data.node.template[name].password ?? false}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t) => { onChange={(t) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
)} )}
</div> </div>
) : type === "bool" ? ( ) : type === "bool" ? (
<div className="ml-auto"> <div className="ml-auto">
{" "} {" "}
<ToggleComponent <ToggleComponent
disabled={false} disabled={false}
enabled={enabled} enabled={enabled}
setEnabled={(t) => { setEnabled={(t) => {
data.node.template[name].value = t; data.node.template[name].value = t;
setEnabled(t); setEnabled(t);
save(); save();
}} }}
/> />
</div> </div>
) : type === "float" ? ( ) : type === "float" ? (
<div className="w-1/2"> <div className="w-1/2">
<FloatComponent <FloatComponent
disabled={false} disabled={false}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t) => { onChange={(t) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
</div> </div>
) : type === "str" && data.node.template[name].options ? ( ) : type === "str" && data.node.template[name].options ? (
<div className="w-1/2"> <div className="w-1/2">
<Dropdown <Dropdown
options={data.node.template[name].options} options={data.node.template[name].options}
onSelect={(newValue) => (data.node.template[name].value = newValue)} onSelect={(newValue) => (data.node.template[name].value = newValue)}
value={data.node.template[name].value ?? "Choose an option"} value={data.node.template[name].value ?? "Choose an option"}
></Dropdown> ></Dropdown>
</div> </div>
) : type === "int" ? ( ) : type === "int" ? (
<div className="w-1/2"> <div className="w-1/2">
<IntComponent <IntComponent
disabled={false} disabled={false}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t) => { onChange={(t) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
</div> </div>
) : type === "file" ? ( ) : type === "file" ? (
<div className="w-1/2"> <div className="w-1/2">
<InputFileComponent <InputFileComponent
disabled={false} disabled={false}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[name].value = t; data.node.template[name].value = t;
}} }}
fileTypes={data.node.template[name].fileTypes} fileTypes={data.node.template[name].fileTypes}
suffixes={data.node.template[name].suffixes} suffixes={data.node.template[name].suffixes}
onFileChange={(t: string) => { onFileChange={(t: string) => {
data.node.template[name].content = t; data.node.template[name].content = t;
save(); save();
}} }}
></InputFileComponent> ></InputFileComponent>
</div> </div>
) : type === "prompt" ? ( ) : type === "prompt" ? (
<div className="w-1/2"> <div className="w-1/2">
<PromptAreaComponent <PromptAreaComponent
disabled={false} disabled={false}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
</div> </div>
) : type === "code" ? ( ) : type === "code" ? (
<div className="w-1/2"> <div className="w-1/2">
<CodeAreaComponent <CodeAreaComponent
disabled={false} disabled={false}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
</div> </div>
) : ( ) : (
<div className="hidden"></div> <div className="hidden"></div>
)} )}
</div> </div>
); );
} }

266
src/frontend/src/modals/NodeModal/index.tsx
View file

@ -8,138 +8,138 @@ import { typesContext } from "../../contexts/typesContext";
import ModalField from "./components/ModalField"; import ModalField from "./components/ModalField";
export default function NodeModal({ data }: { data: NodeDataType }) { export default function NodeModal({ data }: { data: NodeDataType }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const { types } = useContext(typesContext); const { types } = useContext(typesContext);
const ref = useRef(); const ref = useRef();
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
setTimeout(() => { setTimeout(() => {
closePopUp(); closePopUp();
}, 300); }, 300);
} }
} }
const Icon = nodeIcons[types[data.type]]; const Icon = nodeIcons[types[data.type]];
return ( return (
<Transition.Root show={open} appear={true} as={Fragment}> <Transition.Root show={open} appear={true} as={Fragment}>
<Dialog <Dialog
as="div" as="div"
className="relative z-10" className="relative z-10"
onClose={setModalOpen} onClose={setModalOpen}
initialFocus={ref} initialFocus={ref}
> >
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" /> <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <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"> <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100" enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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]"> <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"> <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<button <button
type="button" type="button"
className="rounded-md text-gray-400 hover:text-gray-500" className="rounded-md text-gray-400 hover:text-gray-500"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}
> >
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> <XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button> </button>
</div> </div>
<div className="h-full w-full flex flex-col justify-center items-center"> <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="flex w-full pb-4 z-10 justify-center shadow-sm">
<Icon <Icon
className="w-10 mt-4 h-10 p-1 rounded" className="w-10 mt-4 h-10 p-1 rounded"
style={{ style={{
color: color:
nodeColors[types[data.type]] ?? nodeColors.unknown, nodeColors[types[data.type]] ?? nodeColors.unknown,
}} }}
/> />
<div className="mt-4 text-center sm:ml-4 sm:text-left"> <div className="mt-4 text-center sm:ml-4 sm:text-left">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg font-medium dark:text-white leading-10 text-gray-900" className="text-lg font-medium dark:text-white leading-10 text-gray-900"
> >
{data.type} {data.type}
</Dialog.Title> </Dialog.Title>
</div> </div>
</div> </div>
<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center"> <div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<div className="overflow-hidden px-4 sm:p-4 w-full rounded-lg bg-white dark:bg-gray-800 shadow"> <div className="overflow-hidden px-4 sm:p-4 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
<div className="flex flex-col h-full gap-5"> <div className="flex flex-col h-full gap-5">
{Object.keys(data.node.template) {Object.keys(data.node.template)
.filter( .filter(
(t) => (t) =>
t.charAt(0) !== "_" && t.charAt(0) !== "_" &&
data.node.template[t].advanced && data.node.template[t].advanced &&
data.node.template[t].show data.node.template[t].show
) )
.map((t: string, idx) => { .map((t: string, idx) => {
return ( return (
<ModalField <ModalField
key={idx} key={idx}
data={data} data={data}
title={ title={
data.node.template[t].display_name data.node.template[t].display_name
? data.node.template[t].display_name ? data.node.template[t].display_name
: data.node.template[t].name : data.node.template[t].name
? toNormalCase(data.node.template[t].name) ? toNormalCase(data.node.template[t].name)
: toNormalCase(t) : toNormalCase(t)
} }
required={data.node.template[t].required} required={data.node.template[t].required}
id={ id={
data.node.template[t].type + data.node.template[t].type +
"|" + "|" +
t + t +
"|" + "|" +
data.id data.id
} }
name={t} name={t}
type={data.node.template[t].type} type={data.node.template[t].type}
/> />
); );
})} })}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4"> <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
<button <button
type="button" type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm" className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}
> >
Done Done
</button> </button>
</div> </div>
</div> </div>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>
</div> </div>
</div> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition.Root>
); );
} }

126
src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
View file

@ -5,78 +5,78 @@ import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { programmingLanguages } from "../../../../utils"; import { programmingLanguages } from "../../../../utils";
interface Props { interface Props {
language: string; language: string;
value: string; value: string;
} }
export const CodeBlock: FC<Props> = memo(({ language, value }) => { export const CodeBlock: FC<Props> = memo(({ language, value }) => {
const [isCopied, setIsCopied] = useState<Boolean>(false); const [isCopied, setIsCopied] = useState<Boolean>(false);
const copyToClipboard = () => { const copyToClipboard = () => {
if (!navigator.clipboard || !navigator.clipboard.writeText) { if (!navigator.clipboard || !navigator.clipboard.writeText) {
return; return;
} }
navigator.clipboard.writeText(value).then(() => { navigator.clipboard.writeText(value).then(() => {
setIsCopied(true); setIsCopied(true);
setTimeout(() => { setTimeout(() => {
setIsCopied(false); setIsCopied(false);
}, 2000); }, 2000);
}); });
}; };
const downloadAsFile = () => { const downloadAsFile = () => {
const fileExtension = programmingLanguages[language] || ".file"; const fileExtension = programmingLanguages[language] || ".file";
const suggestedFileName = `${"generated-code"}${fileExtension}`; const suggestedFileName = `${"generated-code"}${fileExtension}`;
const fileName = window.prompt("enter file name", suggestedFileName); const fileName = window.prompt("enter file name", suggestedFileName);
if (!fileName) { if (!fileName) {
// user pressed cancel on prompt // user pressed cancel on prompt
return; return;
} }
const blob = new Blob([value], { type: "text/plain" }); const blob = new Blob([value], { type: "text/plain" });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const link = document.createElement("a"); const link = document.createElement("a");
link.download = fileName; link.download = fileName;
link.href = url; link.href = url;
link.style.display = "none"; link.style.display = "none";
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
}; };
return ( return (
<div className="codeblock font-sans text-[16px]"> <div className="codeblock font-sans text-[16px]">
<div className="flex items-center justify-between py-1.5 px-4"> <div className="flex items-center justify-between py-1.5 px-4">
<span className="text-xs lowercase text-white">{language}</span> <span className="text-xs lowercase text-white">{language}</span>
<div className="flex items-center"> <div className="flex items-center">
<button <button
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white" className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white"
onClick={copyToClipboard} onClick={copyToClipboard}
> >
{isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />} {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
{isCopied ? "Copied!" : "Copy code"} {isCopied ? "Copied!" : "Copy code"}
</button> </button>
<button <button
className="flex items-center rounded bg-none p-1 text-xs text-white" className="flex items-center rounded bg-none p-1 text-xs text-white"
onClick={downloadAsFile} onClick={downloadAsFile}
> >
<IconDownload size={18} /> <IconDownload size={18} />
</button> </button>
</div> </div>
</div> </div>
<SyntaxHighlighter <SyntaxHighlighter
className=" w-[570px]" className=" w-[570px]"
language={language} language={language}
style={oneDark} style={oneDark}
customStyle={{ margin: 0 }} customStyle={{ margin: 0 }}
> >
{value} {value}
</SyntaxHighlighter> </SyntaxHighlighter>
</div> </div>
); );
}); });
CodeBlock.displayName = "CodeBlock"; CodeBlock.displayName = "CodeBlock";

272
src/frontend/src/modals/chatModal/chatMessage/index.tsx
View file

@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
import { ChatMessageType } from "../../../types/chat"; import { ChatMessageType } from "../../../types/chat";
import { classNames } from "../../../utils"; import { classNames } from "../../../utils";
import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg"; import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
import AiIconStill from "../../../assets/froze-flow.png" import AiIconStill from "../../../assets/froze-flow.png";
import { UserIcon } from "@heroicons/react/24/solid"; import { UserIcon } from "@heroicons/react/24/solid";
import FileCard from "../fileComponent"; import FileCard from "../fileComponent";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
@ -13,132 +13,154 @@ import remarkMath from "remark-math";
import { CodeBlock } from "./codeBlock"; import { CodeBlock } from "./codeBlock";
import Convert from "ansi-to-html"; import Convert from "ansi-to-html";
export default function ChatMessage({ chat, lockChat }: { chat: ChatMessageType, lockChat: boolean }) { export default function ChatMessage({
const convert = new Convert({ newline: true }); chat,
const [message, setMessage] = useState(""); lockChat,
const imgRef = useRef(null); }: {
useEffect(() => { chat: ChatMessageType;
setMessage(chat.message); lockChat: boolean;
}, [chat.message]); }) {
const [hidden, setHidden] = useState(true); const convert = new Convert({ newline: true });
return ( const [message, setMessage] = useState("");
<div const imgRef = useRef(null);
className={classNames( useEffect(() => {
"w-full py-2 pl-2 flex", setMessage(chat.message);
chat.isSend }, [chat.message]);
? "bg-white dark:bg-gray-900 " const [hidden, setHidden] = useState(true);
: "bg-gray-200 dark:bg-gray-800" return (
)} <div
> className={classNames(
<div "w-full py-2 pl-2 flex",
className={classNames( chat.isSend
"rounded-full overflow-hidden w-8 h-8 flex items-center my-3 justify-center" ? "bg-white dark:bg-gray-900 "
)} : "bg-gray-200 dark:bg-gray-800"
> )}
{!chat.isSend && <div className="relative w-8 h-8"> >
<img className={"absolute transition-opacity duration-500 scale-150 " + (lockChat ? "opacity-100" : "opacity-0")} src={AiIcon} /> <div
<img className={"absolute transition-opacity duration-500 scale-150 " + (lockChat ? "opacity-0" : "opacity-100")} src={AiIconStill} /> className={classNames(
</div>} "rounded-full overflow-hidden w-8 h-8 flex items-center my-3 justify-center"
{chat.isSend && <UserIcon className="w-6 h-6 -mb-1 text-gray-800 dark:text-gray-200" />} )}
</div> >
{!chat.isSend ? ( {!chat.isSend && (
<div className="w-full text-start flex items-center"> <div className="relative w-8 h-8">
<div className="w-full relative text-start inline-block text-gray-600 dark:text-gray-300 text-sm font-normal"> <img
{hidden && chat.thought && chat.thought !== "" && ( className={
<div "absolute transition-opacity duration-500 scale-150 " +
onClick={() => setHidden((prev) => !prev)} (lockChat ? "opacity-100" : "opacity-0")
className="absolute -top-1 -left-2 cursor-pointer" }
> src={AiIcon}
<ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce dark:text-white" /> />
</div> <img
)} className={
{chat.thought && chat.thought !== "" && !hidden && ( "absolute transition-opacity duration-500 scale-150 " +
<div (lockChat ? "opacity-0" : "opacity-100")
onClick={() => setHidden((prev) => !prev)} }
className=" text-start inline-block rounded-md text-gray-600 dark:text-gray-200 h-full border border-gray-300 dark:border-gray-500 src={AiIconStill}
/>
</div>
)}
{chat.isSend && (
<UserIcon className="w-6 h-6 -mb-1 text-gray-800 dark:text-gray-200" />
)}
</div>
{!chat.isSend ? (
<div className="w-full text-start flex items-center">
<div className="w-full relative text-start inline-block text-gray-600 dark:text-gray-300 text-sm font-normal">
{hidden && chat.thought && chat.thought !== "" && (
<div
onClick={() => setHidden((prev) => !prev)}
className="absolute -top-1 -left-2 cursor-pointer"
>
<ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce dark:text-white" />
</div>
)}
{chat.thought && chat.thought !== "" && !hidden && (
<div
onClick={() => setHidden((prev) => !prev)}
className=" text-start inline-block rounded-md text-gray-600 dark:text-gray-200 h-full border border-gray-300 dark:border-gray-500
bg-gray-100 dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll" bg-gray-100 dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: convert.toHtml(chat.thought), __html: convert.toHtml(chat.thought),
}} }}
></div> ></div>
)} )}
{chat.thought && chat.thought !== "" && !hidden && <br></br>} {chat.thought && chat.thought !== "" && !hidden && <br></br>}
<div className="w-full px-4 pb-3 pt-3 pr-8"> <div className="w-full px-4 pb-3 pt-3 pr-8">
<div className="dark:text-white w-full"> <div className="dark:text-white w-full">
<div className="w-full"> <div className="w-full">
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]} remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]} rehypePlugins={[rehypeMathjax]}
className="markdown prose dark:prose-invert text-gray-600 dark:text-gray-200" className="markdown prose dark:prose-invert text-gray-600 dark:text-gray-200"
components={{ components={{
code({ node, inline, className, children, ...props }) { code({ node, inline, className, children, ...props }) {
if (children.length) { if (children.length) {
if (children[0] == "▍") { if (children[0] == "▍") {
return ( return (
<span className="animate-pulse cursor-default mt-1"> <span className="animate-pulse cursor-default mt-1">
▍ ▍
</span> </span>
); );
} }
children[0] = (children[0] as string).replace( children[0] = (children[0] as string).replace(
"`▍`", "`▍`",
"▍" "▍"
); );
} }
const match = /language-(\w+)/.exec(className || ""); const match = /language-(\w+)/.exec(className || "");
return !inline ? ( return !inline ? (
<CodeBlock <CodeBlock
key={Math.random()} key={Math.random()}
language={(match && match[1]) || ""} language={(match && match[1]) || ""}
value={String(children).replace(/\n$/, "")} value={String(children).replace(/\n$/, "")}
{...props} {...props}
/> />
) : ( ) : (
<code className={className} {...props}> <code className={className} {...props}>
{children} {children}
</code> </code>
); );
}, },
}} }}
> >
{message} {message}
</ReactMarkdown> </ReactMarkdown>
</div> </div>
{chat.files && ( {chat.files && (
<div className="my-2 w-full"> <div className="my-2 w-full">
{chat.files.map((file, index) => { {chat.files.map((file, index) => {
return ( return (
<div key={index} className="my-2 w-full"> <div key={index} className="my-2 w-full">
<FileCard <FileCard
fileName={"Generated File"} fileName={"Generated File"}
fileType={file.data_type} fileType={file.data_type}
content={file.data} content={file.data}
/> />
</div> </div>
); );
})} })}
</div> </div>
)} )}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<div className="w-full flex items-center"> <div className="w-full flex items-center">
<div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white"> <div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white">
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]} remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]} rehypePlugins={[rehypeMathjax]}
className="markdown prose dark:prose-invert text-gray-600 dark:text-gray-200" className="markdown prose dark:prose-invert text-gray-600 dark:text-gray-200"
> >
{message} {message}
</ReactMarkdown> </ReactMarkdown>
</div> </div>
</div> </div>
)} )}
</div> </div>
); );
} }

142
src/frontend/src/modals/chatModal/fileComponent/index.tsx
View file

@ -3,77 +3,77 @@ import * as base64js from "base64-js";
import { useState } from "react"; import { useState } from "react";
export default function FileCard({ fileName, content, fileType }) { export default function FileCard({ fileName, content, fileType }) {
const handleDownload = () => { const handleDownload = () => {
const byteArray = new Uint8Array(base64js.toByteArray(content)); const byteArray = new Uint8Array(base64js.toByteArray(content));
const blob = new Blob([byteArray], { type: "application/octet-stream" }); const blob = new Blob([byteArray], { type: "application/octet-stream" });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const link = document.createElement("a"); const link = document.createElement("a");
link.href = url; link.href = url;
link.download = fileName + ".png"; link.download = fileName + ".png";
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
}; };
const [isHovered, setIsHovered] = useState(false); const [isHovered, setIsHovered] = useState(false);
function handleMouseEnter() { function handleMouseEnter() {
setIsHovered(true); setIsHovered(true);
} }
function handleMouseLeave() { function handleMouseLeave() {
setIsHovered(false); setIsHovered(false);
} }
if (fileType === "image") { if (fileType === "image") {
return ( return (
<div <div
className="relative w-1/4 h-1/4" className="relative w-1/4 h-1/4"
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
> >
<img <img
src={`data:image/png;base64,${content}`} src={`data:image/png;base64,${content}`}
alt="generated image" alt="generated image"
className="rounded-lg w-full h-full" className="rounded-lg w-full h-full"
/> />
{isHovered && ( {isHovered && (
<div <div
className={`absolute top-0 right-0 bg-gray-100 text-gray-700 rounded-bl-lg px-1 text-sm font-bold dark:bg-gray-700 dark:text-gray-300`} className={`absolute top-0 right-0 bg-gray-100 text-gray-700 rounded-bl-lg px-1 text-sm font-bold dark:bg-gray-700 dark:text-gray-300`}
> >
<button <button
className="text-gray-500 py-1 px-2 dark:bg-gray-700 dark:text-gray-300" className="text-gray-500 py-1 px-2 dark:bg-gray-700 dark:text-gray-300"
onClick={handleDownload} onClick={handleDownload}
> >
<CloudArrowDownIcon className="hover:scale-110 w-5 h-5 text-current"></CloudArrowDownIcon> <CloudArrowDownIcon className="hover:scale-110 w-5 h-5 text-current"></CloudArrowDownIcon>
</button> </button>
</div> </div>
)} )}
</div> </div>
); );
} }
return ( return (
<button <button
onClick={handleDownload} onClick={handleDownload}
className="bg-gray-100 shadow rounded w-1/2 text-gray-700 hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-gray-300" className="bg-gray-100 shadow rounded w-1/2 text-gray-700 hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-gray-300"
> >
<div className="flex gap-2 text-current items-center w-full mr-2"> <div className="flex gap-2 text-current items-center w-full mr-2">
{" "} {" "}
{fileType === "image" ? ( {fileType === "image" ? (
<img <img
src={`data:image/png;base64,${content}`} src={`data:image/png;base64,${content}`}
alt="" alt=""
className="w-8 h-8" className="w-8 h-8"
/> />
) : ( ) : (
<DocumentIcon className="w-8 h-8" /> <DocumentIcon className="w-8 h-8" />
)} )}
<div className="flex flex-col items-start"> <div className="flex flex-col items-start">
{" "} {" "}
<div className="truncate text-sm text-current">{fileName}</div> <div className="truncate text-sm text-current">{fileName}</div>
<div className="truncate text-xs text-gray-500">{fileType}</div> <div className="truncate text-xs text-gray-500">{fileType}</div>
</div> </div>
<CloudArrowDownIcon className="w-6 h-6 text-current ml-auto" /> <CloudArrowDownIcon className="w-6 h-6 text-current ml-auto" />
</div> </div>
</button> </button>
); );
} }

9
src/frontend/src/modals/chatModal/index.tsx
View file

@ -236,11 +236,14 @@ export default function ChatModal({
}, []); }, []);
useEffect(() => { useEffect(() => {
if((ws.current.readyState=== ws.current.CLOSED || ws.current.readyState=== ws.current.CLOSING)){ if (
ws.current.readyState === ws.current.CLOSED ||
ws.current.readyState === ws.current.CLOSING
) {
connectWS(); connectWS();
setLockChat(false); setLockChat(false);
} }
},[lockChat]); }, [lockChat]);
async function sendAll(data: sendAllProps) { async function sendAll(data: sendAllProps) {
try { try {
@ -346,7 +349,7 @@ export default function ChatModal({
function clearChat() { function clearChat() {
setChatHistory([]); setChatHistory([]);
ws.current.send(JSON.stringify({ clear_history: true })); ws.current.send(JSON.stringify({ clear_history: true }));
if(lockChat) setLockChat(false); if (lockChat) setLockChat(false);
} }
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {

314
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -13,164 +13,164 @@ import { checkCode } from "../../controllers/API";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
export default function CodeAreaModal({ export default function CodeAreaModal({
value, value,
setValue, setValue,
}: { }: {
setValue: (value: string) => void; setValue: (value: string) => void;
value: string; value: string;
}) { }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const [code, setCode] = useState(value); const [code, setCode] = useState(value);
const { dark } = useContext(darkContext); const { dark } = useContext(darkContext);
const { setErrorData, setSuccessData } = useContext(alertContext); const { setErrorData, setSuccessData } = useContext(alertContext);
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
setTimeout(() => { setTimeout(() => {
closePopUp(); closePopUp();
}, 300); }, 300);
} }
} }
return ( return (
<Transition.Root show={open} appear={true} as={Fragment}> <Transition.Root show={open} appear={true} as={Fragment}>
<Dialog <Dialog
as="div" as="div"
className="relative z-10" className="relative z-10"
onClose={setModalOpen} onClose={setModalOpen}
initialFocus={ref} initialFocus={ref}
> >
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" /> <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <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"> <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100" enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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]"> <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"> <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<button <button
type="button" type="button"
className="rounded-md text-gray-400 hover:text-gray-500" className="rounded-md text-gray-400 hover:text-gray-500"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}
> >
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> <XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button> </button>
</div> </div>
<div className="h-full w-full flex flex-col justify-center items-center"> <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="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"> <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">
<CommandLineIcon <CommandLineIcon
className="h-6 w-6 text-blue-600" className="h-6 w-6 text-blue-600"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="mt-4 text-center sm:ml-4 sm:text-left"> <div className="mt-4 text-center sm:ml-4 sm:text-left">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg font-medium dark:text-white leading-10 text-gray-900" className="text-lg font-medium dark:text-white leading-10 text-gray-900"
> >
Edit Code Edit Code
</Dialog.Title> </Dialog.Title>
</div> </div>
</div> </div>
<div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center"> <div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow"> <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
<AceEditor <AceEditor
value={code} value={code}
mode="python" mode="python"
highlightActiveLine={true} highlightActiveLine={true}
showPrintMargin={false} showPrintMargin={false}
fontSize={14} fontSize={14}
showGutter showGutter
enableLiveAutocompletion enableLiveAutocompletion
theme={dark ? "twilight" : "github"} theme={dark ? "twilight" : "github"}
name="CodeEditor" name="CodeEditor"
onChange={(value) => { onChange={(value) => {
setCode(value); setCode(value);
}} }}
className="h-full w-full rounded-lg" className="h-full w-full rounded-lg"
/> />
</div> </div>
</div> </div>
</div> </div>
<div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4"> <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
<button <button
type="button" type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm" className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => { onClick={() => {
checkCode(code) checkCode(code)
.then((apiReturn) => { .then((apiReturn) => {
if (apiReturn.data) { if (apiReturn.data) {
let importsErrors = apiReturn.data.imports.errors; let importsErrors = apiReturn.data.imports.errors;
let funcErrors = apiReturn.data.function.errors; let funcErrors = apiReturn.data.function.errors;
if ( if (
funcErrors.length === 0 && funcErrors.length === 0 &&
importsErrors.length === 0 importsErrors.length === 0
) { ) {
setSuccessData({ setSuccessData({
title: "Code is ready to run", title: "Code is ready to run",
}); });
setModalOpen(false); setModalOpen(false);
setValue(code); setValue(code);
} else { } else {
if (funcErrors.length !== 0) { if (funcErrors.length !== 0) {
setErrorData({ setErrorData({
title: "There is an error in your function", title: "There is an error in your function",
list: funcErrors, list: funcErrors,
}); });
} }
if (importsErrors.length !== 0) { if (importsErrors.length !== 0) {
setErrorData({ setErrorData({
title: "There is an error in your imports", title: "There is an error in your imports",
list: importsErrors, list: importsErrors,
}); });
} }
} }
} else { } else {
setErrorData({ setErrorData({
title: "Something went wrong, please try again", title: "Something went wrong, please try again",
}); });
} }
}) })
.catch((_) => .catch((_) =>
setErrorData({ setErrorData({
title: title:
"There is something wrong with this code, please review it", "There is something wrong with this code, please review it",
}) })
); );
}} }}
> >
Check & Save Check & Save
</button> </button>
</div> </div>
</div> </div>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>
</div> </div>
</div> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition.Root>
); );
} }

335
src/frontend/src/modals/exportModal/index.tsx
View file

@ -1,9 +1,9 @@
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { import {
XMarkIcon, XMarkIcon,
ArrowDownTrayIcon, ArrowDownTrayIcon,
DocumentDuplicateIcon, DocumentDuplicateIcon,
ComputerDesktopIcon, ComputerDesktopIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react"; import { Fragment, useContext, useRef, useState } from "react";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
@ -12,170 +12,169 @@ import { TabsContext } from "../../contexts/tabsContext";
import { removeApiKeys } from "../../utils"; import { removeApiKeys } from "../../utils";
export default function ExportModal() { export default function ExportModal() {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
const { setErrorData } = useContext(alertContext); const { setErrorData } = useContext(alertContext);
const { flows, tabIndex, updateFlow, downloadFlow } = useContext(TabsContext); const { flows, tabIndex, updateFlow, downloadFlow } = useContext(TabsContext);
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
setTimeout(() => { setTimeout(() => {
closePopUp(); closePopUp();
}, 300); }, 300);
} }
} }
const [checked, setChecked] = useState(true); const [checked, setChecked] = useState(true);
const [name, setName] = useState(flows[tabIndex].name); const [name, setName] = useState(flows[tabIndex].name);
return ( return (
<Transition.Root show={open} appear={true} as={Fragment}> <Transition.Root show={open} appear={true} as={Fragment}>
<Dialog <Dialog
as="div" as="div"
className="relative z-10" className="relative z-10"
onClose={setModalOpen} onClose={setModalOpen}
initialFocus={ref} initialFocus={ref}
> >
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" /> <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <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"> <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100" enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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]"> <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"> <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<button <button
type="button" type="button"
className="rounded-md text-gray-400 hover:text-gray-500" className="rounded-md text-gray-400 hover:text-gray-500"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}
> >
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> <XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button> </button>
</div> </div>
<div className="h-full w-full flex flex-col justify-center items-center"> <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="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"> <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 <ArrowDownTrayIcon
className="h-6 w-6 text-blue-600" className="h-6 w-6 text-blue-600"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="mt-4 text-center sm:ml-4 sm:text-left"> <div className="mt-4 text-center sm:ml-4 sm:text-left">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg font-medium dark:text-white leading-10 text-gray-900" className="text-lg font-medium dark:text-white leading-10 text-gray-900"
> >
Export as Export as
</Dialog.Title> </Dialog.Title>
</div> </div>
</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="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"> <div className="w-full">
<label <label
htmlFor="name" htmlFor="name"
className="block mb-2 font-medium text-gray-700 dark:text-white" className="block mb-2 font-medium text-gray-700 dark:text-white"
> >
Name Name
</label> </label>
<input <input
onChange={(event) => { onChange={(event) => {
if (event.target.value != "") { if (event.target.value != "") {
let newFlow = flows[tabIndex]; let newFlow = flows[tabIndex];
newFlow.name = event.target.value; newFlow.name = event.target.value;
setName(event.target.value); setName(event.target.value);
updateFlow(newFlow); updateFlow(newFlow);
} else { } else {
setName(event.target.value); setName(event.target.value);
} }
}} }}
type="text" type="text"
name="name" name="name"
value={name ?? null} value={name ?? null}
placeholder="File name" placeholder="File name"
id="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 text-gray-900 dark:text-gray-100" 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 text-gray-900 dark:text-gray-100"
/> />
</div> </div>
<div className="w-full"> <div className="w-full">
<label <label
htmlFor="description" htmlFor="description"
className="block mb-2 font-medium text-gray-700 dark:text-white" className="block mb-2 font-medium text-gray-700 dark:text-white"
> >
Description{" "} Description{" "}
<span className="text-gray-400 text-sm"> <span className="text-gray-400 text-sm">
{" "} {" "}
(optional) (optional)
</span> </span>
</label> </label>
<textarea <textarea
name="description" name="description"
id="description" id="description"
onChange={(event) => { onChange={(event) => {
let newFlow = flows[tabIndex]; let newFlow = flows[tabIndex];
newFlow.description = event.target.value; newFlow.description = event.target.value;
updateFlow(newFlow); updateFlow(newFlow);
}} }}
value={flows[tabIndex].description ?? null} value={flows[tabIndex].description ?? null}
placeholder="Flow description" placeholder="Flow description"
rows={3} rows={3}
className=" focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 text-gray-900 dark:text-gray-100 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" className=" focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 text-gray-900 dark:text-gray-100 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> ></textarea>
</div> </div>
<div> <div>
<label htmlFor="checkbox" className="flex items-center"> <label htmlFor="checkbox" className="flex items-center">
<input <input
onChange={(event) => { onChange={(event) => {
setChecked(event.target.checked); setChecked(event.target.checked);
}} }}
checked={checked} checked={checked}
id="checkbox" id="checkbox"
type="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" 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">
<span className="ml-2 font-medium text-gray-700 dark:text-white"> Save with my API keys
Save with my API keys </span>
</span> </label>
</label> </div>
</div> <div className="w-full flex justify-end">
<div className="w-full flex justify-end"> <button
<button onClick={() => {
onClick={() => { if (checked) downloadFlow(flows[tabIndex]);
if (checked) downloadFlow(flows[tabIndex]); else downloadFlow(removeApiKeys(flows[tabIndex]));
else downloadFlow(removeApiKeys(flows[tabIndex])); }}
}} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" >
> Download Flow
Download Flow </button>
</button> </div>
</div> </div>
</div> </div>
</div> </Dialog.Panel>
</Dialog.Panel> </Transition.Child>
</Transition.Child> </div>
</div> </div>
</div> </Dialog>
</Dialog> </Transition.Root>
</Transition.Root> );
);
} }

103
src/frontend/src/modals/importModal/buttonBox/index.tsx
View file

@ -33,48 +33,47 @@ export default function ButtonBox({
let textHeight: number; let textHeight: number;
let textWidth: number; let textWidth: number;
switch (size) { switch (size) {
case "small": case "small":
bigCircle = "h-12 w-12"; bigCircle = "h-12 w-12";
smallCircle = "h-8 w-8"; smallCircle = "h-8 w-8";
titleFontSize = "text-sm"; titleFontSize = "text-sm";
descriptionFontSize = "text-xs"; descriptionFontSize = "text-xs";
padding = "p-2 py-3"; padding = "p-2 py-3";
marginTop = "mt-2"; marginTop = "mt-2";
height = "h-36"; height = "h-36";
width = "w-32"; width = "w-32";
break; break;
case "medium": case "medium":
bigCircle = "h-16 w-16"; bigCircle = "h-16 w-16";
smallCircle = "h-12 w-12"; smallCircle = "h-12 w-12";
titleFontSize = "text-base"; titleFontSize = "text-base";
descriptionFontSize = "text-sm"; descriptionFontSize = "text-sm";
padding = "p-4 py-5"; padding = "p-4 py-5";
marginTop = "mt-3"; marginTop = "mt-3";
height = "h-44"; height = "h-44";
width = "w-36"; width = "w-36";
break; break;
case "big": case "big":
bigCircle = "h-20 w-20"; bigCircle = "h-20 w-20";
smallCircle = "h-16 w-16"; smallCircle = "h-16 w-16";
titleFontSize = "text-lg"; titleFontSize = "text-lg";
descriptionFontSize = "text-sm"; descriptionFontSize = "text-sm";
padding = "p-8 py-10"; padding = "p-8 py-10";
marginTop = "mt-6"; marginTop = "mt-6";
height = "h-56"; height = "h-56";
width = "w-44"; width = "w-44";
break; break;
default: default:
bigCircle = "h-20 w-20"; bigCircle = "h-20 w-20";
smallCircle = "h-16 w-16"; smallCircle = "h-16 w-16";
titleFontSize = "text-lg"; titleFontSize = "text-lg";
descriptionFontSize = "text-sm"; descriptionFontSize = "text-sm";
padding = "p-8 py-10"; padding = "p-8 py-10";
marginTop = "mt-6"; marginTop = "mt-6";
height = "h-56"; height = "h-56";
width = "w-44"; width = "w-44";
break; break;
} }
return ( return (
<button disabled={deactivate} onClick={onClick}> <button disabled={deactivate} onClick={onClick}>
@ -97,16 +96,16 @@ export default function ButtonBox({
</div> </div>
</div> </div>
<div className="w-full mt-auto mb-auto"> <div className="w-full mt-auto mb-auto">
<h3 <h3
className={classNames( className={classNames(
"w-full font-semibold break-words text-white dark:text-white/80 truncate-multiline", "w-full font-semibold break-words text-white dark:text-white/80 truncate-multiline",
titleFontSize, titleFontSize,
marginTop marginTop
)} )}
> >
{title} {title}
</h3> </h3>
</div> </div>
</div> </div>
</button> </button>
); );

426
src/frontend/src/modals/importModal/index.tsx
View file

@ -1,11 +1,11 @@
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { import {
XMarkIcon, XMarkIcon,
ArrowDownTrayIcon, ArrowDownTrayIcon,
DocumentDuplicateIcon, DocumentDuplicateIcon,
ComputerDesktopIcon, ComputerDesktopIcon,
ArrowUpTrayIcon, ArrowUpTrayIcon,
ArrowLeftIcon, ArrowLeftIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react"; import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
@ -19,214 +19,214 @@ import { FlowType } from "../../types/flow";
import { classNames, snakeToSpaces, toNormalCase } from "../../utils"; import { classNames, snakeToSpaces, toNormalCase } from "../../utils";
export default function ImportModal() { export default function ImportModal() {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const { setErrorData } = useContext(alertContext); const { setErrorData } = useContext(alertContext);
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
const [showExamples, setShowExamples] = useState(false); const [showExamples, setShowExamples] = useState(false);
const [loadingExamples, setLoadingExamples] = useState(false); const [loadingExamples, setLoadingExamples] = useState(false);
const [examples, setExamples] = useState<FlowType[]>([]); const [examples, setExamples] = useState<FlowType[]>([]);
const { uploadFlow, addFlow } = useContext(TabsContext); const { uploadFlow, addFlow } = useContext(TabsContext);
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
setTimeout(() => { setTimeout(() => {
closePopUp(); closePopUp();
}, 300); }, 300);
} }
} }
function handleExamples() { function handleExamples() {
setLoadingExamples(true); setLoadingExamples(true);
getExamples() getExamples()
.then((result) => { .then((result) => {
setLoadingExamples(false); setLoadingExamples(false);
setExamples(result); setExamples(result);
}) })
.catch((error) => .catch((error) =>
setErrorData({ setErrorData({
title: "there was an error loading examples, please try again", title: "there was an error loading examples, please try again",
list: [error.message], list: [error.message],
}) })
); );
} }
return ( return (
<Transition.Root show={open} appear={true} as={Fragment}> <Transition.Root show={open} appear={true} as={Fragment}>
<Dialog <Dialog
as="div" as="div"
className="relative z-10" className="relative z-10"
onClose={setModalOpen} onClose={setModalOpen}
initialFocus={ref} initialFocus={ref}
> >
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" /> <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <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"> <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100" enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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-[776px]"> <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-[776px]">
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block"> <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<button <button
type="button" type="button"
className="rounded-md text-gray-400 hover:text-gray-500" className="rounded-md text-gray-400 hover:text-gray-500"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}
> >
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> <XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button> </button>
</div> </div>
{showExamples && ( {showExamples && (
<> <>
<div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block"> <div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
<button <button
type="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" 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={() => { onClick={() => {
setShowExamples(false); setShowExamples(false);
}} }}
> >
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
<ArrowLeftIcon className="h-6 w-6" aria-hidden="true" /> <ArrowLeftIcon className="h-6 w-6" aria-hidden="true" />
</button> </button>
</div> </div>
</> </>
)} )}
<div className="h-full w-full flex flex-col justify-center items-center"> <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="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"> <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">
<ArrowUpTrayIcon <ArrowUpTrayIcon
className="h-6 w-6 text-blue-600" className="h-6 w-6 text-blue-600"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="mt-4 text-center sm:ml-4 sm:text-left"> <div className="mt-4 text-center sm:ml-4 sm:text-left">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg font-medium dark:text-white leading-10 text-gray-900" className="text-lg font-medium dark:text-white leading-10 text-gray-900"
> >
{showExamples ? "Select an example" : "Import from"} {showExamples ? "Select an example" : "Import from"}
</Dialog.Title> </Dialog.Title>
</div> </div>
</div> </div>
<div <div
className={classNames( className={classNames(
"h-full w-full bg-gray-200 dark:bg-gray-900 gap-4 overflow-y-auto scrollbar-hide", "h-full w-full bg-gray-200 dark:bg-gray-900 gap-4 overflow-y-auto scrollbar-hide",
showExamples && !loadingExamples showExamples && !loadingExamples
? "flex flex-row start justify-start items-start p-9 flex-wrap overflow-auto" ? "flex flex-row start justify-start items-start p-9 flex-wrap overflow-auto"
: "flex flex-row justify-center items-center p-4" : "flex flex-row justify-center items-center p-4"
)} )}
> >
{!showExamples && ( {!showExamples && (
<div className="flex h-full w-full justify-evenly items-center"> <div className="flex h-full w-full justify-evenly items-center">
<ButtonBox <ButtonBox
size="big" size="big"
bgColor="bg-emerald-500 dark:bg-emerald-500/75" bgColor="bg-emerald-500 dark:bg-emerald-500/75"
description="Prebuilt Examples" description="Prebuilt Examples"
icon={ icon={
<DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" /> <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
} }
onClick={() => { onClick={() => {
setShowExamples(true); setShowExamples(true);
handleExamples(); handleExamples();
}} }}
textColor="text-emerald-500 dark:text-emerald-500/75" textColor="text-emerald-500 dark:text-emerald-500/75"
title="Examples" title="Examples"
></ButtonBox> ></ButtonBox>
<ButtonBox <ButtonBox
size="big" size="big"
bgColor="bg-blue-500 dark:bg-blue-500/75" bgColor="bg-blue-500 dark:bg-blue-500/75"
description="Import from Local" description="Import from Local"
icon={ icon={
<ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" /> <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
} }
onClick={() => { onClick={() => {
uploadFlow(); uploadFlow();
setModalOpen(false); setModalOpen(false);
}} }}
textColor="text-blue-500 dark:text-blue-500/75" textColor="text-blue-500 dark:text-blue-500/75"
title="Local File" title="Local File"
></ButtonBox> ></ButtonBox>
</div> </div>
)} )}
{showExamples && loadingExamples && ( {showExamples && loadingExamples && (
<div className="flex align-middle justify-center items-center"> <div className="flex align-middle justify-center items-center">
<LoadingComponent remSize={30} /> <LoadingComponent remSize={30} />
</div> </div>
)} )}
{showExamples && {showExamples &&
!loadingExamples && !loadingExamples &&
examples.map((example, index) => { examples.map((example, index) => {
return ( return (
<div key={index}> <div key={index}>
{" "} {" "}
<ButtonBox <ButtonBox
size="small" size="small"
bgColor="bg-emerald-500 dark:bg-emerald-500/75" bgColor="bg-emerald-500 dark:bg-emerald-500/75"
description={ description={
example.description ?? "Prebuilt Examples" example.description ?? "Prebuilt Examples"
} }
icon={ icon={
<DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" /> <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
} }
onClick={() => { onClick={() => {
addFlow(example); addFlow(example);
setModalOpen(false); setModalOpen(false);
}} }}
textColor="text-emerald-500 dark:text-emerald-500/75" textColor="text-emerald-500 dark:text-emerald-500/75"
title={example.name} title={example.name}
></ButtonBox> ></ButtonBox>
</div> </div>
); );
})} })}
</div> </div>
<div className="bg-white dark:bg-gray-800 w-full h-20 flex items-center justify-center"> <div className="bg-white dark:bg-gray-800 w-full h-20 flex items-center justify-center">
<a <a
href="https://github.com/logspace-ai/langflow_examples" href="https://github.com/logspace-ai/langflow_examples"
target="_blank" target="_blank"
className="flex items-center justify-center text-gray-600 dark:text-gray-300" className="flex items-center justify-center text-gray-600 dark:text-gray-300"
rel="noreferrer" rel="noreferrer"
> >
<svg <svg
width="24" width="24"
viewBox="0 0 98 96" viewBox="0 0 98 96"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
fill-rule="evenodd" fill-rule="evenodd"
clip-rule="evenodd" clip-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
fill="currentColor" fill="currentColor"
/> />
</svg> </svg>
<span className="ml-2 ">LangFlow Examples</span> <span className="ml-2 ">LangFlow Examples</span>
</a> </a>
</div> </div>
</div> </div>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>
</div> </div>
</div> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition.Root>
); );
} }

282
src/frontend/src/modals/promptModal/index.tsx
View file

@ -6,148 +6,148 @@ import { darkContext } from "../../contexts/darkContext";
import { checkPrompt } from "../../controllers/API"; import { checkPrompt } from "../../controllers/API";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
export default function PromptAreaModal({ export default function PromptAreaModal({
value, value,
setValue, setValue,
}: { }: {
setValue: (value: string) => void; setValue: (value: string) => void;
value: string; value: string;
}) { }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const [myValue, setMyValue] = useState(value); const [myValue, setMyValue] = useState(value);
const { dark } = useContext(darkContext); const { dark } = useContext(darkContext);
const { setErrorData, setSuccessData } = useContext(alertContext); const { setErrorData, setSuccessData } = useContext(alertContext);
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
setTimeout(() => { setTimeout(() => {
closePopUp(); closePopUp();
}, 300); }, 300);
} }
} }
return ( return (
<Transition.Root show={open} appear={true} as={Fragment}> <Transition.Root show={open} appear={true} as={Fragment}>
<Dialog <Dialog
as="div" as="div"
className="relative z-10" className="relative z-10"
onClose={setModalOpen} onClose={setModalOpen}
initialFocus={ref} initialFocus={ref}
> >
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" /> <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <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"> <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100" enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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]"> <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"> <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<button <button
type="button" type="button"
className="rounded-md text-gray-400 hover:text-gray-500" className="rounded-md text-gray-400 hover:text-gray-500"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}
> >
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> <XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button> </button>
</div> </div>
<div className="h-full w-full flex flex-col justify-center items-center"> <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="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"> <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">
<DocumentTextIcon <DocumentTextIcon
className="h-6 w-6 text-blue-600" className="h-6 w-6 text-blue-600"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="mt-4 text-center sm:ml-4 sm:text-left"> <div className="mt-4 text-center sm:ml-4 sm:text-left">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg font-medium dark:text-white leading-10 text-gray-900" className="text-lg font-medium dark:text-white leading-10 text-gray-900"
> >
Edit Prompt Edit Prompt
</Dialog.Title> </Dialog.Title>
</div> </div>
</div> </div>
<div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center"> <div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow"> <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
<textarea <textarea
ref={ref} ref={ref}
className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white" className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
value={myValue} value={myValue}
onChange={(e) => { onChange={(e) => {
setMyValue(e.target.value); setMyValue(e.target.value);
setValue(e.target.value); setValue(e.target.value);
}} }}
/> />
</div> </div>
</div> </div>
</div> </div>
<div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4"> <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
<button <button
type="button" type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm" className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => { onClick={() => {
checkPrompt(myValue) checkPrompt(myValue)
.then((apiReturn) => { .then((apiReturn) => {
if (apiReturn.data) { if (apiReturn.data) {
let inputVariables = let inputVariables =
apiReturn.data.input_variables; apiReturn.data.input_variables;
if (inputVariables.length === 0) { if (inputVariables.length === 0) {
setErrorData({ setErrorData({
title: title:
"The template you are attempting to use does not contain any variables for data entry.", "The template you are attempting to use does not contain any variables for data entry.",
}); });
} else { } else {
setSuccessData({ setSuccessData({
title: "Prompt is ready", title: "Prompt is ready",
}); });
setModalOpen(false); setModalOpen(false);
setValue(myValue); setValue(myValue);
} }
} else { } else {
setErrorData({ setErrorData({
title: "Something went wrong, please try again", title: "Something went wrong, please try again",
}); });
} }
}) })
.catch((error) => { .catch((error) => {
return setErrorData({ return setErrorData({
title: title:
"There is something wrong with this prompt, please review it", "There is something wrong with this prompt, please review it",
list: [error.response.data.detail], list: [error.response.data.detail],
}); });
}); });
}} }}
> >
Check & Save Check & Save
</button> </button>
</div> </div>
</div> </div>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>
</div> </div>
</div> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition.Root>
); );
} }

224
src/frontend/src/modals/textAreaModal/index.tsx
View file

@ -1,123 +1,123 @@
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { import {
XMarkIcon, XMarkIcon,
ClipboardDocumentListIcon, ClipboardDocumentListIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react"; import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
export default function TextAreaModal({ export default function TextAreaModal({
value, value,
setValue, setValue,
}: { }: {
setValue: (value: string) => void; setValue: (value: string) => void;
value: string | string[]; value: string | string[];
}) { }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const [myValue, setMyValue] = useState(value); const [myValue, setMyValue] = useState(value);
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
setTimeout(() => { setTimeout(() => {
closePopUp(); closePopUp();
}, 300); }, 300);
} }
} }
return ( return (
<Transition.Root show={open} appear={true} as={Fragment}> <Transition.Root show={open} appear={true} as={Fragment}>
<Dialog <Dialog
as="div" as="div"
className="relative z-10" className="relative z-10"
onClose={setModalOpen} onClose={setModalOpen}
initialFocus={ref} initialFocus={ref}
> >
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" /> <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <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"> <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100" enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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]"> <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"> <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<button <button
type="button" type="button"
className="rounded-md text-gray-400 hover:text-gray-500" className="rounded-md text-gray-400 hover:text-gray-500"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}
> >
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> <XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button> </button>
</div> </div>
<div className="h-full w-full flex flex-col justify-center items-center"> <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="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"> <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">
<ClipboardDocumentListIcon <ClipboardDocumentListIcon
className="h-6 w-6 text-blue-600" className="h-6 w-6 text-blue-600"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="mt-4 text-center sm:ml-4 sm:text-left"> <div className="mt-4 text-center sm:ml-4 sm:text-left">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg font-medium dark:text-white leading-10 text-gray-900" className="text-lg font-medium dark:text-white leading-10 text-gray-900"
> >
Edit text Edit text
</Dialog.Title> </Dialog.Title>
</div> </div>
</div> </div>
<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center"> <div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow"> <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
<textarea <textarea
ref={ref} ref={ref}
className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white" className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
value={myValue} value={myValue}
onChange={(e) => { onChange={(e) => {
setMyValue(e.target.value); setMyValue(e.target.value);
setValue(e.target.value); setValue(e.target.value);
}} }}
/> />
</div> </div>
</div> </div>
</div> </div>
<div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4"> <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
<button <button
type="button" type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm" className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}
> >
Finish editing Finish editing
</button> </button>
</div> </div>
</div> </div>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>
</div> </div>
</div> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition.Root>
); );
} }

52
src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
View file

@ -1,33 +1,33 @@
import { ConnectionLineComponentProps } from "reactflow"; import { ConnectionLineComponentProps } from "reactflow";
const ConnectionLineComponent = ({ const ConnectionLineComponent = ({
fromX, fromX,
fromY, fromY,
toX, toX,
toY, toY,
connectionLineStyle = {}, // provide a default value for connectionLineStyle connectionLineStyle = {}, // provide a default value for connectionLineStyle
}: ConnectionLineComponentProps) => { }: ConnectionLineComponentProps) => {
return ( return (
<g> <g>
<path <path
fill="none" fill="none"
stroke="#222" stroke="#222"
strokeWidth={1.5} strokeWidth={1.5}
className="animated dark:stroke-gray-400" className="animated dark:stroke-gray-400"
d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`} d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
style={connectionLineStyle} style={connectionLineStyle}
/> />
<circle <circle
cx={toX} cx={toX}
cy={toY} cy={toY}
fill="#fff" fill="#fff"
r={3} r={3}
stroke="#222" stroke="#222"
className="dark:stroke-gray-400 dark:fill-gray-800" className="dark:stroke-gray-400 dark:fill-gray-800"
strokeWidth={1.5} strokeWidth={1.5}
/> />
</g> </g>
); );
}; };
export default ConnectionLineComponent; export default ConnectionLineComponent;

74
src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
View file

@ -3,42 +3,42 @@ import { Disclosure } from "@headlessui/react";
import { DisclosureComponentType } from "../../../../types/components"; import { DisclosureComponentType } from "../../../../types/components";
export default function DisclosureComponent({ export default function DisclosureComponent({
button: { title, Icon, buttons = [] }, button: { title, Icon, buttons = [] },
children, children,
}: DisclosureComponentType) { }: DisclosureComponentType) {
return ( return (
<Disclosure as="div" key={title}> <Disclosure as="div" key={title}>
{({ open }) => ( {({ open }) => (
<> <>
<div> <div>
<Disclosure.Button className="select-none bg-gray-50 dark:bg-gray-700/60 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200"> <Disclosure.Button className="select-none bg-gray-50 dark:bg-gray-700/60 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
<div className="flex gap-4"> <div className="flex gap-4">
<Icon className="w-6 text-gray-800 dark:text-white/80" /> <Icon className="w-6 text-gray-800 dark:text-white/80" />
<span className="flex items-center text-sm text-gray-800 dark:text-white/80 font-medium"> <span className="flex items-center text-sm text-gray-800 dark:text-white/80 font-medium">
{title} {title}
</span> </span>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
{buttons.map((x, index) => ( {buttons.map((x, index) => (
<button key={index} onClick={x.onClick}> <button key={index} onClick={x.onClick}>
{x.Icon} {x.Icon}
</button> </button>
))} ))}
<div> <div>
<ChevronRightIcon <ChevronRightIcon
className={`${ className={`${
open ? "rotate-90 transform" : "" open ? "rotate-90 transform" : ""
} h-4 w-4 text-gray-800 dark:text-white`} } h-4 w-4 text-gray-800 dark:text-white`}
/> />
</div> </div>
</div> </div>
</Disclosure.Button> </Disclosure.Button>
</div> </div>
<Disclosure.Panel as="div" className="-mt-px"> <Disclosure.Panel as="div" className="-mt-px">
{children} {children}
</Disclosure.Panel> </Disclosure.Panel>
</> </>
)} )}
</Disclosure> </Disclosure>
); );
} }

112
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -6,62 +6,62 @@ import { typesContext } from "../../../../contexts/typesContext";
import { APIClassType, APIObjectType } from "../../../../types/api"; import { APIClassType, APIObjectType } from "../../../../types/api";
export default function ExtraSidebar() { export default function ExtraSidebar() {
const { data } = useContext(typesContext); const { data } = useContext(typesContext);
function onDragStart( function onDragStart(
event: React.DragEvent<any>, event: React.DragEvent<any>,
data: { type: string; node?: APIClassType } data: { type: string; node?: APIClassType }
) { ) {
//start drag event //start drag event
event.dataTransfer.effectAllowed = "move"; event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("json", JSON.stringify(data)); event.dataTransfer.setData("json", JSON.stringify(data));
} }
return ( return (
<div className="mt-1 w-full"> <div className="mt-1 w-full">
{Object.keys(data) {Object.keys(data)
.sort() .sort()
.map((d: keyof APIObjectType, i) => ( .map((d: keyof APIObjectType, i) => (
<DisclosureComponent <DisclosureComponent
key={i} key={i}
button={{ button={{
title: nodeNames[d] ?? nodeNames.unknown, title: nodeNames[d] ?? nodeNames.unknown,
Icon: nodeIcons[d] ?? nodeIcons.unknown, Icon: nodeIcons[d] ?? nodeIcons.unknown,
}} }}
> >
<div className="p-2 flex flex-col gap-2"> <div className="p-2 flex flex-col gap-2">
{Object.keys(data[d]) {Object.keys(data[d])
.sort() .sort()
.map((t: string, k) => ( .map((t: string, k) => (
<div key={k}> <div key={k}>
<div <div
draggable draggable
className={" cursor-grab border-l-8 rounded-l-md"} className={" cursor-grab border-l-8 rounded-l-md"}
style={{ style={{
borderLeftColor: nodeColors[d] ?? nodeColors.unknown, borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
}} }}
onDragStart={(event) => onDragStart={(event) =>
onDragStart(event, { onDragStart(event, {
type: t, type: t,
node: data[d][t], node: data[d][t],
}) })
} }
> >
<div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border"> <div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
<span className="text-black dark:text-white w-36 pr-1 truncate text-xs"> <span className="text-black dark:text-white w-36 pr-1 truncate text-xs">
{t} {t}
</span> </span>
<Bars2Icon className="w-4 h-6 text-gray-400 dark:text-gray-600" /> <Bars2Icon className="w-4 h-6 text-gray-400 dark:text-gray-600" />
</div> </div>
</div> </div>
</div> </div>
))} ))}
{Object.keys(data[d]).length === 0 && ( {Object.keys(data[d]).length === 0 && (
<div className="text-gray-400 text-center">Coming soon</div> <div className="text-gray-400 text-center">Coming soon</div>
)} )}
</div> </div>
</DisclosureComponent> </DisclosureComponent>
))} ))}
</div> </div>
); );
} }

164
src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
View file

@ -6,89 +6,89 @@ import { FlowType } from "../../../../types/flow";
import _ from "lodash"; import _ from "lodash";
export default function TabComponent({ export default function TabComponent({
selected, selected,
flow, flow,
onClick, onClick,
}: { }: {
flow: FlowType; flow: FlowType;
selected: boolean; selected: boolean;
onClick: () => void; onClick: () => void;
}) { }) {
const { removeFlow, updateFlow, flows } = useContext(TabsContext); const { removeFlow, updateFlow, flows } = useContext(TabsContext);
const [isRename, setIsRename] = useState(false); const [isRename, setIsRename] = useState(false);
const [value, setValue] = useState(""); const [value, setValue] = useState("");
return ( return (
<> <>
{flow ? ( {flow ? (
!selected ? ( !selected ? (
<div <div
className="dark:text-white flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-x-gray-300 dark:border-x-gray-600 -ml-px" className="dark:text-white flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-x-gray-300 dark:border-x-gray-600 -ml-px"
onClick={onClick} onClick={onClick}
> >
<span className="w-32 truncate text-left">{flow.name}</span> <span className="w-32 truncate text-left">{flow.name}</span>
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
removeFlow(flow.id); removeFlow(flow.id);
}} }}
> >
<XMarkIcon className="h-4 hover:bg-white dark:hover:bg-gray-600 rounded-full" /> <XMarkIcon className="h-4 hover:bg-white dark:hover:bg-gray-600 rounded-full" />
</button> </button>
</div> </div>
) : ( ) : (
<div className="bg-white dark:text-white dark:bg-gray-700/60 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1 rounded-t-xl -ml-px"> <div className="bg-white dark:text-white dark:bg-gray-700/60 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1 rounded-t-xl -ml-px">
{isRename ? ( {isRename ? (
<input <input
autoFocus autoFocus
className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md w-28" className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md w-28"
onBlur={() => { onBlur={() => {
setIsRename(false); setIsRename(false);
if (value !== "") { if (value !== "") {
let newFlow = _.cloneDeep(flow); let newFlow = _.cloneDeep(flow);
newFlow.name = value; newFlow.name = value;
updateFlow(newFlow); updateFlow(newFlow);
} }
}} }}
value={value} value={value}
onChange={(e) => { onChange={(e) => {
setValue(e.target.value); setValue(e.target.value);
}} }}
/> />
) : ( ) : (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span <span
className="text-left w-32 truncate" className="text-left w-32 truncate"
onDoubleClick={() => { onDoubleClick={() => {
setIsRename(true); setIsRename(true);
setValue(flow.name); setValue(flow.name);
}} }}
> >
{flow.name} {flow.name}
</span> </span>
</div> </div>
)} )}
<button <button
onClick={() => { onClick={() => {
removeFlow(flow.id); removeFlow(flow.id);
}} }}
> >
{flows.length > 1 && ( {flows.length > 1 && (
<XMarkIcon className="h-4 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-full" /> <XMarkIcon className="h-4 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-full" />
)} )}
</button> </button>
</div> </div>
) )
) : ( ) : (
<div className="h-full py-1.5 flex justify-center items-center"> <div className="h-full py-1.5 flex justify-center items-center">
<button <button
className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-x-gray-300 dark:border-x-gray-600 dark:text-white -ml-px" className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-x-gray-300 dark:border-x-gray-600 dark:text-white -ml-px"
onClick={onClick} onClick={onClick}
> >
<PlusIcon className="h-5 rounded-full hover:bg-white dark:hover:bg-gray-600" /> <PlusIcon className="h-5 rounded-full hover:bg-white dark:hover:bg-gray-600" />
</button> </button>
</div> </div>
)} )}
</> </>
); );
} }

220
src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
View file

@ -5,12 +5,12 @@ import { TabsContext } from "../../../../contexts/tabsContext";
import FlowPage from "../.."; import FlowPage from "../..";
import { darkContext } from "../../../../contexts/darkContext"; import { darkContext } from "../../../../contexts/darkContext";
import { import {
ArrowDownTrayIcon, ArrowDownTrayIcon,
ArrowUpTrayIcon, ArrowUpTrayIcon,
BellIcon, BellIcon,
CodeBracketSquareIcon, CodeBracketSquareIcon,
MoonIcon, MoonIcon,
SunIcon, SunIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { PopUpContext } from "../../../../contexts/popUpContext"; import { PopUpContext } from "../../../../contexts/popUpContext";
import AlertDropdown from "../../../../alerts/alertDropDown"; import AlertDropdown from "../../../../alerts/alertDropDown";
@ -21,108 +21,110 @@ import { typesContext } from "../../../../contexts/typesContext";
import ApiModal from "../../../../modals/ApiModal"; import ApiModal from "../../../../modals/ApiModal";
export default function TabsManagerComponent() { export default function TabsManagerComponent() {
const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } = const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } =
useContext(TabsContext); useContext(TabsContext);
const { openPopUp } = useContext(PopUpContext); const { openPopUp } = useContext(PopUpContext);
const { templates } = useContext(typesContext); const { templates } = useContext(typesContext);
const AlertWidth = 384; const AlertWidth = 384;
const { dark, setDark } = useContext(darkContext); const { dark, setDark } = useContext(darkContext);
const { notificationCenter, setNotificationCenter } = const { notificationCenter, setNotificationCenter } =
useContext(alertContext); useContext(alertContext);
useEffect(() => { useEffect(() => {
//create the first flow //create the first flow
if (flows.length === 0 && Object.keys(templates).length > 0) { if (flows.length === 0 && Object.keys(templates).length > 0) {
addFlow(); addFlow();
} }
}, [addFlow, flows.length, templates]); }, [addFlow, flows.length, templates]);
return ( return (
<div className="h-full w-full flex flex-col"> <div className="h-full w-full flex flex-col">
<div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-gray-800 px-2"> <div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-gray-800 px-2">
{flows.map((flow, index) => { {flows.map((flow, index) => {
return ( return (
<TabComponent <TabComponent
onClick={() => setTabIndex(index)} onClick={() => setTabIndex(index)}
selected={index === tabIndex} selected={index === tabIndex}
key={index} key={index}
flow={flow} flow={flow}
/> />
); );
})} })}
<TabComponent <TabComponent
onClick={() => { onClick={() => {
addFlow(); addFlow();
}} }}
selected={false} selected={false}
flow={null} flow={null}
/> />
<div className="ml-auto mr-2 flex gap-3"> <div className="ml-auto mr-2 flex gap-3">
<button <button
onClick={() => openPopUp(<ApiModal flowName={flows[tabIndex].name} />)} onClick={() =>
className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200" openPopUp(<ApiModal flowName={flows[tabIndex].name} />)
> }
Code <CodeBracketSquareIcon className="w-5 h-5" /> className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
</button> >
<button Code <CodeBracketSquareIcon className="w-5 h-5" />
onClick={() => openPopUp(<ImportModal />)} </button>
className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200" <button
> onClick={() => openPopUp(<ImportModal />)}
Import <ArrowUpTrayIcon className="w-5 h-5" /> className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
</button> >
<button Import <ArrowUpTrayIcon className="w-5 h-5" />
onClick={() => openPopUp(<ExportModal />)} </button>
className="flex items-center gap-1 pr-2 text-sm text-gray-600 border-gray-400 border-r hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200" <button
> onClick={() => openPopUp(<ExportModal />)}
Export <ArrowDownTrayIcon className="h-5 w-5" /> className="flex items-center gap-1 pr-2 text-sm text-gray-600 border-gray-400 border-r hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
</button> >
<button Export <ArrowDownTrayIcon className="h-5 w-5" />
className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200" </button>
onClick={() => { <button
setDark(!dark); className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
}} onClick={() => {
> setDark(!dark);
{dark ? ( }}
<SunIcon className="h-5 w-5" /> >
) : ( {dark ? (
<MoonIcon className="h-5 w-5" /> <SunIcon className="h-5 w-5" />
)} ) : (
</button> <MoonIcon className="h-5 w-5" />
<button )}
className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 relative" </button>
onClick={(event: React.MouseEvent<HTMLElement>) => { <button
setNotificationCenter(false); className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 relative"
const top = (event.target as Element).getBoundingClientRect().top; onClick={(event: React.MouseEvent<HTMLElement>) => {
const left = (event.target as Element).getBoundingClientRect() setNotificationCenter(false);
.left; const top = (event.target as Element).getBoundingClientRect().top;
openPopUp( const left = (event.target as Element).getBoundingClientRect()
<> .left;
<div openPopUp(
className="z-10 absolute" <>
style={{ top: top + 34, left: left - AlertWidth }} <div
> className="z-10 absolute"
<AlertDropdown /> style={{ top: top + 34, left: left - AlertWidth }}
</div> >
<div className="h-screen w-screen fixed top-0 left-0"></div> <AlertDropdown />
</> </div>
); <div className="h-screen w-screen fixed top-0 left-0"></div>
}} </>
> );
{notificationCenter && ( }}
<div className="absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]"></div> >
)} {notificationCenter && (
<BellIcon className="h-5 w-5" aria-hidden="true" /> <div className="absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]"></div>
</button> )}
</div> <BellIcon className="h-5 w-5" aria-hidden="true" />
</div> </button>
<div className="w-full h-full"> </div>
<ReactFlowProvider> </div>
{flows[tabIndex] ? ( <div className="w-full h-full">
<FlowPage flow={flows[tabIndex]}></FlowPage> <ReactFlowProvider>
) : ( {flows[tabIndex] ? (
<></> <FlowPage flow={flows[tabIndex]}></FlowPage>
)} ) : (
</ReactFlowProvider> <></>
</div> )}
</div> </ReactFlowProvider>
); </div>
</div>
);
} }

85
src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts
View file

@ -1,7 +1,7 @@
import { useCallback, useContext, useEffect, useState } from 'react'; import { useCallback, useContext, useEffect, useState } from "react";
import { Edge, Node, useReactFlow } from 'reactflow'; import { Edge, Node, useReactFlow } from "reactflow";
import { TabsContext } from '../../../contexts/tabsContext'; import { TabsContext } from "../../../contexts/tabsContext";
import { cloneDeep } from 'lodash'; import { cloneDeep } from "lodash";
type UseUndoRedoOptions = { type UseUndoRedoOptions = {
maxHistorySize: number; maxHistorySize: number;
@ -34,23 +34,25 @@ export const useUndoRedo: UseUndoRedo = ({
// the past and future arrays store the states that we can jump to // the past and future arrays store the states that we can jump to
const { tabIndex, flows } = useContext(TabsContext); const { tabIndex, flows } = useContext(TabsContext);
const [past, setPast] = useState<HistoryItem[][]>(flows.map(()=>[])); const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
const [future, setFuture] = useState<HistoryItem[][]>(flows.map(()=>[])); const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));
useEffect(() => { useEffect(() => {
// whenever the flows variable changes, we need to add one array to the past and future states // whenever the flows variable changes, we need to add one array to the past and future states
setPast((old) => flows.map((f, i)=>old[i] ? old[i] : [])); setPast((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
setFuture((old) => flows.map((f, i)=>old[i] ? old[i] : [])); setFuture((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
}, [flows]); }, [flows]);
const { setNodes, setEdges, getNodes, getEdges } = useReactFlow(); const { setNodes, setEdges, getNodes, getEdges } = useReactFlow();
const takeSnapshot = useCallback(() => { const takeSnapshot = useCallback(() => {
// push the current graph to the past state // push the current graph to the past state
setPast((old) => { setPast((old) => {
let newPast = cloneDeep(old); let newPast = cloneDeep(old);
newPast[tabIndex] = old[tabIndex].slice(old[tabIndex].length - maxHistorySize + 1, old[tabIndex].length); newPast[tabIndex] = old[tabIndex].slice(
old[tabIndex].length - maxHistorySize + 1,
old[tabIndex].length
);
newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() }); newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
return newPast; return newPast;
}); });
@ -59,9 +61,18 @@ export const useUndoRedo: UseUndoRedo = ({
setFuture((old) => { setFuture((old) => {
let newFuture = cloneDeep(old); let newFuture = cloneDeep(old);
newFuture[tabIndex] = []; newFuture[tabIndex] = [];
return newFuture return newFuture;
}); });
}, [getNodes, getEdges, past, future, tabIndex, setPast, setFuture, maxHistorySize]); }, [
getNodes,
getEdges,
past,
future,
tabIndex,
setPast,
setFuture,
maxHistorySize,
]);
const undo = useCallback(() => { const undo = useCallback(() => {
// get the last state that we want to go back to // get the last state that we want to go back to
@ -72,20 +83,30 @@ export const useUndoRedo: UseUndoRedo = ({
setPast((old) => { setPast((old) => {
let newPast = cloneDeep(old); let newPast = cloneDeep(old);
newPast[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1); newPast[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
return newPast return newPast;
}); });
// we store the current graph for the redo operation // we store the current graph for the redo operation
setFuture((old) => { setFuture((old) => {
let newFuture = cloneDeep(old); let newFuture = cloneDeep(old);
newFuture[tabIndex] = old[tabIndex] newFuture[tabIndex] = old[tabIndex];
newFuture[tabIndex].push({ nodes: getNodes(), edges: getEdges() }); newFuture[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
return newFuture return newFuture;
}); });
// now we can set the graph to the past state // now we can set the graph to the past state
setNodes(pastState.nodes); setNodes(pastState.nodes);
setEdges(pastState.edges); setEdges(pastState.edges);
} }
}, [setNodes, setEdges, getNodes, getEdges, future, past, setFuture, setPast, tabIndex]); }, [
setNodes,
setEdges,
getNodes,
getEdges,
future,
past,
setFuture,
setPast,
tabIndex,
]);
const redo = useCallback(() => { const redo = useCallback(() => {
const futureState = future[tabIndex][future[tabIndex].length - 1]; const futureState = future[tabIndex][future[tabIndex].length - 1];
@ -94,18 +115,29 @@ export const useUndoRedo: UseUndoRedo = ({
setFuture((old) => { setFuture((old) => {
let newFuture = cloneDeep(old); let newFuture = cloneDeep(old);
newFuture[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1); newFuture[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
return newFuture return newFuture;
}); });
setPast((old) => { setPast((old) => {
let newPast = cloneDeep(old); let newPast = cloneDeep(old);
newPast[tabIndex] = old[tabIndex]; newPast[tabIndex] = old[tabIndex];
newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() }); newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
return newPast return newPast;
}); });
setNodes(futureState.nodes); setNodes(futureState.nodes);
setEdges(futureState.edges); setEdges(futureState.edges);
} }
}, [future, past, setFuture, setPast, setNodes, setEdges, getNodes, getEdges, future, tabIndex]); }, [
future,
past,
setFuture,
setPast,
setNodes,
setEdges,
getNodes,
getEdges,
future,
tabIndex,
]);
useEffect(() => { useEffect(() => {
// this effect is used to attach the global event handlers // this effect is used to attach the global event handlers
@ -114,21 +146,24 @@ export const useUndoRedo: UseUndoRedo = ({
} }
const keyDownHandler = (event: KeyboardEvent) => { const keyDownHandler = (event: KeyboardEvent) => {
if (event.key === 'z' && (event.ctrlKey || event.metaKey) && event.shiftKey) { if (
event.key === "z" &&
(event.ctrlKey || event.metaKey) &&
event.shiftKey
) {
redo(); redo();
} } else if (event.key === "y" && (event.ctrlKey || event.metaKey)) {
else if (event.key === 'y' && (event.ctrlKey || event.metaKey)) {
event.preventDefault(); // prevent the default action event.preventDefault(); // prevent the default action
redo(); redo();
} else if (event.key === 'z' && (event.ctrlKey || event.metaKey)) { } else if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
undo(); undo();
} }
}; };
document.addEventListener('keydown', keyDownHandler); document.addEventListener("keydown", keyDownHandler);
return () => { return () => {
document.removeEventListener('keydown', keyDownHandler); document.removeEventListener("keydown", keyDownHandler);
}; };
}, [undo, redo, enableShortcuts]); }, [undo, redo, enableShortcuts]);

16
src/frontend/src/pages/FlowPage/index.tsx
View file

@ -302,10 +302,10 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
setLastSelection(flow); setLastSelection(flow);
}, []); }, []);
const {setDisableCopyPaste} = useContext(TabsContext) const { setDisableCopyPaste } = useContext(TabsContext);
return ( return (
<div className="w-full h-full" ref={reactFlowWrapper} > <div className="w-full h-full" ref={reactFlowWrapper}>
{Object.keys(templates).length > 0 && Object.keys(types).length > 0 ? ( {Object.keys(templates).length > 0 && Object.keys(types).length > 0 ? (
<> <>
<ReactFlow <ReactFlow
@ -314,9 +314,15 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
updateFlow({ ...flow, data: reactFlowInstance.toObject() }); updateFlow({ ...flow, data: reactFlowInstance.toObject() });
}} }}
edges={edges} edges={edges}
onPaneClick={() => {setDisableCopyPaste(false);}} onPaneClick={() => {
onNodeClick={() => {setDisableCopyPaste(true);}} setDisableCopyPaste(false);
onPaneMouseLeave={() => {setDisableCopyPaste(true);}} }}
onNodeClick={() => {
setDisableCopyPaste(true);
}}
onPaneMouseLeave={() => {
setDisableCopyPaste(true);
}}
onNodesChange={onNodesChange} onNodesChange={onNodesChange}
onEdgesChange={onEdgesChangeMod} onEdgesChange={onEdgesChangeMod}
onConnect={onConnect} onConnect={onConnect}

4
src/frontend/src/png.d.ts vendored
View file

@ -1,4 +1,4 @@
declare module "*.png" { declare module "*.png" {
const content: any; const content: any;
export default content; export default content;
} }

18
src/frontend/src/reportWebVitals.ts
View file

@ -1,15 +1,15 @@
import { ReportHandler } from "web-vitals"; import { ReportHandler } from "web-vitals";
const reportWebVitals = (onPerfEntry?: ReportHandler) => { const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) { if (onPerfEntry && onPerfEntry instanceof Function) {
import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry); getCLS(onPerfEntry);
getFID(onPerfEntry); getFID(onPerfEntry);
getFCP(onPerfEntry); getFCP(onPerfEntry);
getLCP(onPerfEntry); getLCP(onPerfEntry);
getTTFB(onPerfEntry); getTTFB(onPerfEntry);
}); });
} }
}; };
export default reportWebVitals; export default reportWebVitals;

4
src/frontend/src/svg.d.ts vendored
View file

@ -1,4 +1,4 @@
declare module "*.svg" { declare module "*.svg" {
const content: any; const content: any;
export default content; export default content;
} }

36
src/frontend/src/types/alerts/index.ts
View file

@ -1,29 +1,29 @@
export type ErrorAlertType = { export type ErrorAlertType = {
title: string; title: string;
list: Array<string>; list: Array<string>;
id: string; id: string;
removeAlert: (id: string) => void; removeAlert: (id: string) => void;
}; };
export type NoticeAlertType = { export type NoticeAlertType = {
title: string; title: string;
link: string; link: string;
id: string; id: string;
removeAlert: (id: string) => void; removeAlert: (id: string) => void;
}; };
export type SuccessAlertType = { export type SuccessAlertType = {
title: string; title: string;
id: string; id: string;
removeAlert: (id: string) => void; removeAlert: (id: string) => void;
}; };
export type SingleAlertComponentType = { export type SingleAlertComponentType = {
dropItem: AlertItemType; dropItem: AlertItemType;
removeAlert: (index: string) => void; removeAlert: (index: string) => void;
}; };
export type AlertDropdownType = {}; export type AlertDropdownType = {};
export type AlertItemType = { export type AlertItemType = {
type: "notice" | "error" | "success"; type: "notice" | "error" | "success";
title: string; title: string;
link?: string; link?: string;
list?: Array<string>; list?: Array<string>;
id: string; id: string;
}; };

46
src/frontend/src/types/api/index.ts
View file

@ -4,37 +4,37 @@ import { Node, Edge, Viewport } from "reactflow";
export type APIObjectType = { kind: APIKindType; [key: string]: APIKindType }; export type APIObjectType = { kind: APIKindType; [key: string]: APIKindType };
export type APIKindType = { class: APIClassType; [key: string]: APIClassType }; export type APIKindType = { class: APIClassType; [key: string]: APIClassType };
export type APITemplateType = { export type APITemplateType = {
variable: TemplateVariableType; variable: TemplateVariableType;
[key: string]: TemplateVariableType; [key: string]: TemplateVariableType;
}; };
export type APIClassType = { export type APIClassType = {
base_classes: Array<string>; base_classes: Array<string>;
description: string; description: string;
template: APITemplateType; template: APITemplateType;
[key: string]: Array<string> | string | APITemplateType; [key: string]: Array<string> | string | APITemplateType;
}; };
export type TemplateVariableType = { export type TemplateVariableType = {
type: string; type: string;
required: boolean; required: boolean;
placeholder?: string; placeholder?: string;
list: boolean; list: boolean;
show: boolean; show: boolean;
multiline?: boolean; multiline?: boolean;
value?: any; value?: any;
[key: string]: any; [key: string]: any;
}; };
export type sendAllProps = { export type sendAllProps = {
nodes: Node[]; nodes: Node[];
edges: Edge[]; edges: Edge[];
name: string; name: string;
description: string; description: string;
viewport: Viewport; viewport: Viewport;
message: string; message: string;
chatHistory: { message: string; isSend: boolean }[]; chatHistory: { message: string; isSend: boolean }[];
}; };
export type errorsTypeAPI = { export type errorsTypeAPI = {
function: { errors: Array<string> }; function: { errors: Array<string> };
imports: { errors: Array<string> }; imports: { errors: Array<string> };
}; };
export type PromptTypeAPI = { input_variables: Array<string> }; export type PromptTypeAPI = { input_variables: Array<string> };

8
src/frontend/src/types/chat/index.ts
View file

@ -3,8 +3,8 @@ import { FlowType } from "../flow";
export type ChatType = { flow: FlowType; reactFlowInstance: ReactFlowInstance }; export type ChatType = { flow: FlowType; reactFlowInstance: ReactFlowInstance };
export type ChatMessageType = { export type ChatMessageType = {
message: string; message: string;
isSend: boolean; isSend: boolean;
thought?: string; thought?: string;
files?: Array<{ data: string; type: string; data_type: string }>; files?: Array<{ data: string; type: string; data_type: string }>;
}; };

95
src/frontend/src/types/components/index.ts
View file

@ -1,69 +1,74 @@
import { ForwardRefExoticComponent, ReactElement, ReactFragment, ReactNode } from "react"; import {
ForwardRefExoticComponent,
ReactElement,
ReactFragment,
ReactNode,
} from "react";
import { NodeDataType } from "../flow/index"; import { NodeDataType } from "../flow/index";
export type InputComponentType = { export type InputComponentType = {
value: string; value: string;
disabled?: boolean; disabled?: boolean;
onChange: (value: string) => void; onChange: (value: string) => void;
password: boolean; password: boolean;
}; };
export type ToggleComponentType = { export type ToggleComponentType = {
enabled: boolean; enabled: boolean;
setEnabled: (state: boolean) => void; setEnabled: (state: boolean) => void;
disabled: boolean; disabled: boolean;
}; };
export type DropDownComponentType = { export type DropDownComponentType = {
value: string; value: string;
options: string[]; options: string[];
onSelect: (value: string) => void; onSelect: (value: string) => void;
}; };
export type ParameterComponentType = { export type ParameterComponentType = {
data: NodeDataType; data: NodeDataType;
title: string; title: string;
id: string; id: string;
color: string; color: string;
left: boolean; left: boolean;
type: string; type: string;
required?: boolean; required?: boolean;
name?: string; name?: string;
tooltipTitle: string; tooltipTitle: string;
}; };
export type InputListComponentType = { export type InputListComponentType = {
value: string[]; value: string[];
onChange: (value: string[]) => void; onChange: (value: string[]) => void;
disabled: boolean; disabled: boolean;
}; };
export type TextAreaComponentType = { export type TextAreaComponentType = {
disabled: boolean; disabled: boolean;
onChange: (value: string[] | string) => void; onChange: (value: string[] | string) => void;
value: string; value: string;
}; };
export type FileComponentType = { export type FileComponentType = {
disabled: boolean; disabled: boolean;
onChange: (value: string[] | string) => void; onChange: (value: string[] | string) => void;
value: string; value: string;
suffixes: Array<string>; suffixes: Array<string>;
fileTypes: Array<string>; fileTypes: Array<string>;
onFileChange: (value: string) => void; onFileChange: (value: string) => void;
}; };
export type DisclosureComponentType = { export type DisclosureComponentType = {
children: ReactNode; children: ReactNode;
button: { button: {
title: string; title: string;
Icon: ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>; Icon: ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
buttons?: { buttons?: {
Icon: ReactElement; Icon: ReactElement;
title: string; title: string;
onClick: (event?: React.MouseEvent) => void; onClick: (event?: React.MouseEvent) => void;
}[]; }[];
}; };
}; };
export type FloatComponentType = { export type FloatComponentType = {
value: string; value: string;
disabled?: boolean; disabled?: boolean;
onChange: (value: string) => void; onChange: (value: string) => void;
}; };
export type TooltipComponentType = { export type TooltipComponentType = {

8
src/frontend/src/types/entities/index.ts
View file

@ -1,8 +1,8 @@
import { HomeIcon } from "@heroicons/react/24/outline"; import { HomeIcon } from "@heroicons/react/24/outline";
export type sidebarNavigationItemType = { export type sidebarNavigationItemType = {
name: string; name: string;
href: string; href: string;
icon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>; icon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
current: boolean; current: boolean;
}; };

24
src/frontend/src/types/flow/index.ts
View file

@ -3,20 +3,20 @@ import { APIClassType } from "../api/index";
import { ReactFlowJsonObject, XYPosition } from "reactflow"; import { ReactFlowJsonObject, XYPosition } from "reactflow";
export type FlowType = { export type FlowType = {
name: string; name: string;
id: string; id: string;
data: ReactFlowJsonObject; data: ReactFlowJsonObject;
description: string; description: string;
}; };
export type NodeType = { export type NodeType = {
id: string; id: string;
type?: string; type?: string;
position: XYPosition; position: XYPosition;
data: NodeDataType; data: NodeDataType;
}; };
export type NodeDataType = { export type NodeDataType = {
type: string; type: string;
node?: APIClassType; node?: APIClassType;
id: string; id: string;
value: any; value: any;
}; };

43
src/frontend/src/types/tabs/index.ts
View file

@ -1,27 +1,30 @@
import { FlowType } from "../flow"; import { FlowType } from "../flow";
export type TabsContextType = { export type TabsContextType = {
save: () => void; save: () => void;
tabIndex: number; tabIndex: number;
setTabIndex: (index: number) => void; setTabIndex: (index: number) => void;
flows: Array<FlowType>; flows: Array<FlowType>;
removeFlow: (id: string) => void; removeFlow: (id: string) => void;
addFlow: (flowData?: FlowType,newFlow?:boolean) => void; addFlow: (flowData?: FlowType, newFlow?: boolean) => void;
updateFlow: (newFlow: FlowType) => void; updateFlow: (newFlow: FlowType) => void;
incrementNodeId: () => string; incrementNodeId: () => string;
downloadFlow: (flow: FlowType) => void; downloadFlow: (flow: FlowType) => void;
uploadFlow: (newFlow?:boolean) => void; uploadFlow: (newFlow?: boolean) => void;
hardReset: () => void; hardReset: () => void;
//disable CopyPaste //disable CopyPaste
disableCopyPaste: boolean; disableCopyPaste: boolean;
setDisableCopyPaste: (value: boolean) => void; setDisableCopyPaste: (value: boolean) => void;
getNodeId: () => string; getNodeId: () => string;
paste: (selection: {nodes: any, edges: any}, position: {x: number, y: number}) => void; paste: (
selection: { nodes: any; edges: any },
position: { x: number; y: number }
) => void;
}; };
export type LangFlowState = { export type LangFlowState = {
tabIndex: number; tabIndex: number;
flows: FlowType[]; flows: FlowType[];
id: string; id: string;
nodeId: number; nodeId: number;
}; };

4
src/frontend/src/types/templatesContext/index.ts
View file

@ -1,6 +1,6 @@
const template: { [char: string]: string } = {}; const template: { [char: string]: string } = {};
export type TemplateContextType = { export type TemplateContextType = {
templates: typeof template; templates: typeof template;
setTemplates: (newState: {}) => void; setTemplates: (newState: {}) => void;
}; };

18
src/frontend/src/types/typesContext/index.ts
View file

@ -5,13 +5,13 @@ const template: { [char: string]: string } = {};
const data: { [char: string]: string } = {}; const data: { [char: string]: string } = {};
export type typesContextType = { export type typesContextType = {
reactFlowInstance: ReactFlowInstance | null; reactFlowInstance: ReactFlowInstance | null;
setReactFlowInstance: any; setReactFlowInstance: any;
deleteNode: (idx: string) => void; deleteNode: (idx: string) => void;
types: typeof types; types: typeof types;
setTypes: (newState: {}) => void; setTypes: (newState: {}) => void;
templates: typeof template; templates: typeof template;
setTemplates: (newState: {}) => void; setTemplates: (newState: {}) => void;
data: typeof data; data: typeof data;
setData: (newState: {}) => void; setData: (newState: {}) => void;
}; };

786
src/frontend/src/utils.ts
View file

@ -1,20 +1,20 @@
import { import {
RocketLaunchIcon, RocketLaunchIcon,
LinkIcon, LinkIcon,
CpuChipIcon, CpuChipIcon,
LightBulbIcon, LightBulbIcon,
CommandLineIcon, CommandLineIcon,
WrenchScrewdriverIcon, WrenchScrewdriverIcon,
WrenchIcon, WrenchIcon,
ComputerDesktopIcon, ComputerDesktopIcon,
Bars3CenterLeftIcon, Bars3CenterLeftIcon,
GiftIcon, GiftIcon,
PaperClipIcon, PaperClipIcon,
QuestionMarkCircleIcon, QuestionMarkCircleIcon,
FingerPrintIcon, FingerPrintIcon,
ScissorsIcon, ScissorsIcon,
CircleStackIcon, CircleStackIcon,
Squares2X2Icon, Squares2X2Icon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { Connection, Edge, Node, ReactFlowInstance } from "reactflow"; import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
import { FlowType } from "./types/flow"; import { FlowType } from "./types/flow";
@ -22,475 +22,473 @@ import { APITemplateType, TemplateVariableType } from "./types/api";
import _ from "lodash"; import _ from "lodash";
export function classNames(...classes: Array<string>) { export function classNames(...classes: Array<string>) {
return classes.filter(Boolean).join(" "); return classes.filter(Boolean).join(" ");
} }
export const textColors = { export const textColors = {
white: "text-white", white: "text-white",
red: "text-red-700", red: "text-red-700",
orange: "text-orange-700", orange: "text-orange-700",
amber: "text-amber-700", amber: "text-amber-700",
yellow: "text-yellow-700", yellow: "text-yellow-700",
lime: "text-lime-700", lime: "text-lime-700",
green: "text-green-700", green: "text-green-700",
emerald: "text-emerald-700", emerald: "text-emerald-700",
teal: "text-teal-700", teal: "text-teal-700",
cyan: "text-cyan-700", cyan: "text-cyan-700",
sky: "text-sky-700", sky: "text-sky-700",
blue: "text-blue-700", blue: "text-blue-700",
indigo: "text-indigo-700", indigo: "text-indigo-700",
violet: "text-violet-700", violet: "text-violet-700",
purple: "text-purple-700", purple: "text-purple-700",
fuchsia: "text-fuchsia-700", fuchsia: "text-fuchsia-700",
pink: "text-pink-700", pink: "text-pink-700",
rose: "text-rose-700", rose: "text-rose-700",
black: "text-black-700", black: "text-black-700",
gray: "text-gray-700", gray: "text-gray-700",
}; };
export const borderLColors = { export const borderLColors = {
white: "border-l-white", white: "border-l-white",
red: "border-l-red-500", red: "border-l-red-500",
orange: "border-l-orange-500", orange: "border-l-orange-500",
amber: "border-l-amber-500", amber: "border-l-amber-500",
yellow: "border-l-yellow-500", yellow: "border-l-yellow-500",
lime: "border-l-lime-500", lime: "border-l-lime-500",
green: "border-l-green-500", green: "border-l-green-500",
emerald: "border-l-emerald-500", emerald: "border-l-emerald-500",
teal: "border-l-teal-500", teal: "border-l-teal-500",
cyan: "border-l-cyan-500", cyan: "border-l-cyan-500",
sky: "border-l-sky-500", sky: "border-l-sky-500",
blue: "border-l-blue-500", blue: "border-l-blue-500",
indigo: "border-l-indigo-500", indigo: "border-l-indigo-500",
violet: "border-l-violet-500", violet: "border-l-violet-500",
purple: "border-l-purple-500", purple: "border-l-purple-500",
fuchsia: "border-l-fuchsia-500", fuchsia: "border-l-fuchsia-500",
pink: "border-l-pink-500", pink: "border-l-pink-500",
rose: "border-l-rose-500", rose: "border-l-rose-500",
black: "border-l-black-500", black: "border-l-black-500",
gray: "border-l-gray-500", gray: "border-l-gray-500",
}; };
export const nodeColors: { [char: string]: string } = { export const nodeColors: { [char: string]: string } = {
prompts: "#4367BF", prompts: "#4367BF",
llms: "#6344BE", llms: "#6344BE",
chains: "#FE7500", chains: "#FE7500",
agents: "#903BBE", agents: "#903BBE",
tools: "#FF3434", tools: "#FF3434",
memories: "#F5B85A", memories: "#F5B85A",
advanced: "#000000", advanced: "#000000",
chat: "#198BF6", chat: "#198BF6",
thought: "#272541", thought: "#272541",
embeddings: "#42BAA7", embeddings: "#42BAA7",
documentloaders: "#7AAE42", documentloaders: "#7AAE42",
vectorstores: "#AA8742", vectorstores: "#AA8742",
textsplitters: "#B47CB5", textsplitters: "#B47CB5",
toolkits: "#DB2C2C", toolkits: "#DB2C2C",
wrappers: "#E6277A", wrappers: "#E6277A",
utilities: "#31A3CC", utilities: "#31A3CC",
unknown: "#9CA3AF", unknown: "#9CA3AF",
}; };
export const nodeNames: { [char: string]: string } = { export const nodeNames: { [char: string]: string } = {
prompts: "Prompts", prompts: "Prompts",
llms: "LLMs", llms: "LLMs",
chains: "Chains", chains: "Chains",
agents: "Agents", agents: "Agents",
tools: "Tools", tools: "Tools",
memories: "Memories", memories: "Memories",
advanced: "Advanced", advanced: "Advanced",
chat: "Chat", chat: "Chat",
embeddings: "Embeddings", embeddings: "Embeddings",
documentloaders: "Loaders", documentloaders: "Loaders",
vectorstores: "Vector Stores", vectorstores: "Vector Stores",
toolkits: "Toolkits", toolkits: "Toolkits",
wrappers: "Wrappers", wrappers: "Wrappers",
textsplitters: "Text Splitters", textsplitters: "Text Splitters",
utilities: "Utilities", utilities: "Utilities",
unknown: "Unknown", unknown: "Unknown",
}; };
export const nodeIcons: { export const nodeIcons: {
[char: string]: React.ForwardRefExoticComponent< [char: string]: React.ForwardRefExoticComponent<
React.SVGProps<SVGSVGElement> React.SVGProps<SVGSVGElement>
>; >;
} = { } = {
agents: RocketLaunchIcon, agents: RocketLaunchIcon,
chains: LinkIcon, chains: LinkIcon,
memories: CpuChipIcon, memories: CpuChipIcon,
llms: LightBulbIcon, llms: LightBulbIcon,
prompts: CommandLineIcon, prompts: CommandLineIcon,
tools: WrenchIcon, tools: WrenchIcon,
advanced: ComputerDesktopIcon, advanced: ComputerDesktopIcon,
chat: Bars3CenterLeftIcon, chat: Bars3CenterLeftIcon,
embeddings: FingerPrintIcon, embeddings: FingerPrintIcon,
documentloaders: PaperClipIcon, documentloaders: PaperClipIcon,
vectorstores: CircleStackIcon, vectorstores: CircleStackIcon,
toolkits: WrenchScrewdriverIcon, toolkits: WrenchScrewdriverIcon,
textsplitters: ScissorsIcon, textsplitters: ScissorsIcon,
wrappers: GiftIcon, wrappers: GiftIcon,
utilities: Squares2X2Icon, utilities: Squares2X2Icon,
unknown: QuestionMarkCircleIcon, unknown: QuestionMarkCircleIcon,
}; };
export const bgColors = { export const bgColors = {
white: "bg-white", white: "bg-white",
red: "bg-red-100", red: "bg-red-100",
orange: "bg-orange-100", orange: "bg-orange-100",
amber: "bg-amber-100", amber: "bg-amber-100",
yellow: "bg-yellow-100", yellow: "bg-yellow-100",
lime: "bg-lime-100", lime: "bg-lime-100",
green: "bg-green-100", green: "bg-green-100",
emerald: "bg-emerald-100", emerald: "bg-emerald-100",
teal: "bg-teal-100", teal: "bg-teal-100",
cyan: "bg-cyan-100", cyan: "bg-cyan-100",
sky: "bg-sky-100", sky: "bg-sky-100",
blue: "bg-blue-100", blue: "bg-blue-100",
indigo: "bg-indigo-100", indigo: "bg-indigo-100",
violet: "bg-violet-100", violet: "bg-violet-100",
purple: "bg-purple-100", purple: "bg-purple-100",
fuchsia: "bg-fuchsia-100", fuchsia: "bg-fuchsia-100",
pink: "bg-pink-100", pink: "bg-pink-100",
rose: "bg-rose-100", rose: "bg-rose-100",
black: "bg-black-100", black: "bg-black-100",
gray: "bg-gray-100", gray: "bg-gray-100",
}; };
export const bgColorsHover = { export const bgColorsHover = {
white: "hover:bg-white", white: "hover:bg-white",
black: "hover:bg-black-50", black: "hover:bg-black-50",
gray: "hover:bg-gray-50", gray: "hover:bg-gray-50",
red: "hover:bg-red-50", red: "hover:bg-red-50",
orange: "hover:bg-orange-50", orange: "hover:bg-orange-50",
amber: "hover:bg-amber-50", amber: "hover:bg-amber-50",
yellow: "hover:bg-yellow-50", yellow: "hover:bg-yellow-50",
lime: "hover:bg-lime-50", lime: "hover:bg-lime-50",
green: "hover:bg-green-50", green: "hover:bg-green-50",
emerald: "hover:bg-emerald-50", emerald: "hover:bg-emerald-50",
teal: "hover:bg-teal-50", teal: "hover:bg-teal-50",
cyan: "hover:bg-cyan-50", cyan: "hover:bg-cyan-50",
sky: "hover:bg-sky-50", sky: "hover:bg-sky-50",
blue: "hover:bg-blue-50", blue: "hover:bg-blue-50",
indigo: "hover:bg-indigo-50", indigo: "hover:bg-indigo-50",
violet: "hover:bg-violet-50", violet: "hover:bg-violet-50",
purple: "hover:bg-purple-50", purple: "hover:bg-purple-50",
fuchsia: "hover:bg-fuchsia-50", fuchsia: "hover:bg-fuchsia-50",
pink: "hover:bg-pink-50", pink: "hover:bg-pink-50",
rose: "hover:bg-rose-50", rose: "hover:bg-rose-50",
}; };
export const textColorsHex = { export const textColorsHex = {
red: "rgb(185 28 28)", red: "rgb(185 28 28)",
orange: "rgb(194 65 12)", orange: "rgb(194 65 12)",
amber: "rgb(180 83 9)", amber: "rgb(180 83 9)",
yellow: "rgb(161 98 7)", yellow: "rgb(161 98 7)",
lime: "rgb(77 124 15)", lime: "rgb(77 124 15)",
green: "rgb(21 128 61)", green: "rgb(21 128 61)",
emerald: "rgb(4 120 87)", emerald: "rgb(4 120 87)",
teal: "rgb(15 118 110)", teal: "rgb(15 118 110)",
cyan: "rgb(14 116 144)", cyan: "rgb(14 116 144)",
sky: "rgb(3 105 161)", sky: "rgb(3 105 161)",
blue: "rgb(29 78 216)", blue: "rgb(29 78 216)",
indigo: "rgb(67 56 202)", indigo: "rgb(67 56 202)",
violet: "rgb(109 40 217)", violet: "rgb(109 40 217)",
purple: "rgb(126 34 206)", purple: "rgb(126 34 206)",
fuchsia: "rgb(162 28 175)", fuchsia: "rgb(162 28 175)",
pink: "rgb(190 24 93)", pink: "rgb(190 24 93)",
rose: "rgb(190 18 60)", rose: "rgb(190 18 60)",
}; };
export const bgColorsHex = { export const bgColorsHex = {
red: "rgb(254 226 226)", red: "rgb(254 226 226)",
orange: "rgb(255 237 213)", orange: "rgb(255 237 213)",
amber: "rgb(254 243 199)", amber: "rgb(254 243 199)",
yellow: "rgb(254 249 195)", yellow: "rgb(254 249 195)",
lime: "rgb(236 252 203)", lime: "rgb(236 252 203)",
green: "rgb(220 252 231)", green: "rgb(220 252 231)",
emerald: "rgb(209 250 229)", emerald: "rgb(209 250 229)",
teal: "rgb(204 251 241)", teal: "rgb(204 251 241)",
cyan: "rgb(207 250 254)", cyan: "rgb(207 250 254)",
sky: "rgb(224 242 254)", sky: "rgb(224 242 254)",
blue: "rgb(219 234 254)", blue: "rgb(219 234 254)",
indigo: "rgb(224 231 255)", indigo: "rgb(224 231 255)",
violet: "rgb(237 233 254)", violet: "rgb(237 233 254)",
purple: "rgb(243 232 255)", purple: "rgb(243 232 255)",
fuchsia: "rgb(250 232 255)", fuchsia: "rgb(250 232 255)",
pink: "rgb(252 231 243)", pink: "rgb(252 231 243)",
rose: "rgb(255 228 230)", rose: "rgb(255 228 230)",
}; };
export const taskTypeMap: { [key: string]: string } = { export const taskTypeMap: { [key: string]: string } = {
MULTICLASS_CLASSIFICATION: "Multiclass Classification", MULTICLASS_CLASSIFICATION: "Multiclass Classification",
}; };
const charWidths: { [char: string]: number } = { const charWidths: { [char: string]: number } = {
" ": 0.2, " ": 0.2,
"!": 0.2, "!": 0.2,
'"': 0.3, '"': 0.3,
"#": 0.5, "#": 0.5,
$: 0.5, $: 0.5,
"%": 0.5, "%": 0.5,
"&": 0.5, "&": 0.5,
"(": 0.2, "(": 0.2,
")": 0.2, ")": 0.2,
"*": 0.5, "*": 0.5,
"+": 0.5, "+": 0.5,
",": 0.2, ",": 0.2,
"-": 0.2, "-": 0.2,
".": 0.1, ".": 0.1,
"/": 0.5, "/": 0.5,
":": 0.2, ":": 0.2,
";": 0.2, ";": 0.2,
"<": 0.5, "<": 0.5,
"=": 0.5, "=": 0.5,
">": 0.5, ">": 0.5,
"?": 0.2, "?": 0.2,
"@": 0.5, "@": 0.5,
"[": 0.2, "[": 0.2,
"\\": 0.5, "\\": 0.5,
"]": 0.2, "]": 0.2,
"^": 0.5, "^": 0.5,
_: 0.2, _: 0.2,
"`": 0.5, "`": 0.5,
"{": 0.2, "{": 0.2,
"|": 0.2, "|": 0.2,
"}": 0.2, "}": 0.2,
"~": 0.5, "~": 0.5,
}; };
for (let i = 65; i <= 90; i++) { for (let i = 65; i <= 90; i++) {
charWidths[String.fromCharCode(i)] = 0.6; charWidths[String.fromCharCode(i)] = 0.6;
} }
for (let i = 97; i <= 122; i++) { for (let i = 97; i <= 122; i++) {
charWidths[String.fromCharCode(i)] = 0.5; charWidths[String.fromCharCode(i)] = 0.5;
} }
export function measureTextWidth(text: string, fontSize: number) { export function measureTextWidth(text: string, fontSize: number) {
let wordWidth = 0; let wordWidth = 0;
for (let j = 0; j < text.length; j++) { for (let j = 0; j < text.length; j++) {
let char = text[j]; let char = text[j];
let charWidth = charWidths[char] || 0.5; let charWidth = charWidths[char] || 0.5;
wordWidth += charWidth * fontSize; wordWidth += charWidth * fontSize;
} }
return wordWidth; return wordWidth;
} }
export function measureTextHeight( export function measureTextHeight(
text: string, text: string,
width: number, width: number,
fontSize: number fontSize: number
) { ) {
const charHeight = fontSize; const charHeight = fontSize;
const lineHeight = charHeight * 1.5; const lineHeight = charHeight * 1.5;
const words = text.split(" "); const words = text.split(" ");
let lineWidth = 0; let lineWidth = 0;
let totalHeight = 0; let totalHeight = 0;
for (let i = 0; i < words.length; i++) { for (let i = 0; i < words.length; i++) {
let word = words[i]; let word = words[i];
let wordWidth = measureTextWidth(word, fontSize); let wordWidth = measureTextWidth(word, fontSize);
if (lineWidth + wordWidth + charWidths[" "] * fontSize <= width) { if (lineWidth + wordWidth + charWidths[" "] * fontSize <= width) {
lineWidth += wordWidth + charWidths[" "] * fontSize; lineWidth += wordWidth + charWidths[" "] * fontSize;
} else { } else {
totalHeight += lineHeight; totalHeight += lineHeight;
lineWidth = wordWidth; lineWidth = wordWidth;
} }
} }
totalHeight += lineHeight; totalHeight += lineHeight;
return totalHeight; return totalHeight;
} }
export function toCamelCase(str: string) { export function toCamelCase(str: string) {
return str return str
.split(" ") .split(" ")
.map((word, index) => .map((word, index) =>
index === 0 index === 0
? word.toLowerCase() ? word.toLowerCase()
: word[0].toUpperCase() + word.slice(1).toLowerCase() : word[0].toUpperCase() + word.slice(1).toLowerCase()
) )
.join(""); .join("");
} }
export function toFirstUpperCase(str: string) { export function toFirstUpperCase(str: string) {
return str return str
.split(" ") .split(" ")
.map((word, index) => word[0].toUpperCase() + word.slice(1).toLowerCase()) .map((word, index) => word[0].toUpperCase() + word.slice(1).toLowerCase())
.join(""); .join("");
} }
export function snakeToSpaces(str: string) { export function snakeToSpaces(str: string) {
let result = str let result = str.split("_").join(" ");
.split("_")
.join(" ");
return result return result;
} }
export function toNormalCase(str: string) { export function toNormalCase(str: string) {
let result = str let result = str
.split("_") .split("_")
.map((word, index) => { .map((word, index) => {
if (index === 0) { if (index === 0) {
return word[0].toUpperCase() + word.slice(1).toLowerCase(); return word[0].toUpperCase() + word.slice(1).toLowerCase();
} }
return word.toLowerCase(); return word.toLowerCase();
}) })
.join(" "); .join(" ");
return result return result
.split("-") .split("-")
.map((word, index) => { .map((word, index) => {
if (index === 0) { if (index === 0) {
return word[0].toUpperCase() + word.slice(1).toLowerCase(); return word[0].toUpperCase() + word.slice(1).toLowerCase();
} }
return word.toLowerCase(); return word.toLowerCase();
}) })
.join(" "); .join(" ");
} }
export function normalCaseToSnakeCase(str: string) { export function normalCaseToSnakeCase(str: string) {
return str return str
.split(" ") .split(" ")
.map((word, index) => { .map((word, index) => {
if (index === 0) { if (index === 0) {
return word[0].toUpperCase() + word.slice(1).toLowerCase(); return word[0].toUpperCase() + word.slice(1).toLowerCase();
} }
return word.toLowerCase(); return word.toLowerCase();
}) })
.join("_"); .join("_");
} }
export function roundNumber(x: number, decimals: number) { export function roundNumber(x: number, decimals: number) {
return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals); return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals);
} }
export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> { export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
const sourceId = edge.source; const sourceId = edge.source;
const targetId = edge.target; const targetId = edge.target;
const connectedNodes = nodes.filter( const connectedNodes = nodes.filter(
(node) => node.id === targetId || node.id === sourceId (node) => node.id === targetId || node.id === sourceId
); );
return connectedNodes; return connectedNodes;
} }
export function isValidConnection( export function isValidConnection(
{ source, target, sourceHandle, targetHandle }: Connection, { source, target, sourceHandle, targetHandle }: Connection,
reactFlowInstance: ReactFlowInstance reactFlowInstance: ReactFlowInstance
) { ) {
if ( if (
sourceHandle.split("|")[0] === targetHandle.split("|")[0] || sourceHandle.split("|")[0] === targetHandle.split("|")[0] ||
sourceHandle sourceHandle
.split("|") .split("|")
.slice(2) .slice(2)
.some((t) => t === targetHandle.split("|")[0]) || .some((t) => t === targetHandle.split("|")[0]) ||
targetHandle.split("|")[0] === "str" targetHandle.split("|")[0] === "str"
) { ) {
let targetNode = reactFlowInstance.getNode(target).data.node; let targetNode = reactFlowInstance.getNode(target).data.node;
if (!targetNode) { if (!targetNode) {
if ( if (
!reactFlowInstance !reactFlowInstance
.getEdges() .getEdges()
.find((e) => e.targetHandle === targetHandle) .find((e) => e.targetHandle === targetHandle)
) { ) {
return true; return true;
} }
} else if ( } else if (
(!targetNode.template[targetHandle.split("|")[1]].list && (!targetNode.template[targetHandle.split("|")[1]].list &&
!reactFlowInstance !reactFlowInstance
.getEdges() .getEdges()
.find((e) => e.targetHandle === targetHandle)) || .find((e) => e.targetHandle === targetHandle)) ||
targetNode.template[targetHandle.split("|")[1]].list targetNode.template[targetHandle.split("|")[1]].list
) { ) {
return true; return true;
} }
} }
return false; return false;
} }
export function removeApiKeys(flow: FlowType): FlowType { export function removeApiKeys(flow: FlowType): FlowType {
let cleanFLow = _.cloneDeep(flow); let cleanFLow = _.cloneDeep(flow);
cleanFLow.data.nodes.forEach((node) => { cleanFLow.data.nodes.forEach((node) => {
for (const key in node.data.node.template) { for (const key in node.data.node.template) {
if (key.includes("api")) { if (key.includes("api")) {
node.data.node.template[key].value = ""; node.data.node.template[key].value = "";
} }
} }
}); });
return cleanFLow; return cleanFLow;
} }
export function updateObject<T extends Record<string, any>>( export function updateObject<T extends Record<string, any>>(
reference: T, reference: T,
objectToUpdate: T objectToUpdate: T
): T { ): T {
let clonedObject = _.cloneDeep(objectToUpdate); let clonedObject = _.cloneDeep(objectToUpdate);
// Loop through each key in the object to update // Loop through each key in the object to update
for (const key in clonedObject) { for (const key in clonedObject) {
// If the key is not in the reference object, delete it // If the key is not in the reference object, delete it
if (!(key in reference)) { if (!(key in reference)) {
delete clonedObject[key]; delete clonedObject[key];
} }
} }
// Loop through each key in the reference object // Loop through each key in the reference object
for (const key in reference) { for (const key in reference) {
// If the key is not in the object to update, add it // If the key is not in the object to update, add it
if (!(key in clonedObject)) { if (!(key in clonedObject)) {
clonedObject[key] = reference[key]; clonedObject[key] = reference[key];
} }
} }
return clonedObject; return clonedObject;
} }
export function debounce(func, wait) { export function debounce(func, wait) {
let timeout; let timeout;
return function (...args) { return function (...args) {
const context = this; const context = this;
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait); timeout = setTimeout(() => func.apply(context, args), wait);
}; };
} }
export function updateTemplate( export function updateTemplate(
reference: APITemplateType, reference: APITemplateType,
objectToUpdate: APITemplateType objectToUpdate: APITemplateType
): APITemplateType { ): APITemplateType {
let clonedObject: APITemplateType = _.cloneDeep(reference); let clonedObject: APITemplateType = _.cloneDeep(reference);
// Loop through each key in the reference object // Loop through each key in the reference object
for (const key in clonedObject) { for (const key in clonedObject) {
// If the key is not in the object to update, add it // If the key is not in the object to update, add it
if (objectToUpdate[key] && objectToUpdate[key].value) { if (objectToUpdate[key] && objectToUpdate[key].value) {
clonedObject[key].value = objectToUpdate[key].value; clonedObject[key].value = objectToUpdate[key].value;
} }
} }
return clonedObject; return clonedObject;
} }
interface languageMap { interface languageMap {
[key: string]: string | undefined; [key: string]: string | undefined;
} }
export const programmingLanguages: languageMap = { export const programmingLanguages: languageMap = {
javascript: ".js", javascript: ".js",
python: ".py", python: ".py",
java: ".java", java: ".java",
c: ".c", c: ".c",
cpp: ".cpp", cpp: ".cpp",
"c++": ".cpp", "c++": ".cpp",
"c#": ".cs", "c#": ".cs",
ruby: ".rb", ruby: ".rb",
php: ".php", php: ".php",
swift: ".swift", swift: ".swift",
"objective-c": ".m", "objective-c": ".m",
kotlin: ".kt", kotlin: ".kt",
typescript: ".ts", typescript: ".ts",
go: ".go", go: ".go",
perl: ".pl", perl: ".pl",
rust: ".rs", rust: ".rs",
scala: ".scala", scala: ".scala",
haskell: ".hs", haskell: ".hs",
lua: ".lua", lua: ".lua",
shell: ".sh", shell: ".sh",
sql: ".sql", sql: ".sql",
html: ".html", html: ".html",
css: ".css", css: ".css",
// add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
}; };