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

Merge branch 'zustand/io/migration' into better_io

Browse source
This commit is contained in:
anovazzi1 2024-03-03 19:25:43 -03:00
commit fa4f201925
4 changed files with 71 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -304,7 +304,7 @@ export default function ParameterComponent({
ref={ref} ref={ref}
className={ className={
"relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2" + "relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2" +
(name.includes("code") && type==="code" ? " hidden " : "") ((name==="code" && type==="code") || (name.includes("code") && proxy) ? " hidden " : "")
} }
> >
<> <>

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

@ -141,9 +141,8 @@ export default function GenericNode({
const iconColor = nodeColors[types[data.type]]; const iconColor = nodeColors[types[data.type]];
const iconName = const iconName =
iconElement || (data.node?.flow ? "group_components" : name); iconElement || (data.node?.flow ? "group_components" : name);
const iconClassName = `generic-node-icon ${ const iconClassName = `generic-node-icon ${!showNode ? " absolute inset-x-6 h-12 w-12 " : ""
!showNode ? " absolute inset-x-6 h-12 w-12 " : "" }`;
}`;
if (iconElement && isEmoji) { if (iconElement && isEmoji) {
return nodeIconFragment(iconElement); return nodeIconFragment(iconElement);
} else { } else {
@ -271,7 +270,7 @@ export default function GenericNode({
numberOfHandles={handles} numberOfHandles={handles}
showNode={showNode} showNode={showNode}
openAdvancedModal={false} openAdvancedModal={false}
onCloseAdvancedModal={() => {}} onCloseAdvancedModal={() => { }}
selected={selected} selected={selected}
></NodeToolbarComponent> ></NodeToolbarComponent>
</NodeToolbar> </NodeToolbar>
@ -393,13 +392,28 @@ export default function GenericNode({
})} })}
data={data} data={data}
color={ color={
nodeColors[ data.node?.template[templateField].input_types &&
types[data.node?.template[templateField].type!] data.node?.template[templateField].input_types!
] ?? .length > 0
nodeColors[ ? nodeColors[
data.node?.template[templateField]
.input_types![data.node?.template[templateField]
.input_types!.length - 1]
] ??
nodeColors[
types[
data.node?.template[templateField]
.input_types![data.node?.template[templateField]
.input_types!.length - 1]
]
]
: nodeColors[
data.node?.template[templateField].type! data.node?.template[templateField].type!
] ?? ] ??
nodeColors.unknown nodeColors[
types[data.node?.template[templateField].type!]
] ??
nodeColors.unknown
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
@ -443,7 +457,7 @@ export default function GenericNode({
color={nodeColors[types[data.type]] ?? nodeColors.unknown} color={nodeColors[types[data.type]] ?? nodeColors.unknown}
title={ title={
data.node?.output_types && data.node?.output_types &&
data.node.output_types.length > 0 data.node.output_types.length > 0
? data.node.output_types.join(" | ") ? data.node.output_types.join(" | ")
: data.type : data.type
} }
@ -464,12 +478,6 @@ export default function GenericNode({
<Button <Button
variant="secondary" variant="secondary"
className={"group h-9 px-1.5"} className={"group h-9 px-1.5"}
onClick={() => {
if (buildStatus === BuildStatus.BUILDING || isBuilding)
return;
setValidationStatus(null);
buildFlow({ nodeId: data.id });
}}
> >
<div> <div>
<ShadTooltip <ShadTooltip
@ -482,17 +490,22 @@ export default function GenericNode({
<div className="max-h-96 overflow-auto"> <div className="max-h-96 overflow-auto">
{typeof validationStatus.params === "string" {typeof validationStatus.params === "string"
? `${durationString}\n${validationStatus.params}` ? `${durationString}\n${validationStatus.params}`
.split("\n") .split("\n")
.map((line, index) => ( .map((line, index) => (
<div key={index}>{line}</div> <div key={index}>{line}</div>
)) ))
: durationString} : durationString}
</div> </div>
) )
} }
side="bottom" side="bottom"
> >
<div className="generic-node-status-position flex items-center justify-center"> <div onClick={() => {
if (buildStatus === BuildStatus.BUILDING || isBuilding)
return;
setValidationStatus(null);
buildFlow({ nodeId: data.id });
}} className="generic-node-status-position flex items-center justify-center">
{renderIconStatus(buildStatus, validationStatus)} {renderIconStatus(buildStatus, validationStatus)}
</div> </div>
</ShadTooltip> </ShadTooltip>
@ -572,7 +585,7 @@ export default function GenericNode({
}} }}
> >
{(data.node?.description === "" || !data.node?.description) && {(data.node?.description === "" || !data.node?.description) &&
nameEditable nameEditable
? "Double Click to Edit Description" ? "Double Click to Edit Description"
: data.node?.description} : data.node?.description}
</div> </div>
@ -593,7 +606,7 @@ export default function GenericNode({
.map((templateField: string, idx) => ( .map((templateField: string, idx) => (
<div key={idx}> <div key={idx}>
{data.node!.template[templateField].show && {data.node!.template[templateField].show &&
!data.node!.template[templateField].advanced ? ( !data.node!.template[templateField].advanced ? (
<ParameterComponent <ParameterComponent
index={idx.toString()} index={idx.toString()}
key={scapedJSONStringfy({ key={scapedJSONStringfy({
@ -607,25 +620,27 @@ export default function GenericNode({
data={data} data={data}
color={ color={
data.node?.template[templateField].input_types && data.node?.template[templateField].input_types &&
data.node?.template[templateField].input_types! data.node?.template[templateField].input_types!
.length > 0 .length > 0
? nodeColors[ ? nodeColors[
data.node?.template[templateField] data.node?.template[templateField]
.input_types![0] .input_types![data.node?.template[templateField]
] ?? .input_types!.length - 1]
nodeColors[ ] ??
types[ nodeColors[
data.node?.template[templateField] types[
.input_types![0] data.node?.template[templateField]
] .input_types![data.node?.template[templateField]
] .input_types!.length - 1]
]
]
: nodeColors[ : nodeColors[
data.node?.template[templateField].type! data.node?.template[templateField].type!
] ?? ] ??
nodeColors[ nodeColors[
types[data.node?.template[templateField].type!] types[data.node?.template[templateField].type!]
] ?? ] ??
nodeColors.unknown nodeColors.unknown
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
@ -677,9 +692,9 @@ export default function GenericNode({
data={data} data={data}
color={ color={
(data.node?.output_types && (data.node?.output_types &&
data.node.output_types.length > 0 data.node.output_types.length > 0
? nodeColors[data.node.output_types[0]] ?? ? nodeColors[data.node.output_types[0]] ??
nodeColors[types[data.node.output_types[0]]] nodeColors[types[data.node.output_types[0]]]
: nodeColors[types[data.type]]) ?? nodeColors.unknown : nodeColors[types[data.type]]) ?? nodeColors.unknown
} }
title={ title={

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

@ -18,6 +18,7 @@ import NewChatView from "../newChatView";
import { Badge } from "../ui/badge"; import { Badge } from "../ui/badge";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { NodeType } from "../../types/flow";
export default function IOView({ children, open, setOpen }): JSX.Element { export default function IOView({ children, open, setOpen }): JSX.Element {
const inputs = useFlowStore((state) => state.inputs).filter( const inputs = useFlowStore((state) => state.inputs).filter(
@ -51,6 +52,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
const [chatValue, setChatValue] = useState(""); const [chatValue, setChatValue] = useState("");
const isBuilding = useFlowStore((state) => state.isBuilding); const isBuilding = useFlowStore((state) => state.isBuilding);
const currentFlow = useFlowsManagerStore((state) => state.currentFlow); const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
const setNode = useFlowStore((state) => state.setNode);
async function updateVertices() { async function updateVertices() {
return updateVerticesOrder(currentFlow!.id, null); return updateVerticesOrder(currentFlow!.id, null);
@ -74,6 +76,14 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
}); });
} }
setLockChat(false); setLockChat(false);
if(chatInput) {
setNode(chatInput.id, (node:NodeType)=>{
const newNode = {...node}
newNode.data.node!.template["input_value"].value = chatValue;
return newNode;
});
}
} }
useEffect(() => { useEffect(() => {

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

@ -165,7 +165,8 @@ const EditNodeModal = forwardRef(
) )
) ?? false; ) ?? false;
return ( return (
<TableRow key={index} className="h-10"> <TableRow key={index} className={"h-10 " + ((templateParam==="code" && myData.node?.template[templateParam].type==="code") || (templateParam.includes("code") && myData.node?.template[templateParam].proxy) ? " hidden " : "")
}>
<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">
<ShadTooltip <ShadTooltip
content={ content={