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

Format frontend

Browse source
This commit is contained in:
ogabrielluiz 2024-06-14 16:32:13 -03:00
commit a5df1c109a
20 changed files with 100 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -40,7 +40,7 @@ export default function OutputComponent({
size="xs" size="xs"
className={cn( className={cn(
frozen ? "text-ice" : "", frozen ? "text-ice" : "",
"items-center gap-1 pl-2 pr-1.5 align-middle text-xs font-normal", "items-center gap-1 pl-2 pr-1.5 align-middle text-xs font-normal"
)} )}
> >
<span className="pb-px">{selected}</span> <span className="pb-px">{selected}</span>

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

@ -69,14 +69,14 @@ export default function GenericNode({
const [nodeName, setNodeName] = useState(data.node!.display_name); const [nodeName, setNodeName] = useState(data.node!.display_name);
const [inputDescription, setInputDescription] = useState(false); const [inputDescription, setInputDescription] = useState(false);
const [nodeDescription, setNodeDescription] = useState( const [nodeDescription, setNodeDescription] = useState(
data.node?.description!, data.node?.description!
); );
const [isOutdated, setIsOutdated] = useState(false); const [isOutdated, setIsOutdated] = useState(false);
const buildStatus = useFlowStore( const buildStatus = useFlowStore(
(state) => state.flowBuildStatus[data.id]?.status, (state) => state.flowBuildStatus[data.id]?.status
); );
const lastRunTime = useFlowStore( const lastRunTime = useFlowStore(
(state) => state.flowBuildStatus[data.id]?.timestamp, (state) => state.flowBuildStatus[data.id]?.timestamp
); );
const [validationStatus, setValidationStatus] = const [validationStatus, setValidationStatus] =
useState<VertexBuildTypeAPI | null>(null); useState<VertexBuildTypeAPI | null>(null);
@ -93,7 +93,7 @@ export default function GenericNode({
data.node!, data.node!,
setNode, setNode,
setIsOutdated, setIsOutdated,
updateNodeInternals, updateNodeInternals
); );
const name = nodeIconsLucide[data.type] ? data.type : types[data.type]; const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
@ -120,12 +120,12 @@ export default function GenericNode({
selected: boolean, selected: boolean,
showNode: boolean, showNode: boolean,
buildStatus: BuildStatus | undefined, buildStatus: BuildStatus | undefined,
validationStatus: VertexBuildTypeAPI | null, validationStatus: VertexBuildTypeAPI | null
) => { ) => {
const specificClassFromBuildStatus = getSpecificClassFromBuildStatus( const specificClassFromBuildStatus = getSpecificClassFromBuildStatus(
buildStatus, buildStatus,
validationStatus, validationStatus,
isDark, isDark
); );
const baseBorderClass = getBaseBorderClass(selected); const baseBorderClass = getBaseBorderClass(selected);
@ -134,7 +134,7 @@ export default function GenericNode({
baseBorderClass, baseBorderClass,
nodeSizeClass, nodeSizeClass,
"generic-node-div group/node", "generic-node-div group/node",
specificClassFromBuildStatus, specificClassFromBuildStatus
); );
return names; return names;
}; };
@ -179,7 +179,7 @@ export default function GenericNode({
showNode, showNode,
isEmoji, isEmoji,
nodeIconFragment, nodeIconFragment,
checkNodeIconFragment, checkNodeIconFragment
); );
function countHandles(): void { function countHandles(): void {
@ -362,7 +362,7 @@ export default function GenericNode({
selected, selected,
showNode, showNode,
buildStatus, buildStatus,
validationStatus, validationStatus
)} )}
> >
{data.node?.beta && showNode && ( {data.node?.beta && showNode && (
@ -510,7 +510,7 @@ export default function GenericNode({
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
templateField, templateField
)} )}
info={data.node?.template[templateField].info} info={data.node?.template[templateField].info}
name={templateField} name={templateField}
@ -538,7 +538,7 @@ export default function GenericNode({
proxy={data.node?.template[templateField].proxy} proxy={data.node?.template[templateField].proxy}
showNode={showNode} showNode={showNode}
/> />
), )
)} )}
{/* <ParameterComponent {/* <ParameterComponent
index={0} index={0}
@ -641,7 +641,7 @@ export default function GenericNode({
? "pb-8" ? "pb-8"
: "pb-8 pt-5" : "pb-8 pt-5"
: "", : "",
"relative", "relative"
)} )}
> >
{/* increase height!! */} {/* increase height!! */}
@ -698,7 +698,7 @@ export default function GenericNode({
!data.node?.description) && !data.node?.description) &&
nameEditable nameEditable
? "font-light italic" ? "font-light italic"
: "", : ""
)} )}
onDoubleClick={(e) => { onDoubleClick={(e) => {
setInputDescription(true); setInputDescription(true);
@ -768,13 +768,13 @@ export default function GenericNode({
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
templateField, templateField
)} )}
info={data.node?.template[templateField].info} info={data.node?.template[templateField].info}
name={templateField} name={templateField}
tooltipTitle={ tooltipTitle={
data.node?.template[templateField].input_types?.join( data.node?.template[templateField].input_types?.join(
"\n", "\n"
) ?? data.node?.template[templateField].type ) ?? data.node?.template[templateField].type
} }
required={data.node!.template[templateField].required} required={data.node!.template[templateField].required}
@ -801,7 +801,7 @@ export default function GenericNode({
<div <div
className={classNames( className={classNames(
Object.keys(data.node!.template).length < 1 ? "hidden" : "", Object.keys(data.node!.template).length < 1 ? "hidden" : "",
"flex-max-width justify-center", "flex-max-width justify-center"
)} )}
> >
{" "} {" "}
@ -812,9 +812,9 @@ export default function GenericNode({
renderOutputParameter( renderOutputParameter(
output, output,
data.node!.outputs?.findIndex( data.node!.outputs?.findIndex(
(out) => out.name === output.name, (out) => out.name === output.name
) ?? idx, ) ?? idx
), )
)} )}
<div <div
className={cn(showHiddenOutputs ? "" : "h-0 overflow-hidden")} className={cn(showHiddenOutputs ? "" : "h-0 overflow-hidden")}
@ -825,9 +825,9 @@ export default function GenericNode({
renderOutputParameter( renderOutputParameter(
output, output,
data.node!.outputs?.findIndex( data.node!.outputs?.findIndex(
(out) => out.name === output.name, (out) => out.name === output.name
) ?? idx, ) ?? idx
), )
)} )}
</div> </div>
</div> </div>
@ -838,7 +838,7 @@ export default function GenericNode({
(shownOutputs && shownOutputs.length > 0) || (shownOutputs && shownOutputs.length > 0) ||
showHiddenOutputs showHiddenOutputs
? "bottom-5" ? "bottom-5"
: "bottom-1.5", : "bottom-1.5"
)} )}
> >
<Button <Button
@ -852,7 +852,7 @@ export default function GenericNode({
strokeWidth={1.5} strokeWidth={1.5}
className={cn( className={cn(
"h-5 w-5 pt-px text-muted-foreground group-hover:text-medium-indigo group-hover/node:opacity-100", "h-5 w-5 pt-px text-muted-foreground group-hover:text-medium-indigo group-hover/node:opacity-100",
showHiddenOutputs ? "rotate-180 transform" : "", showHiddenOutputs ? "rotate-180 transform" : ""
)} )}
/> />
</Button> </Button>

4
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -123,7 +123,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
title: UPLOAD_ERROR_ALERT, title: UPLOAD_ERROR_ALERT,
list: [error], list: [error],
}); });
}, }
); );
}} }}
> >
@ -221,7 +221,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"} name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
className={cn( className={cn(
"h-4 w-4", "h-4 w-4",
isBuilding || saveLoading ? "animate-spin" : "animate-wiggle", isBuilding || saveLoading ? "animate-spin" : "animate-wiggle"
)} )}
/> />
{printByBuildStatus()} {printByBuildStatus()}

3
src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
View file

@ -5,7 +5,6 @@ import CsvOutputComponent from "../../../../components/csvOutputComponent";
import DataOutputComponent from "../../../../components/dataOutputComponent"; import DataOutputComponent from "../../../../components/dataOutputComponent";
import InputListComponent from "../../../../components/inputListComponent"; import InputListComponent from "../../../../components/inputListComponent";
import PdfViewer from "../../../../components/pdfViewer"; import PdfViewer from "../../../../components/pdfViewer";
import RecordsOutputComponent from "../../../../components/recordsOutputComponent";
import { Textarea } from "../../../../components/ui/textarea"; import { Textarea } from "../../../../components/ui/textarea";
import { PDFViewConstant } from "../../../../constants/constants"; import { PDFViewConstant } from "../../../../constants/constants";
import { InputOutput } from "../../../../constants/enums"; import { InputOutput } from "../../../../constants/enums";
@ -254,7 +253,7 @@ export default function IOFieldView({
rows={ rows={
Array.isArray(flowPoolNode?.data?.artifacts) Array.isArray(flowPoolNode?.data?.artifacts)
? flowPoolNode?.data?.artifacts?.map( ? flowPoolNode?.data?.artifacts?.map(
(artifact) => artifact.data, (artifact) => artifact.data
) ?? [] ) ?? []
: [flowPoolNode?.data?.artifacts] : [flowPoolNode?.data?.artifacts]
} }

18
src/frontend/src/modals/apiModal/index.tsx
View file

@ -39,7 +39,7 @@ const ApiModal = forwardRef(
open?: boolean; open?: boolean;
setOpen?: (a: boolean | ((o?: boolean) => boolean)) => void; setOpen?: (a: boolean | ((o?: boolean) => boolean)) => void;
}, },
ref, ref
) => { ) => {
const tweak = useTweaksStore((state) => state.tweak); const tweak = useTweaksStore((state) => state.tweak);
const addTweaks = useTweaksStore((state) => state.setTweak); const addTweaks = useTweaksStore((state) => state.setTweak);
@ -57,18 +57,18 @@ const ApiModal = forwardRef(
flow?.id, flow?.id,
autoLogin, autoLogin,
tweak, tweak,
flow?.endpoint_name, flow?.endpoint_name
); );
const curl_run_code = getCurlRunCode( const curl_run_code = getCurlRunCode(
flow?.id, flow?.id,
autoLogin, autoLogin,
tweak, tweak,
flow?.endpoint_name, flow?.endpoint_name
); );
const curl_webhook_code = getCurlWebhookCode( const curl_webhook_code = getCurlWebhookCode(
flow?.id, flow?.id,
autoLogin, autoLogin,
flow?.endpoint_name, flow?.endpoint_name
); );
const pythonCode = getPythonCode(flow?.name, tweak); const pythonCode = getPythonCode(flow?.name, tweak);
const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin); const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
@ -83,7 +83,7 @@ const ApiModal = forwardRef(
pythonCode, pythonCode,
]; ];
const [tabs, setTabs] = useState( const [tabs, setTabs] = useState(
createTabsArray(codesArray, includeWebhook), createTabsArray(codesArray, includeWebhook)
); );
const canShowTweaks = const canShowTweaks =
@ -132,7 +132,7 @@ const ApiModal = forwardRef(
buildTweakObject( buildTweakObject(
nodeId, nodeId,
element.data.node.template[templateField].value, element.data.node.template[templateField].value,
element.data.node.template[templateField], element.data.node.template[templateField]
); );
} }
}); });
@ -149,7 +149,7 @@ const ApiModal = forwardRef(
async function buildTweakObject( async function buildTweakObject(
tw: string, tw: string,
changes: string | string[] | boolean | number | Object[] | Object, changes: string | string[] | boolean | number | Object[] | Object,
template: TemplateVariableType, template: TemplateVariableType
) { ) {
changes = getChangesType(changes, template); changes = getChangesType(changes, template);
@ -191,7 +191,7 @@ const ApiModal = forwardRef(
flow?.id, flow?.id,
autoLogin, autoLogin,
cloneTweak, cloneTweak,
flow?.endpoint_name, flow?.endpoint_name
); );
const pythonCode = getPythonCode(flow?.name, cloneTweak); const pythonCode = getPythonCode(flow?.name, cloneTweak);
const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin); const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
@ -235,7 +235,7 @@ const ApiModal = forwardRef(
</BaseModal.Content> </BaseModal.Content>
</BaseModal> </BaseModal>
); );
}, }
); );
export default ApiModal; export default ApiModal;

2
src/frontend/src/modals/apiModal/utils/get-changes-types.ts
View file

@ -3,7 +3,7 @@ import { convertArrayToObj } from "../../../utils/reactflowUtils";
export const getChangesType = ( export const getChangesType = (
changes: string | string[] | boolean | number | Object[] | Object, changes: string | string[] | boolean | number | Object[] | Object,
template: TemplateVariableType, template: TemplateVariableType
) => { ) => {
if (typeof changes === "string" && template.type === "float") { if (typeof changes === "string" && template.type === "float") {
changes = parseFloat(changes); changes = parseFloat(changes);

4
src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts
View file

@ -13,8 +13,8 @@ export const getNodesWithDefaultValue = (flow) => {
templateField.charAt(0) !== "_" && templateField.charAt(0) !== "_" &&
node.data.node.template[templateField]?.show && node.data.node.template[templateField]?.show &&
LANGFLOW_SUPPORTED_TYPES.has( LANGFLOW_SUPPORTED_TYPES.has(
node.data.node.template[templateField].type, node.data.node.template[templateField].type
), )
) )
.map((n, i) => { .map((n, i) => {
arrNodesWithValues.push(node["id"]); arrNodesWithValues.push(node["id"]);

2
src/frontend/src/modals/apiModal/utils/get-value.ts
View file

@ -5,7 +5,7 @@ export const getValue = (
value: string, value: string,
node: NodeType, node: NodeType,
template: TemplateVariableType, template: TemplateVariableType,
tweak: Object[], tweak: Object[]
) => { ) => {
let returnValue = value ?? ""; let returnValue = value ?? "";

6
src/frontend/src/modals/genericModal/index.tsx
View file

@ -83,7 +83,7 @@ export default function GenericModal({
} }
const filteredWordsHighlight = matches.filter( const filteredWordsHighlight = matches.filter(
(word) => !invalid_chars.includes(word), (word) => !invalid_chars.includes(word)
); );
setWordsHighlight(filteredWordsHighlight); setWordsHighlight(filteredWordsHighlight);
@ -134,7 +134,7 @@ export default function GenericModal({
// to the first key of the custom_fields object // to the first key of the custom_fields object
if (field_name === "") { if (field_name === "") {
field_name = Array.isArray( field_name = Array.isArray(
apiReturn.data?.frontend_node?.custom_fields?.[""], apiReturn.data?.frontend_node?.custom_fields?.[""]
) )
? apiReturn.data?.frontend_node?.custom_fields?.[""][0] ?? "" ? apiReturn.data?.frontend_node?.custom_fields?.[""][0] ?? ""
: apiReturn.data?.frontend_node?.custom_fields?.[""] ?? ""; : apiReturn.data?.frontend_node?.custom_fields?.[""] ?? "";
@ -209,7 +209,7 @@ export default function GenericModal({
<div <div
className={classNames( className={classNames(
!isEdit ? "rounded-lg border" : "", !isEdit ? "rounded-lg border" : "",
"flex h-full max-h-[85%] w-full", "flex h-full max-h-[85%] w-full"
)} )}
> >
{type === TypeModal.PROMPT && isEdit && !readonly ? ( {type === TypeModal.PROMPT && isEdit && !readonly ? (

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

@ -38,7 +38,6 @@ import {
generateNodeFromFlow, generateNodeFromFlow,
getNodeId, getNodeId,
isValidConnection, isValidConnection,
reconnectEdges,
scapeJSONParse, scapeJSONParse,
updateIds, updateIds,
validateSelection, validateSelection,
@ -62,19 +61,19 @@ export default function Page({
const preventDefault = true; const preventDefault = true;
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow); const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const autoSaveCurrentFlow = useFlowsManagerStore( const autoSaveCurrentFlow = useFlowsManagerStore(
(state) => state.autoSaveCurrentFlow, (state) => state.autoSaveCurrentFlow
); );
const types = useTypesStore((state) => state.types); const types = useTypesStore((state) => state.types);
const templates = useTypesStore((state) => state.templates); const templates = useTypesStore((state) => state.templates);
const setFilterEdge = useFlowStore((state) => state.setFilterEdge); const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
const reactFlowWrapper = useRef<HTMLDivElement>(null); const reactFlowWrapper = useRef<HTMLDivElement>(null);
const [showCanvas, setSHowCanvas] = useState( const [showCanvas, setSHowCanvas] = useState(
Object.keys(templates).length > 0 && Object.keys(types).length > 0, Object.keys(templates).length > 0 && Object.keys(types).length > 0
); );
const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance); const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
const setReactFlowInstance = useFlowStore( const setReactFlowInstance = useFlowStore(
(state) => state.setReactFlowInstance, (state) => state.setReactFlowInstance
); );
const nodes = useFlowStore((state) => state.nodes); const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges); const edges = useFlowStore((state) => state.edges);
@ -91,10 +90,10 @@ export default function Page({
const paste = useFlowStore((state) => state.paste); const paste = useFlowStore((state) => state.paste);
const resetFlow = useFlowStore((state) => state.resetFlow); const resetFlow = useFlowStore((state) => state.resetFlow);
const lastCopiedSelection = useFlowStore( const lastCopiedSelection = useFlowStore(
(state) => state.lastCopiedSelection, (state) => state.lastCopiedSelection
); );
const setLastCopiedSelection = useFlowStore( const setLastCopiedSelection = useFlowStore(
(state) => state.setLastCopiedSelection, (state) => state.setLastCopiedSelection
); );
const onConnect = useFlowStore((state) => state.onConnect); const onConnect = useFlowStore((state) => state.onConnect);
const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId); const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
@ -117,7 +116,7 @@ export default function Page({
clonedSelection!, clonedSelection!,
clonedNodes, clonedNodes,
clonedEdges, clonedEdges,
getRandomName(), getRandomName()
); );
const newGroupNode = generateNodeFromFlow(newFlow, getNodeId); const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
// const newEdges = reconnectEdges(newGroupNode, removedEdges); // const newEdges = reconnectEdges(newGroupNode, removedEdges);
@ -125,8 +124,8 @@ export default function Page({
...clonedNodes.filter( ...clonedNodes.filter(
(oldNodes) => (oldNodes) =>
!clonedSelection?.nodes.some( !clonedSelection?.nodes.some(
(selectionNode) => selectionNode.id === oldNodes.id, (selectionNode) => selectionNode.id === oldNodes.id
), )
), ),
newGroupNode, newGroupNode,
]); ]);
@ -213,7 +212,7 @@ export default function Page({
{ {
x: position.current.x, x: position.current.x,
y: position.current.y, y: position.current.y,
}, }
); );
} }
} }
@ -297,7 +296,7 @@ export default function Page({
useEffect(() => { useEffect(() => {
setSHowCanvas( setSHowCanvas(
Object.keys(templates).length > 0 && Object.keys(types).length > 0, Object.keys(templates).length > 0 && Object.keys(types).length > 0
); );
}, [templates, types]); }, [templates, types]);
@ -306,7 +305,7 @@ export default function Page({
takeSnapshot(); takeSnapshot();
onConnect(params); onConnect(params);
}, },
[takeSnapshot, onConnect], [takeSnapshot, onConnect]
); );
const onNodeDragStart: NodeDragHandler = useCallback(() => { const onNodeDragStart: NodeDragHandler = useCallback(() => {
@ -347,7 +346,7 @@ export default function Page({
// Extract the data from the drag event and parse it as a JSON object // Extract the data from the drag event and parse it as a JSON object
const data: { type: string; node?: APIClassType } = JSON.parse( const data: { type: string; node?: APIClassType } = JSON.parse(
event.dataTransfer.getData("nodedata"), event.dataTransfer.getData("nodedata")
); );
const newId = getNodeId(data.type); const newId = getNodeId(data.type);
@ -363,7 +362,7 @@ export default function Page({
}; };
paste( paste(
{ nodes: [newNode], edges: [] }, { nodes: [newNode], edges: [] },
{ x: event.clientX, y: event.clientY }, { x: event.clientX, y: event.clientY }
); );
} else if (event.dataTransfer.types.some((types) => types === "Files")) { } else if (event.dataTransfer.types.some((types) => types === "Files")) {
takeSnapshot(); takeSnapshot();
@ -392,7 +391,7 @@ export default function Page({
} }
}, },
// Specify dependencies for useCallback // Specify dependencies for useCallback
[getNodeId, setNodes, takeSnapshot, paste], [getNodeId, setNodes, takeSnapshot, paste]
); );
const onEdgeUpdateStart = useCallback(() => { const onEdgeUpdateStart = useCallback(() => {
@ -408,7 +407,7 @@ export default function Page({
setEdges((els) => updateEdge(oldEdge, newConnection, els)); setEdges((els) => updateEdge(oldEdge, newConnection, els));
} }
}, },
[setEdges], [setEdges]
); );
const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => { const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => {
@ -441,7 +440,7 @@ export default function Page({
(flow: OnSelectionChangeParams): void => { (flow: OnSelectionChangeParams): void => {
setLastSelection(flow); setLastSelection(flow);
}, },
[], []
); );
const onPaneClick = useCallback((flow) => { const onPaneClick = useCallback((flow) => {

2
src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
View file

@ -8,11 +8,11 @@ import { useState } from "react";
import TableComponent from "../../../../components/tableComponent"; import TableComponent from "../../../../components/tableComponent";
import useAlertStore from "../../../../stores/alertStore"; import useAlertStore from "../../../../stores/alertStore";
import { useMessagesStore } from "../../../../stores/messagesStore"; import { useMessagesStore } from "../../../../stores/messagesStore";
import { messagesSorter } from "../../../../utils/utils";
import HeaderMessagesComponent from "./components/headerMessages"; import HeaderMessagesComponent from "./components/headerMessages";
import useMessagesTable from "./hooks/use-messages-table"; import useMessagesTable from "./hooks/use-messages-table";
import useRemoveMessages from "./hooks/use-remove-messages"; import useRemoveMessages from "./hooks/use-remove-messages";
import useUpdateMessage from "./hooks/use-updateMessage"; import useUpdateMessage from "./hooks/use-updateMessage";
import { messagesSorter } from "../../../../utils/utils";
export default function MessagesPage() { export default function MessagesPage() {
const [columns, setColumns] = useState<Array<ColDef | ColGroupDef>>([]); const [columns, setColumns] = useState<Array<ColDef | ColGroupDef>>([]);

4
src/frontend/src/types/components/index.ts
View file

@ -511,7 +511,7 @@ export type ChatInputType = {
isDragging: boolean; isDragging: boolean;
files: FilePreviewType[]; files: FilePreviewType[];
setFiles: ( setFiles: (
files: FilePreviewType[] | ((prev: FilePreviewType[]) => FilePreviewType[]), files: FilePreviewType[] | ((prev: FilePreviewType[]) => FilePreviewType[])
) => void; ) => void;
chatValue: string; chatValue: string;
inputRef: { inputRef: {
@ -614,7 +614,7 @@ export type chatMessagePropsType = {
updateChat: ( updateChat: (
chat: ChatMessageType, chat: ChatMessageType,
message: string, message: string,
stream_url?: string, stream_url?: string
) => void; ) => void;
}; };

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

@ -17,7 +17,7 @@ type BuildVerticesParams = {
onBuildUpdate?: ( onBuildUpdate?: (
data: VertexBuildTypeAPI, data: VertexBuildTypeAPI,
status: BuildStatus, status: BuildStatus,
buildId: string, buildId: string
) => void; // Replace any with the actual type if it's not any ) => void; // Replace any with the actual type if it's not any
onBuildComplete?: (allNodesValid: boolean) => void; onBuildComplete?: (allNodesValid: boolean) => void;
onBuildError?: (title, list, idList: VertexLayerElementType[]) => void; onBuildError?: (title, list, idList: VertexLayerElementType[]) => void;
@ -55,7 +55,7 @@ export async function updateVerticesOrder(
startNodeId?: string | null, startNodeId?: string | null,
stopNodeId?: string | null, stopNodeId?: string | null,
nodes?: Node[], nodes?: Node[],
edges?: Edge[], edges?: Edge[]
): Promise<{ ): Promise<{
verticesLayers: VertexLayerElementType[][]; verticesLayers: VertexLayerElementType[][];
verticesIds: string[]; verticesIds: string[];
@ -71,7 +71,7 @@ export async function updateVerticesOrder(
startNodeId, startNodeId,
stopNodeId, stopNodeId,
nodes, nodes,
edges, edges
); );
} catch (error: any) { } catch (error: any) {
setErrorData({ setErrorData({
@ -128,7 +128,7 @@ export async function buildVertices({
startNodeId, startNodeId,
stopNodeId, stopNodeId,
nodes, nodes,
edges, edges
); );
if (onValidateNodes) { if (onValidateNodes) {
try { try {
@ -190,14 +190,14 @@ export async function buildVertices({
onBuildUpdate( onBuildUpdate(
getInactiveVertexData(element.id), getInactiveVertexData(element.id),
BuildStatus.INACTIVE, BuildStatus.INACTIVE,
runId, runId
); );
} }
if (element.reference) { if (element.reference) {
onBuildUpdate( onBuildUpdate(
getInactiveVertexData(element.reference), getInactiveVertexData(element.reference),
BuildStatus.INACTIVE, BuildStatus.INACTIVE,
runId, runId
); );
} }
buildResults.push(false); buildResults.push(false);
@ -223,7 +223,7 @@ export async function buildVertices({
if (stop) { if (stop) {
return; return;
} }
}), })
); );
// Once the current layer is built, move to the next layer // Once the current layer is built, move to the next layer
currentLayerIndex += 1; currentLayerIndex += 1;

6
src/frontend/tests/end-to-end/chatInputOutput.spec.ts
View file

@ -24,7 +24,7 @@ test("chat_io_teste", async ({ page }) => {
const jsonContent = readFileSync( const jsonContent = readFileSync(
"src/frontend/tests/end-to-end/assets/ChatTest.json", "src/frontend/tests/end-to-end/assets/ChatTest.json",
"utf-8", "utf-8"
); );
await page.getByTestId("blank-flow").click(); await page.getByTestId("blank-flow").click();
@ -62,7 +62,7 @@ test("chat_io_teste", async ({ page }) => {
// Click and hold on the first element // Click and hold on the first element
await page await page
.locator( .locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[8]/button/div/div', '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[8]/button/div/div'
) )
.hover(); .hover();
await page.mouse.down(); await page.mouse.down();
@ -70,7 +70,7 @@ test("chat_io_teste", async ({ page }) => {
// Move to the second element // Move to the second element
await page await page
.locator( .locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[3]/div/button/div/div', '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[3]/div/button/div/div'
) )
.hover(); .hover();

8
src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
View file

@ -56,7 +56,7 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
.getByTestId("textarea-input_value") .getByTestId("textarea-input_value")
.nth(1) .nth(1)
.fill( .fill(
"testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!", "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!"
); );
await page.getByText("Playground", { exact: true }).last().click(); await page.getByText("Playground", { exact: true }).last().click();
await page.getByTestId("icon-LucideSend").click(); await page.getByTestId("icon-LucideSend").click();
@ -97,9 +97,9 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
await page await page
.getByText( .getByText(
"testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!", "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
{ exact: true }, { exact: true }
) )
.isVisible(), .isVisible()
); );
}); });
@ -209,7 +209,7 @@ test("user must be able to send an image on chat", async ({ page }) => {
const jsonContent = readFileSync( const jsonContent = readFileSync(
"src/frontend/tests/end-to-end/assets/chain.png", "src/frontend/tests/end-to-end/assets/chain.png",
"utf-8", "utf-8"
); );
// Create the DataTransfer and File // Create the DataTransfer and File

14
src/frontend/tests/end-to-end/floatComponent.spec.ts
View file

@ -68,32 +68,32 @@ test("FloatComponent", async ({ page }) => {
await page.getByTestId("showmirostat_eta").click(); await page.getByTestId("showmirostat_eta").click();
expect( expect(
await page.locator('//*[@id="showmirostat_eta"]').isChecked(), await page.locator('//*[@id="showmirostat_eta"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.getByTestId("showmirostat_eta").click(); await page.getByTestId("showmirostat_eta").click();
expect( expect(
await page.locator('//*[@id="showmirostat_eta"]').isChecked(), await page.locator('//*[@id="showmirostat_eta"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.getByTestId("showmirostat_eta").click(); await page.getByTestId("showmirostat_eta").click();
expect( expect(
await page.locator('//*[@id="showmirostat_eta"]').isChecked(), await page.locator('//*[@id="showmirostat_eta"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.getByTestId("showmirostat_eta").click(); await page.getByTestId("showmirostat_eta").click();
expect( expect(
await page.locator('//*[@id="showmirostat_eta"]').isChecked(), await page.locator('//*[@id="showmirostat_eta"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.getByTestId("showmirostat_tau").click(); await page.getByTestId("showmirostat_tau").click();
expect( expect(
await page.locator('//*[@id="showmirostat_tau"]').isChecked(), await page.locator('//*[@id="showmirostat_tau"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.getByTestId("showmirostat_tau").click(); await page.getByTestId("showmirostat_tau").click();
expect( expect(
await page.locator('//*[@id="showmirostat_tau"]').isChecked(), await page.locator('//*[@id="showmirostat_tau"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.getByText("Save Changes", { exact: true }).click(); await page.getByText("Save Changes", { exact: true }).click();
@ -109,7 +109,7 @@ test("FloatComponent", async ({ page }) => {
// showtemperature // showtemperature
await page.locator('//*[@id="showtemperature"]').click(); await page.locator('//*[@id="showtemperature"]').click();
expect( expect(
await page.locator('//*[@id="showtemperature"]').isChecked(), await page.locator('//*[@id="showtemperature"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.getByText("Save Changes", { exact: true }).click(); await page.getByText("Save Changes", { exact: true }).click();

18
src/frontend/tests/end-to-end/inputListComponent.spec.ts
View file

@ -41,19 +41,19 @@ test("InputListComponent", async ({ page }) => {
await page.getByTestId("edit-button-modal").click(); await page.getByTestId("edit-button-modal").click();
expect( expect(
await page.getByTestId("showmetadata_indexing_exclude").isChecked(), await page.getByTestId("showmetadata_indexing_exclude").isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.getByTestId("showmetadata_indexing_exclude").click(); await page.getByTestId("showmetadata_indexing_exclude").click();
expect( expect(
await page.getByTestId("showmetadata_indexing_exclude").isChecked(), await page.getByTestId("showmetadata_indexing_exclude").isChecked()
).toBeTruthy(); ).toBeTruthy();
expect( expect(
await page.getByTestId("showmetadata_indexing_include").isChecked(), await page.getByTestId("showmetadata_indexing_include").isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.getByTestId("showmetadata_indexing_include").click(); await page.getByTestId("showmetadata_indexing_include").click();
expect( expect(
await page.getByTestId("showmetadata_indexing_include").isChecked(), await page.getByTestId("showmetadata_indexing_include").isChecked()
).toBeTruthy(); ).toBeTruthy();
await page await page
@ -93,7 +93,7 @@ test("InputListComponent", async ({ page }) => {
.click(); .click();
const plusButtonLocator = page.getByTestId( const plusButtonLocator = page.getByTestId(
"input-list-plus-btn_metadata_indexing_include-1", "input-list-plus-btn_metadata_indexing_include-1"
); );
const elementCount = await plusButtonLocator?.count(); const elementCount = await plusButtonLocator?.count();
@ -164,12 +164,12 @@ test("InputListComponent", async ({ page }) => {
.click(); .click();
const plusButtonLocatorEdit0 = await page.getByTestId( const plusButtonLocatorEdit0 = await page.getByTestId(
"input-list-plus-btn-edit_metadata_indexing_include-0", "input-list-plus-btn-edit_metadata_indexing_include-0"
); );
const elementCountEdit0 = await plusButtonLocatorEdit0?.count(); const elementCountEdit0 = await plusButtonLocatorEdit0?.count();
const plusButtonLocatorEdit2 = await page.getByTestId( const plusButtonLocatorEdit2 = await page.getByTestId(
"input-list-plus-btn-edit_metadata_indexing_include-2", "input-list-plus-btn-edit_metadata_indexing_include-2"
); );
const elementCountEdit2 = await plusButtonLocatorEdit2?.count(); const elementCountEdit2 = await plusButtonLocatorEdit2?.count();
@ -178,13 +178,13 @@ test("InputListComponent", async ({ page }) => {
} }
const minusButtonLocatorEdit1 = await page.getByTestId( const minusButtonLocatorEdit1 = await page.getByTestId(
"input-list-minus-btn-edit_metadata_indexing_include-1", "input-list-minus-btn-edit_metadata_indexing_include-1"
); );
const elementCountMinusEdit1 = await minusButtonLocatorEdit1?.count(); const elementCountMinusEdit1 = await minusButtonLocatorEdit1?.count();
const minusButtonLocatorEdit2 = await page.getByTestId( const minusButtonLocatorEdit2 = await page.getByTestId(
"input-list-minus-btn-edit_metadata_indexing_include-2", "input-list-minus-btn-edit_metadata_indexing_include-2"
); );
const elementCountMinusEdit2 = await minusButtonLocatorEdit2?.count(); const elementCountMinusEdit2 = await minusButtonLocatorEdit2?.count();

4
src/frontend/tests/end-to-end/promptModalComponent.spec.ts
View file

@ -140,7 +140,7 @@ test("PromptTemplateComponent", async ({ page }) => {
await page.locator('//*[@id="showtemplate"]').click(); await page.locator('//*[@id="showtemplate"]').click();
expect( expect(
await page.locator('//*[@id="showtemplate"]').isChecked(), await page.locator('//*[@id="showtemplate"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showprompt"]').click(); await page.locator('//*[@id="showprompt"]').click();
@ -160,7 +160,7 @@ test("PromptTemplateComponent", async ({ page }) => {
await page.locator('//*[@id="showtemplate"]').click(); await page.locator('//*[@id="showtemplate"]').click();
expect( expect(
await page.locator('//*[@id="showtemplate"]').isChecked(), await page.locator('//*[@id="showtemplate"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showprompt"]').click(); await page.locator('//*[@id="showprompt"]').click();

2
src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
View file

@ -51,7 +51,7 @@ test("TextAreaModalComponent", async ({ page }) => {
await page await page
.getByTestId("textarea-text") .getByTestId("textarea-text")
.fill( .fill(
"test test test test test test test test test test test !@#%*)( 123456789101010101010101111111111 !!!!!!!!!!", "test test test test test test test test test test test !@#%*)( 123456789101010101010101111111111 !!!!!!!!!!"
); );
await page.getByTestId("textarea-text-ExternalLink").click(); await page.getByTestId("textarea-text-ExternalLink").click();

8
src/frontend/tests/end-to-end/textInputOutput.spec.ts
View file

@ -60,7 +60,7 @@ test("TextInputOutputComponent", async ({ page }) => {
// Click and hold on the first element // Click and hold on the first element
await page await page
.locator( .locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div/div', '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div/div'
) )
.hover(); .hover();
await page.mouse.down(); await page.mouse.down();
@ -68,7 +68,7 @@ test("TextInputOutputComponent", async ({ page }) => {
// Move to the second element // Move to the second element
await page await page
.locator( .locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div/div', '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div/div'
) )
.hover(); .hover();
@ -92,7 +92,7 @@ test("TextInputOutputComponent", async ({ page }) => {
// Click and hold on the first element // Click and hold on the first element
await page await page
.locator( .locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[13]/button/div/div', '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[13]/button/div/div'
) )
.hover(); .hover();
await page.mouse.down(); await page.mouse.down();
@ -100,7 +100,7 @@ test("TextInputOutputComponent", async ({ page }) => {
// Move to the second element // Move to the second element
await page await page
.locator( .locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div/div', '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div/div'
) )
.hover(); .hover();