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

format code and fix merge errors generated after conflict

Browse source
This commit is contained in:
anovazzi1 2023-08-08 20:53:39 -03:00
commit fccb004248
13 changed files with 439 additions and 277 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -69,7 +69,8 @@ export default function ParameterComponent({
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
let disabled = let disabled =
reactFlowInstance?.getEdges().some((edge) => edge.targetHandle === id) ?? false; reactFlowInstance?.getEdges().some((edge) => edge.targetHandle === id) ??
false;
const { data: myData } = useContext(typesContext); const { data: myData } = useContext(typesContext);

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

@ -166,8 +166,9 @@ export default function GenericNode({
!data.node.template[templateName].advanced ? ( !data.node.template[templateName].advanced ? (
<ParameterComponent <ParameterComponent
key={ key={
(data.node.template[templateName].input_types?.join(";") ?? (data.node.template[templateName].input_types?.join(
data.node.template[templateName].type) + ";"
) ?? data.node.template[templateName].type) +
"|" + "|" +
templateName + templateName +
"|" + "|" +
@ -176,7 +177,9 @@ export default function GenericNode({
data={data} data={data}
setData={setData} setData={setData}
color={ color={
nodeColors[types[data.node.template[templateName].type]] ?? nodeColors[
types[data.node.template[templateName].type]
] ??
nodeColors[data.node.template[templateName].type] ?? nodeColors[data.node.template[templateName].type] ??
nodeColors.unknown nodeColors.unknown
} }
@ -190,13 +193,15 @@ export default function GenericNode({
info={data.node.template[templateName].info} info={data.node.template[templateName].info}
name={templateName} name={templateName}
tooltipTitle={ tooltipTitle={
data.node.template[templateName].input_types?.join("\n") ?? data.node.template[templateName].input_types?.join(
data.node.template[templateName].type "\n"
) ?? data.node.template[templateName].type
} }
required={data.node.template[templateName].required} required={data.node.template[templateName].required}
id={ id={
(data.node.template[templateName].input_types?.join(";") ?? (data.node.template[templateName].input_types?.join(
data.node.template[templateName].type) + ";"
) ?? data.node.template[templateName].type) +
"|" + "|" +
templateName + templateName +
"|" + "|" +
@ -204,7 +209,9 @@ export default function GenericNode({
} }
left={true} left={true}
type={data.node.template[templateName].type} type={data.node.template[templateName].type}
optionalHandle={data.node.template[templateName].input_types} optionalHandle={
data.node.template[templateName].input_types
}
/> />
) : ( ) : (
<></> <></>

319
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -207,7 +207,9 @@ export default function CodeTabsComponent({
> >
{data.map((node: any, index) => ( {data.map((node: any, index) => (
<div className="px-3" key={index}> <div className="px-3" key={index}>
{tweaks.tweaksList.current.includes(node["data"]["id"]) && ( {tweaks.tweaksList.current.includes(
node["data"]["id"]
) && (
<AccordionComponent <AccordionComponent
trigger={node["data"]["id"]} trigger={node["data"]["id"]}
open={openAccordion} open={openAccordion}
@ -230,19 +232,22 @@ export default function CodeTabsComponent({
.filter( .filter(
(templateName) => (templateName) =>
templateName.charAt(0) !== "_" && templateName.charAt(0) !== "_" &&
node.data.node.template[templateName].show && node.data.node.template[templateName]
(node.data.node.template[templateName].type === "str" || .show &&
node.data.node.template[templateName].type === (node.data.node.template[templateName]
"bool" || .type === "str" ||
node.data.node.template[templateName].type === node.data.node.template[templateName]
"float" || .type === "bool" ||
node.data.node.template[templateName].type === node.data.node.template[templateName]
"code" || .type === "float" ||
node.data.node.template[templateName].type === node.data.node.template[templateName]
"prompt" || .type === "code" ||
node.data.node.template[templateName].type === node.data.node.template[templateName]
"file" || .type === "prompt" ||
node.data.node.template[templateName].type === "int") node.data.node.template[templateName]
.type === "file" ||
node.data.node.template[templateName]
.type === "int")
) )
.map((templateName, index) => { .map((templateName, index) => {
return ( return (
@ -255,22 +260,29 @@ export default function CodeTabsComponent({
</TableCell> </TableCell>
<TableCell className="p-0 text-xs text-foreground"> <TableCell className="p-0 text-xs text-foreground">
<div className="m-auto w-[250px]"> <div className="m-auto w-[250px]">
{node.data.node.template[templateName].type === {node.data.node.template[
"str" && templateName
!node.data.node.template[templateName].options ? ( ].type === "str" &&
!node.data.node.template[
templateName
].options ? (
<div className="mx-auto"> <div className="mx-auto">
{node.data.node.template[templateName] {node.data.node.template[
.list ? ( templateName
].list ? (
<InputListComponent <InputListComponent
editNode={true} editNode={true}
disabled={false} disabled={false}
value={ value={
!node.data.node.template[templateName] !node.data.node.template[
.value || templateName
node.data.node.template[templateName] ].value ||
.value === "" node.data.node.template[
templateName
].value === ""
? [""] ? [""]
: node.data.node.template[ : node.data.node
.template[
templateName templateName
].value ].value
} }
@ -288,16 +300,20 @@ export default function CodeTabsComponent({
tweaks.buildTweakObject( tweaks.buildTweakObject(
node["data"]["id"], node["data"]["id"],
target, target,
node.data.node.template[templateName] node.data.node.template[
templateName
]
); );
}} }}
/> />
) : node.data.node.template[templateName] ) : node.data.node.template[
.multiline ? ( templateName
].multiline ? (
<ShadTooltip <ShadTooltip
content={tweaks.buildContent( content={tweaks.buildContent(
node.data.node.template[templateName] node.data.node.template[
.value templateName
].value
)} )}
> >
<div> <div>
@ -305,16 +321,19 @@ export default function CodeTabsComponent({
disabled={false} disabled={false}
editNode={true} editNode={true}
value={ value={
!node.data.node.template[ !node.data.node
.template[
templateName templateName
].value || ].value ||
node.data.node.template[ node.data.node
.template[
templateName templateName
].value === "" ].value === ""
? "" ? ""
: node.data.node : node.data.node
.template[templateName] .template[
.value templateName
].value
} }
onChange={(target) => { onChange={(target) => {
setData((old) => { setData((old) => {
@ -331,7 +350,9 @@ export default function CodeTabsComponent({
node["data"]["id"], node["data"]["id"],
target, target,
node.data.node node.data.node
.template[templateName] .template[
templateName
]
); );
}} }}
/> />
@ -342,16 +363,20 @@ export default function CodeTabsComponent({
editNode={true} editNode={true}
disabled={false} disabled={false}
password={ password={
node.data.node.template[templateName] node.data.node.template[
.password ?? false templateName
].password ?? false
} }
value={ value={
!node.data.node.template[templateName] !node.data.node.template[
.value || templateName
node.data.node.template[templateName] ].value ||
.value === "" node.data.node.template[
templateName
].value === ""
? "" ? ""
: node.data.node.template[ : node.data.node
.template[
templateName templateName
].value ].value
} }
@ -369,20 +394,24 @@ export default function CodeTabsComponent({
tweaks.buildTweakObject( tweaks.buildTweakObject(
node["data"]["id"], node["data"]["id"],
target, target,
node.data.node.template[templateName] node.data.node.template[
templateName
]
); );
}} }}
/> />
)} )}
</div> </div>
) : node.data.node.template[templateName].type === ) : node.data.node.template[
"bool" ? ( templateName
].type === "bool" ? (
<div className="ml-auto"> <div className="ml-auto">
{" "} {" "}
<ToggleShadComponent <ToggleShadComponent
enabled={ enabled={
node.data.node.template[templateName] node.data.node.template[
.value templateName
].value
} }
setEnabled={(e) => { setEnabled={(e) => {
setData((old) => { setData((old) => {
@ -398,24 +427,30 @@ export default function CodeTabsComponent({
tweaks.buildTweakObject( tweaks.buildTweakObject(
node["data"]["id"], node["data"]["id"],
e, e,
node.data.node.template[templateName] node.data.node.template[
templateName
]
); );
}} }}
size="small" size="small"
disabled={false} disabled={false}
/> />
</div> </div>
) : node.data.node.template[templateName].type === ) : node.data.node.template[
"file" ? ( templateName
].type === "file" ? (
<ShadTooltip <ShadTooltip
content={tweaks.buildContent( content={tweaks.buildContent(
!node.data.node.template[templateName] !node.data.node.template[
.value || templateName
node.data.node.template[templateName] ].value ||
.value === "" node.data.node.template[
templateName
].value === ""
? "" ? ""
: node.data.node.template[templateName] : node.data.node.template[
.value templateName
].value
)} )}
> >
<div className="mx-auto"> <div className="mx-auto">
@ -423,17 +458,22 @@ export default function CodeTabsComponent({
editNode={true} editNode={true}
disabled={false} disabled={false}
value={ value={
node.data.node.template[templateName] node.data.node.template[
.value ?? "" templateName
].value ?? ""
} }
onChange={(target: any) => {}} onChange={(
target: any
) => {}}
fileTypes={ fileTypes={
node.data.node.template[templateName] node.data.node.template[
.fileTypes templateName
].fileTypes
} }
suffixes={ suffixes={
node.data.node.template[templateName] node.data.node.template[
.suffixes templateName
].suffixes
} }
onFileChange={( onFileChange={(
value: any value: any
@ -445,20 +485,24 @@ export default function CodeTabsComponent({
></InputFileComponent> ></InputFileComponent>
</div> </div>
</ShadTooltip> </ShadTooltip>
) : node.data.node.template[templateName].type === ) : node.data.node.template[
"float" ? ( templateName
].type === "float" ? (
<div className="mx-auto"> <div className="mx-auto">
<FloatComponent <FloatComponent
disabled={false} disabled={false}
editNode={true} editNode={true}
value={ value={
!node.data.node.template[templateName] !node.data.node.template[
.value || templateName
node.data.node.template[templateName] ].value ||
.value === "" node.data.node.template[
templateName
].value === ""
? "" ? ""
: node.data.node.template[templateName] : node.data.node.template[
.value templateName
].value
} }
onChange={(target) => { onChange={(target) => {
setData((old) => { setData((old) => {
@ -474,22 +518,27 @@ export default function CodeTabsComponent({
tweaks.buildTweakObject( tweaks.buildTweakObject(
node["data"]["id"], node["data"]["id"],
target, target,
node.data.node.template[templateName] node.data.node.template[
templateName
]
); );
}} }}
/> />
</div> </div>
) : node.data.node.template[templateName].type === ) : node.data.node.template[
"str" && templateName
node.data.node.template[templateName] ].type === "str" &&
.options ? ( node.data.node.template[
templateName
].options ? (
<div className="mx-auto"> <div className="mx-auto">
<Dropdown <Dropdown
editNode={true} editNode={true}
apiModal={true} apiModal={true}
options={ options={
node.data.node.template[templateName] node.data.node.template[
.options templateName
].options
} }
onSelect={(target) => { onSelect={(target) => {
setData((old) => { setData((old) => {
@ -505,34 +554,43 @@ export default function CodeTabsComponent({
tweaks.buildTweakObject( tweaks.buildTweakObject(
node["data"]["id"], node["data"]["id"],
target, target,
node.data.node.template[templateName] node.data.node.template[
templateName
]
); );
}} }}
value={ value={
!node.data.node.template[templateName] !node.data.node.template[
.value || templateName
node.data.node.template[templateName] ].value ||
.value === "" node.data.node.template[
templateName
].value === ""
? "" ? ""
: node.data.node.template[templateName] : node.data.node.template[
.value templateName
].value
} }
></Dropdown> ></Dropdown>
</div> </div>
) : node.data.node.template[templateName].type === ) : node.data.node.template[
"int" ? ( templateName
].type === "int" ? (
<div className="mx-auto"> <div className="mx-auto">
<IntComponent <IntComponent
disabled={false} disabled={false}
editNode={true} editNode={true}
value={ value={
!node.data.node.template[templateName] !node.data.node.template[
.value || templateName
node.data.node.template[templateName] ].value ||
.value === "" node.data.node.template[
templateName
].value === ""
? "" ? ""
: node.data.node.template[templateName] : node.data.node.template[
.value templateName
].value
} }
onChange={(target) => { onChange={(target) => {
setData((old) => { setData((old) => {
@ -548,22 +606,28 @@ export default function CodeTabsComponent({
tweaks.buildTweakObject( tweaks.buildTweakObject(
node["data"]["id"], node["data"]["id"],
target, target,
node.data.node.template[templateName] node.data.node.template[
templateName
]
); );
}} }}
/> />
</div> </div>
) : node.data.node.template[templateName].type === ) : node.data.node.template[
"prompt" ? ( templateName
].type === "prompt" ? (
<ShadTooltip <ShadTooltip
content={tweaks.buildContent( content={tweaks.buildContent(
!node.data.node.template[templateName] !node.data.node.template[
.value || templateName
node.data.node.template[templateName] ].value ||
.value === "" node.data.node.template[
templateName
].value === ""
? "" ? ""
: node.data.node.template[templateName] : node.data.node.template[
.value templateName
].value
)} )}
> >
<div className="mx-auto"> <div className="mx-auto">
@ -571,12 +635,15 @@ export default function CodeTabsComponent({
editNode={true} editNode={true}
disabled={false} disabled={false}
value={ value={
!node.data.node.template[templateName] !node.data.node.template[
.value || templateName
node.data.node.template[templateName] ].value ||
.value === "" node.data.node.template[
templateName
].value === ""
? "" ? ""
: node.data.node.template[ : node.data.node
.template[
templateName templateName
].value ].value
} }
@ -594,21 +661,27 @@ export default function CodeTabsComponent({
tweaks.buildTweakObject( tweaks.buildTweakObject(
node["data"]["id"], node["data"]["id"],
target, target,
node.data.node.template[templateName] node.data.node.template[
templateName
]
); );
}} }}
/> />
</div> </div>
</ShadTooltip> </ShadTooltip>
) : node.data.node.template[templateName].type === ) : node.data.node.template[
"code" ? ( templateName
].type === "code" ? (
<ShadTooltip <ShadTooltip
content={tweaks.buildContent( content={tweaks.buildContent(
tweaks.getValue( tweaks.getValue(
node.data.node.template[templateName] node.data.node.template[
.value, templateName
].value,
node.data, node.data,
node.data.node.template[templateName] node.data.node.template[
templateName
]
) )
)} )}
> >
@ -617,12 +690,15 @@ export default function CodeTabsComponent({
disabled={false} disabled={false}
editNode={true} editNode={true}
value={ value={
!node.data.node.template[templateName] !node.data.node.template[
.value || templateName
node.data.node.template[templateName] ].value ||
.value === "" node.data.node.template[
templateName
].value === ""
? "" ? ""
: node.data.node.template[ : node.data.node
.template[
templateName templateName
].value ].value
} }
@ -640,14 +716,17 @@ export default function CodeTabsComponent({
tweaks.buildTweakObject( tweaks.buildTweakObject(
node["data"]["id"], node["data"]["id"],
target, target,
node.data.node.template[templateName] node.data.node.template[
templateName
]
); );
}} }}
/> />
</div> </div>
</ShadTooltip> </ShadTooltip>
) : node.data.node.template[templateName].type === ) : node.data.node.template[
"Any" ? ( templateName
].type === "Any" ? (
"-" "-"
) : ( ) : (
<div className="hidden"></div> <div className="hidden"></div>

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

@ -34,9 +34,8 @@ 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((flow) => tabId === flow.id) !== -1 && tabId !== "" && ( {flows.findIndex((flow) => tabId === flow.id) !== -1 &&
<MenuBar flows={flows} tabId={tabId} /> tabId !== "" && <MenuBar flows={flows} tabId={tabId} />}
)}
</div> </div>
<div className="round-button-div"> <div className="round-button-div">
<Link to="/"> <Link to="/">

98
src/frontend/src/constants/constants.ts
View file

@ -509,49 +509,12 @@ export const URL_EXCLUDED_FROM_ERROR_RETRIES = [
"/api/v1/validate/prompt", "/api/v1/validate/prompt",
]; ];
export const tabsCode = [] export const tabsCode = [];
export function tabsArray(codes: string[], method: number) { export function tabsArray(codes: string[], method: number) {
if (!method) return if (!method) return;
if (method === 0) { if (method === 0) {
return ( return [
[
{
name: "cURL",
mode: "bash",
image: "https://curl.se/logo/curl-symbol-transparent.png",
language: "sh",
code: codes[0],
},
{
name: "Python API",
mode: "python",
image:
"https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
language: "py",
code: codes[1],
},
{
name: "Python Code",
mode: "python",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
language: "py",
code: codes[2],
},
{
name: "Chat Widget HTML",
description:
"Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://langflow.org/guidelines/widget'>documentation</a>.",
mode: "html",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
language: "py",
code: codes[3],
},
]
);
}
return (
[
{ {
name: "cURL", name: "cURL",
mode: "bash", mode: "bash",
@ -570,8 +533,8 @@ export function tabsArray(codes: string[], method: number) {
{ {
name: "Python Code", name: "Python Code",
mode: "python", mode: "python",
language: "py",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
language: "py",
code: codes[2], code: codes[2],
}, },
{ {
@ -583,13 +546,46 @@ export function tabsArray(codes: string[], method: number) {
language: "py", language: "py",
code: codes[3], code: codes[3],
}, },
{ ];
name: "Tweaks", }
mode: "python", return [
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", {
language: "py", name: "cURL",
code: codes[4], mode: "bash",
}, image: "https://curl.se/logo/curl-symbol-transparent.png",
] language: "sh",
); code: codes[0],
}; },
{
name: "Python API",
mode: "python",
image:
"https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
language: "py",
code: codes[1],
},
{
name: "Python Code",
mode: "python",
language: "py",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
code: codes[2],
},
{
name: "Chat Widget HTML",
description:
"Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://langflow.org/guidelines/widget'>documentation</a>.",
mode: "html",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
language: "py",
code: codes[3],
},
{
name: "Tweaks",
mode: "python",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
language: "py",
code: codes[4],
},
];
}

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

@ -318,7 +318,9 @@ export function TabsProvider({ children }: { children: ReactNode }) {
// add a change event listener to the file input // add a change event listener to the file input
input.onchange = (event: Event) => { input.onchange = (event: Event) => {
// check if the file type is application/json // check if the file type is application/json
if ((event.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 = (event.target as HTMLInputElement).files[0]; const file = (event.target as HTMLInputElement).files[0];
// read the file as text // read the file as text

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

@ -50,8 +50,12 @@ export function UndoRedoProvider({ children }) {
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((flow, index) => (old[index] ? old[index] : []))); setPast((old) =>
setFuture((old) => flows.map((flow, index) => (old[index] ? old[index] : []))); flows.map((flow, index) => (old[index] ? old[index] : []))
);
setFuture((old) =>
flows.map((flow, index) => (old[index] ? old[index] : []))
);
setTabIndex(flows.findIndex((flow) => flow.id === tabId)); setTabIndex(flows.findIndex((flow) => flow.id === tabId));
}, [flows, tabId]); }, [flows, tabId]);

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

@ -49,13 +49,15 @@ const EditNodeModal = forwardRef(
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
let disabled = let disabled =
reactFlowInstance?.getEdges().some((edge) => edge.targetHandle === data.id) ?? reactFlowInstance
false; ?.getEdges()
.some((edge) => edge.targetHandle === data.id) ?? false;
function changeAdvanced(templateParam) { function changeAdvanced(templateParam) {
setMyData((old) => { setMyData((old) => {
let newData = cloneDeep(old); let newData = cloneDeep(old);
newData.node.template[templateParam].advanced = !newData.node.template[templateParam].advanced; newData.node.template[templateParam].advanced =
!newData.node.template[templateParam].advanced;
return newData; return newData;
}); });
} }
@ -115,23 +117,32 @@ const EditNodeModal = forwardRef(
(templateParam) => (templateParam) =>
templateParam.charAt(0) !== "_" && templateParam.charAt(0) !== "_" &&
myData.node.template[templateParam].show && myData.node.template[templateParam].show &&
(myData.node.template[templateParam].type === "str" || (myData.node.template[templateParam].type ===
myData.node.template[templateParam].type === "bool" || "str" ||
myData.node.template[templateParam].type === "float" || myData.node.template[templateParam].type ===
myData.node.template[templateParam].type === "code" || "bool" ||
myData.node.template[templateParam].type === "prompt" || myData.node.template[templateParam].type ===
myData.node.template[templateParam].type === "file" || "float" ||
myData.node.template[templateParam].type === "int") myData.node.template[templateParam].type ===
"code" ||
myData.node.template[templateParam].type ===
"prompt" ||
myData.node.template[templateParam].type ===
"file" ||
myData.node.template[templateParam].type ===
"int")
) )
.map((templateParam, index) => ( .map((templateParam, index) => (
<TableRow key={index} 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[templateParam].name {myData.node.template[templateParam].name
? myData.node.template[templateParam].name ? myData.node.template[templateParam].name
: myData.node.template[templateParam].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[templateParam].type === "str" && {myData.node.template[templateParam].type ===
"str" &&
!myData.node.template[templateParam].options ? ( !myData.node.template[templateParam].options ? (
<div className="mx-auto"> <div className="mx-auto">
{myData.node.template[templateParam].list ? ( {myData.node.template[templateParam].list ? (
@ -139,21 +150,26 @@ const EditNodeModal = forwardRef(
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
value={ value={
!myData.node.template[templateParam].value || !myData.node.template[templateParam]
myData.node.template[templateParam].value === "" .value ||
myData.node.template[templateParam]
.value === ""
? [""] ? [""]
: myData.node.template[templateParam].value : myData.node.template[templateParam]
.value
} }
onChange={(value: string[]) => { onChange={(value: string[]) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
) : myData.node.template[templateParam].multiline ? ( ) : myData.node.template[templateParam]
.multiline ? (
<TextAreaComponent <TextAreaComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={ value={
myData.node.template[templateParam].value ?? "" myData.node.template[templateParam]
.value ?? ""
} }
onChange={(value: string) => { onChange={(value: string) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
@ -164,11 +180,12 @@ const EditNodeModal = forwardRef(
editNode={true} editNode={true}
disabled={disabled} disabled={disabled}
password={ password={
myData.node.template[templateParam].password ?? myData.node.template[templateParam]
false .password ?? false
} }
value={ value={
myData.node.template[templateParam].value ?? "" myData.node.template[templateParam]
.value ?? ""
} }
onChange={(value) => { onChange={(value) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
@ -176,73 +193,104 @@ const EditNodeModal = forwardRef(
/> />
)} )}
</div> </div>
) : myData.node.template[templateParam].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[templateParam].value} enabled={
myData.node.template[templateParam].value
}
setEnabled={(isEnabled) => { setEnabled={(isEnabled) => {
handleOnNewValue(isEnabled, templateParam); handleOnNewValue(
isEnabled,
templateParam
);
}} }}
size="small" size="small"
/> />
</div> </div>
) : myData.node.template[templateParam].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[templateParam].value ?? ""} value={
myData.node.template[templateParam]
.value ?? ""
}
onChange={(value) => { onChange={(value) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.node.template[templateParam].type === "str" && ) : myData.node.template[templateParam].type ===
"str" &&
myData.node.template[templateParam].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[templateParam].options} options={
onSelect={(value) => handleOnNewValue(value, templateParam)} myData.node.template[templateParam]
.options
}
onSelect={(value) =>
handleOnNewValue(value, templateParam)
}
value={ value={
myData.node.template[templateParam].value ?? myData.node.template[templateParam]
"Choose an option" .value ?? "Choose an option"
} }
></Dropdown> ></Dropdown>
</div> </div>
) : myData.node.template[templateParam].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[templateParam].value ?? ""} value={
myData.node.template[templateParam]
.value ?? ""
}
onChange={(value) => { onChange={(value) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.node.template[templateParam].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[templateParam].value ?? ""} value={
myData.node.template[templateParam]
.value ?? ""
}
onChange={(value: string) => { onChange={(value: string) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
fileTypes={ fileTypes={
myData.node.template[templateParam].fileTypes myData.node.template[templateParam]
.fileTypes
}
suffixes={
myData.node.template[templateParam]
.suffixes
} }
suffixes={myData.node.template[templateParam].suffixes}
onFileChange={(filePath: string) => { onFileChange={(filePath: string) => {
data.node.template[templateParam].file_path = filePath; data.node.template[
templateParam
].file_path = filePath;
}} }}
></InputFileComponent> ></InputFileComponent>
</div> </div>
) : myData.node.template[templateParam].type === "prompt" ? ( ) : myData.node.template[templateParam].type ===
"prompt" ? (
<div className="mx-auto"> <div className="mx-auto">
<PromptAreaComponent <PromptAreaComponent
field_name={templateParam} field_name={templateParam}
@ -252,17 +300,22 @@ const EditNodeModal = forwardRef(
setNodeClass={(nodeClass) => { setNodeClass={(nodeClass) => {
myData.node = nodeClass; myData.node = nodeClass;
}} }}
value={myData.node.template[templateParam].value ?? ""} value={
myData.node.template[templateParam]
.value ?? ""
}
onChange={(value: string) => { onChange={(value: string) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.node.template[templateParam].type === "code" ? ( ) : myData.node.template[templateParam].type ===
"code" ? (
<div className="mx-auto"> <div className="mx-auto">
<CodeAreaComponent <CodeAreaComponent
dynamic={ dynamic={
data.node.template[templateParam].dynamic ?? false data.node.template[templateParam]
.dynamic ?? false
} }
setNodeClass={(nodeClass) => { setNodeClass={(nodeClass) => {
data.node = nodeClass; data.node = nodeClass;
@ -270,13 +323,17 @@ const EditNodeModal = forwardRef(
nodeClass={data.node} nodeClass={data.node}
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={myData.node.template[templateParam].value ?? ""} value={
myData.node.template[templateParam]
.value ?? ""
}
onChange={(value: string) => { onChange={(value: string) => {
handleOnNewValue(value, templateParam); handleOnNewValue(value, templateParam);
}} }}
/> />
</div> </div>
) : myData.node.template[templateParam].type === "Any" ? ( ) : myData.node.template[templateParam].type ===
"Any" ? (
"-" "-"
) : ( ) : (
<div className="hidden"></div> <div className="hidden"></div>
@ -285,8 +342,13 @@ 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[templateParam].advanced} enabled={
setEnabled={(e) => changeAdvanced(templateParam)} !myData.node.template[templateParam]
.advanced
}
setEnabled={(e) =>
changeAdvanced(templateParam)
}
disabled={disabled} disabled={disabled}
size="small" size="small"
/> />

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

@ -12,7 +12,9 @@ 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((flow) => flow.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((flow) => flow.id === tabId).description flows.find((flow) => flow.id === tabId).description

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

@ -19,7 +19,9 @@ 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((flow) => flow.id === tabId).name); const [name, setName] = useState(
flows.find((flow) => flow.id === tabId).name
);
const [description, setDescription] = useState( const [description, setDescription] = useState(
flows.find((flow) => flow.id === tabId).description flows.find((flow) => flow.id === tabId).description
); );

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

@ -70,9 +70,9 @@ export default function FormModal({
const [chatKey, setChatKey] = useState(() => { const [chatKey, setChatKey] = useState(() => {
if (tabsState[flow.id]?.formKeysData?.input_keys) { if (tabsState[flow.id]?.formKeysData?.input_keys) {
return Object.keys(tabsState[flow.id].formKeysData.input_keys).find( return 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] === ""
); );
} }
// TODO: return a sensible default // TODO: return a sensible default
@ -425,13 +425,13 @@ export default function FormModal({
{tabsState[id.current]?.formKeysData?.input_keys {tabsState[id.current]?.formKeysData?.input_keys
? Object.keys( ? Object.keys(
tabsState[id.current].formKeysData.input_keys tabsState[id.current].formKeysData.input_keys
).map((i, k) => ( ).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 <div
@ -441,24 +441,26 @@ 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
@ -467,18 +469,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={(e) => {
setTabsState((old) => { setTabsState((old) => {
let newTabsState = _.cloneDeep(old); let newTabsState = _.cloneDeep(old);
newTabsState[ newTabsState[
id.current id.current
].formKeysData.input_keys[i] = e.target.value; ].formKeysData.input_keys[key] = e.target.value;
return newTabsState; return newTabsState;
}); });
}} }}
disabled={chatKey === i} disabled={chatKey === key}
placeholder="Enter text..." placeholder="Enter text..."
></Textarea> ></Textarea>
</div> </div>
@ -486,35 +488,37 @@ export default function FormModal({
</div> </div>
)) ))
: null} : null}
{tabsState[id.current].formKeysData.memory_keys.map((i, k) => ( {tabsState[id.current].formKeysData.memory_keys.map(
<div className="file-component-accordion-div" key={k}> (key, index) => (
<AccordionComponent <div className="file-component-accordion-div" key={index}>
trigger={ <AccordionComponent
<div className="file-component-badge-div"> trigger={
<Badge variant="gray" size="md"> <div className="file-component-badge-div">
{key} <Badge variant="gray" size="md">
</Badge> {key}
<div className="-mb-1"> </Badge>
<ToggleShadComponent <div className="-mb-1">
enabled={chatKey === key} <ToggleShadComponent
setEnabled={() => {}} enabled={chatKey === key}
size="small" setEnabled={() => {}}
disabled={true} size="small"
/> disabled={true}
/>
</div>
</div>
}
key={index}
keyValue={key}
>
<div className="file-component-tab-column">
<div className="font-normal text-muted-foreground ">
Source: Memory
</div> </div>
</div> </div>
} </AccordionComponent>
key={index} </div>
keyValue={key} )
> )}
<div className="file-component-tab-column">
<div className="font-normal text-muted-foreground ">
Source: Memory
</div>
</div>
</AccordionComponent>
</div>
))}
</div> </div>
<div className="eraser-column-arrangement"> <div className="eraser-column-arrangement">
<div className="eraser-size"> <div className="eraser-size">

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

@ -303,7 +303,10 @@ export default function Page({ flow }: { flow: FlowType }) {
takeSnapshot(); takeSnapshot();
setEdges( setEdges(
edges.filter( edges.filter(
(edge) => !mynodes.some((node) => edge.source === node.id || edge.target === node.id) (edge) =>
!mynodes.some(
(node) => edge.source === node.id || edge.target === node.id
)
) )
); );
}, },

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

@ -168,7 +168,8 @@ export default function ExtraSidebar() {
key={index} key={index}
button={{ button={{
title: nodeNames[SBSectionName] ?? nodeNames.unknown, title: nodeNames[SBSectionName] ?? nodeNames.unknown,
Icon: nodeIconsLucide[SBSectionName] ?? nodeIconsLucide.unknown, Icon:
nodeIconsLucide[SBSectionName] ?? nodeIconsLucide.unknown,
}} }}
> >
<div className="side-bar-components-gap"> <div className="side-bar-components-gap">