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

refactoring data passed by the event

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-19 23:26:41 -03:00
commit 5ead7c4c32
7 changed files with 57 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

12
space_flow/src/CustomNodes/BooleanNode/index.tsx
View file

@ -3,17 +3,19 @@ import { Input } from "@mui/material";
import { Handle, Position } from "reactflow";
import { isValidConnection, nodeColors } from "../../utils";
import ToggleComponent from "../../components/toggleComponent";
import { useEffect, useState } from "react";
import { useContext, useEffect, useState } from "react";
import { typesContext } from "../../contexts/typesContext";
export default function BooleanNode({ data }) {
const [enabled, setEnabled] = useState(false);
const {types} = useContext(typesContext);
return (
<div className="prompt-node relative bg-white rounded-lg solid border flex flex-col justify-center">
<div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 border-b ">
<div className="flex items-center gap-4 text-lg">
<CheckCircleIcon
className="w-10 h-10 p-1 rounded"
style={{ color: nodeColors[data.type] }}
style={{ color: nodeColors[types[data.type]] }}
/>
Boolean
</div>
@ -26,15 +28,15 @@ export default function BooleanNode({ data }) {
</button>
</div>
<div className="w-full flex justify-center p-5 h-full">
<ToggleComponent enabled={enabled} disabled={false} setEnabled={(x) => {setEnabled(x); data.enabled = x}} />
<ToggleComponent enabled={enabled} disabled={false} setEnabled={(x) => {setEnabled(x); data.value = x}} />
</div>
<Handle
type="target"
position={Position.Right}
id={data.name}
id={data.type}
isValidConnection={(connection) => isValidConnection(data,connection)}
className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors[data.type] }}
style={{ borderLeftColor: nodeColors[types[data.type]] }}
></Handle>
</div>
);

11
space_flow/src/CustomNodes/ChatInputNode/index.tsx
View file

@ -3,10 +3,13 @@ import InputComponent from "../../components/inputComponent";
import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
import { Handle, Position } from "reactflow";
import Tooltip from "../../components/TooltipComponent";
import { typesContext } from "../../contexts/typesContext";
import { useContext } from "react";
export default function ChatInputNode({ data }) {
const {types} = useContext(typesContext);
return (
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors['chat']}}>
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors[types[data.type]]}}>
<Tooltip title="Prefix: str">
<Handle
type="source"
@ -16,7 +19,7 @@ export default function ChatInputNode({ data }) {
isValidConnection(data, connection)
}
className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors['chat'] }}
style={{ borderLeftColor: nodeColors[types[data.type]] }}
></Handle>
</Tooltip>
<Tooltip title={"Message: str"}>
@ -26,10 +29,10 @@ export default function ChatInputNode({ data }) {
id={'str|str|'+data.id}
isValidConnection={(connection) => isValidConnection(data,connection)}
className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{borderLeftColor: nodeColors['chat']}}
style={{borderLeftColor: nodeColors[types[data.type]]}}
></Handle>
</Tooltip>
<div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors['chat']}}>
<div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors[types[data.type]]}}>
<Bars3CenterLeftIcon className="h-8 w-8 mt-1" />
Input
</div>

7
space_flow/src/CustomNodes/ChatOutputNode/index.tsx
View file

@ -3,10 +3,13 @@ import { Handle, Position } from "reactflow";
import InputComponent from "../../components/inputComponent";
import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
import Tooltip from "../../components/TooltipComponent";
import { useContext } from "react";
import { typesContext } from "../../contexts/typesContext";
export default function ChatOutputNode({ data }) {
const {types} = useContext(typesContext);
return (
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors['chat']}}>
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors[types[data.type]]}}>
<Tooltip title="Message: str">
<Handle
type="source"
@ -18,7 +21,7 @@ export default function ChatOutputNode({ data }) {
></Handle>
</Tooltip>
<div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors['chat']}}>
<div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors[types[data.type]]}}>
Output
<Bars3CenterLeftIcon className="h-8 w-8 mt-1" />
</div>

14
space_flow/src/CustomNodes/GenericNode/index.tsx
View file

@ -8,11 +8,11 @@ import {
} from "../../utils";
import ParameterComponent from "./components/parameterComponent";
import { typesContext } from "../../contexts/typesContext";
import { useContext } from "react";
import { useContext, useEffect } from "react";
export default function GenericNode({ data }) {
const Icon = nodeIcons[data.type];
const {types} = useContext(typesContext);
const Icon = nodeIcons[types[data.type]];
return (
<div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
@ -20,9 +20,9 @@ export default function GenericNode({ data }) {
<div className="w-full flex items-center truncate gap-4 text-lg">
<Icon
className="w-10 h-10 p-1 rounded"
style={{ color: nodeColors[data.type] }}
style={{ color: nodeColors[types[data.type]] }}
/>
<div className="truncate">{data.name}</div>
<div className="truncate">{data.type}</div>
</div>
<button onClick={data.onDelete}>
<TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
@ -74,10 +74,10 @@ export default function GenericNode({ data }) {
<div className="px-5 py-2 mt-2 text-center">Output:</div>
<ParameterComponent
data={data}
color={nodeColors[data.type]}
title={data.name}
color={nodeColors[types[data.type]]}
title={data.type}
tooltipTitle={"Type: str"}
id={data.name + "|" + data.id + data.node.base_classes.map((b) => ("|" + b))}
id={data.type + "|" + data.id + data.node.base_classes.map((b) => ("|" + b))}
type={'str'}
left={false}
/>

14
space_flow/src/CustomNodes/InputNode/index.tsx
View file

@ -7,10 +7,12 @@ import {
snakeToNormalCase,
} from "../../utils";
import { Handle, Position } from "reactflow";
import { useEffect } from "react";
import { useContext, useEffect } from "react";
import Tooltip from "../../components/TooltipComponent";
import { typesContext } from "../../contexts/typesContext";
export default function InputNode({ data }) {
const {types} = useContext(typesContext);
return (
<div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
<Tooltip title="Prefix: str">
@ -22,7 +24,7 @@ export default function InputNode({ data }) {
isValidConnection(data, connection)
}
className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors[data.type] }}
style={{ borderLeftColor: nodeColors[types[data.type]] }}
></Handle>
</Tooltip>
@ -30,7 +32,7 @@ export default function InputNode({ data }) {
<div className="flex items-center gap-4 text-lg">
<Bars3CenterLeftIcon
className="w-10 h-10 p-1 rounded"
style={{ color: nodeColors[data.type] }}
style={{ color: nodeColors[types[data.type]] }}
/>
String
</div>
@ -47,17 +49,17 @@ export default function InputNode({ data }) {
disabled={false}
value=""
onChange={(e) => {
data.text = e;
data.value = e;
}}
/>
</div>
<Handle
type="target"
position={Position.Right}
id={data.name}
id={data.type}
isValidConnection={(connection) => isValidConnection(data, connection)}
className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors[data.type] }}
style={{ borderLeftColor: nodeColors[types[data.type]] }}
></Handle>
</div>
);