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

Refactor: Change more variables names

Browse source
This commit is contained in:
Igor Carvalho 2023-08-07 17:14:54 -03:00
commit 1f93cb5513
32 changed files with 357 additions and 345 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,11 @@
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import React, { useContext, useEffect, useRef, useState } from "react"; import React, {
ReactNode,
useContext,
useEffect,
useRef,
useState,
} from "react";
import { Handle, Position, useUpdateNodeInternals } from "reactflow"; import { Handle, Position, useUpdateNodeInternals } from "reactflow";
import ShadTooltip from "../../../../components/ShadTooltipComponent"; import ShadTooltip from "../../../../components/ShadTooltipComponent";
import CodeAreaComponent from "../../../../components/codeAreaComponent"; import CodeAreaComponent from "../../../../components/codeAreaComponent";
@ -17,6 +23,7 @@ import { TOOLTIP_EMPTY } from "../../../../constants/constants";
import { TabsContext } from "../../../../contexts/tabsContext"; import { TabsContext } from "../../../../contexts/tabsContext";
import { typesContext } from "../../../../contexts/typesContext"; import { typesContext } from "../../../../contexts/typesContext";
import { ParameterComponentType } from "../../../../types/components"; import { ParameterComponentType } from "../../../../types/components";
import { TabsState } from "../../../../types/tabs";
import { isValidConnection } from "../../../../utils/reactflowUtils"; import { isValidConnection } from "../../../../utils/reactflowUtils";
import { import {
nodeColors, nodeColors,
@ -38,15 +45,15 @@ export default function ParameterComponent({
required = false, required = false,
optionalHandle = null, optionalHandle = null,
info = "", info = "",
}: ParameterComponentType) { }: ParameterComponentType): JSX.Element {
const ref = useRef(null); const ref = useRef<HTMLDivElement>(null);
const refHtml = useRef(null); const refHtml = useRef<HTMLDivElement & ReactNode>(null);
const infoHtml = useRef(null); const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
const updateNodeInternals = useUpdateNodeInternals(); const updateNodeInternals = useUpdateNodeInternals();
const [position, setPosition] = useState(0); const [position, setPosition] = useState(0);
const { setTabsState, tabId, save, flows } = useContext(TabsContext); const { setTabsState, tabId, save, flows } = useContext(TabsContext);
const flow = flows.find((f) => f.id === tabId).data?.nodes ?? null; const flow = flows.find((flow) => flow.id === tabId)?.data?.nodes ?? null;
// Update component position // Update component position
useEffect(() => { useEffect(() => {
@ -62,16 +69,17 @@ export default function ParameterComponent({
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
let disabled = let disabled =
reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false; reactFlowInstance?.getEdges().some((edge) => edge.targetHandle === id) ?? false;
const { data: myData } = useContext(typesContext); const { data: myData } = useContext(typesContext);
const handleOnNewValue = (newValue: any) => { const handleOnNewValue = (newValue: string | string[] | boolean): void => {
let newData = cloneDeep(data); let newData = cloneDeep(data);
newData.node.template[name].value = newValue; newData.node!.template[name].value = newValue;
setData(newData); setData(newData);
// Set state to pending // Set state to pending
setTabsState((prev) => { //@ts-ignore
setTabsState((prev: TabsState) => {
return { return {
...prev, ...prev,
[tabId]: { [tabId]: {
@ -86,10 +94,11 @@ export default function ParameterComponent({
useEffect(() => { useEffect(() => {
if (name === "openai_api_base") console.log(info); if (name === "openai_api_base") console.log(info);
// @ts-ignore
infoHtml.current = ( infoHtml.current = (
<div className="h-full w-full word-break-break-word"> <div className="h-full w-full break-words">
{info.split("\n").map((line, i) => ( {info.split("\n").map((line, index) => (
<p key={i} className="block"> <p key={index} className="block">
{line} {line}
</p> </p>
))} ))}
@ -98,18 +107,19 @@ export default function ParameterComponent({
}, [info]); }, [info]);
function renderTooltips() { function renderTooltips() {
let groupedObj = groupByFamily(myData, tooltipTitle, left, flow); let groupedObj = groupByFamily(myData, tooltipTitle!, left, flow!);
if (groupedObj && groupedObj.length > 0) { if (groupedObj && groupedObj.length > 0) {
refHtml.current = groupedObj.map((item, i) => { //@ts-ignore
refHtml.current = groupedObj.map((item, index) => {
const Icon: any = const Icon: any =
nodeIconsLucide[item.family] ?? nodeIconsLucide["unknown"]; nodeIconsLucide[item.family] ?? nodeIconsLucide["unknown"];
return ( return (
<span <span
key={i} key={index}
className={classNames( className={classNames(
i > 0 ? "mt-2 flex items-center" : "flex items-center" index > 0 ? "mt-2 flex items-center" : "flex items-center"
)} )}
> >
<div <div
@ -132,10 +142,10 @@ export default function ParameterComponent({
{" "} {" "}
{item.type === "" ? "" : " - "} {item.type === "" ? "" : " - "}
{item.type.split(", ").length > 2 {item.type.split(", ").length > 2
? item.type.split(", ").map((el, i) => ( ? item.type.split(", ").map((el, index) => (
<React.Fragment key={el + i}> <React.Fragment key={el + index}>
<span> <span>
{i === item.type.split(", ").length - 1 {index === item.type.split(", ").length - 1
? el ? el
: (el += `, `)} : (el += `, `)}
</span> </span>
@ -148,6 +158,7 @@ export default function ParameterComponent({
); );
}); });
} else { } else {
//@ts-ignore
refHtml.current = <span>{TOOLTIP_EMPTY}</span>; refHtml.current = <span>{TOOLTIP_EMPTY}</span>;
} }
} }
@ -207,7 +218,7 @@ export default function ParameterComponent({
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 ",
@ -223,9 +234,9 @@ export default function ParameterComponent({
{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={
@ -236,7 +247,7 @@ export default function ParameterComponent({
} }
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />
) : 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 ?? ""}
@ -245,8 +256,8 @@ export default function ParameterComponent({
) : ( ) : (
<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={handleOnNewValue} onChange={handleOnNewValue}
/> />
)} )}
@ -255,9 +266,9 @@ export default function ParameterComponent({
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<ToggleShadComponent <ToggleShadComponent
disabled={disabled} disabled={disabled}
enabled={data.node.template[name].value ?? false} enabled={data.node?.template[name].value ?? false}
setEnabled={(t) => { setEnabled={(isEnabled) => {
handleOnNewValue(t); handleOnNewValue(isEnabled);
}} }}
size="large" size="large"
/> />
@ -266,13 +277,13 @@ export default function ParameterComponent({
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<FloatComponent <FloatComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />
</div> </div>
) : 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">
<Dropdown <Dropdown
options={data.node.template[name].options} options={data.node.template[name].options}
@ -283,13 +294,13 @@ export default function ParameterComponent({
) : left === true && type === "code" ? ( ) : left === true && type === "code" ? (
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<CodeAreaComponent <CodeAreaComponent
dynamic={data.node.template[name].dynamic ?? false} dynamic={data.node?.template[name].dynamic ?? false}
setNodeClass={(nodeClass) => { setNodeClass={(nodeClass) => {
data.node = nodeClass; data.node = nodeClass;
}} }}
nodeClass={data.node} nodeClass={data.node}
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />
</div> </div>
@ -297,12 +308,12 @@ export default function ParameterComponent({
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<InputFileComponent <InputFileComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
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={(filePath: string) => {
data.node.template[name].file_path = t; data.node!.template[name].file_path = filePath;
save(); save();
}} }}
></InputFileComponent> ></InputFileComponent>
@ -311,7 +322,7 @@ export default function ParameterComponent({
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<IntComponent <IntComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />
</div> </div>
@ -324,7 +335,7 @@ export default function ParameterComponent({
}} }}
nodeClass={data.node} nodeClass={data.node}
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />
</div> </div>

48
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -159,52 +159,52 @@ export default function GenericNode({
<> <>
{Object.keys(data.node.template) {Object.keys(data.node.template)
.filter((t) => t.charAt(0) !== "_") .filter((templateName) => templateName.charAt(0) !== "_")
.map((t: string, idx) => ( .map((templateName: string, idx) => (
<div key={idx}> <div key={idx}>
{data.node.template[t].show && {data.node.template[templateName].show &&
!data.node.template[t].advanced ? ( !data.node.template[templateName].advanced ? (
<ParameterComponent <ParameterComponent
key={ key={
(data.node.template[t].input_types?.join(";") ?? (data.node.template[templateName].input_types?.join(";") ??
data.node.template[t].type) + data.node.template[templateName].type) +
"|" + "|" +
t + templateName +
"|" + "|" +
data.id data.id
} }
data={data} data={data}
setData={setData} setData={setData}
color={ color={
nodeColors[types[data.node.template[t].type]] ?? nodeColors[types[data.node.template[templateName].type]] ??
nodeColors[data.node.template[t].type] ?? nodeColors[data.node.template[templateName].type] ??
nodeColors.unknown nodeColors.unknown
} }
title={ title={
data.node.template[t].display_name data.node.template[templateName].display_name
? data.node.template[t].display_name ? data.node.template[templateName].display_name
: data.node.template[t].name : data.node.template[templateName].name
? toTitleCase(data.node.template[t].name) ? toTitleCase(data.node.template[templateName].name)
: toTitleCase(t) : toTitleCase(templateName)
} }
info={data.node.template[t].info} info={data.node.template[templateName].info}
name={t} name={templateName}
tooltipTitle={ tooltipTitle={
data.node.template[t].input_types?.join("\n") ?? data.node.template[templateName].input_types?.join("\n") ??
data.node.template[t].type data.node.template[templateName].type
} }
required={data.node.template[t].required} required={data.node.template[templateName].required}
id={ id={
(data.node.template[t].input_types?.join(";") ?? (data.node.template[templateName].input_types?.join(";") ??
data.node.template[t].type) + data.node.template[templateName].type) +
"|" + "|" +
t + templateName +
"|" + "|" +
data.id data.id
} }
left={true} left={true}
type={data.node.template[t].type} type={data.node.template[templateName].type}
optionalHandle={data.node.template[t].input_types} optionalHandle={data.node.template[templateName].input_types}
/> />
) : ( ) : (
<></> <></>

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

@ -22,9 +22,9 @@ export default function AlertDropdown({ children }: AlertDropdownType) {
return ( return (
<Popover <Popover
open={open} open={open}
onOpenChange={(k) => { onOpenChange={(target) => {
setOpen(k); setOpen(target);
if (k) setNotificationCenter(false); if (target) setNotificationCenter(false);
}} }}
> >
<PopoverTrigger>{children}</PopoverTrigger> <PopoverTrigger>{children}</PopoverTrigger>

6
src/frontend/src/components/EditFlowSettingsComponent/index.tsx
View file

@ -55,12 +55,12 @@ export const EditFlowSettings: React.FC<InputProps> = ({
}; };
const [desc, setDesc] = useState( const [desc, setDesc] = useState(
flows.find((f) => f.id === tabId).description flows.find((flow) => flow.id === tabId).description
); );
const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => { const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
flows.find((f) => f.id === tabId).description = event.target.value; flows.find((flow) => flow.id === tabId).description = event.target.value;
setDesc(flows.find((f) => f.id === tabId).description); setDesc(flows.find((flow) => flow.id === tabId).description);
setDescription(event.target.value); setDescription(event.target.value);
}; };

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

@ -34,9 +34,9 @@ export default function CodeAreaComponent({
value={myValue} value={myValue}
nodeClass={nodeClass} nodeClass={nodeClass}
setNodeClass={setNodeClass} setNodeClass={setNodeClass}
setValue={(t: string) => { setValue={(value: string) => {
setMyValue(t); setMyValue(value);
onChange(t); onChange(value);
}} }}
> >
<div className="flex w-full items-center"> <div className="flex w-full items-center">

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

@ -25,12 +25,12 @@ export default function FloatComponent({
type="number" type="number"
step={step} step={step}
min={min} min={min}
onInput={(e: React.ChangeEvent<HTMLInputElement>) => { onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.value < min.toString()) { if (event.target.value < min.toString()) {
e.target.value = min.toString(); event.target.value = min.toString();
} }
if (e.target.value > max.toString()) { if (event.target.value > max.toString()) {
e.target.value = max.toString(); event.target.value = max.toString();
} }
}} }}
max={max} max={max}
@ -40,8 +40,8 @@ export default function FloatComponent({
placeholder={ placeholder={
editNode ? "Number 0 to 1" : "Type a number from zero to one" editNode ? "Number 0 to 1" : "Type a number from zero to one"
} }
onChange={(e) => { onChange={(event) => {
onChange(e.target.value); onChange(event.target.value);
}} }}
/> />
</div> </div>

2
src/frontend/src/components/headerComponent/index.tsx
View file

@ -34,7 +34,7 @@ export default function Header() {
<Link to="/"> <Link to="/">
<span className="ml-4 text-2xl">⛓️</span> <span className="ml-4 text-2xl">⛓️</span>
</Link> </Link>
{flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && ( {flows.findIndex((flow) => tabId === flow.id) !== -1 && tabId !== "" && (
<MenuBar flows={flows} tabId={tabId} /> <MenuBar flows={flows} tabId={tabId} />
)} )}
</div> </div>

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

@ -31,8 +31,8 @@ export default function InputComponent({
password && !editNode ? "pr-10" : "" password && !editNode ? "pr-10" : ""
)} )}
placeholder={password && editNode ? "Key" : "Type something..."} placeholder={password && editNode ? "Key" : "Type something..."}
onChange={(e) => { onChange={(event) => {
onChange(e.target.value); onChange(event.target.value);
}} }}
/> />
{password && ( {password && (

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

@ -49,11 +49,11 @@ export default function InputFileComponent({
input.style.display = "none"; // Hidden from view input.style.display = "none"; // Hidden from view
input.multiple = false; // Allow only one file selection input.multiple = false; // Allow only one file selection
input.onchange = (e: Event) => { input.onchange = (event: Event) => {
setLoading(true); setLoading(true);
// Get the selected file // Get the selected file
const file = (e.target as HTMLInputElement).files?.[0]; const file = (event.target as HTMLInputElement).files?.[0];
// Check if the file type is correct // Check if the file type is correct
if (file && checkFileType(file.name)) { if (file && checkFileType(file.name)) {

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

@ -25,18 +25,18 @@ export default function InputListComponent({
"flex flex-col gap-3" "flex flex-col gap-3"
)} )}
> >
{value.map((i, idx) => { {value.map((singleValue, idx) => {
return ( return (
<div key={idx} className="flex w-full gap-3"> <div key={idx} className="flex w-full gap-3">
<Input <Input
disabled={disabled} disabled={disabled}
type="text" type="text"
value={i} value={singleValue}
className={editNode ? "input-edit-node" : ""} className={editNode ? "input-edit-node" : ""}
placeholder="Type something..." placeholder="Type something..."
onChange={(e) => { onChange={(event) => {
let newInputList = _.cloneDeep(value); let newInputList = _.cloneDeep(value);
newInputList[idx] = e.target.value; newInputList[idx] = event.target.value;
onChange(newInputList); onChange(newInputList);
}} }}
/> />

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

@ -41,17 +41,17 @@ export default function IntComponent({
type="number" type="number"
step="1" step="1"
min={min} min={min}
onInput={(e: React.ChangeEvent<HTMLInputElement>) => { onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.value < min.toString()) { if (event.target.value < min.toString()) {
e.target.value = min.toString(); event.target.value = min.toString();
} }
}} }}
value={value ?? ""} value={value ?? ""}
className={editNode ? "input-edit-node" : ""} className={editNode ? "input-edit-node" : ""}
disabled={disabled} disabled={disabled}
placeholder={editNode ? "Integer number" : "Type an integer number"} placeholder={editNode ? "Integer number" : "Type an integer number"}
onChange={(e) => { onChange={(event) => {
onChange(e.target.value); onChange(event.target.value);
}} }}
/> />
</div> </div>

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

@ -39,8 +39,8 @@ export default function PromptAreaComponent({
value={value} value={value}
buttonText="Check & Save" buttonText="Check & Save"
modalTitle="Edit Prompt" modalTitle="Edit Prompt"
setValue={(t: string) => { setValue={(value: string) => {
onChange(t); onChange(value);
}} }}
nodeClass={nodeClass} nodeClass={nodeClass}
setNodeClass={setNodeClass} setNodeClass={setNodeClass}

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

@ -25,8 +25,8 @@ export default function TextAreaComponent({
disabled={disabled} disabled={disabled}
className={editNode ? "input-edit-node" : ""} className={editNode ? "input-edit-node" : ""}
placeholder={"Type something..."} placeholder={"Type something..."}
onChange={(e) => { onChange={(event) => {
onChange(e.target.value); onChange(event.target.value);
}} }}
/> />
<div> <div>
@ -35,8 +35,8 @@ export default function TextAreaComponent({
buttonText="Finishing Editing" buttonText="Finishing Editing"
modalTitle="Edit Text" modalTitle="Edit Text"
value={value} value={value}
setValue={(t: string) => { setValue={(value: string) => {
onChange(t); onChange(value);
}} }}
> >
{!editNode && ( {!editNode && (

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

@ -18,8 +18,8 @@ export default function ToggleComponent({
<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={(isEnabled: boolean) => {
setEnabled(x); setEnabled(isEnabled);
}} }}
className={classNames( className={classNames(
enabled ? "bg-primary" : "bg-input", enabled ? "bg-primary" : "bg-input",

4
src/frontend/src/components/toggleShadComponent/index.tsx
View file

@ -35,8 +35,8 @@ export default function ToggleShadComponent({
disabled={disabled} disabled={disabled}
className="" className=""
checked={enabled} checked={enabled}
onCheckedChange={(x: boolean) => { onCheckedChange={(isEnabled: boolean) => {
setEnabled(x); setEnabled(isEnabled);
}} }}
></Switch> ></Switch>
</div> </div>

8
src/frontend/src/components/ui/rename-label.tsx
View file

@ -15,8 +15,8 @@ export default function RenameLabel(props) {
useEffect(() => { useEffect(() => {
if (isRename) { if (isRename) {
setMyValue(props.value); setMyValue(props.value);
document.addEventListener("keydown", (e) => { document.addEventListener("keydown", (event) => {
if (e.key === "Escape") { if (event.key === "Escape") {
setIsRename(false); setIsRename(false);
props.setValue(""); props.setValue("");
} }
@ -67,8 +67,8 @@ export default function RenameLabel(props) {
} }
}} }}
value={myValue} value={myValue}
onChange={(e) => { onChange={(event) => {
setMyValue(e.target.value); setMyValue(event.target.value);
}} }}
/> />
) : ( ) : (

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

@ -316,11 +316,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
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 = (event: 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 ((event.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 = (event.target as HTMLInputElement).files[0];
// read the file as text // read the file as text
const formData = new FormData(); const formData = new FormData();
formData.append("file", file); formData.append("file", file);
@ -359,12 +359,12 @@ export function TabsProvider({ children }: { children: ReactNode }) {
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((node) => {
if (n.position.y < minimumY) { if (node.position.y < minimumY) {
minimumY = n.position.y; minimumY = node.position.y;
} }
if (n.position.x < minimumX) { if (node.position.x < minimumX) {
minimumX = n.position.x; minimumX = node.position.x;
} }
}); });
@ -372,43 +372,43 @@ export function TabsProvider({ children }: { children: ReactNode }) {
? { x: position.paneX + position.x, y: position.paneY + position.y } ? { x: position.paneX + position.x, y: position.paneY + position.y }
: reactFlowInstance.project({ x: position.x, y: position.y }); : reactFlowInstance.project({ x: position.x, y: position.y });
selectionInstance.nodes.forEach((n: NodeType) => { selectionInstance.nodes.forEach((node: NodeType) => {
// Generate a unique node ID // Generate a unique node ID
let newId = getNodeId(n.data.type); let newId = getNodeId(node.data.type);
idsMap[n.id] = newId; idsMap[node.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 + node.position.x - minimumX,
y: insidePosition.y + n.position.y - minimumY, y: insidePosition.y + node.position.y - minimumY,
}, },
data: { data: {
..._.cloneDeep(n.data), ..._.cloneDeep(node.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((node) => ({ ...node, selected: false }))
.concat({ ...newNode, selected: false }); .concat({ ...newNode, selected: false });
}); });
reactFlowInstance.setNodes(nodes); reactFlowInstance.setNodes(nodes);
selectionInstance.edges.forEach((e) => { selectionInstance.edges.forEach((edge) => {
let source = idsMap[e.source]; let source = idsMap[edge.source];
let target = idsMap[e.target]; let target = idsMap[edge.target];
let sourceHandleSplitted = e.sourceHandle.split("|"); let sourceHandleSplitted = edge.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 = edge.targetHandle.split("|");
let targetHandle = let targetHandle =
targetHandleSplitted.slice(0, -1).join("|") + "|" + target; targetHandleSplitted.slice(0, -1).join("|") + "|" + target;
let id = let id =
@ -433,7 +433,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
animated: targetHandle.split("|")[0] === "Text", animated: targetHandle.split("|")[0] === "Text",
selected: false, selected: false,
}, },
edges.map((e) => ({ ...e, selected: false })) edges.map((edge) => ({ ...edge, selected: false }))
); );
}); });
reactFlowInstance.setEdges(edges); reactFlowInstance.setEdges(edges);

4
src/frontend/src/contexts/typesContext.tsx
View file

@ -88,12 +88,12 @@ export function TypesProvider({ children }: { children: ReactNode }) {
function deleteNode(idx: string) { function deleteNode(idx: string) {
reactFlowInstance.setNodes( reactFlowInstance.setNodes(
reactFlowInstance.getNodes().filter((n: Node) => n.id !== idx) reactFlowInstance.getNodes().filter((node: Node) => node.id !== idx)
); );
reactFlowInstance.setEdges( reactFlowInstance.setEdges(
reactFlowInstance reactFlowInstance
.getEdges() .getEdges()
.filter((ns) => ns.source !== idx && ns.target !== idx) .filter((edge) => edge.source !== idx && edge.target !== idx)
); );
} }
return ( return (

8
src/frontend/src/contexts/undoRedoContext.tsx
View file

@ -45,14 +45,14 @@ export function UndoRedoProvider({ children }) {
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(() => []));
const [tabIndex, setTabIndex] = useState( const [tabIndex, setTabIndex] = useState(
flows.findIndex((f) => f.id === tabId) flows.findIndex((flow) => flow.id === tabId)
); );
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((flow, index) => (old[index] ? old[index] : [])));
setFuture((old) => flows.map((f, i) => (old[i] ? old[i] : []))); setFuture((old) => flows.map((flow, index) => (old[index] ? old[index] : [])));
setTabIndex(flows.findIndex((f) => f.id === tabId)); setTabIndex(flows.findIndex((flow) => flow.id === tabId));
}, [flows, tabId]); }, [flows, tabId]);
const { setNodes, setEdges, getNodes, getEdges } = useReactFlow(); const { setNodes, setEdges, getNodes, getEdges } = useReactFlow();

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

@ -181,22 +181,22 @@ const ApiModal = forwardRef(
function filterNodes() { function filterNodes() {
let arrNodesWithValues = []; let arrNodesWithValues = [];
flow["data"]["nodes"].forEach((t) => { flow["data"]["nodes"].forEach((node) => {
Object.keys(t["data"]["node"]["template"]) Object.keys(node["data"]["node"]["template"])
.filter( .filter(
(n) => (templateName) =>
n.charAt(0) !== "_" && templateName.charAt(0) !== "_" &&
t.data.node.template[n].show && node.data.node.template[templateName].show &&
(t.data.node.template[n].type === "str" || (node.data.node.template[templateName].type === "str" ||
t.data.node.template[n].type === "bool" || node.data.node.template[templateName].type === "bool" ||
t.data.node.template[n].type === "float" || node.data.node.template[templateName].type === "float" ||
t.data.node.template[n].type === "code" || node.data.node.template[templateName].type === "code" ||
t.data.node.template[n].type === "prompt" || node.data.node.template[templateName].type === "prompt" ||
t.data.node.template[n].type === "file" || node.data.node.template[templateName].type === "file" ||
t.data.node.template[n].type === "int") node.data.node.template[templateName].type === "int")
) )
.map((n, i) => { .map((n, i) => {
arrNodesWithValues.push(t["id"]); arrNodesWithValues.push(node["id"]);
}); });
}); });

144
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -49,13 +49,13 @@ const EditNodeModal = forwardRef(
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
let disabled = let disabled =
reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ?? reactFlowInstance?.getEdges().some((edge) => edge.targetHandle === data.id) ??
false; false;
function changeAdvanced(n) { function changeAdvanced(templateParam) {
setMyData((old) => { setMyData((old) => {
let newData = cloneDeep(old); let newData = cloneDeep(old);
newData.node.template[n].advanced = !newData.node.template[n].advanced; newData.node.template[templateParam].advanced = !newData.node.template[templateParam].advanced;
return newData; return newData;
}); });
} }
@ -112,51 +112,51 @@ const EditNodeModal = forwardRef(
<TableBody className="p-0"> <TableBody className="p-0">
{Object.keys(myData.node.template) {Object.keys(myData.node.template)
.filter( .filter(
(t) => (templateParam) =>
t.charAt(0) !== "_" && templateParam.charAt(0) !== "_" &&
myData.node.template[t].show && myData.node.template[templateParam].show &&
(myData.node.template[t].type === "str" || (myData.node.template[templateParam].type === "str" ||
myData.node.template[t].type === "bool" || myData.node.template[templateParam].type === "bool" ||
myData.node.template[t].type === "float" || myData.node.template[templateParam].type === "float" ||
myData.node.template[t].type === "code" || myData.node.template[templateParam].type === "code" ||
myData.node.template[t].type === "prompt" || myData.node.template[templateParam].type === "prompt" ||
myData.node.template[t].type === "file" || myData.node.template[templateParam].type === "file" ||
myData.node.template[t].type === "int") myData.node.template[templateParam].type === "int")
) )
.map((n, i) => ( .map((templateParam, index) => (
<TableRow key={i} className="h-10"> <TableRow key={index} className="h-10">
<TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3"> <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
{myData.node.template[n].name {myData.node.template[templateParam].name
? myData.node.template[n].name ? myData.node.template[templateParam].name
: myData.node.template[n].display_name} : myData.node.template[templateParam].display_name}
</TableCell> </TableCell>
<TableCell className="w-[300px] p-0 text-center text-xs text-foreground "> <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
{myData.node.template[n].type === "str" && {myData.node.template[templateParam].type === "str" &&
!myData.node.template[n].options ? ( !myData.node.template[templateParam].options ? (
<div className="mx-auto"> <div className="mx-auto">
{myData.node.template[n].list ? ( {myData.node.template[templateParam].list ? (
<InputListComponent <InputListComponent
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
value={ value={
!myData.node.template[n].value || !myData.node.template[templateParam].value ||
myData.node.template[n].value === "" myData.node.template[templateParam].value === ""
? [""] ? [""]
: myData.node.template[n].value : myData.node.template[templateParam].value
} }
onChange={(t: string[]) => { onChange={(value: string[]) => {
handleOnNewValue(t, n); handleOnNewValue(value, templateParam);
}} }}
/> />
) : myData.node.template[n].multiline ? ( ) : myData.node.template[templateParam].multiline ? (
<TextAreaComponent <TextAreaComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.node.template[n].value ?? "" myData.node.template[templateParam].value ?? ""
} }
onChange={(t: string) => { onChange={(value: string) => {
handleOnNewValue(t, n); handleOnNewValue(value, templateParam);
}} }}
/> />
) : ( ) : (
@ -164,105 +164,105 @@ const EditNodeModal = forwardRef(
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
password={ password={
myData.node.template[n].password ?? myData.node.template[templateParam].password ??
false false
} }
value={ value={
myData.node.template[n].value ?? "" myData.node.template[templateParam].value ?? ""
} }
onChange={(t) => { onChange={(value) => {
handleOnNewValue(t, n); handleOnNewValue(value, templateParam);
}} }}
/> />
)} )}
</div> </div>
) : myData.node.template[n].type === "bool" ? ( ) : myData.node.template[templateParam].type === "bool" ? (
<div className="ml-auto"> <div className="ml-auto">
{" "} {" "}
<ToggleShadComponent <ToggleShadComponent
disabled={disabled} disabled={disabled}
enabled={myData.node.template[n].value} enabled={myData.node.template[templateParam].value}
setEnabled={(t) => { setEnabled={(isEnabled) => {
handleOnNewValue(t, n); handleOnNewValue(isEnabled, templateParam);
}} }}
size="small" size="small"
/> />
</div> </div>
) : myData.node.template[n].type === "float" ? ( ) : myData.node.template[templateParam].type === "float" ? (
<div className="mx-auto"> <div className="mx-auto">
<FloatComponent <FloatComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={myData.node.template[n].value ?? ""} value={myData.node.template[templateParam].value ?? ""}
onChange={(t) => { onChange={(value) => {
handleOnNewValue(t, n); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.node.template[n].type === "str" && ) : myData.node.template[templateParam].type === "str" &&
myData.node.template[n].options ? ( myData.node.template[templateParam].options ? (
<div className="mx-auto"> <div className="mx-auto">
<Dropdown <Dropdown
numberOfOptions={nodeLength} numberOfOptions={nodeLength}
editNode={true} editNode={true}
options={myData.node.template[n].options} options={myData.node.template[templateParam].options}
onSelect={(t) => handleOnNewValue(t, n)} onSelect={(value) => handleOnNewValue(value, templateParam)}
value={ value={
myData.node.template[n].value ?? myData.node.template[templateParam].value ??
"Choose an option" "Choose an option"
} }
></Dropdown> ></Dropdown>
</div> </div>
) : myData.node.template[n].type === "int" ? ( ) : myData.node.template[templateParam].type === "int" ? (
<div className="mx-auto"> <div className="mx-auto">
<IntComponent <IntComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={myData.node.template[n].value ?? ""} value={myData.node.template[templateParam].value ?? ""}
onChange={(t) => { onChange={(value) => {
handleOnNewValue(t, n); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.node.template[n].type === "file" ? ( ) : myData.node.template[templateParam].type === "file" ? (
<div className="mx-auto"> <div className="mx-auto">
<InputFileComponent <InputFileComponent
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
value={myData.node.template[n].value ?? ""} value={myData.node.template[templateParam].value ?? ""}
onChange={(t: string) => { onChange={(value: string) => {
handleOnNewValue(t, n); handleOnNewValue(value, templateParam);
}} }}
fileTypes={ fileTypes={
myData.node.template[n].fileTypes myData.node.template[templateParam].fileTypes
} }
suffixes={myData.node.template[n].suffixes} suffixes={myData.node.template[templateParam].suffixes}
onFileChange={(t: string) => { onFileChange={(filePath: string) => {
data.node.template[n].file_path = t; data.node.template[templateParam].file_path = filePath;
}} }}
></InputFileComponent> ></InputFileComponent>
</div> </div>
) : myData.node.template[n].type === "prompt" ? ( ) : myData.node.template[templateParam].type === "prompt" ? (
<div className="mx-auto"> <div className="mx-auto">
<PromptAreaComponent <PromptAreaComponent
field_name={n} field_name={templateParam}
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
nodeClass={myData.node} nodeClass={myData.node}
setNodeClass={(nodeClass) => { setNodeClass={(nodeClass) => {
myData.node = nodeClass; myData.node = nodeClass;
}} }}
value={myData.node.template[n].value ?? ""} value={myData.node.template[templateParam].value ?? ""}
onChange={(t: string) => { onChange={(value: string) => {
handleOnNewValue(t, n); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.node.template[n].type === "code" ? ( ) : myData.node.template[templateParam].type === "code" ? (
<div className="mx-auto"> <div className="mx-auto">
<CodeAreaComponent <CodeAreaComponent
dynamic={ dynamic={
data.node.template[n].dynamic ?? false data.node.template[templateParam].dynamic ?? false
} }
setNodeClass={(nodeClass) => { setNodeClass={(nodeClass) => {
data.node = nodeClass; data.node = nodeClass;
@ -270,13 +270,13 @@ const EditNodeModal = forwardRef(
nodeClass={data.node} nodeClass={data.node}
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={myData.node.template[n].value ?? ""} value={myData.node.template[templateParam].value ?? ""}
onChange={(t: string) => { onChange={(value: string) => {
handleOnNewValue(t, n); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.node.template[n].type === "Any" ? ( ) : myData.node.template[templateParam].type === "Any" ? (
"-" "-"
) : ( ) : (
<div className="hidden"></div> <div className="hidden"></div>
@ -285,8 +285,8 @@ const EditNodeModal = forwardRef(
<TableCell className="p-0 text-right"> <TableCell className="p-0 text-right">
<div className="items-center text-center"> <div className="items-center text-center">
<ToggleShadComponent <ToggleShadComponent
enabled={!myData.node.template[n].advanced} enabled={!myData.node.template[templateParam].advanced}
setEnabled={(e) => changeAdvanced(n)} setEnabled={(e) => changeAdvanced(templateParam)}
disabled={disabled} disabled={disabled}
size="small" size="small"
/> />

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

@ -12,10 +12,10 @@ const ExportModal = forwardRef((props: { children: ReactNode }, ref) => {
const { flows, tabId, updateFlow, downloadFlow, saveFlow } = const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
useContext(TabsContext); useContext(TabsContext);
const [checked, setChecked] = useState(false); const [checked, setChecked] = useState(false);
const [name, setName] = useState(flows.find((f) => f.id === tabId).name); const [name, setName] = useState(flows.find((flow) => flow.id === tabId).name);
const [invalidName, setInvalidName] = useState(false); const [invalidName, setInvalidName] = useState(false);
const [description, setDescription] = useState( const [description, setDescription] = useState(
flows.find((f) => f.id === tabId).description flows.find((flow) => flow.id === tabId).description
); );
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
return ( return (
@ -59,13 +59,13 @@ const ExportModal = forwardRef((props: { children: ReactNode }, ref) => {
onClick={() => { onClick={() => {
if (checked) if (checked)
downloadFlow( downloadFlow(
flows.find((f) => f.id === tabId), flows.find((flow) => flow.id === tabId),
name, name,
description description
); );
else else
downloadFlow( downloadFlow(
removeApiKeys(flows.find((f) => f.id === tabId)), removeApiKeys(flows.find((flow) => flow.id === tabId)),
name, name,
description description
); );

6
src/frontend/src/modals/flowSettingsModal/index.tsx
View file

@ -19,14 +19,14 @@ export default function FlowSettingsModal({
const { flows, tabId, updateFlow, setTabsState, saveFlow } = const { flows, tabId, updateFlow, setTabsState, saveFlow } =
useContext(TabsContext); useContext(TabsContext);
const maxLength = 50; const maxLength = 50;
const [name, setName] = useState(flows.find((f) => f.id === tabId).name); const [name, setName] = useState(flows.find((flow) => flow.id === tabId).name);
const [description, setDescription] = useState( const [description, setDescription] = useState(
flows.find((f) => f.id === tabId).description flows.find((flow) => flow.id === tabId).description
); );
const [invalidName, setInvalidName] = useState(false); const [invalidName, setInvalidName] = useState(false);
function handleClick() { function handleClick() {
let savedFlow = flows.find((f) => f.id === tabId); let savedFlow = flows.find((flow) => flow.id === tabId);
savedFlow.name = name; savedFlow.name = name;
savedFlow.description = description; savedFlow.description = description;
saveFlow(savedFlow); saveFlow(savedFlow);

4
src/frontend/src/modals/formModal/chatInput/index.tsx
View file

@ -46,8 +46,8 @@ export default function ChatInput({
}`, }`,
}} }}
value={lockChat ? "Thinking..." : chatValue} value={lockChat ? "Thinking..." : chatValue}
onChange={(e) => { onChange={(event) => {
setChatValue(e.target.value); setChatValue(event.target.value);
}} }}
className={classNames( className={classNames(
lockChat lockChat

56
src/frontend/src/modals/formModal/index.tsx
View file

@ -46,7 +46,7 @@ export default function FormModal({
const handleKeys = formKeysData.handle_keys; const handleKeys = formKeysData.handle_keys;
const keyToUse = Object.keys(inputKeys).find( const keyToUse = Object.keys(inputKeys).find(
(k) => !handleKeys.some((j) => j === k) && inputKeys[k] === "" (key) => !handleKeys.some((j) => j === key) && inputKeys[key] === ""
); );
return inputKeys[keyToUse]; return inputKeys[keyToUse];
@ -69,9 +69,9 @@ export default function FormModal({
const tabsStateFlowIdFormKeysData = tabsStateFlowId.formKeysData; const tabsStateFlowIdFormKeysData = tabsStateFlowId.formKeysData;
const [chatKey, setChatKey] = useState( const [chatKey, setChatKey] = useState(
Object.keys(tabsState[flow.id].formKeysData.input_keys).find( Object.keys(tabsState[flow.id].formKeysData.input_keys).find(
(k) => (key) =>
!tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k) && !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === key) &&
tabsState[flow.id].formKeysData.input_keys[k] === "" tabsState[flow.id].formKeysData.input_keys[key] === ""
) )
); );
@ -420,13 +420,13 @@ export default function FormModal({
</div> </div>
{Object.keys(tabsState[id.current].formKeysData.input_keys).map( {Object.keys(tabsState[id.current].formKeysData.input_keys).map(
(i, k) => ( (key, index) => (
<div className="file-component-accordion-div" key={k}> <div className="file-component-accordion-div" key={index}>
<AccordionComponent <AccordionComponent
trigger={ trigger={
<div className="file-component-badge-div"> <div className="file-component-badge-div">
<Badge variant="gray" size="md"> <Badge variant="gray" size="md">
{i} {key}
</Badge> </Badge>
<div <div
@ -436,24 +436,24 @@ export default function FormModal({
}} }}
> >
<ToggleShadComponent <ToggleShadComponent
enabled={chatKey === i} enabled={chatKey === key}
setEnabled={(value) => setEnabled={(value) =>
handleOnCheckedChange(value, i) handleOnCheckedChange(value, key)
} }
size="small" size="small"
disabled={tabsState[ disabled={tabsState[
id.current id.current
].formKeysData.handle_keys.some((t) => t === i)} ].formKeysData.handle_keys.some((t) => t === key)}
/> />
</div> </div>
</div> </div>
} }
key={k} key={index}
keyValue={i} keyValue={key}
> >
<div className="file-component-tab-column"> <div className="file-component-tab-column">
{tabsState[id.current].formKeysData.handle_keys.some( {tabsState[id.current].formKeysData.handle_keys.some(
(t) => t === i (t) => t === key
) && ( ) && (
<div className="font-normal text-muted-foreground "> <div className="font-normal text-muted-foreground ">
Source: Component Source: Component
@ -462,18 +462,18 @@ export default function FormModal({
<Textarea <Textarea
className="custom-scroll" className="custom-scroll"
value={ value={
tabsState[id.current].formKeysData.input_keys[i] tabsState[id.current].formKeysData.input_keys[key]
} }
onChange={(e) => { onChange={(event) => {
setTabsState((old) => { setTabsState((old) => {
let newTabsState = _.cloneDeep(old); let newTabsState = _.cloneDeep(old);
newTabsState[id.current].formKeysData.input_keys[ newTabsState[id.current].formKeysData.input_keys[
i key
] = e.target.value; ] = event.target.value;
return newTabsState; return newTabsState;
}); });
}} }}
disabled={chatKey === i} disabled={chatKey === key}
placeholder="Enter text..." placeholder="Enter text..."
></Textarea> ></Textarea>
</div> </div>
@ -481,17 +481,17 @@ export default function FormModal({
</div> </div>
) )
)} )}
{tabsState[id.current].formKeysData.memory_keys.map((i, k) => ( {tabsState[id.current].formKeysData.memory_keys.map((key, index) => (
<div className="file-component-accordion-div" key={k}> <div className="file-component-accordion-div" key={index}>
<AccordionComponent <AccordionComponent
trigger={ trigger={
<div className="file-component-badge-div"> <div className="file-component-badge-div">
<Badge variant="gray" size="md"> <Badge variant="gray" size="md">
{i} {key}
</Badge> </Badge>
<div className="-mb-1"> <div className="-mb-1">
<ToggleShadComponent <ToggleShadComponent
enabled={chatKey === i} enabled={chatKey === key}
setEnabled={() => {}} setEnabled={() => {}}
size="small" size="small"
disabled={true} disabled={true}
@ -499,8 +499,8 @@ export default function FormModal({
</div> </div>
</div> </div>
} }
key={k} key={index}
keyValue={i} keyValue={key}
> >
<div className="file-component-tab-column"> <div className="file-component-tab-column">
<div className="font-normal text-muted-foreground "> <div className="font-normal text-muted-foreground ">
@ -529,14 +529,14 @@ export default function FormModal({
</div> </div>
<div ref={messagesRef} className="chat-message-div"> <div ref={messagesRef} className="chat-message-div">
{chatHistory.length > 0 ? ( {chatHistory.length > 0 ? (
chatHistory.map((c, i) => ( chatHistory.map((chat, index) => (
<ChatMessage <ChatMessage
lockChat={lockChat} lockChat={lockChat}
chat={c} chat={chat}
lastMessage={ lastMessage={
chatHistory.length - 1 === i ? true : false chatHistory.length - 1 === index ? true : false
} }
key={i} key={index}
/> />
)) ))
) : ( ) : (

10
src/frontend/src/modals/genericModal/index.tsx
View file

@ -208,9 +208,9 @@ export default function GenericModal({
setIsEdit(false); setIsEdit(false);
}} }}
autoFocus autoFocus
onChange={(e) => { onChange={(event) => {
setInputValue(e.target.value); setInputValue(event.target.value);
checkVariables(e.target.value); checkVariables(event.target.value);
}} }}
placeholder="Type message here." placeholder="Type message here."
/> />
@ -221,8 +221,8 @@ export default function GenericModal({
ref={ref} ref={ref}
className="form-input h-full w-full rounded-lg focus-visible:ring-1" className="form-input h-full w-full rounded-lg focus-visible:ring-1"
value={inputValue} value={inputValue}
onChange={(e) => { onChange={(event) => {
setInputValue(e.target.value); setInputValue(event.target.value);
}} }}
placeholder="Type message here." placeholder="Type message here."
/> />

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

@ -18,9 +18,9 @@ export default function DisclosureComponent({
<span className="components-disclosure-title">{title}</span> <span className="components-disclosure-title">{title}</span>
</div> </div>
<div className="components-disclosure-div"> <div className="components-disclosure-div">
{buttons.map((x, index) => ( {buttons.map((btn, index) => (
<button key={index} onClick={x.onClick}> <button key={index} onClick={btn.onClick}>
{x.Icon} {btn.Icon}
</button> </button>
))} ))}
<div> <div>

26
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -141,10 +141,10 @@ export default function Page({ flow }: { flow: FlowType }) {
}, [setExtraComponent, setExtraNavigation]); }, [setExtraComponent, setExtraNavigation]);
const onEdgesChangeMod = useCallback( const onEdgesChangeMod = useCallback(
(s: EdgeChange[]) => { (change: EdgeChange[]) => {
onEdgesChange(s); onEdgesChange(change);
setNodes((x) => { setNodes((node) => {
let newX = _.cloneDeep(x); let newX = _.cloneDeep(node);
return newX; return newX;
}); });
setTabsState((prev) => { setTabsState((prev) => {
@ -161,8 +161,8 @@ export default function Page({ flow }: { flow: FlowType }) {
); );
const onNodesChangeMod = useCallback( const onNodesChangeMod = useCallback(
(s: NodeChange[]) => { (change: NodeChange[]) => {
onNodesChange(s); onNodesChange(change);
setTabsState((prev) => { setTabsState((prev) => {
return { return {
...prev, ...prev,
@ -193,8 +193,8 @@ export default function Page({ flow }: { flow: FlowType }) {
eds eds
) )
); );
setNodes((x) => { setNodes((node) => {
let newX = _.cloneDeep(x); let newX = _.cloneDeep(node);
return newX; return newX;
}); });
}, },
@ -219,7 +219,7 @@ export default function Page({ flow }: { flow: FlowType }) {
const onDragOver = useCallback((event: React.DragEvent) => { const onDragOver = useCallback((event: React.DragEvent) => {
event.preventDefault(); event.preventDefault();
if (event.dataTransfer.types.some((t) => t === "nodedata")) { if (event.dataTransfer.types.some((types) => types === "nodedata")) {
event.dataTransfer.dropEffect = "move"; event.dataTransfer.dropEffect = "move";
} else { } else {
event.dataTransfer.dropEffect = "copy"; event.dataTransfer.dropEffect = "copy";
@ -229,7 +229,7 @@ export default function Page({ flow }: { flow: FlowType }) {
const onDrop = useCallback( const onDrop = useCallback(
(event: React.DragEvent) => { (event: React.DragEvent) => {
event.preventDefault(); event.preventDefault();
if (event.dataTransfer.types.some((t) => t === "nodedata")) { if (event.dataTransfer.types.some((types) => types === "nodedata")) {
takeSnapshot(); takeSnapshot();
// Get the current bounds of the ReactFlow wrapper element // Get the current bounds of the ReactFlow wrapper element
@ -281,7 +281,7 @@ export default function Page({ flow }: { flow: FlowType }) {
// Add the new node to the list of nodes in state // Add the new node to the list of nodes in state
} }
setNodes((nds) => nds.concat(newNode)); setNodes((nds) => nds.concat(newNode));
} else if (event.dataTransfer.types.some((t) => t === "Files")) { } else if (event.dataTransfer.types.some((types) => types === "Files")) {
takeSnapshot(); takeSnapshot();
uploadFlow(false, event.dataTransfer.files.item(0)); uploadFlow(false, event.dataTransfer.files.item(0));
} }
@ -303,7 +303,7 @@ export default function Page({ flow }: { flow: FlowType }) {
takeSnapshot(); takeSnapshot();
setEdges( setEdges(
edges.filter( edges.filter(
(ns) => !mynodes.some((n) => ns.source === n.id || ns.target === n.id) (edge) => !mynodes.some((node) => edge.source === node.id || edge.target === node.id)
) )
); );
}, },
@ -326,7 +326,7 @@ export default function Page({ flow }: { flow: FlowType }) {
const onEdgeUpdateEnd = useCallback((_, edge) => { const onEdgeUpdateEnd = useCallback((_, edge) => {
if (!edgeUpdateSuccessful.current) { if (!edgeUpdateSuccessful.current) {
setEdges((eds) => eds.filter((e) => e.id !== edge.id)); setEdges((eds) => eds.filter((edg) => edg.id !== edge.id));
} }
edgeUpdateSuccessful.current = true; edgeUpdateSuccessful.current = true;

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

@ -56,7 +56,7 @@ export default function ExtraSidebar() {
return ret; return ret;
}); });
} }
const flow = flows.find((f) => f.id === tabId); const flow = flows.find((flow) => flow.id === tabId);
useEffect(() => { useEffect(() => {
// show components with error on load // show components with error on load
let errors = []; let errors = [];
@ -143,10 +143,10 @@ export default function ExtraSidebar() {
id="search" id="search"
placeholder="Search" placeholder="Search"
className="nopan nodrag noundo nocopy input-search" className="nopan nodrag noundo nocopy input-search"
onChange={(e) => { onChange={(event) => {
handleSearchInput(e.target.value); handleSearchInput(event.target.value);
// Set search input state // Set search input state
setSearch(e.target.value); setSearch(event.target.value);
}} }}
/> />
<div className="search-icon"> <div className="search-icon">
@ -161,42 +161,42 @@ export default function ExtraSidebar() {
<div className="side-bar-components-div-arrangement"> <div className="side-bar-components-div-arrangement">
{Object.keys(dataFilter) {Object.keys(dataFilter)
.sort() .sort()
.map((d: keyof APIObjectType, i) => .map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[d]).length > 0 ? ( Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<DisclosureComponent <DisclosureComponent
openDisc={search.length == 0 ? false : true} openDisc={search.length == 0 ? false : true}
key={i} key={index}
button={{ button={{
title: nodeNames[d] ?? nodeNames.unknown, title: nodeNames[SBSectionName] ?? nodeNames.unknown,
Icon: nodeIconsLucide[d] ?? nodeIconsLucide.unknown, Icon: nodeIconsLucide[SBSectionName] ?? nodeIconsLucide.unknown,
}} }}
> >
<div className="side-bar-components-gap"> <div className="side-bar-components-gap">
{Object.keys(dataFilter[d]) {Object.keys(dataFilter[SBSectionName])
.sort() .sort()
.map((t: string, k) => ( .map((SBItemName: string, index) => (
<ShadTooltip <ShadTooltip
content={data[d][t].display_name} content={data[SBSectionName][SBItemName].display_name}
side="right" side="right"
key={k} key={index}
> >
<div key={k} data-tooltip-id={t}> <div key={index} data-tooltip-id={SBItemName}>
<div <div
draggable={!data[d][t].error} draggable={!data[SBSectionName][SBItemName].error}
className={ className={
"side-bar-components-border bg-background" + "side-bar-components-border bg-background" +
(data[d][t].error (data[SBSectionName][SBItemName].error
? " cursor-not-allowed select-none" ? " cursor-not-allowed select-none"
: "") : "")
} }
style={{ style={{
borderLeftColor: borderLeftColor:
nodeColors[d] ?? nodeColors.unknown, nodeColors[SBSectionName] ?? nodeColors.unknown,
}} }}
onDragStart={(event) => onDragStart={(event) =>
onDragStart(event, { onDragStart(event, {
type: t, type: SBItemName,
node: data[d][t], node: data[SBSectionName][SBItemName],
}) })
} }
onDragEnd={() => { onDragEnd={() => {
@ -209,7 +209,7 @@ export default function ExtraSidebar() {
> >
<div className="side-bar-components-div-form"> <div className="side-bar-components-div-form">
<span className="side-bar-components-text"> <span className="side-bar-components-text">
{data[d][t].display_name} {data[SBSectionName][SBItemName].display_name}
</span> </span>
<IconComponent <IconComponent
name="Menu" name="Menu"
@ -223,7 +223,7 @@ export default function ExtraSidebar() {
</div> </div>
</DisclosureComponent> </DisclosureComponent>
) : ( ) : (
<div key={i}></div> <div key={index}></div>
) )
)} )}
</div> </div>

22
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -9,17 +9,17 @@ import { classNames } from "../../../../utils/utils";
export default function NodeToolbarComponent({ data, setData, deleteNode }) { export default function NodeToolbarComponent({ data, setData, deleteNode }) {
const [nodeLength, setNodeLength] = useState( const [nodeLength, setNodeLength] = useState(
Object.keys(data.node.template).filter( Object.keys(data.node.template).filter(
(t) => (templateName) =>
t.charAt(0) !== "_" && templateName.charAt(0) !== "_" &&
data.node.template[t].show && data.node.template[templateName].show &&
(data.node.template[t].type === "str" || (data.node.template[templateName].type === "str" ||
data.node.template[t].type === "bool" || data.node.template[templateName].type === "bool" ||
data.node.template[t].type === "float" || data.node.template[templateName].type === "float" ||
data.node.template[t].type === "code" || data.node.template[templateName].type === "code" ||
data.node.template[t].type === "prompt" || data.node.template[templateName].type === "prompt" ||
data.node.template[t].type === "file" || data.node.template[templateName].type === "file" ||
data.node.template[t].type === "Any" || data.node.template[templateName].type === "Any" ||
data.node.template[t].type === "int") data.node.template[templateName].type === "int")
).length ).length
); );

60
src/frontend/src/utils/reactflowUtils.ts
View file

@ -15,7 +15,7 @@ export function cleanEdges({
const sourceNode = nodes.find((node) => node.id === edge.source); const sourceNode = nodes.find((node) => node.id === edge.source);
const targetNode = nodes.find((node) => node.id === edge.target); const targetNode = nodes.find((node) => node.id === edge.target);
if (!sourceNode || !targetNode) { if (!sourceNode || !targetNode) {
newEdges = newEdges.filter((e) => e.id !== edge.id); newEdges = newEdges.filter((edg) => edg.id !== edge.id);
} }
// check if the source and target handle still exists // check if the source and target handle still exists
if (sourceNode && targetNode) { if (sourceNode && targetNode) {
@ -41,7 +41,7 @@ export function cleanEdges({
...sourceNode.data.node.base_classes, ...sourceNode.data.node.base_classes,
].join("|"); ].join("|");
if (id !== sourceHandle) { if (id !== sourceHandle) {
newEdges = newEdges.filter((e) => e.id !== edge.id); newEdges = newEdges.filter((edg) => edg.id !== edge.id);
} }
} }
} }
@ -57,15 +57,15 @@ export function isValidConnection(
targetHandle targetHandle
.split("|")[0] .split("|")[0]
.split(";") .split(";")
.some((n) => n === sourceHandle.split("|")[0]) || .some((target) => target === sourceHandle.split("|")[0]) ||
sourceHandle sourceHandle
.split("|") .split("|")
.slice(2) .slice(2)
.some((t) => .some((target) =>
targetHandle targetHandle
.split("|")[0] .split("|")[0]
.split(";") .split(";")
.some((n) => n === t) .some((n) => n === target)
) || ) ||
targetHandle.split("|")[0] === "str" targetHandle.split("|")[0] === "str"
) { ) {
@ -129,35 +129,35 @@ export function updateTemplate(
export function updateIds(newFlow, getNodeId) { export function updateIds(newFlow, getNodeId) {
let idsMap = {}; let idsMap = {};
newFlow.nodes.forEach((n: NodeType) => { newFlow.nodes.forEach((node: NodeType) => {
// Generate a unique node ID // Generate a unique node ID
let newId = getNodeId(n.data.type); let newId = getNodeId(node.data.type);
idsMap[n.id] = newId; idsMap[node.id] = newId;
n.id = newId; node.id = newId;
n.data.id = newId; node.data.id = newId;
// Add the new node to the list of nodes in state // Add the new node to the list of nodes in state
}); });
newFlow.edges.forEach((e) => { newFlow.edges.forEach((edge) => {
e.source = idsMap[e.source]; edge.source = idsMap[edge.source];
e.target = idsMap[e.target]; edge.target = idsMap[edge.target];
let sourceHandleSplitted = e.sourceHandle.split("|"); let sourceHandleSplitted = edge.sourceHandle.split("|");
e.sourceHandle = edge.sourceHandle =
sourceHandleSplitted[0] + sourceHandleSplitted[0] +
"|" + "|" +
e.source + edge.source +
"|" + "|" +
sourceHandleSplitted.slice(2).join("|"); sourceHandleSplitted.slice(2).join("|");
let targetHandleSplitted = e.targetHandle.split("|"); let targetHandleSplitted = edge.targetHandle.split("|");
e.targetHandle = edge.targetHandle =
targetHandleSplitted.slice(0, -1).join("|") + "|" + e.target; targetHandleSplitted.slice(0, -1).join("|") + "|" + edge.target;
e.id = edge.id =
"reactflow__edge-" + "reactflow__edge-" +
e.source + edge.source +
e.sourceHandle + edge.sourceHandle +
"-" + "-" +
e.target + edge.target +
e.targetHandle; edge.targetHandle;
}); });
} }
@ -169,10 +169,10 @@ export function buildTweaks(flow) {
} }
export function validateNode( export function validateNode(
n: NodeType, node: NodeType,
reactFlowInstance: ReactFlowInstance reactFlowInstance: ReactFlowInstance
): Array<string> { ): Array<string> {
if (!n.data?.node?.template || !Object.keys(n.data.node.template)) { if (!node.data?.node?.template || !Object.keys(node.data.node.template)) {
return [ return [
"We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!", "We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!",
]; ];
@ -181,7 +181,7 @@ export function validateNode(
const { const {
type, type,
node: { template }, node: { template },
} = n.data; } = node.data;
return Object.keys(template).reduce( return Object.keys(template).reduce(
(errors: Array<string>, t) => (errors: Array<string>, t) =>
@ -194,9 +194,9 @@ export function validateNode(
!reactFlowInstance !reactFlowInstance
.getEdges() .getEdges()
.some( .some(
(e) => (edge) =>
e.targetHandle.split("|")[1] === t && edge.targetHandle.split("|")[1] === t &&
e.targetHandle.split("|")[2] === n.id edge.targetHandle.split("|")[2] === node.id
) )
? [ ? [
`${type} is missing ${ `${type} is missing ${

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

@ -103,14 +103,15 @@ export function groupByFamily(data, baseClasses, left, flow?: NodeType[]) {
"int", "int",
]); ]);
const checkBaseClass = (t: any) => const checkBaseClass = (template: any) =>
t.type && template.type &&
t.show && template.show &&
((!excludeTypes.has(t.type) && baseClassesSet.has(t.type)) || ((!excludeTypes.has(template.type) && baseClassesSet.has(template.type)) ||
(t.input_types && t.input_types.some((x) => baseClassesSet.has(x)))); (template.input_types && template.input_types.some((inputType) => baseClassesSet.has(inputType))));
if (flow) { if (flow) {
for (const node of flow) { for (const node of flow) {
console.log(node)
const nodeData = node.data; const nodeData = node.data;
const foundNode = checkedNodes.get(nodeData.type); const foundNode = checkedNodes.get(nodeData.type);
checkedNodes.set(nodeData.type, { checkedNodes.set(nodeData.type, {