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

Merge branch 'zustand/io/migration' of github.com:logspace-ai/langflow into zustand/io/migration

Browse source
This commit is contained in:
igorrCarvalho 2024-02-26 21:08:49 -03:00
commit ab60f59578
26 changed files with 466 additions and 287 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -477,11 +477,11 @@ export default function GenericNode({
) : (
<div className="max-h-96 overflow-auto">
{typeof validationStatus.params === "string"
? `${durationString}\n${validationStatus.params}`
? (`${durationString}\n${validationStatus.params}`
.split("\n")
.map((line, index) => (
<div key={index}>{line}</div>
))
)))
: durationString}
</div>
)

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

@ -49,7 +49,7 @@ export default function AccordionComponent({
>
{trigger}
</AccordionTrigger>
<AccordionContent className="AccordionContent">
<AccordionContent className="AccordionContent flex flex-col">
{children}
</AccordionContent>
</AccordionItem>

13
src/frontend/src/components/IOInputField/index.tsx
View file

@ -12,12 +12,12 @@ export default function IOInputField({
const setNode = useFlowStore((state) => state.setNode);
const node = nodes.find((node) => node.id === inputId);
function handleInputType() {
if (!node) return "no node found";
if (!node) return <>"No node found!"</>;
switch (inputType) {
case "TextInput":
return (
<Textarea
className="h-full w-full custom-scroll"
className="w-full"
placeholder={"Enter text..."}
value={node.data.node!.template["value"].value}
onChange={(e) => {
@ -47,7 +47,7 @@ export default function IOInputField({
default:
return (
<Textarea
className="h-full w-full custom-scroll"
className="w-full custom-scroll"
placeholder={"Enter text..."}
value={node.data.node!.template["value"]}
onChange={(e) => {
@ -62,10 +62,5 @@ export default function IOInputField({
);
}
}
return (
<div className="font-xl flex h-full w-full flex-col items-start gap-4 p-4 font-semibold">
{inputType}
{handleInputType()}
</div>
);
return handleInputType();
}

17
src/frontend/src/components/IOOutputView/index.tsx
View file

@ -12,15 +12,15 @@ export default function IOOutputView({
const flowPool = useFlowStore((state) => state.flowPool);
const node = nodes.find((node) => node.id === outputId);
function handleOutputType() {
if (!node) return "no node found";
if (!node) return <>"No node found!"</>;
switch (outputType) {
case "TextOutput":
return (
<Textarea
className="h-full w-full custom-scroll"
placeholder={"Enter text..."}
className="w-full custom-scroll"
placeholder={"Empty"}
// update to real value on flowPool
value={flowPool[node.id][flowPool[node.id].length - 1].data.results}
value={((flowPool[node.id] ?? [])[(flowPool[node.id]?.length ?? 1) - 1])?.params ?? ""}
readOnly
/>
);
@ -28,7 +28,7 @@ export default function IOOutputView({
default:
return (
<Textarea
className="h-full w-full custom-scroll"
className="w-full custom-scroll"
placeholder={"Enter text..."}
value={node.data.node!.template["value"]}
onChange={(e) => {
@ -43,10 +43,5 @@ export default function IOOutputView({
);
}
}
return (
<div className="font-xl flex h-full w-full flex-col items-start gap-4 p-4 font-semibold">
{outputType}
{handleOutputType()}
</div>
);
return handleOutputType();
}

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

@ -4,7 +4,6 @@ import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
import BaseModal from "../../modals/baseModal";
import useAlertStore from "../../stores/alertStore";
import useFlowStore from "../../stores/flowStore";
import { validateNodes } from "../../utils/reactflowUtils";
import { cn } from "../../utils/utils";
import AccordionComponent from "../AccordionComponent";
import IOInputField from "../IOInputField";
@ -51,33 +50,22 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
async function sendMessage(count = 1): Promise<void> {
if (isBuilding) return;
const { nodes, edges } = getFlow();
let nodeValidationErrors = validateNodes(nodes, edges);
if (nodeValidationErrors.length === 0) {
setIsBuilding(true);
setLockChat(true);
setChatValue("");
const chatInputNode = nodes.find((node) => node.id === chatInput?.id);
if (chatInputNode) {
let newNode = cloneDeep(chatInputNode);
newNode.data.node!.template["message"].value = chatValue;
setNode(chatInput!.id, newNode);
}
for (let i = 0; i < count; i++) {
await buildFlow().catch((err) => {
console.error(err);
setLockChat(false);
});
}
setLockChat(false);
//set chat message in the flow and run build
//@ts-ignore
} else {
setErrorData({
title: "Oops! Looks like you missed some required information:",
list: nodeValidationErrors,
setIsBuilding(true);
setLockChat(true);
setChatValue("");
const chatInputNode = nodes.find((node) => node.id === chatInput?.id);
if (chatInputNode) {
let newNode = cloneDeep(chatInputNode);
newNode.data.node!.template["message"].value = chatValue;
setNode(chatInput!.id, newNode);
}
for (let i = 0; i < count; i++) {
await buildFlow().catch((err) => {
console.error(err);
setLockChat(false);
});
}
setLockChat(false);
}
useEffect(() => {
@ -260,27 +248,52 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
)}
{haveChat ? (
selectedViewField ? (
inputs.some((input) => input.id === selectedViewField.id) ? (
<IOInputField
inputType={selectedViewField.type!}
inputId={selectedViewField.id!}
<div className="flex h-full w-full">
{selectedViewField && (
<div
className={cn(
"flex h-full w-full flex-col items-start gap-4 p-4",
!selectedViewField ? "hidden" : ""
)}
>
<div className="font-xl flex items-center justify-center gap-3 font-semibold">
<button onClick={() => setSelectedViewField(undefined)}>
<IconComponent
name={"ArrowLeft"}
className="h-6 w-6"
></IconComponent>
</button>
{selectedViewField.type}
</div>
<div className="h-full">
{inputs.some(
(input) => input.id === selectedViewField.id
) ? (
<IOInputField
inputType={selectedViewField.type!}
inputId={selectedViewField.id!}
/>
) : (
<IOOutputView
outputType={selectedViewField.type!}
outputId={selectedViewField.id!}
/>
)}
</div>
</div>
)}
<div
className={cn("flex w-full h-full",selectedViewField ? "hidden" : "")}
>
<NewChatView
sendMessage={sendMessage}
chatValue={chatValue}
setChatValue={setChatValue}
lockChat={lockChat}
setLockChat={setLockChat}
/>
) : (
<IOOutputView
outputType={selectedViewField.type!}
outputId={selectedViewField.id!}
/>
)
) : (
<NewChatView
sendMessage={sendMessage}
chatValue={chatValue}
setChatValue={setChatValue}
lockChat={lockChat}
setLockChat={setLockChat}
/>
)
</div>
</div>
) : (
<div className="absolute bottom-8 right-8"></div>
)}

3
src/frontend/src/components/ShadTooltipComponent/index.tsx
View file

@ -1,4 +1,5 @@
import { ShadToolTipType } from "../../types/components";
import { cn } from "../../utils/utils";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
export default function ShadTooltip({
@ -14,7 +15,7 @@ export default function ShadTooltip({
<TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
<TooltipContent
className={styleClasses}
className={cn(styleClasses, "max-w-96") }
side={side}
avoidCollisions={false}
sticky="always"

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

@ -20,48 +20,42 @@ export default function TextAreaComponent({
}, [disabled]);
return (
<div
className={
"flex w-full items-center " + (disabled ? "pointer-events-none" : "")
}
>
<GenericModal
type={TypeModal.TEXT}
buttonText="Finishing Editing"
modalTitle="Edit Text"
value={value}
setValue={(value: string) => {
onChange(value);
}}
>
<div className="flex w-full items-center" data-testid={"div-" + id}>
<Input
id={id}
data-testid={id}
<div className={"flex w-full items-center " + (disabled ? "" : "")}>
<div className="flex w-full items-center" data-testid={"div-" + id}>
<Input
id={id}
data-testid={id}
value={value}
disabled={disabled}
className={editNode ? "input-edit-node w-full" : " w-full"}
placeholder={"Type something..."}
onChange={(event) => {
onChange(event.target.value);
}}
/>
<div>
<GenericModal
type={TypeModal.TEXT}
buttonText="Finish Editing"
modalTitle="Edit Text"
value={value}
disabled={disabled}
className={
editNode
? "input-edit-node pointer-events-none "
: " pointer-events-none"
}
placeholder={"Type something..."}
onChange={(event) => {
onChange(event.target.value);
setValue={(value: string) => {
onChange(value);
}}
/>
{!editNode && (
<IconComponent
id={id}
name="ExternalLink"
className={
"icons-parameters-comp" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}
/>
)}
>
{!editNode && (
<IconComponent
id={id}
name="ExternalLink"
className={
"icons-parameters-comp" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}
/>
)}
</GenericModal>
</div>
</GenericModal>
</div>
</div>
);
}

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

@ -681,4 +681,4 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
export const priorityFields = new Set(["code", "template"]);
export const INPUT_TYPES = new Set(["ChatInput", "TextInput"]);
export const OUTPUT_TYPES = new Set(["ChatOutput", "PromptTemplate"]);
export const OUTPUT_TYPES = new Set(["ChatOutput", "TextOutput"]);

2
src/frontend/src/modals/baseModal/index.tsx
View file

@ -21,7 +21,7 @@ type TriggerProps = {
};
const Content: React.FC<ContentProps> = ({ children }) => {
return <div className="h-full w-full">{children}</div>;
return <div className="h-full w-full flex flex-col">{children}</div>;
};
const Trigger: React.FC<TriggerProps> = ({ children, asChild, disable }) => {
return (

22
src/frontend/src/stores/flowStore.ts
View file

@ -9,6 +9,7 @@ import {
applyNodeChanges,
} from "reactflow";
import { create } from "zustand";
import { FLOW_BUILD_SUCCESS_ALERT } from "../alerts_constants";
import { BuildStatus } from "../constants/enums";
import { getFlowPool, updateFlowInDatabase } from "../controllers/API";
import { VertexBuildTypeAPI } from "../types/api";
@ -26,12 +27,12 @@ import {
getNodeId,
scapeJSONParse,
scapedJSONStringfy,
validateNodes,
} from "../utils/reactflowUtils";
import { getInputsAndOutputs } from "../utils/storeUtils";
import useAlertStore from "./alertStore";
import { useDarkStore } from "./darkStore";
import useFlowsManagerStore from "./flowsManagerStore";
import { FLOW_BUILD_SUCCESS_ALERT } from "../alerts_constants";
// this is our useStore hook that we can use in our components to get parts of the store and call actions
const useFlowStore = create<FlowStoreType>((set, get) => ({
@ -377,6 +378,20 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
const setSuccessData = useAlertStore.getState().setSuccessData;
const setErrorData = useAlertStore.getState().setErrorData;
const setNoticeData = useAlertStore.getState().setNoticeData;
function validateSubgraph(nodes: string[]) {
const errors = validateNodes(
get().nodes.filter((node) => nodes.includes(node.id)),
get().edges
);
if (errors.length > 0) {
setErrorData({
title: "Oops! Looks like you missed something",
list: errors,
});
get().setIsBuilding(false);
throw new Error("Invalid nodes");
}
}
function handleBuildUpdate(
vertexBuildData: VertexBuildTypeAPI,
status: BuildStatus
@ -397,10 +412,12 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
name: currentFlow!.name,
description: currentFlow!.description,
});
setNoticeData({ title: "Running components" });
await buildVertices({
flowId: currentFlow!.id,
nodeId,
onGetOrderSuccess: () => {
setNoticeData({ title: "Running components" });
},
onBuildComplete: () => {
if (nodeId) {
setSuccessData({
@ -422,6 +439,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
onBuildStart: (idList) => {
useFlowStore.getState().updateBuildStatus(idList, BuildStatus.BUILDING);
},
validateNodes: validateSubgraph,
});
get().revertBuiltStatusFromBuilding();
},

30
src/frontend/src/utils/buildUtils.ts
View file

@ -1,17 +1,19 @@
import { AxiosError } from "axios";
import { BuildStatus } from "../constants/enums";
import { getVerticesOrder, postBuildVertex } from "../controllers/API";
import useAlertStore from "../stores/alertStore";
import useFlowStore from "../stores/flowStore";
import { VertexBuildTypeAPI } from "../types/api";
type BuildVerticesParams = {
flowId: string; // Assuming FlowType is the type for your flow
nodeId?: string | null; // Assuming nodeId is of type string, and it's optional
onProgressUpdate?: (progress: number) => void; // Replace number with the actual type if it's not a number
onGetOrderSuccess?: () => void;
onBuildUpdate?: (data: VertexBuildTypeAPI, status: BuildStatus) => void; // Replace any with the actual type if it's not any
onBuildComplete?: (allNodesValid: boolean) => void;
onBuildError?: (title, list, idList: string[]) => void;
onBuildStart?: (idList: string[]) => void;
validateNodes?: (nodes: string[]) => void;
};
function getInactiveVertexData(vertexId: string): VertexBuildTypeAPI {
@ -35,17 +37,37 @@ function getInactiveVertexData(vertexId: string): VertexBuildTypeAPI {
export async function buildVertices({
flowId,
nodeId = null,
onProgressUpdate,
onGetOrderSuccess,
onBuildUpdate,
onBuildComplete,
onBuildError,
onBuildStart,
validateNodes,
}: BuildVerticesParams) {
let orderResponse = await getVerticesOrder(flowId, nodeId);
const setErrorData = useAlertStore.getState().setErrorData;
let orderResponse;
try {
orderResponse = await getVerticesOrder(flowId, nodeId);
} catch (error) {
console.log(error);
setErrorData({
title: "Oops! Looks like you missed something",
list: [error.response?.data?.detail ?? "Unknown Error"],
});
useFlowStore.getState().setIsBuilding(false);
throw new Error("Invalid nodes");
}
if (onGetOrderSuccess) onGetOrderSuccess();
let verticesOrder: Array<Array<string>> = orderResponse.data.ids;
let vertices_layers: Array<Array<string>> = [];
let stop = false;
if (validateNodes) {
try {
validateNodes(verticesOrder.flatMap((id) => id));
} catch (e) {
return;
}
}
if (nodeId) {
for (let i = 0; i < verticesOrder.length; i += 1) {
const innerArray = verticesOrder[i];

2
src/frontend/src/utils/styleUtils.ts
View file

@ -1,5 +1,6 @@
import {
AlertCircle,
ArrowLeft,
ArrowUpToLine,
Bell,
BookMarked,
@ -340,6 +341,7 @@ export const nodeIconsLucide: iconsType = {
Bell,
ChevronLeft,
ChevronDown,
ArrowLeft,
Shield,
Plus,
Redo,