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

refactor and create type for functions and majority of variables

Browse source
This commit is contained in:
anovazzi1 2023-03-01 18:29:42 -03:00
commit 9d55bcd751
50 changed files with 302 additions and 1022 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,10 +5,11 @@ import { isValidConnection, nodeColors } from "../../utils";
import ToggleComponent from "../../components/toggleComponent";
import { useContext, useEffect, useState } from "react";
import { typesContext } from "../../contexts/typesContext";
import { NodeDataType } from "../../types/flow";
export default function BooleanNode({ data }) {
export default function BooleanNode({ data }:{data:NodeDataType}) {
const [enabled, setEnabled] = useState(false);
const {types, deleteNode} = useContext(typesContext);
const {types, deleteNode, reactFlowInstance} = 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 ">
@ -34,7 +35,7 @@ export default function BooleanNode({ data }) {
type="source"
position={Position.Right}
id={data.type}
isValidConnection={(connection) => isValidConnection(data,connection)}
isValidConnection={(connection) => isValidConnection(connection,reactFlowInstance)}
className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors[types[data.type]] }}
></Handle>

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

@ -1,16 +1,15 @@
import {
Bars3CenterLeftIcon,
ChatBubbleBottomCenterTextIcon,
} from "@heroicons/react/24/outline";
import InputComponent from "../../components/inputComponent";
import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
import { isValidConnection, nodeColors } from "../../utils";
import { Handle, Position } from "reactflow";
import Tooltip from "../../components/TooltipComponent";
import { typesContext } from "../../contexts/typesContext";
import { useContext } from "react";
import { NodeDataType } from "../../types/flow";
export default function ChatInputNode({ data }) {
const { types } = useContext(typesContext);
export default function ChatInputNode({ data }:{data:NodeDataType}) {
const { types,reactFlowInstance } = useContext(typesContext);
return (
<div
className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50"
@ -20,7 +19,7 @@ export default function ChatInputNode({ data }) {
<Handle
type="target"
isValidConnection={(connection) =>
isValidConnection(data, connection)
isValidConnection(connection,reactFlowInstance)
}
position={Position.Left}
id={"str|Prefix|" + data.id}
@ -34,7 +33,7 @@ export default function ChatInputNode({ data }) {
<Handle
type="source"
isValidConnection={(connection) =>
isValidConnection(data, connection)
isValidConnection(connection,reactFlowInstance)
}
position={Position.Right}
id={"str|str|" + data.id}

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

@ -5,15 +5,16 @@ import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
import Tooltip from "../../components/TooltipComponent";
import { useContext } from "react";
import { typesContext } from "../../contexts/typesContext";
import { NodeDataType } from "../../types/flow";
export default function ChatOutputNode({ data }) {
const {types} = useContext(typesContext);
export default function ChatOutputNode({ data }:{data:NodeDataType}) {
const {types,reactFlowInstance} = 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[types[data.type]]}}>
<Tooltip title="Message: str">
<Handle
type="target"
isValidConnection={(connection) => isValidConnection(data,connection)}
isValidConnection={(connection) => isValidConnection(connection,reactFlowInstance)}
position={Position.Left}
id={"str|output|"+data.id}
className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white"

7
space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -11,6 +11,7 @@ import ToggleComponent from "../../../../components/toggleComponent";
import InputListComponent from "../../../../components/inputListComponent";
import TextAreaComponent from "../../../../components/textAreaComponent";
import { typesContext } from "../../../../contexts/typesContext";
import { ParameterComponentType } from "../../../../types/components";
export default function ParameterComponent({
left,
@ -22,7 +23,7 @@ export default function ParameterComponent({
type,
name = "",
required = false,
}) {
}:ParameterComponentType) {
const ref = useRef(null);
const updateNodeInternals = useUpdateNodeInternals();
const [position, setPosition] = useState(0);
@ -70,7 +71,7 @@ export default function ParameterComponent({
<InputListComponent
disabled={disabled}
value={!data.node.template[name].value || data.node.template[name].value === "" ? [""] : data.node.template[name].value}
onChange={(t) => {
onChange={(t:string[]) => {
data.node.template[name].value = t;
}}
/>
@ -79,7 +80,7 @@ export default function ParameterComponent({
<TextAreaComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
onChange={(t) => {
onChange={(t:string) => {
data.node.template[name].value = t;
}}
/>

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

@ -9,8 +9,10 @@ import {
import ParameterComponent from "./components/parameterComponent";
import { typesContext } from "../../contexts/typesContext";
import { useContext } from "react";
import { NodeDataType} from "../../types/flow";
import { APITemplateType, TemplateVariableType } from "../../types/api";
export default function GenericNode({ data }) {
export default function GenericNode({ data}:{data:NodeDataType}) {
const {types, deleteNode} = useContext(typesContext);
const Icon = nodeIcons[types[data.type]];
@ -38,7 +40,7 @@ export default function GenericNode({ data }) {
<>
{Object.keys(data.node.template)
.filter((t) => t.charAt(0) !== "_")
.map((t, idx) => (
.map((t:string, idx) => (
<div key={idx}>
{idx === 0 ? (
<div className="px-5 py-2 mt-2 text-center">Inputs:</div>

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

@ -3,17 +3,16 @@ import InputComponent from "../../components/inputComponent";
import {
isValidConnection,
nodeColors,
nodeIcons,
snakeToNormalCase,
} from "../../utils";
import { Handle, Position } from "reactflow";
import { useContext, useEffect } from "react";
import { useContext } from "react";
import Tooltip from "../../components/TooltipComponent";
import { typesContext } from "../../contexts/typesContext";
import TextAreaComponent from "../../components/textAreaComponent";
import { NodeDataType } from "../../types/flow";
export default function InputNode({ data }) {
const {types, deleteNode} = useContext(typesContext);
export default function InputNode({ data }:{data:NodeDataType}) {
console.log(data)
const {types, deleteNode,reactFlowInstance} = 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 +21,7 @@ export default function InputNode({ data }) {
position={Position.Left}
id={"str|Prefix|" + data.id}
isValidConnection={(connection) =>
isValidConnection(data, connection)
isValidConnection(connection,reactFlowInstance)
}
className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors[types[data.type]] }}
@ -59,7 +58,7 @@ export default function InputNode({ data }) {
type="source"
position={Position.Right}
id={data.type}
isValidConnection={(connection) => isValidConnection(data, connection)}
isValidConnection={(connection) => isValidConnection(connection,reactFlowInstance)}
className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors[types[data.type]] }}
></Handle>