RawComponent
+
+ );
+};
+export default RawComponent;
diff --git a/src/frontend/src/components/accordionComponent/composite/folderAccordionComponent/index.tsx b/src/frontend/src/components/accordionComponent/composite/folderAccordionComponent/index.tsx
new file mode 100644
index 000000000..d4fb95b5c
--- /dev/null
+++ b/src/frontend/src/components/accordionComponent/composite/folderAccordionComponent/index.tsx
@@ -0,0 +1,72 @@
+import { useState } from "react";
+import IconComponent from "../../../../components/genericIconComponent";
+import { AccordionComponentType } from "../../../../types/components";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+} from "../../../ui/custom-accordion";
+
+export default function FolderAccordionComponent({
+ trigger,
+ open = [],
+ keyValue,
+ options,
+}: AccordionComponentType): JSX.Element {
+ const [value, setValue] = useState(
+ open.length === 0 ? "" : getOpenAccordion(),
+ );
+
+ function getOpenAccordion(): string {
+ let value = "";
+ open.forEach((el) => {
+ if (el == trigger) {
+ value = trigger;
+ }
+ });
+
+ return value;
+ }
+
+ function handleClick(): void {
+ value === "" ? setValue(keyValue!) : setValue("");
+ }
+
+ return (
+ <>
+
+
+ {option.title}
+
+ ))}
+
+
+ );
+}
diff --git a/src/frontend/src/components/cardComponent/components/dragCardComponent/index.tsx b/src/frontend/src/components/cardComponent/components/dragCardComponent/index.tsx
new file mode 100644
index 000000000..e4425c61c
--- /dev/null
+++ b/src/frontend/src/components/cardComponent/components/dragCardComponent/index.tsx
@@ -0,0 +1,39 @@
+import { storeComponent } from "../../../../types/store";
+import { cn } from "../../../../utils/utils";
+import ForwardedIconComponent from "../../../genericIconComponent";
+import ShadTooltip from "../../../shadTooltipComponent";
+import { Card, CardHeader, CardTitle } from "../../../ui/card";
+
+export default function DragCardComponent({ data }: { data: storeComponent }) {
+ return (
+ <>
+ -
+ {array.map((item, index) => (
+
- {item} + ))} +
+
+
+
+
+
+
+
+ {data.name}
+
-
+
-
{data?.metadata !== undefined && (
-
@@ -368,11 +413,7 @@ export default function CollectionCardComponent({
authorized ? "Delete" : "Please review your API key."
}
>
- {data.name}
+ {data.name}
+
)}
{data.private && (
@@ -249,19 +284,29 @@ export default function CollectionCardComponent({
)}
- {onDelete && data?.metadata === undefined && (
-
+
@@ -155,27 +145,68 @@ export default function CodeTabsComponent({
) : (
)}
- {Number(activeTab) < 4 && (
-
+
+ )}
+
+ {Number(activeTab) < 4 && (
+ <>
+
+
+
+ )}
+
-
+ )}
+ {allowExport && (
+
+
+
- {tweaks?.tweaksList!.current.includes(
- node["data"]["id"],
- ) && (
+ {tweaks?.tweaksList!.includes(node["data"]["id"]) && (
{node["data"]["node"]["display_name"]}
}
- open={openAccordion}
keyValue={node["data"]["id"]}
>
@@ -258,107 +286,71 @@ export default function CodeTabsComponent({
+ {
+ setData((old) => {
+ let newInputList =
+ cloneDeep(old);
+ newInputList![
+ i
+ ].data.node.template[
+ templateField
+ ].value = target;
+ return newInputList;
+ });
+ tweaks?.buildTweakObject!(
+ node["data"]["id"],
+ target,
+ node.data.node.template[
+ templateField
+ ],
+ );
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <>-
+
@@ -795,7 +891,7 @@ export default function CodeTabsComponent({
)}
- {tweaks?.tweaksList!.current.length === 0 && (
+ {tweaks?.tweaksList!.length === 0 && (
<>
- {node.data.node.template[
- templateField
- ].type === "str" &&
- !node.data.node.template[
- templateField
- ].options ? (
- {
+ setData((old) => {
+ let newInputList =
+ cloneDeep(old);
+ newInputList![
+ i
+ ].data.node.template[
+ templateField
+ ].value = target;
+ return newInputList;
+ });
+ tweaks?.buildTweakObject!(
+ node["data"]["id"],
+ target,
node.data.node.template[
templateField
- ].password ?? false
- }
+ ],
+ );
+ }}
+ />
+
+
+
+
+
+
+
- {node.data.node.template[
+ {
- setData((old) => {
- let newInputList =
- cloneDeep(old);
- newInputList![
- i
- ].data.node.template[
- templateField
- ].value = target;
- return newInputList;
- });
- tweaks.buildTweakObject!(
- node["data"]["id"],
- target,
- node.data.node.template[
- templateField
- ],
- );
- }}
- />
- ) : node.data.node.template[
+ ].options
+ }
+ >
+
-
+ {
- setData((old) => {
- let newInputList =
- cloneDeep(old);
- newInputList![
- i
- ].data.node.template[
- templateField
- ].value = target;
- return newInputList;
- });
- tweaks.buildTweakObject!(
- node["data"]["id"],
- target,
- node.data.node
- .template[
- templateField
- ],
- );
- }}
- />
-
- ) : (
-
+
- ) : node.data.node.template[
- templateField
- ].type === "bool" ? (
+
{" "}
- ) : node.data.node.template[
- templateField
- ].type === "file" ? (
+
No tweaks are available for this flow.
diff --git a/src/frontend/src/components/csvOutputComponent/index.tsx b/src/frontend/src/components/csvOutputComponent/index.tsx
index fcf59029c..a98d9c028 100644
--- a/src/frontend/src/components/csvOutputComponent/index.tsx
+++ b/src/frontend/src/components/csvOutputComponent/index.tsx
@@ -1,7 +1,6 @@
import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
import "ag-grid-community/styles/ag-theme-balham.css"; // Optional Theme applied to the grid
-import { AgGridReact } from "ag-grid-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
import {
CSVError,
CSVNoDataError,
@@ -11,6 +10,7 @@ import { useDarkStore } from "../../stores/darkStore";
import { FlowPoolObjectType } from "../../types/chat";
import { NodeType } from "../../types/flow";
import ForwardedIconComponent from "../genericIconComponent";
+import TableComponent from "../tableComponent";
import Loading from "../ui/loading";
import { convertCSVToData } from "./helpers/convert-data-function";
@@ -54,8 +54,6 @@ function CsvOutputComponent({
const [colDefs, setColDefs] = useState([]);
const [status, setStatus] = useState("loading");
- var currentRowHeight: number;
- var minRowHeight = 25;
const defaultColDef = useMemo(() => {
return {
width: 200,
@@ -82,48 +80,6 @@ function CsvOutputComponent({
}
}, [separator]);
- const getRowHeight = useCallback(() => {
- return currentRowHeight;
- }, []);
-
- const onGridReady = useCallback((params: any) => {
- minRowHeight = params.api.getSizesForCurrentTheme().rowHeight;
- currentRowHeight = minRowHeight;
- }, []);
-
- const updateRowHeight = (params: { api: any }) => {
- const bodyViewport = document.querySelector(".ag-body-viewport");
- if (!bodyViewport) {
- return;
- }
- var gridHeight = bodyViewport.clientHeight;
- var renderedRowCount = params.api.getDisplayedRowCount();
-
- if (renderedRowCount * minRowHeight >= gridHeight) {
- if (currentRowHeight !== minRowHeight) {
- currentRowHeight = minRowHeight;
- params.api.resetRowHeights();
- }
- } else {
- currentRowHeight = Math.floor(gridHeight / renderedRowCount);
- params.api.resetRowHeights();
- }
- };
-
- const onFirstDataRendered = useCallback(
- (params: any) => {
- updateRowHeight(params);
- },
- [updateRowHeight],
- );
-
- const onGridSizeChanged = useCallback(
- (params: any) => {
- updateRowHeight(params);
- },
- [updateRowHeight],
- );
-
return (
- {/*
-
- */}
+
{hasStore && (
)}
- {left === true &&
- type === "str" &&
- !data.node?.template[name].options ? (
+
{status === "nodata" && (
@@ -158,14 +114,10 @@ function CsvOutputComponent({
className={`${dark ? "ag-theme-balham-dark" : "ag-theme-balham"}`}
style={{ height: "100%", width: "100%" }}
>
- {
+ setOpenLogs(true);
+ }}
+ className="cursor-pointer"
+ >
+
{
@@ -132,7 +146,7 @@ export const MenuBar = ({
title: UPLOAD_ERROR_ALERT,
list: [error],
});
- }
+ },
);
}}
>
@@ -194,6 +208,7 @@ export const MenuBar = ({
open={openSettings}
setOpen={setOpenSettings}
>
+
{(currentFlow.updated_at || saveLoading) && (
- {data.node?.template[name].list ? (
+
+
)}
- ) : (
+
+
)}
- )}
+
- ) : left === true && type === "bool" ? (
+
+
+
+
+
+
+
)}
- ) : left === true && type === "code" ? (
+
+
+
+
+
{
data.node!.template[name].file_path = filePath;
}}
>
- ) : left === true && type === "int" ? (
+
+
+
+
+
+
+
+
+
{
const valueToNumbers = convertValuesToNumbers(newValue);
setErrorDuplicateKey(hasDuplicateKeys(valueToNumbers));
- // if data.node?.template[name].list is true, then the value is an array of objects
+ // if data.node?.template[name]?.list is true, then the value is an array of objects
// else we need to get the first object of the array
- if (data.node?.template[name].list) {
+ if (data.node?.template[name]?.list) {
handleOnNewValue(valueToNumbers);
} else handleOnNewValue(valueToNumbers[0]);
}}
- isList={data.node?.template[name].list ?? false}
+ isList={data.node?.template[name]?.list ?? false}
/>
- ) : (
- <>
- )}
+
);
diff --git a/src/frontend/src/customNodes/genericNode/components/tooltipRenderComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/tooltipRenderComponent/index.tsx
new file mode 100644
index 000000000..ed2760161
--- /dev/null
+++ b/src/frontend/src/customNodes/genericNode/components/tooltipRenderComponent/index.tsx
@@ -0,0 +1,91 @@
+import React from "react";
+import {
+ INPUT_HANDLER_HOVER,
+ OUTPUT_HANDLER_HOVER,
+} from "../../../../constants/constants";
+import {
+ nodeColors,
+ nodeIconsLucide,
+ nodeNames,
+} from "../../../../utils/styleUtils";
+import { classNames } from "../../../../utils/utils";
+
+const TooltipRenderComponent = ({ item, index, left }) => {
+ const Icon = nodeIconsLucide[item.family] ?? nodeIconsLucide["unknown"];
+
+ return (
+ (null);
@@ -124,7 +124,7 @@ export default function GenericNode({
updateNodeInternals(data.id);
},
- [data.id, data.node, setNode, setIsOutdated]
+ [data.id, data.node, setNode, setIsOutdated],
);
if (!data.node!.template) {
@@ -264,7 +264,7 @@ export default function GenericNode({
const isDark = useDarkStore((state) => state.dark);
const renderIconStatus = (
buildStatus: BuildStatus | undefined,
- validationStatus: validationStatusType | null
+ validationStatus: validationStatusType | null,
) => {
if (buildStatus === BuildStatus.BUILDING) {
return {
setInputDescription(true);
@@ -800,13 +800,13 @@ export default function GenericNode({
}
title={getFieldTitle(
data.node?.template!,
- templateField
+ templateField,
)}
info={data.node?.template[templateField].info}
name={templateField}
tooltipTitle={
data.node?.template[templateField].input_types?.join(
- "\n"
+ "\n",
) ?? data.node?.template[templateField].type
}
required={data.node!.template[templateField].required}
@@ -833,7 +833,7 @@ export default function GenericNode({
+
+
+
+
{
@@ -400,32 +424,38 @@ const EditNodeModal = forwardRef(
}}
/>
- ) : myData.node?.template[templateParam]
- .type === "str" &&
- myData.node.template[templateParam]
- .options ? (
+
+
+
handleOnNewValue(value, templateParam)
}
value={
- myData.node.template[templateParam]
+ myData.node!.template[templateParam]
.value ?? "Choose an option"
}
id={
"dropdown-edit-" +
- myData.node.template[templateParam].name
+ myData.node!.template[templateParam]
+ .name
}
>
- ) : myData.node?.template[templateParam]
- .type === "int" ? (
+
+
+
{
@@ -447,21 +478,24 @@ const EditNodeModal = forwardRef(
}}
/>
- ) : myData.node?.template[templateParam]
- .type === "file" ? (
+
+
+
{
handleOnNewValue(value, templateParam);
}}
fileTypes={
- myData.node.template[templateParam]
+ myData.node!.template[templateParam]
.fileTypes
}
onFileChange={(filePath: string) => {
@@ -471,8 +505,11 @@ const EditNodeModal = forwardRef(
}}
>
- ) : myData.node?.template[templateParam]
- .type === "prompt" ? (
+
+
+
{
@@ -494,21 +531,26 @@ const EditNodeModal = forwardRef(
}}
id={
"prompt-area-edit-" +
- myData.node.template[templateParam].name
+ myData.node!.template[templateParam]
+ .name
}
data-testid={
"modal-prompt-input-" +
- myData.node.template[templateParam].name
+ myData.node!.template[templateParam]
+ .name
}
/>
- ) : myData.node?.template[templateParam]
- .type === "code" ? (
+
+
+
{
@@ -532,16 +574,16 @@ const EditNodeModal = forwardRef(
}}
id={
"code-area-edit" +
- myData.node.template[templateParam].name
+ myData.node!.template[templateParam]
+ .name
}
/>
- ) : myData.node?.template[templateParam]
- .type === "Any" ? (
- "-"
- ) : (
-
- )}
+
+
+
+ <>-
+
{
+ try {
+ const response = await api.get(`${BASE_URL_API}folders/`);
+ return response?.data;
+ } catch (error) {
+ throw error;
+ }
+}
+
+export async function addFolder(data: AddFolderType): Promise {
+ const body = {
+ name: data.name,
+ description: data.description,
+ flows_list: data.flows ?? [],
+ components_list: data.components ?? [],
+ };
+
+ try {
+ const response = await api.post(`${BASE_URL_API}folders/`, body);
+ return response?.data;
+ } catch (error) {
+ throw error;
+ }
+}
+
+export async function updateFolder(
+ body: FolderType,
+ folderId: string,
+): Promise {
+ try {
+ const response = await api.patch(
+ `${BASE_URL_API}folders/${folderId}`,
+ body,
+ );
+ return response?.data;
+ } catch (error) {
+ throw error;
+ }
+}
+
+export async function deleteFolder(folderId: string) {
+ try {
+ const response = await api.delete(`${BASE_URL_API}folders/${folderId}`);
+ return response?.data;
+ } catch (error) {
+ throw error;
+ }
+}
+
+export async function getFolderById(folderId: string): Promise {
+ try {
+ const response = await api.get(`${BASE_URL_API}folders/${folderId}`);
+ return response?.data;
+ } catch (error) {
+ throw error;
+ }
+}
+
+export async function getStarterProjects(): Promise {
+ try {
+ const response = await api.get(`${BASE_URL_API}folders/starter-projects`);
+ return response?.data;
+ } catch (error) {
+ throw error;
+ }
+}
+
+export async function downloadFlowsFromFolders(folderId: string): Promise<{
+ flows: FlowType[];
+ folder_name: string;
+ folder_description: string;
+}> {
+ try {
+ const response = await api.get(
+ `${BASE_URL_API}folders/download/${folderId}`,
+ );
+ if (response?.status !== 200) {
+ throw new Error(`HTTP error! status: ${response?.status}`);
+ }
+ console.log(response.data);
+ return response.data;
+ } catch (error) {
+ console.error(error);
+ throw error;
+ }
+}
+
+export async function uploadFlowsFromFolders(
+ flows: FormData,
+): Promise {
+ try {
+ const response = await api.post(`${BASE_URL_API}folders/upload/`, flows);
+
+ if (response?.status !== 201) {
+ throw new Error(`HTTP error! status: ${response?.status}`);
+ }
+ return response.data;
+ } catch (error) {
+ console.error(error);
+ throw error;
+ }
+}
+
+export async function moveFlowToFolder(
+ flowId: string,
+ folderId: string,
+): Promise {
+ try {
+ const response = await api.patch(
+ `${BASE_URL_API}folders/move_to_folder/${flowId}/${folderId}`,
+ );
+ return response?.data;
+ } catch (error) {
+ throw error;
+ }
+}
diff --git a/src/frontend/src/pages/MainPage/utils/get-name-by-type.ts b/src/frontend/src/pages/MainPage/utils/get-name-by-type.ts
new file mode 100644
index 000000000..a2a495fa9
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/utils/get-name-by-type.ts
@@ -0,0 +1,10 @@
+export const getNameByType = (type: string) => {
+ switch (type) {
+ case "all":
+ return "Component or Flow";
+ case "component":
+ return "Component";
+ default:
+ return "Flow";
+ }
+};
diff --git a/src/frontend/src/pages/MainPage/utils/handle-download-folder.ts b/src/frontend/src/pages/MainPage/utils/handle-download-folder.ts
new file mode 100644
index 000000000..6817622d0
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/utils/handle-download-folder.ts
@@ -0,0 +1,23 @@
+import { useFolderStore } from "../../../stores/foldersStore";
+import { downloadFlowsFromFolders } from "../services";
+
+export function handleDownloadFolderFn(folderId: string) {
+ downloadFlowsFromFolders(folderId).then((data) => {
+ const folders = useFolderStore.getState().folders;
+
+ const folder = folders.find((f) => f.id === folderId);
+
+ data.folder_name = folder?.name || "folder";
+ data.folder_description = folder?.description || "";
+
+ const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
+ JSON.stringify(data),
+ )}`;
+
+ const link = document.createElement("a");
+ link.href = jsonString;
+ link.download = `${data.folder_name}.json`;
+
+ link.click();
+ });
+}
diff --git a/src/frontend/src/pages/MainPage/utils/sort-flows.ts b/src/frontend/src/pages/MainPage/utils/sort-flows.ts
new file mode 100644
index 000000000..1b8825102
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/utils/sort-flows.ts
@@ -0,0 +1,25 @@
+export const sortFlows = (flows, type) => {
+ const isComponent = type === "component";
+
+ const sortByDate = (a, b) => {
+ const dateA = a?.updated_at || a?.date_created;
+ const dateB = b?.updated_at || b?.date_created;
+
+ if (dateA && dateB) {
+ return new Date(dateB).getTime() - new Date(dateA).getTime();
+ } else if (dateA) {
+ return 1;
+ } else if (dateB) {
+ return -1;
+ } else {
+ return 0;
+ }
+ };
+
+ const filteredFlows =
+ type === "all"
+ ? flows
+ : flows?.filter((f) => (f?.is_component ?? false) === isComponent);
+
+ return filteredFlows?.sort(sortByDate) ?? [];
+};
diff --git a/src/frontend/src/pages/Playground/index.tsx b/src/frontend/src/pages/Playground/index.tsx
index 9d538494b..b65c64c66 100644
--- a/src/frontend/src/pages/Playground/index.tsx
+++ b/src/frontend/src/pages/Playground/index.tsx
@@ -1,64 +1,69 @@
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
-import { getComponent } from "../../controllers/API";
-import cloneFLowWithParent from "../../utils/storeUtils";
import LoadingComponent from "../../components/loadingComponent";
-import useFlowStore from "../../stores/flowStore";
+import { getComponent } from "../../controllers/API";
import IOModal from "../../modals/IOModal";
+import useFlowStore from "../../stores/flowStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import cloneFLowWithParent from "../../utils/storeUtils";
export default function PlaygroundPage() {
- const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
- const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
- const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
- const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
- const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
- const setNodes = useFlowStore((state) => state.setNodes);
- const setEdges = useFlowStore((state) => state.setEdges);
- const cleanFlowPool = useFlowStore((state) => state.CleanFlowPool);
+ const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+ const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
+ const setCurrentFlowId = useFlowsManagerStore(
+ (state) => state.setCurrentFlowId,
+ );
+ const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+ const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
+ const setNodes = useFlowStore((state) => state.setNodes);
+ const setEdges = useFlowStore((state) => state.setEdges);
+ const cleanFlowPool = useFlowStore((state) => state.CleanFlowPool);
- const { id } = useParams();
- const [loading, setLoading] = useState(true);
- async function getFlowData() {
- const res = await getComponent(id!);
- const newFlow = cloneFLowWithParent(res, res.id, false, true);
- return newFlow;
+ const { id } = useParams();
+ const [loading, setLoading] = useState(true);
+ async function getFlowData() {
+ const res = await getComponent(id!);
+ const newFlow = cloneFLowWithParent(res, res.id, false, true);
+ return newFlow;
+ }
+
+ // Set flow tab id
+ useEffect(() => {
+ console.log("id", id);
+ if (getFlowById(id!)) {
+ setCurrentFlowId(id!);
+ } else {
+ getFlowData().then((flow) => {
+ setCurrentFlow(flow);
+ });
}
+ }, [id]);
- // Set flow tab id
- useEffect(() => {
- console.log("id", id);
- if (getFlowById(id!)) {
- setCurrentFlowId(id!);
- }
- else {
- getFlowData().then((flow) => {
- setCurrentFlow(flow);
- });
- }
- }, [id]);
+ useEffect(() => {
+ if (currentFlow) {
+ setNodes(currentFlow?.data?.nodes ?? [], true);
+ setEdges(currentFlow?.data?.edges ?? [], true);
+ cleanFlowPool();
+ setLoading(false);
+ }
+ return () => {
+ setNodes([], true);
+ setEdges([], true);
+ cleanFlowPool();
+ };
+ }, [currentFlow]);
- useEffect(() => {
- if (currentFlow) {
- setNodes(currentFlow?.data?.nodes ?? [], true);
- setEdges(currentFlow?.data?.edges ?? [], true);
- cleanFlowPool();
- setLoading(false);
- }
- return () => {
- setNodes([], true);
- setEdges([], true);
- cleanFlowPool();
- };
- }, [currentFlow]);
-
-
- return (
-
diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index 7a077a6b4..8941ed52d 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -46,7 +46,7 @@ export default function GlobalVariablesPage() {
name: string;
default_fields: string | undefined;
}[]
- >();
+ >([]);
useEffect(() => {
const rows: Array<{
@@ -170,17 +170,23 @@ export default function GlobalVariablesPage() {
@@ -507,39 +329,27 @@ export default function ParameterComponent({
componentName={name}
disabled={disabled}
value={
- !data.node.template[name].value ||
- data.node.template[name].value === ""
+ !data.node!.template[name]?.value ||
+ data.node!.template[name]?.value === ""
? [""]
- : data.node.template[name].value
+ : data.node!.template[name]?.value
}
onChange={handleOnNewValue}
/>
- {/* {data.node?.template[name].refresh_button && (
-
- ) : data.node?.template[name].multiline ? (
+
-
- )} */}
+ {index === 0 && (
+ {left ? INPUT_HANDLER_HOVER : OUTPUT_HANDLER_HOVER}
+ )}
+ 0 ? "mt-2 flex items-center" : "mt-3 flex items-center",
+ )}
+ >
+
+
+ {index === item.display_name.split(", ").length - 1
+ ? el
+ : (el += `, `)}
+
+
+ ))
+ : item.display_name}
+
+ ) : (
+
+ {" "}
+ {item.type === "" ? "" : " - "}
+ {item.type.split(", ").length > 2
+ ? item.type.split(", ").map((el, index) => (
+
+
+ {index === item.type.split(", ").length - 1
+ ? el
+ : (el += `, `)}
+
+
+ ))
+ : item.type}
+
+ )}
+
+
+
+ );
+};
+
+export default TooltipRenderComponent;
diff --git a/src/frontend/src/customNodes/genericNode/index.tsx b/src/frontend/src/customNodes/genericNode/index.tsx
index ade6e5302..e55531e68 100644
--- a/src/frontend/src/customNodes/genericNode/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/index.tsx
@@ -60,14 +60,14 @@ export default function GenericNode({
const [nodeName, setNodeName] = useState(data.node!.display_name);
const [inputDescription, setInputDescription] = useState(false);
const [nodeDescription, setNodeDescription] = useState(
- data.node?.description!
+ data.node?.description!,
);
const [isOutdated, setIsOutdated] = useState(false);
const buildStatus = useFlowStore(
- (state) => state.flowBuildStatus[data.id]?.status
+ (state) => state.flowBuildStatus[data.id]?.status,
);
const lastRunTime = useFlowStore(
- (state) => state.flowBuildStatus[data.id]?.timestamp
+ (state) => state.flowBuildStatus[data.id]?.timestamp,
);
const [validationStatus, setValidationStatus] =
useState
+
+
+ {nodeNames[item.family] ?? "Other"}{" "}
+ {item?.display_name && item?.display_name?.length > 0 ? (
+
+ {" "}
+ {item.display_name === "" ? "" : " - "}
+ {item.display_name.split(", ").length > 2
+ ? item.display_name.split(", ").map((el, index) => (
+
{" "}
diff --git a/src/frontend/src/customNodes/hooks/use-fetch-data-on-mount.tsx b/src/frontend/src/customNodes/hooks/use-fetch-data-on-mount.tsx
new file mode 100644
index 000000000..3fc3fbe72
--- /dev/null
+++ b/src/frontend/src/customNodes/hooks/use-fetch-data-on-mount.tsx
@@ -0,0 +1,54 @@
+import { cloneDeep } from "lodash";
+import { useEffect } from "react";
+import useAlertStore from "../../stores/alertStore";
+import { ResponseErrorDetailAPI } from "../../types/api";
+
+const useFetchDataOnMount = (
+ data,
+ name,
+ handleUpdateValues,
+ setNode,
+ renderTooltips,
+ setIsLoading,
+) => {
+ const setErrorData = useAlertStore((state) => state.setErrorData);
+
+ useEffect(() => {
+ async function fetchData() {
+ if (
+ (data.node?.template[name]?.real_time_refresh ||
+ data.node?.template[name]?.refresh_button) &&
+ // options can be undefined but not an empty array
+ (data.node?.template[name]?.options?.length ?? 0) === 0
+ ) {
+ setIsLoading(true);
+ try {
+ let newTemplate = await handleUpdateValues(name, data);
+
+ if (newTemplate) {
+ setNode(data.id, (oldNode) => {
+ let newNode = cloneDeep(oldNode);
+ newNode.data = {
+ ...newNode.data,
+ };
+ newNode.data.node.template = newTemplate;
+ return newNode;
+ });
+ }
+ } catch (error) {
+ let responseError = error as ResponseErrorDetailAPI;
+
+ setErrorData({
+ title: "Error while updating the Component",
+ list: [responseError.response.data.detail ?? "Unknown error"],
+ });
+ }
+ setIsLoading(false);
+ renderTooltips();
+ }
+ }
+ fetchData();
+ }, []); // Empty dependency array ensures that this effect runs only once, on mount
+};
+
+export default useFetchDataOnMount;
diff --git a/src/frontend/src/customNodes/hooks/use-handle-new-value.tsx b/src/frontend/src/customNodes/hooks/use-handle-new-value.tsx
new file mode 100644
index 000000000..7de830eda
--- /dev/null
+++ b/src/frontend/src/customNodes/hooks/use-handle-new-value.tsx
@@ -0,0 +1,75 @@
+import { cloneDeep } from "lodash";
+import useAlertStore from "../../stores/alertStore";
+import { ResponseErrorTypeAPI } from "../../types/api";
+
+const useHandleOnNewValue = (
+ data,
+ name,
+ takeSnapshot,
+ handleUpdateValues,
+ debouncedHandleUpdateValues,
+ setNode,
+ renderTooltips,
+ isLoading,
+ setIsLoading,
+) => {
+ const setErrorData = useAlertStore((state) => state.setErrorData);
+
+ const handleOnNewValue = async (newValue, skipSnapshot = false) => {
+ const nodeTemplate = data.node!.template[name];
+ const currentValue = nodeTemplate.value;
+
+ if (currentValue !== newValue && !skipSnapshot) {
+ takeSnapshot();
+ }
+
+ const shouldUpdate =
+ data.node?.template[name].real_time_refresh &&
+ !data.node?.template[name].refresh_button &&
+ currentValue !== newValue;
+
+ const typeToDebounce = nodeTemplate.type;
+
+ nodeTemplate.value = newValue;
+
+ let newTemplate;
+ if (shouldUpdate) {
+ setIsLoading(true);
+ try {
+ if (["int"].includes(typeToDebounce)) {
+ newTemplate = await handleUpdateValues(name, data);
+ } else {
+ newTemplate = await debouncedHandleUpdateValues(name, data);
+ }
+ } catch (error) {
+ let responseError = error as ResponseErrorTypeAPI;
+ setErrorData({
+ title: "Error while updating the Component",
+ list: [responseError.response.data.detail.error ?? "Unknown error"],
+ });
+ }
+ setIsLoading(false);
+ }
+
+ setNode(data.id, (oldNode) => {
+ const newNode = cloneDeep(oldNode);
+ newNode.data = {
+ ...newNode.data,
+ };
+
+ if (data.node?.template[name].real_time_refresh && newTemplate) {
+ newNode.data.node.template = newTemplate;
+ } else {
+ newNode.data.node.template[name].value = newValue;
+ }
+
+ return newNode;
+ });
+
+ renderTooltips();
+ };
+
+ return { handleOnNewValue };
+};
+
+export default useHandleOnNewValue;
diff --git a/src/frontend/src/customNodes/hooks/use-handle-node-class.tsx b/src/frontend/src/customNodes/hooks/use-handle-node-class.tsx
new file mode 100644
index 000000000..412658d77
--- /dev/null
+++ b/src/frontend/src/customNodes/hooks/use-handle-node-class.tsx
@@ -0,0 +1,40 @@
+import { cloneDeep } from "lodash";
+
+const useHandleNodeClass = (
+ data,
+ name,
+ takeSnapshot,
+ setNode,
+ updateNodeInternals,
+ renderTooltips,
+) => {
+ const handleNodeClass = (newNodeClass, code) => {
+ if (!data.node) return;
+ if (data.node!.template[name].value !== code) {
+ takeSnapshot();
+ }
+
+ setNode(data.id, (oldNode) => {
+ let newNode = cloneDeep(oldNode);
+
+ newNode.data = {
+ ...newNode.data,
+ node: newNodeClass,
+ description: newNodeClass.description ?? data.node!.description,
+ display_name: newNodeClass.display_name ?? data.node!.display_name,
+ };
+
+ newNode.data.node.template[name].value = code;
+
+ return newNode;
+ });
+
+ updateNodeInternals(data.id);
+
+ renderTooltips();
+ };
+
+ return { handleNodeClass };
+};
+
+export default useHandleNodeClass;
diff --git a/src/frontend/src/customNodes/hooks/use-handle-refresh-buttons.tsx b/src/frontend/src/customNodes/hooks/use-handle-refresh-buttons.tsx
new file mode 100644
index 000000000..19f2a3c29
--- /dev/null
+++ b/src/frontend/src/customNodes/hooks/use-handle-refresh-buttons.tsx
@@ -0,0 +1,39 @@
+import { cloneDeep } from "lodash";
+import useAlertStore from "../../stores/alertStore";
+import { ResponseErrorDetailAPI } from "../../types/api";
+import { handleUpdateValues } from "../../utils/parameterUtils";
+
+const useHandleRefreshButtonPress = (setIsLoading, setNode, renderTooltips) => {
+ const setErrorData = useAlertStore((state) => state.setErrorData);
+
+ const handleRefreshButtonPress = async (name, data) => {
+ setIsLoading(true);
+ try {
+ let newTemplate = await handleUpdateValues(name, data);
+
+ if (newTemplate) {
+ setNode(data.id, (oldNode) => {
+ let newNode = cloneDeep(oldNode);
+ newNode.data = {
+ ...newNode.data,
+ };
+ newNode.data.node.template = newTemplate;
+ return newNode;
+ });
+ }
+ } catch (error) {
+ let responseError = error as ResponseErrorDetailAPI;
+
+ setErrorData({
+ title: "Error while updating the Component",
+ list: [responseError.response.data.detail ?? "Unknown error"],
+ });
+ }
+ setIsLoading(false);
+ renderTooltips();
+ };
+
+ return { handleRefreshButtonPress };
+};
+
+export default useHandleRefreshButtonPress;
diff --git a/src/frontend/src/icons/GradientSparkles/index.tsx b/src/frontend/src/icons/GradientSparkles/index.tsx
index 470708f89..31d939f3d 100644
--- a/src/frontend/src/icons/GradientSparkles/index.tsx
+++ b/src/frontend/src/icons/GradientSparkles/index.tsx
@@ -56,7 +56,11 @@ export const GradientGroup = (props) => {
- ([]);
+ const [selectedFlows, setSelectedFlows] = useState([]);
+
+ const componentsList = flows
+ .filter((flow) => flow.is_component && flow.folder_id !== null)
+ .map((flow) => ({ id: flow.id, name: flow.name }));
+
+ const flowsList = flows
+ .filter((flow) => !flow.is_component && flow.folder_id !== null)
+ .map((flow) => ({ id: flow.id, name: flow.name }));
+
+ useEffect(() => {
+ setValue("components", selectedComponents);
+ setValue("flows", selectedFlows);
+ }, [selectedComponents, selectedFlows]);
+
+ useEffect(() => {
+ if (folderToEdit) {
+ setValue("name", folderToEdit.name);
+ setValue("description", folderToEdit.description);
+ console.log(folderToEdit);
+
+ // setSelectedComponents(folderToEdit.components);
+ // setSelectedFlows(folderToEdit.flows);
+ return;
+ }
+ setValue("name", "");
+ setValue("description", "");
+ setSelectedComponents([]);
+ setSelectedFlows([]);
+ }, [folderToEdit]);
+
+ return (
+ <>
+ >({
+ resolver: zodResolver(FolderFormsSchema),
+ defaultValues: {
+ name: "",
+ description: "",
+ components: [],
+ flows: [],
+ },
+ mode: "all",
+ });
+
+ const folderToEdit = useFolderStore((state) => state.folderToEdit);
+ const { onSubmit: onSubmitFolder } = useFolderSubmit(setOpen, folderToEdit);
+
+ const onSubmit = (data) => {
+ onSubmitFolder(data);
+ };
+
+ return (
+ <>
+
+
+
+ {folderToEdit ? "Edit" : "New"} Folder
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
index 36d8be382..be4331be8 100644
--- a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
@@ -4,6 +4,7 @@ import ImageViewer from "../../../../components/ImageViewer";
import CsvOutputComponent from "../../../../components/csvOutputComponent";
import InputListComponent from "../../../../components/inputListComponent";
import PdfViewer from "../../../../components/pdfViewer";
+import RecordsOutputComponent from "../../../../components/recordsOutputComponent";
import {
Select,
SelectContent,
@@ -47,6 +48,7 @@ export default function IOFieldView({
}
}
};
+
const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
function handleOutputType() {
@@ -204,7 +206,7 @@ export default function IOFieldView({
{separator}
- )
+ ),
)}
@@ -280,6 +282,15 @@ export default function IOFieldView({
/>
);
+ case "RecordsOutput":
+ return (
+
![]()
),
- [chat.message, chatMessage]
+ [chat.message, chatMessage],
)}
{chat.files && (
@@ -306,7 +306,7 @@ dark:prose-invert"
parts.push(
{chat.message[match[1]]}
-
+ ,
);
}
@@ -324,7 +324,7 @@ dark:prose-invert"
) : (
+ {value != null && value != "" ? value : "None"}
+
+ );
+ return htmlContent;
+}
+
+export default buildContent;
diff --git a/src/frontend/src/modals/apiModal/utils/build-tweaks.ts b/src/frontend/src/modals/apiModal/utils/build-tweaks.ts
new file mode 100644
index 000000000..82d35302a
--- /dev/null
+++ b/src/frontend/src/modals/apiModal/utils/build-tweaks.ts
@@ -0,0 +1,8 @@
+import { FlowType } from "../../../types/flow";
+
+export function buildTweaks(flow: FlowType) {
+ return flow.data!.nodes.reduce((acc, node) => {
+ acc[node.data.id] = {};
+ return acc;
+ }, {});
+}
diff --git a/src/frontend/src/modals/apiModal/utils/check-can-build-tweak-object.ts b/src/frontend/src/modals/apiModal/utils/check-can-build-tweak-object.ts
new file mode 100644
index 000000000..5a859cae8
--- /dev/null
+++ b/src/frontend/src/modals/apiModal/utils/check-can-build-tweak-object.ts
@@ -0,0 +1,13 @@
+import { LANGFLOW_SUPPORTED_TYPES } from "../../../constants/constants";
+
+export const checkCanBuildTweakObject = (element, templateField) => {
+ return (
+ element.data.node.template[templateField] &&
+ templateField.charAt(0) !== "_" &&
+ element.data.node.template[templateField].show &&
+ LANGFLOW_SUPPORTED_TYPES.has(
+ element.data.node.template[templateField].type,
+ ) &&
+ templateField !== "code"
+ );
+};
diff --git a/src/frontend/src/modals/apiModal/utils/get-changes-types.ts b/src/frontend/src/modals/apiModal/utils/get-changes-types.ts
new file mode 100644
index 000000000..e8e912ff3
--- /dev/null
+++ b/src/frontend/src/modals/apiModal/utils/get-changes-types.ts
@@ -0,0 +1,26 @@
+import { TemplateVariableType } from "../../../types/api";
+import { convertArrayToObj } from "../../../utils/reactflowUtils";
+
+export const getChangesType = (
+ changes: string | string[] | boolean | number | Object[] | Object,
+ template: TemplateVariableType,
+) => {
+ if (typeof changes === "string" && template.type === "float") {
+ changes = parseFloat(changes);
+ }
+ if (typeof changes === "string" && template.type === "int") {
+ changes = parseInt(changes);
+ }
+ if (template.list === true && Array.isArray(changes)) {
+ changes = changes?.filter((x) => x !== "");
+ }
+
+ if (template.type === "dict" && Array.isArray(changes)) {
+ changes = convertArrayToObj(changes);
+ }
+
+ if (template.type === "NestedDict") {
+ changes = JSON.stringify(changes);
+ }
+ return changes;
+};
diff --git a/src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts b/src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts
new file mode 100644
index 000000000..fb30a57a1
--- /dev/null
+++ b/src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts
@@ -0,0 +1,28 @@
+import { LANGFLOW_SUPPORTED_TYPES } from "../../../constants/constants";
+
+export const getNodesWithDefaultValue = (flow) => {
+ let arrNodesWithValues: string[] = [];
+
+ flow["data"]!["nodes"].forEach((node) => {
+ if (!node["data"]["node"]["template"]) {
+ return;
+ }
+ Object.keys(node["data"]["node"]["template"])
+ .filter(
+ (templateField) =>
+ templateField.charAt(0) !== "_" &&
+ node.data.node.template[templateField].show &&
+ LANGFLOW_SUPPORTED_TYPES.has(
+ node.data.node.template[templateField].type,
+ ),
+ )
+ .map((n, i) => {
+ arrNodesWithValues.push(node["id"]);
+ });
+ });
+
+ const tweaksListFiltered = arrNodesWithValues.filter((value, index, self) => {
+ return self.indexOf(value) === index;
+ });
+ return tweaksListFiltered;
+};
diff --git a/src/frontend/src/modals/apiModal/utils/get-value.ts b/src/frontend/src/modals/apiModal/utils/get-value.ts
new file mode 100644
index 000000000..df8e5bdde
--- /dev/null
+++ b/src/frontend/src/modals/apiModal/utils/get-value.ts
@@ -0,0 +1,29 @@
+import { TemplateVariableType } from "../../../types/api";
+import { NodeType } from "../../../types/flow";
+
+export const getValue = (
+ value: string,
+ node: NodeType,
+ template: TemplateVariableType,
+ tweak: Object[],
+) => {
+ let returnValue = value ?? "";
+
+ if (tweak.length > 0) {
+ for (const obj of tweak) {
+ Object.keys(obj).forEach((key) => {
+ const value = obj[key];
+ if (key == node["id"]) {
+ Object.keys(value).forEach((key) => {
+ if (key == template["name"]) {
+ returnValue = value[key];
+ }
+ });
+ }
+ });
+ }
+ } else {
+ return value ?? "";
+ }
+ return returnValue;
+};
diff --git a/src/frontend/src/modals/apiModal/views/index.tsx b/src/frontend/src/modals/apiModal/views/index.tsx
new file mode 100644
index 000000000..a5cc47721
--- /dev/null
+++ b/src/frontend/src/modals/apiModal/views/index.tsx
@@ -0,0 +1,212 @@
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/mode-python";
+import "ace-builds/src-noconflict/theme-github";
+import "ace-builds/src-noconflict/theme-twilight";
+import { ReactNode, forwardRef, useContext, useEffect, useState } from "react";
+// import "ace-builds/webpack-resolver";
+import { cloneDeep } from "lodash";
+import CodeTabsComponent from "../../../components/codeTabsComponent";
+import IconComponent from "../../../components/genericIconComponent";
+import { EXPORT_CODE_DIALOG } from "../../../constants/constants";
+import { AuthContext } from "../../../contexts/authContext";
+import { useTweaksStore } from "../../../stores/tweaksStore";
+import { TemplateVariableType } from "../../../types/api";
+import { uniqueTweakType } from "../../../types/components";
+import { FlowType } from "../../../types/flow/index";
+import {
+ getCurlCode,
+ getPythonApiCode,
+ getPythonCode,
+ getWidgetCode,
+ tabsArray,
+} from "../../../utils/utils";
+import BaseModal from "../../baseModal";
+import { buildContent } from "../utils/build-content";
+import { buildTweaks } from "../utils/build-tweaks";
+import { checkCanBuildTweakObject } from "../utils/check-can-build-tweak-object";
+import { getChangesType } from "../utils/get-changes-types";
+import { getNodesWithDefaultValue } from "../utils/get-nodes-with-default-value";
+import { getValue } from "../utils/get-value";
+
+const ApiModal = forwardRef(
+ (
+ {
+ flow,
+ children,
+ }: {
+ flow: FlowType;
+ children: ReactNode;
+ },
+ ref,
+ ) => {
+ const tweak = useTweaksStore((state) => state.tweak);
+ const addTweaks = useTweaksStore((state) => state.setTweak);
+ const setTweaksList = useTweaksStore((state) => state.setTweaksList);
+ const tweaksList = useTweaksStore((state) => state.tweaksList);
+
+ const [activeTweaks, setActiveTweaks] = useState(false);
+ const { autoLogin } = useContext(AuthContext);
+ const [open, setOpen] = useState(false);
+ const [activeTab, setActiveTab] = useState("0");
+ const pythonApiCode = getPythonApiCode(flow?.id, autoLogin, tweak);
+ const curl_code = getCurlCode(flow?.id, autoLogin, tweak);
+ const pythonCode = getPythonCode(flow?.name, tweak);
+ const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
+ const tweaksCode = buildTweaks(flow);
+ const codesArray = [
+ curl_code,
+ pythonApiCode,
+ pythonCode,
+ widgetCode,
+ pythonCode,
+ ];
+ const [tabs, setTabs] = useState(tabsArray(codesArray, 0));
+
+ const canShowTweaks =
+ flow &&
+ flow["data"] &&
+ flow["data"]!["nodes"] &&
+ tweak &&
+ tweak?.length > 0 &&
+ activeTweaks === true;
+
+ const buildTweaksInitialState = () => {
+ const newTweak: any = [];
+ const t = buildTweaks(flow);
+ newTweak.push(t);
+ addTweaks(newTweak);
+ addCodes(newTweak);
+ };
+
+ useEffect(() => {
+ if (flow["data"]!["nodes"].length == 0) {
+ addTweaks([]);
+ setTweaksList([]);
+ } else {
+ buildTweaksInitialState();
+ }
+
+ filterNodes();
+
+ if (Object.keys(tweaksCode).length > 0) {
+ setActiveTab("0");
+ setTabs(tabsArray(codesArray, 1));
+ } else {
+ setTabs(tabsArray(codesArray, 1));
+ }
+ }, [flow["data"]!["nodes"], open]);
+
+ useEffect(() => {
+ if (canShowTweaks) {
+ const nodes = flow["data"]!["nodes"];
+ nodes.forEach((element) => {
+ const nodeId = element["id"];
+ const template = element["data"]["node"]["template"];
+
+ Object.keys(template).forEach((templateField) => {
+ if (checkCanBuildTweakObject(element, templateField)) {
+ buildTweakObject(
+ nodeId,
+ element.data.node.template[templateField].value,
+ element.data.node.template[templateField],
+ );
+ }
+ });
+ });
+ } else {
+ buildTweaksInitialState();
+ }
+ }, [activeTweaks]);
+
+ const filterNodes = () => {
+ setTweaksList(getNodesWithDefaultValue(flow));
+ };
+
+ async function buildTweakObject(
+ tw: string,
+ changes: string | string[] | boolean | number | Object[] | Object,
+ template: TemplateVariableType,
+ ) {
+ changes = getChangesType(changes, template);
+
+ const existingTweak = tweak.find((element) => element.hasOwnProperty(tw));
+
+ if (existingTweak) {
+ existingTweak[tw][template["name"]!] = changes as string;
+
+ if (existingTweak[tw][template["name"]!] == template.value) {
+ tweak.forEach((element) => {
+ if (element[tw] && Object.keys(element[tw])?.length === 0) {
+ const filteredTweaks = tweak.filter((obj) => {
+ const prop = obj[Object.keys(obj)[0]].prop;
+ return prop !== undefined && prop !== null && prop !== "";
+ });
+ addTweaks(filteredTweaks);
+ }
+ });
+ }
+ } else {
+ const newTweak = {
+ [tw]: {
+ [template["name"]!]: changes,
+ },
+ } as uniqueTweakType;
+ tweak.push(newTweak);
+ }
+
+ if (tweak && tweak.length > 0) {
+ const cloneTweak = cloneDeep(tweak);
+ addCodes(cloneTweak);
+ addTweaks(cloneTweak);
+ }
+ }
+
+ const addCodes = (cloneTweak) => {
+ const pythonApiCode = getPythonApiCode(flow?.id, autoLogin, cloneTweak);
+ const curl_code = getCurlCode(flow?.id, autoLogin, cloneTweak);
+ const pythonCode = getPythonCode(flow?.name, cloneTweak);
+ const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
+
+ if (tabs && tabs?.length > 0) {
+ tabs![0].code = curl_code;
+ tabs![1].code = pythonApiCode;
+ tabs![2].code = pythonCode;
+ tabs![3].code = widgetCode;
+ }
+ };
+
+ return (
+
+ {children}
+
+ API
+
+
+
+
+
+ );
+ },
+);
+
+export default ApiModal;
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index 8cb6252c3..19fc80711 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -25,15 +25,21 @@ type TriggerProps = {
children: ReactNode;
asChild?: boolean;
disable?: boolean;
+ className?: string;
};
const Content: React.FC = ({ children }) => {
return = ({ children, asChild, disable }) => {
+const Trigger: React.FC = ({
+ children,
+ asChild,
+ disable,
+ className,
+}) => {
return (
) => void;
@@ -24,6 +25,7 @@ export default function DeleteConfirmationModal({
asChild?: boolean;
open?: boolean;
setOpen?: (open: boolean) => void;
+ note?: string;
}) {
return (
diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx
index 449802af5..dd3252167 100644
--- a/src/frontend/src/modals/editNodeModal/index.tsx
+++ b/src/frontend/src/modals/editNodeModal/index.tsx
@@ -28,6 +28,7 @@ import {
LANGFLOW_SUPPORTED_TYPES,
limitScrollFieldsModal,
} from "../../constants/constants";
+import { Case } from "../../shared/components/caseComponent";
import useFlowStore from "../../stores/flowStore";
import { NodeDataType } from "../../types/flow";
import {
@@ -92,6 +93,10 @@ const EditNodeModal = forwardRef(
const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
+ const type = (templateParam) => {
+ return myData.node?.template[templateParam].type;
+ };
+
return (
{
@@ -178,8 +183,7 @@ const EditNodeModal = forwardRef(
className={
"h-10 " +
((templateParam === "code" &&
- myData.node?.template[templateParam].type ===
- "code") ||
+ type(templateParam) === "code") ||
(templateParam.includes("code") &&
myData.node?.template[templateParam].proxy)
? " hidden "
@@ -198,7 +202,7 @@ const EditNodeModal = forwardRef(
{myData.node?.template[templateParam]
.display_name
- ? myData.node.template[templateParam]
+ ? myData.node!.template[templateParam]
.display_name
: myData.node?.template[templateParam]
.name}
@@ -206,23 +210,27 @@ const EditNodeModal = forwardRef(
- {myData.node?.template[templateParam].type ===
- "str" &&
- !myData.node.template[templateParam].options ? (
+
+
+
+
+
- ) : myData.node?.template[templateParam]
- .type === "bool" ? (
+
+
+
+ (
+
+
+
+
+
+
+ )}
+ />
+
+
+
+ (
+
+
+
+ )}
+ />
+
+
+
+ (
+
+ setSelectedFlows(value)}
+ selectedOptions={selectedFlows}
+ >
+
+ )}
+ />
+
+
+ (
+
+ setSelectedComponents(value)}
+ selectedOptions={selectedComponents}
+ >
+
+ )}
+ />
+
+
+ );
+};
+
+export default FolderForms;
diff --git a/src/frontend/src/modals/BundleModal/entities/index.ts b/src/frontend/src/modals/BundleModal/entities/index.ts
new file mode 100644
index 000000000..64d69d38b
--- /dev/null
+++ b/src/frontend/src/modals/BundleModal/entities/index.ts
@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const FolderFormsSchema = z.object({
+ name: z.string().min(1, {
+ message: "Name must be at least 1 characters.",
+ }),
+ description: z.string().optional(),
+ components: z.array(z.string()),
+ flows: z.array(z.string()),
+});
diff --git a/src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx b/src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx
new file mode 100644
index 000000000..cb12ca7cb
--- /dev/null
+++ b/src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx
@@ -0,0 +1,53 @@
+import { addFolder, updateFolder } from "../../../pages/MainPage/services";
+import useAlertStore from "../../../stores/alertStore";
+import { useFolderStore } from "../../../stores/foldersStore";
+
+const useFolderSubmit = (setOpen, folderToEdit) => {
+ const setSuccessData = useAlertStore((state) => state.setSuccessData);
+ const setErrorData = useAlertStore((state) => state.setErrorData);
+ const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
+
+ const onSubmit = (data) => {
+ if (folderToEdit) {
+ updateFolder(data, folderToEdit?.id!).then(
+ () => {
+ setSuccessData({
+ title: "Folder updated successfully.",
+ });
+ getFoldersApi(true);
+ setOpen(false);
+ },
+ (reason) => {
+ if (reason) {
+ setErrorData({
+ title: `Error updating folder.`,
+ });
+ console.error(reason);
+ } else {
+ getFoldersApi(true);
+ setOpen(false);
+ }
+ },
+ );
+ } else {
+ addFolder(data).then(
+ () => {
+ setSuccessData({
+ title: "Folder created successfully.",
+ });
+ getFoldersApi(true);
+ setOpen(false);
+ },
+ () => {
+ setErrorData({
+ title: `Error creating folder.`,
+ });
+ },
+ );
+ }
+ };
+
+ return { onSubmit, open, setOpen };
+};
+
+export default useFolderSubmit;
diff --git a/src/frontend/src/modals/BundleModal/index.tsx b/src/frontend/src/modals/BundleModal/index.tsx
new file mode 100644
index 000000000..e901ba222
--- /dev/null
+++ b/src/frontend/src/modals/BundleModal/index.tsx
@@ -0,0 +1,79 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import ForwardedIconComponent from "../../components/genericIconComponent";
+import { Button } from "../../components/ui/button";
+import { Form } from "../../components/ui/form";
+import { useFolderStore } from "../../stores/foldersStore";
+import BaseModal from "../baseModal";
+import FolderForms from "./component";
+import { FolderFormsSchema } from "./entities";
+import useFolderSubmit from "./hooks/submit-folder";
+
+type FoldersModalProps = {
+ open: boolean;
+ setOpen: (open: boolean) => void;
+};
+
+export default function FoldersModal({
+ open,
+ setOpen,
+}: FoldersModalProps): JSX.Element {
+ const form = useForm
+
+
+
+
+
+ );
default:
return (
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
index ee56f3a8f..086d87a45 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
@@ -114,19 +114,19 @@ export default function ChatMessage({
{children}
;
};
-const Trigger: React.FC
{ContentChild}
@@ -203,7 +213,7 @@ function BaseModal({
{headerChild}
{ContentChild}
diff --git a/src/frontend/src/modals/deleteConfirmationModal/index.tsx b/src/frontend/src/modals/deleteConfirmationModal/index.tsx
index e412e741a..d03a0d707 100644
--- a/src/frontend/src/modals/deleteConfirmationModal/index.tsx
+++ b/src/frontend/src/modals/deleteConfirmationModal/index.tsx
@@ -17,6 +17,7 @@ export default function DeleteConfirmationModal({
asChild,
open,
setOpen,
+ note = "",
}: {
children: JSX.Element;
onConfirm: (e: React.MouseEvent
- {myData.node.template[templateParam]
+ {myData.node!.template[templateParam]
?.list ? (
- ) : myData.node?.template[templateParam]
- .type === "NestedDict" ? (
+
{" "}
{
@@ -381,8 +402,11 @@ const EditNodeModal = forwardRef(
editNode={true}
/>
- ) : myData.node?.template[templateParam]
- .type === "float" ? (
+
diff --git a/src/frontend/src/modals/flowLogsModal/index.tsx b/src/frontend/src/modals/flowLogsModal/index.tsx
new file mode 100644
index 000000000..278c6f77e
--- /dev/null
+++ b/src/frontend/src/modals/flowLogsModal/index.tsx
@@ -0,0 +1,104 @@
+import { useEffect, useState } from "react";
+import IconComponent from "../../components/genericIconComponent";
+import { Tabs, TabsList, TabsTrigger } from "../../components/ui/tabs";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { FlowSettingsPropsType } from "../../types/components";
+import { FlowType } from "../../types/flow";
+import BaseModal from "../baseModal";
+import TableComponent from "../../components/tableComponent";
+import { getMessagesTable, getTransactionTable } from "../../controllers/API";
+import {
+ ColDef,
+ ColGroupDef,
+ SizeColumnsToFitGridStrategy,
+} from "ag-grid-community";
+
+export default function FlowLogsModal({
+ open,
+ setOpen,
+}: FlowSettingsPropsType): JSX.Element {
+ const saveFlow = useFlowsManagerStore((state) => state.saveFlow);
+ const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+ const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+ const flows = useFlowsManagerStore((state) => state.flows);
+ useEffect(() => {
+ setName(currentFlow!.name);
+ setDescription(currentFlow!.description);
+ }, [currentFlow!.name, currentFlow!.description, open]);
+
+ const [name, setName] = useState(currentFlow!.name);
+ const [description, setDescription] = useState(currentFlow!.description);
+ const [columns, setColumns] = useState>([]);
+ const [rows, setRows] = useState([]);
+ const [activeTab, setActiveTab] = useState("Executions");
+
+ function handleClick(): void {
+ currentFlow!.name = name;
+ currentFlow!.description = description;
+ saveFlow(currentFlow!);
+ setOpen(false);
+ }
+
+ useEffect(() => {
+ if (activeTab === "Executions") {
+ getTransactionTable(currentFlowId, "union").then((data) => {
+ const { columns, rows } = data;
+ setColumns(columns.map((col) => ({ ...col, editable: true })));
+ setRows(rows);
+ });
+ } else if (activeTab === "Messages") {
+ getMessagesTable(currentFlowId, "union").then((data) => {
+ const { columns, rows } = data;
+ setColumns(columns.map((col) => ({ ...col, editable: true })));
+ setRows(rows);
+ });
+ }
+ }, [open, activeTab]);
+
+ const [nameLists, setNameList] = useState([]);
+
+ useEffect(() => {
+ const tempNameList: string[] = [];
+ flows.forEach((flow: FlowType) => {
+ if ((flow.is_component ?? false) === false) tempNameList.push(flow.name);
+ });
+ setNameList(tempNameList.filter((name) => name !== currentFlow!.name));
+ }, [flows]);
+
+ return (
+
+
+
+
+
+
+ Executions
+ Messages
+
+
+
+
+ );
+}
diff --git a/src/frontend/src/modals/foldersModal/component/index.tsx b/src/frontend/src/modals/foldersModal/component/index.tsx
new file mode 100644
index 000000000..5093adf8e
--- /dev/null
+++ b/src/frontend/src/modals/foldersModal/component/index.tsx
@@ -0,0 +1,148 @@
+import { useEffect, useState } from "react";
+import InputComponent from "../../../components/inputComponent";
+import {
+ FormControl,
+ FormField,
+ FormItem,
+ FormMessage,
+} from "../../../components/ui/form";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { Textarea } from "../../../components/ui/textarea";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
+
+type FolderFormsProps = {
+ control: any;
+ setValue: any;
+ folderToEdit: any;
+};
+
+export const FolderForms = ({
+ control,
+ setValue,
+ folderToEdit,
+}: FolderFormsProps): JSX.Element => {
+ const flows = useFlowsManagerStore((state) => state.flows);
+ const [selectedComponents, setSelectedComponents] = useState([]);
+ const [selectedFlows, setSelectedFlows] = useState([]);
+ const allFlows = useFlowsManagerStore((state) => state.allFlows);
+
+ const componentsList = flows
+ .filter((flow) => flow.is_component && flow.folder_id !== null)
+ .map((flow) => ({ id: flow.id, name: flow.name }));
+
+ const flowsList = flows
+ .filter((flow) => !flow.is_component && flow.folder_id !== null)
+ .map((flow) => ({ id: flow.id, name: flow.name }));
+
+ const componentsOnFolder = allFlows
+ .filter((flow) => flow.is_component && flow.folder_id === folderToEdit?.id)
+ .map((flow) => flow.id);
+
+ const flowsOnFolder = allFlows
+ .filter((flow) => !flow.is_component && flow.folder_id === folderToEdit?.id)
+ .map((flow) => flow.id);
+
+ useEffect(() => {
+ setValue("components", selectedComponents);
+ setValue("flows", selectedFlows);
+ }, [selectedComponents, selectedFlows]);
+
+ useEffect(() => {
+ if (folderToEdit) {
+ setValue("name", folderToEdit.name);
+ setValue("description", folderToEdit.description);
+
+ setSelectedComponents(componentsOnFolder);
+ setSelectedFlows(flowsOnFolder);
+ return;
+ }
+ setValue("name", "");
+ setValue("description", "");
+ setSelectedComponents([]);
+ setSelectedFlows([]);
+ }, [folderToEdit]);
+
+ return (
+ <>
+ >({
+ resolver: zodResolver(FolderFormsSchema),
+ defaultValues: {
+ name: "",
+ description: "",
+ components: [],
+ flows: [],
+ },
+ mode: "all",
+ });
+
+ const folderToEdit = useFolderStore((state) => state.folderToEdit);
+ const { onSubmit: onSubmitFolder } = useFolderSubmit(setOpen, folderToEdit);
+
+ const onSubmit = (data) => {
+ onSubmitFolder(data);
+ };
+
+ return (
+ <>
+
+
+
+ {folderToEdit ? "Edit" : "New"} Folder
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/frontend/src/modals/newFlowModal/components/NewFlowCardComponent/index.tsx b/src/frontend/src/modals/newFlowModal/components/NewFlowCardComponent/index.tsx
index 8fbd8ab8f..5d4a60385 100644
--- a/src/frontend/src/modals/newFlowModal/components/NewFlowCardComponent/index.tsx
+++ b/src/frontend/src/modals/newFlowModal/components/NewFlowCardComponent/index.tsx
@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
import {
Card,
CardContent,
@@ -6,15 +6,21 @@ import {
CardTitle,
} from "../../../../components/ui/card";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useFolderStore } from "../../../../stores/foldersStore";
export default function NewFlowCardComponent() {
const addFlow = useFlowsManagerStore((state) => state.addFlow);
const navigate = useNavigate();
+ const location = useLocation();
+ const folderId = location?.state?.folderId;
+ const setFolderUrl = useFolderStore((state) => state.setFolderUrl);
+
return (
{
addFlow(true).then((id) => {
- navigate("/flow/" + id);
+ setFolderUrl(folderId ?? "");
+ navigate(`/flow/${id}${folderId ? `/folder/${folderId}` : ""}`);
});
}}
className="h-64 w-80 cursor-pointer bg-background pt-4"
diff --git a/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx b/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx
index 169890994..6f889a407 100644
--- a/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx
+++ b/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx
@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
///
e.name == "Basic Prompting (Hello, World)"
+ (e) => e.name == "Basic Prompting (Hello, World)",
)!
}
/>
@@ -52,19 +45,19 @@ export default function NewFlowModal({
)}
{examples.find((e) => e.name == "Document QA") && (
e.name == "Document QA")!}
/>
)}
{examples.find((e) => e.name == "Blog Writer") && (
e.name == "Blog Writer")!}
/>
)}
{examples.find((e) => e.name == "Vector Store RAG") && (
e.name == "Vector Store RAG")!}
/>
)}
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 3adb7072b..bb559990e 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -60,19 +60,19 @@ export default function Page({
}): JSX.Element {
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const autoSaveCurrentFlow = useFlowsManagerStore(
- (state) => state.autoSaveCurrentFlow
+ (state) => state.autoSaveCurrentFlow,
);
const types = useTypesStore((state) => state.types);
const templates = useTypesStore((state) => state.templates);
const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
const reactFlowWrapper = useRef(null);
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 setReactFlowInstance = useFlowStore(
- (state) => state.setReactFlowInstance
+ (state) => state.setReactFlowInstance,
);
const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges);
@@ -89,10 +89,10 @@ export default function Page({
const paste = useFlowStore((state) => state.paste);
const resetFlow = useFlowStore((state) => state.resetFlow);
const lastCopiedSelection = useFlowStore(
- (state) => state.lastCopiedSelection
+ (state) => state.lastCopiedSelection,
);
const setLastCopiedSelection = useFlowStore(
- (state) => state.setLastCopiedSelection
+ (state) => state.setLastCopiedSelection,
);
const onConnect = useFlowStore((state) => state.onConnect);
const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
@@ -115,7 +115,7 @@ export default function Page({
clonedSelection!,
clonedNodes,
clonedEdges,
- getRandomName()
+ getRandomName(),
);
const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
const newEdges = reconnectEdges(newGroupNode, removedEdges);
@@ -123,8 +123,8 @@ export default function Page({
...clonedNodes.filter(
(oldNodes) =>
!clonedSelection?.nodes.some(
- (selectionNode) => selectionNode.id === oldNodes.id
- )
+ (selectionNode) => selectionNode.id === oldNodes.id,
+ ),
),
newGroupNode,
]);
@@ -134,8 +134,8 @@ export default function Page({
!clonedSelection!.nodes.some(
(selectionNode) =>
selectionNode.id === oldEdge.target ||
- selectionNode.id === oldEdge.source
- )
+ selectionNode.id === oldEdge.source,
+ ),
),
...newEdges,
]);
@@ -206,7 +206,7 @@ export default function Page({
{
x: position.current.x,
y: position.current.y,
- }
+ },
);
}
}
@@ -265,20 +265,28 @@ export default function Page({
const groupAction = useShortcutsStore((state) => state.group);
const cutAction = useShortcutsStore((state) => state.cut);
const pasteAction = useShortcutsStore((state) => state.paste);
-
+ //@ts-ignore
useHotkeys(undoAction, handleUndo);
+ //@ts-ignore
useHotkeys(redoAction, handleRedo);
+ //@ts-ignore
useHotkeys(groupAction, handleGroup);
+ //@ts-ignore
useHotkeys(duplicate, handleDuplicate);
+ //@ts-ignore
useHotkeys(copyAction, handleCopy);
+ //@ts-ignore
useHotkeys(cutAction, handleCut);
+ //@ts-ignore
useHotkeys(pasteAction, handlePaste);
+ //@ts-ignore
useHotkeys(deleteAction, handleDelete);
+ //@ts-ignore
useHotkeys("delete", handleDelete);
useEffect(() => {
setSHowCanvas(
- Object.keys(templates).length > 0 && Object.keys(types).length > 0
+ Object.keys(templates).length > 0 && Object.keys(types).length > 0,
);
}, [templates, types]);
@@ -287,7 +295,7 @@ export default function Page({
takeSnapshot();
onConnect(params);
},
- [takeSnapshot, onConnect]
+ [takeSnapshot, onConnect],
);
const onNodeDragStart: NodeDragHandler = useCallback(() => {
@@ -328,7 +336,7 @@ export default function Page({
// Extract the data from the drag event and parse it as a JSON object
const data: { type: string; node?: APIClassType } = JSON.parse(
- event.dataTransfer.getData("nodedata")
+ event.dataTransfer.getData("nodedata"),
);
const newId = getNodeId(data.type);
@@ -344,7 +352,7 @@ export default function Page({
};
paste(
{ nodes: [newNode], edges: [] },
- { x: event.clientX, y: event.clientY }
+ { x: event.clientX, y: event.clientY },
);
} else if (event.dataTransfer.types.some((types) => types === "Files")) {
takeSnapshot();
@@ -373,7 +381,7 @@ export default function Page({
}
},
// Specify dependencies for useCallback
- [getNodeId, setNodes, takeSnapshot, paste]
+ [getNodeId, setNodes, takeSnapshot, paste],
);
const onEdgeUpdateStart = useCallback(() => {
@@ -389,7 +397,7 @@ export default function Page({
setEdges((els) => updateEdge(oldEdge, newConnection, els));
}
},
- [setEdges]
+ [setEdges],
);
const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => {
@@ -422,7 +430,7 @@ export default function Page({
(flow: OnSelectionChangeParams): void => {
setLastSelection(flow);
},
- []
+ [],
);
const onPaneClick = useCallback((flow) => {
@@ -486,6 +494,7 @@ export default function Page({
>
)}
{
diff --git a/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
index 2c3804ca8..a6d83153c 100644
--- a/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
@@ -1,11 +1,31 @@
import { useEffect, useState } from "react";
import { NodeToolbar } from "reactflow";
import { GradientGroup } from "../../../../icons/GradientSparkles";
-export default function SelectionMenu({ onClick, nodes, isVisible }) {
+import useFlowStore from "../../../../stores/flowStore";
+import { validateSelection } from "../../../../utils/reactflowUtils";
+export default function SelectionMenu({
+ onClick,
+ nodes,
+ isVisible,
+ lastSelection,
+}) {
+ const edges = useFlowStore((state) => state.edges);
+ const [disable, setDisable] = useState(
+ lastSelection && edges.length > 0
+ ? validateSelection(lastSelection!, edges).length > 0
+ : false,
+ );
const [isOpen, setIsOpen] = useState(false);
const [isTransitioning, setIsTransitioning] = useState(false);
const [lastNodes, setLastNodes] = useState(nodes);
+ useEffect(() => {
+ if (isOpen) {
+ return setDisable(validateSelection(lastSelection!, edges).length > 0);
+ }
+ setDisable(false);
+ }, [isOpen, setIsOpen]);
+
// nodes get saved to not be gone after the toolbar closes
useEffect(() => {
setLastNodes(nodes);
@@ -42,13 +62,19 @@ export default function SelectionMenu({ onClick, nodes, isVisible }) {
}
>
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index b69015395..886ab5150 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -3,14 +3,14 @@ import { useParams } from "react-router-dom";
import FlowToolbar from "../../components/chatComponent";
import Header from "../../components/headerComponent";
import { useDarkStore } from "../../stores/darkStore";
+import useFlowStore from "../../stores/flowStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import Page from "./components/PageComponent";
import ExtraSidebar from "./components/extraSidebarComponent";
-import useFlowStore from "../../stores/flowStore";
export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
const setCurrentFlowId = useFlowsManagerStore(
- (state) => state.setCurrentFlowId
+ (state) => state.setCurrentFlowId,
);
const version = useDarkStore((state) => state.version);
const setOnFlowPage = useFlowStore((state) => state.setOnFlowPage);
@@ -21,7 +21,7 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
useEffect(() => {
setCurrentFlowId(id!);
setOnFlowPage(true);
-
+
return () => {
setOnFlowPage(false);
};
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
deleted file mode 100644
index 0a390b5f1..000000000
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import CollectionCardComponent from "../../../../components/cardComponent";
-import CardsWrapComponent from "../../../../components/cardsWrapComponent";
-import IconComponent from "../../../../components/genericIconComponent";
-import PaginatorComponent from "../../../../components/paginatorComponent";
-import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
-import { Button } from "../../../../components/ui/button";
-import {
- CONSOLE_ERROR_MSG,
- UPLOAD_ALERT_LIST,
- WRONG_FILE_ERROR_ALERT,
-} from "../../../../constants/alerts_constants";
-import useAlertStore from "../../../../stores/alertStore";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
-import { FlowType } from "../../../../types/flow";
-export default function ComponentsComponent({
- is_component = true,
-}: {
- is_component?: boolean;
-}) {
- const addFlow = useFlowsManagerStore((state) => state.addFlow);
- const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
- const removeFlow = useFlowsManagerStore((state) => state.removeFlow);
- const isLoading = useFlowsManagerStore((state) => state.isLoading);
- const flows = useFlowsManagerStore((state) => state.flows);
- const setSuccessData = useAlertStore((state) => state.setSuccessData);
- const setErrorData = useAlertStore((state) => state.setErrorData);
- const [pageSize, setPageSize] = useState(20);
- const [pageIndex, setPageIndex] = useState(1);
-
- const navigate = useNavigate();
- const all: FlowType[] = flows
- .filter((f) => (f.is_component ?? false) === is_component)
- .sort((a, b) => {
- if (a?.updated_at && b?.updated_at) {
- return (
- new Date(b?.updated_at!).getTime() -
- new Date(a?.updated_at!).getTime()
- );
- } else if (a?.updated_at && !b?.updated_at) {
- return 1;
- } else if (!a?.updated_at && b?.updated_at) {
- return -1;
- } else {
- return (
- new Date(b?.date_created!).getTime() -
- new Date(a?.date_created!).getTime()
- );
- }
- });
- const start = (pageIndex - 1) * pageSize;
- const end = start + pageSize;
- const data: FlowType[] = all.slice(start, end);
-
- const name = is_component ? "Component" : "Flow";
-
- const onFileDrop = (e) => {
- e.preventDefault();
- if (e.dataTransfer.types.some((types) => types === "Files")) {
- if (e.dataTransfer.files.item(0).type === "application/json") {
- uploadFlow({
- newProject: true,
- file: e.dataTransfer.files.item(0)!,
- isComponent: is_component,
- })
- .then(() => {
- setSuccessData({
- title: `${
- is_component ? "Component" : "Flow"
- } uploaded successfully`,
- });
- })
- .catch((error) => {
- setErrorData({
- title: CONSOLE_ERROR_MSG,
- list: [error],
- });
- });
- } else {
- setErrorData({
- title: WRONG_FILE_ERROR_ALERT,
- list: [UPLOAD_ALERT_LIST],
- });
- }
- }
- };
- function resetFilter() {
- setPageIndex(1);
- setPageSize(20);
- }
- return (
-
-
- );
-}
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
new file mode 100644
index 000000000..62b96a9bc
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
@@ -0,0 +1,303 @@
+import { cloneDeep } from "lodash";
+import { useEffect, useMemo, useState } from "react";
+import { FormProvider, useForm, useWatch } from "react-hook-form";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import CollectionCardComponent from "../../../../components/cardComponent";
+import CardsWrapComponent from "../../../../components/cardsWrapComponent";
+import IconComponent from "../../../../components/genericIconComponent";
+import PaginatorComponent from "../../../../components/paginatorComponent";
+import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
+import { Button } from "../../../../components/ui/button";
+import DeleteConfirmationModal from "../../../../modals/deleteConfirmationModal";
+import useAlertStore from "../../../../stores/alertStore";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useFolderStore } from "../../../../stores/foldersStore";
+import { FlowType } from "../../../../types/flow";
+import useFileDrop from "../../hooks/use-on-file-drop";
+import { getNameByType } from "../../utils/get-name-by-type";
+import { sortFlows } from "../../utils/sort-flows";
+import EmptyComponent from "../emptyComponent";
+import HeaderComponent from "../headerComponent";
+
+export default function ComponentsComponent({
+ type = "all",
+}: {
+ type?: string;
+}) {
+ const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
+ const removeFlow = useFlowsManagerStore((state) => state.removeFlow);
+ const isLoading = useFlowsManagerStore((state) => state.isLoading);
+ const setAllFlows = useFlowsManagerStore((state) => state.setAllFlows);
+ const allFlows = useFlowsManagerStore((state) => state.allFlows);
+
+ const flowsFromFolder = useFolderStore(
+ (state) => state.selectedFolder?.flows,
+ );
+
+ const setSuccessData = useAlertStore((state) => state.setSuccessData);
+ const setErrorData = useAlertStore((state) => state.setErrorData);
+ const [openDelete, setOpenDelete] = useState(false);
+ const searchFlowsComponents = useFlowsManagerStore(
+ (state) => state.searchFlowsComponents,
+ );
+
+ const setSelectedFlowsComponentsCards = useFlowsManagerStore(
+ (state) => state.setSelectedFlowsComponentsCards,
+ );
+
+ const selectedFlowsComponentsCards = useFlowsManagerStore(
+ (state) => state.selectedFlowsComponentsCards,
+ );
+
+ const [handleFileDrop] = useFileDrop(uploadFlow, type)!;
+ const [pageSize, setPageSize] = useState(20);
+ const [pageIndex, setPageIndex] = useState(1);
+ const navigate = useNavigate();
+ const location = useLocation();
+ const all: FlowType[] = sortFlows(allFlows, type);
+ const start = (pageIndex - 1) * pageSize;
+ const end = start + pageSize;
+ const data: FlowType[] = all?.slice(start, end);
+
+ const name = getNameByType(type);
+
+ const folderId = location?.state?.folderId;
+ const getFolderById = useFolderStore((state) => state.getFolderById);
+ const myCollectionId = useFolderStore((state) => state.myCollectionId);
+ const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
+ const setFolderUrl = useFolderStore((state) => state.setFolderUrl);
+
+ useEffect(() => {
+ setFolderUrl(folderId ?? "");
+ setSelectedFlowsComponentsCards([]);
+ handleSelectAll(false);
+ getFolderById(folderId ? folderId : myCollectionId);
+ }, [location]);
+
+ useEffect(() => {
+ const newFlows = cloneDeep(flowsFromFolder!);
+ const filteredFlows = newFlows?.filter(
+ (f) =>
+ f.name.toLowerCase().includes(searchFlowsComponents.toLowerCase()) ||
+ f.description
+ .toLowerCase()
+ .includes(searchFlowsComponents.toLowerCase()),
+ );
+
+ if (searchFlowsComponents === "") {
+ setAllFlows(flowsFromFolder!);
+ }
+
+ setAllFlows(filteredFlows);
+ }, [searchFlowsComponents]);
+
+ const resetFilter = () => {
+ setPageIndex(1);
+ setPageSize(20);
+ };
+
+ const { getValues, control, setValue } = useForm();
+ const entireFormValues = useWatch({ control });
+
+ const methods = useForm();
+ const handleSelectAll = (select) => {
+ const flowsFromFolderIds = flowsFromFolder?.map((f) => f.id);
+ if (select) {
+ Object.keys(getValues()).forEach((key) => {
+ if (!flowsFromFolderIds?.includes(key)) return;
+ setValue(key, true);
+ });
+ return;
+ }
+
+ Object.keys(getValues()).forEach((key) => {
+ setValue(key, false);
+ });
+ };
+
+ const handleSelectOptionsChange = () => {
+ const hasSelected = selectedFlowsComponentsCards?.length > 0;
+ if (!hasSelected) {
+ setErrorData({
+ title: "No items selected",
+ list: ["Please select items to delete"],
+ });
+ return;
+ }
+ setOpenDelete(true);
+ };
+
+ const handleDeleteMultiple = () => {
+ removeFlow(selectedFlowsComponentsCards)
+ .then(() => {
+ resetFilter();
+ getFoldersApi(true);
+ if (!folderId || folderId === myCollectionId) {
+ getFolderById(folderId ? folderId : myCollectionId);
+ }
+ setSuccessData({
+ title: "Selected items deleted successfully!",
+ });
+ })
+ .catch(() => {
+ setErrorData({
+ title: "Error deleting items",
+ list: ["Please try again"],
+ });
+ });
+ };
+
+ useEffect(() => {
+ if (!entireFormValues || Object.keys(entireFormValues).length === 0) return;
+ const selectedFlows: string[] = Object.keys(entireFormValues).filter(
+ (key) => {
+ if (entireFormValues[key] === true) {
+ return true;
+ }
+ return false;
+ },
+ );
+
+ setSelectedFlowsComponentsCards(selectedFlows);
+ }, [entireFormValues]);
+
+ const getDescriptionModal = useMemo(() => {
+ const getTypeLabel = (type) => {
+ const labels = {
+ all: "item",
+ component: "component",
+ flow: "flow",
+ };
+ return labels[type] || "";
+ };
+
+ const getPluralizedLabel = (type) => {
+ const labels = {
+ all: "items",
+ component: "components",
+ flow: "flows",
+ };
+ return labels[type] || "";
+ };
+
+ if (selectedFlowsComponentsCards?.length === 1) {
+ return getTypeLabel(type);
+ }
+ return getPluralizedLabel(type);
+ }, [selectedFlowsComponentsCards, type]);
+
+ const getTotalRowsCount = () => {
+ if (type === "all") return allFlows?.length;
+
+ return allFlows?.filter(
+ (f) => (f.is_component ?? false) === (type === "component"),
+ )?.length;
+ };
+
+ return (
+ <>
+ {allFlows?.length > 0 && (
+ 0)}
+ />
+ )}
+
+
+
+ {openDelete && (
+
+ <>
+
+ )}
+
+ );
+}
diff --git a/src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx b/src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx
new file mode 100644
index 000000000..0655b6f47
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx
@@ -0,0 +1,41 @@
+import { useNavigate } from "react-router-dom";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+
+type EmptyComponentProps = {};
+
+const EmptyComponent = ({}: EmptyComponentProps) => {
+ const addFlow = useFlowsManagerStore((state) => state.addFlow);
+ const navigate = useNavigate();
+
+ return (
+ <>
+ {
+ handleDeleteFolder();
+ setOpenDeleteFolderModal(false);
+ }}
+ description="folder"
+ note={
+ "Deleting the selected folder will remove all associated flows and components."
+ }
+ >
+
+
+ )}
+
+);
+
+export default ModalsComponent;
diff --git a/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/headerTabsSearchComponent/index.tsx b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/headerTabsSearchComponent/index.tsx
new file mode 100644
index 000000000..a15b84601
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/headerTabsSearchComponent/index.tsx
@@ -0,0 +1,49 @@
+import { useState } from "react";
+import useFlowsManagerStore from "../../../../../../stores/flowsManagerStore";
+import InputSearchComponent from "../inputSearchComponent";
+import TabsSearchComponent from "../tabsComponent";
+import { Button } from "../../../../../../components/ui/button";
+import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
+import useAlertStore from "../../../../../../stores/alertStore";
+import { handleDownloadFolderFn } from "../../../../utils/handle-download-folder";
+import { useFolderStore } from "../../../../../../stores/foldersStore";
+import { useLocation } from "react-router-dom";
+
+type HeaderTabsSearchComponentProps = {};
+
+const HeaderTabsSearchComponent = ({}: HeaderTabsSearchComponentProps) => {
+ const location = useLocation();
+ const myCollectionId = useFolderStore((state) => state.myCollectionId);
+ const folderId = location?.state?.folderId || myCollectionId;
+ const isLoading = useFlowsManagerStore((state) => state.isLoading);
+ const [tabActive, setTabActive] = useState("Flows");
+ const setErrorData = useAlertStore((state) => state.setErrorData);
+ const allFlows = useFlowsManagerStore((state) => state.allFlows);
+
+ const handleDownloadFolder = () => {
+ if (allFlows.length === 0) {
+ setErrorData({
+ title: "Folder is empty",
+ list: [],
+ });
+ return;
+ }
+ handleDownloadFolderFn(folderId);
+ };
+
+ return (
+ <>
+
-
-
- setOpenModal(true)}
- options={dropdownOptions}
- plusButton={true}
- dropdownOptions={false}
- />
-
- }
- >
-
+ setOpenModal(true)}
+ options={dropdownOptions}
+ plusButton={true}
+ dropdownOptions={false}
+ />
+
+ }
+ >
+
+
+
+ Logs
+
+
+
+
+
+ (
+
+
+
+
+
+
+ )}
+ />
+
+
+
+ (
+
+
+
+ )}
+ />
+ {/*
+
+
+ (
+
+ setSelectedFlows(value)}
+ selectedOptions={selectedFlows}
+ >
+
+ )}
+ />
+
+
+ (
+
+ setSelectedComponents(value)}
+ selectedOptions={selectedComponents}
+ >
+
+ )}
+ /> */}
+
+
+ );
+};
+
+export default FolderForms;
diff --git a/src/frontend/src/modals/foldersModal/entities/index.ts b/src/frontend/src/modals/foldersModal/entities/index.ts
new file mode 100644
index 000000000..64d69d38b
--- /dev/null
+++ b/src/frontend/src/modals/foldersModal/entities/index.ts
@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const FolderFormsSchema = z.object({
+ name: z.string().min(1, {
+ message: "Name must be at least 1 characters.",
+ }),
+ description: z.string().optional(),
+ components: z.array(z.string()),
+ flows: z.array(z.string()),
+});
diff --git a/src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx b/src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx
new file mode 100644
index 000000000..71a8ac944
--- /dev/null
+++ b/src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx
@@ -0,0 +1,60 @@
+import { useNavigate } from "react-router-dom";
+import { addFolder, updateFolder } from "../../../pages/MainPage/services";
+import useAlertStore from "../../../stores/alertStore";
+import { useFolderStore } from "../../../stores/foldersStore";
+
+const useFolderSubmit = (setOpen, folderToEdit) => {
+ const setSuccessData = useAlertStore((state) => state.setSuccessData);
+ const setErrorData = useAlertStore((state) => state.setErrorData);
+ const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
+ const navigate = useNavigate();
+
+ const onSubmit = (data) => {
+ if (folderToEdit) {
+ updateFolder(data, folderToEdit?.id!).then(
+ () => {
+ setSuccessData({
+ title: "Folder updated successfully.",
+ });
+ getFoldersApi(true);
+ setOpen(false);
+ navigate(`all/folder/${folderToEdit.id}`, {
+ state: { folderId: folderToEdit.id },
+ });
+ },
+ //TODO: LOOK THIS ERRO MORE CAREFULLY
+ (reason) => {
+ if (reason) {
+ setErrorData({
+ title: `Error updating folder.`,
+ });
+ console.error(reason);
+ } else {
+ getFoldersApi(true);
+ setOpen(false);
+ }
+ },
+ );
+ } else {
+ addFolder(data).then(
+ (res) => {
+ setSuccessData({
+ title: "Folder created successfully.",
+ });
+ getFoldersApi(true);
+ setOpen(false);
+ navigate(`all/folder/${res.id}`, { state: { folderId: res.id } });
+ },
+ () => {
+ setErrorData({
+ title: `Error creating folder.`,
+ });
+ },
+ );
+ }
+ };
+
+ return { onSubmit, open, setOpen };
+};
+
+export default useFolderSubmit;
diff --git a/src/frontend/src/modals/foldersModal/index.tsx b/src/frontend/src/modals/foldersModal/index.tsx
new file mode 100644
index 000000000..f6b5415f9
--- /dev/null
+++ b/src/frontend/src/modals/foldersModal/index.tsx
@@ -0,0 +1,79 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import ForwardedIconComponent from "../../components/genericIconComponent";
+import { Button } from "../../components/ui/button";
+import { Form } from "../../components/ui/form";
+import { useFolderStore } from "../../stores/foldersStore";
+import BaseModal from "../baseModal";
+import FolderForms from "./component";
+import { FolderFormsSchema } from "./entities";
+import useFolderSubmit from "./hooks/submit-folder";
+
+type FoldersModalProps = {
+ open: boolean;
+ setOpen: (open: boolean) => void;
+};
+
+export default function FoldersModal({
+ open,
+ setOpen,
+}: FoldersModalProps): JSX.Element {
+ const form = useForm
+
+
+
+
-
-
- {!isLoading && data.length === 0 ? (
-
- {!isLoading && data.length > 0 && (
-
-
- ) : (
-
-
-
-
-
- Flows and components can be created using Langflow.
-
-
- New?
-
-
- .
-
- 🚀
-
-
- {isLoading === false && data?.length > 0 ? (
- data?.map((item, idx) => (
- {
- removeFlow(item.id);
- setSuccessData({
- title: `${
- item.is_component ? "Component" : "Flow"
- } deleted successfully!`,
- });
- resetFilter();
- }}
- key={idx}
- data={{ is_component: item.is_component ?? false, ...item }}
- disabled={isLoading}
- data-testid={"edit-flow-button-" + item.id + "-" + idx}
- button={
- !is_component ? (
-
-
-
- ) : (
- <>
- )
- }
- onClick={
- !is_component
- ? () => {
- navigate("/flow/" + item.id);
- }
- : undefined
- }
- playground={!is_component}
- />
- ))
- ) : (
- <>
-
- )}
-
- (f.is_component ?? false) === is_component)
- .length
- }
- paginate={(pageSize, pageIndex) => {
- setPageIndex(pageIndex);
- setPageSize(pageSize);
- }}
- >
-
- )}
-
+
+
+ {!isLoading && data?.length === 0 ? (
+
+ {!isLoading && data?.length > 0 && (
+
+ {isLoading === false && data?.length > 0 ? (
+ <>
+ {data?.map((item) => (
+
+
+
+ ))}
+
+ ) : (
+ <>
+
+ )}
+
+ {
+ setPageIndex(pageIndex);
+ setPageSize(pageSize);
+ }}
+ >
+
+ )}
+
+
+
+ );
+};
+export default EmptyComponent;
diff --git a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
new file mode 100644
index 000000000..5b556f162
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
@@ -0,0 +1,85 @@
+import { useState } from "react";
+import IconComponent from "../../../../components/genericIconComponent";
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "../../../../components/ui/select";
+import { Checkbox } from "../../../../components/ui/checkbox";
+import { Button } from "../../../../components/ui/button";
+import { cn } from "../../../../utils/utils";
+import ShadTooltip from "../../../../components/shadTooltipComponent";
+
+type HeaderComponentProps = {
+ handleSelectAll: (select) => void;
+ handleDelete: () => void;
+ disableDelete: boolean;
+};
+
+const HeaderComponent = ({
+ handleSelectAll,
+ handleDelete,
+ disableDelete,
+}: HeaderComponentProps) => {
+ const [shouldSelectAll, setShouldSelectAll] = useState(true);
+
+ const handleClick = () => {
+ handleSelectAll(shouldSelectAll);
+ setShouldSelectAll((prevState) => !prevState);
+ };
+
+ return (
+ <>
+
+
+
+
+
+ Flows and components can be created using Langflow.
+
+
+ New?
+
+
+ .
+
+ 🚀
+
+
+
+
+
+ );
+};
+export default HeaderComponent;
diff --git a/src/frontend/src/pages/MainPage/components/modalsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/modalsComponent/index.tsx
new file mode 100644
index 000000000..496dfe286
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/modalsComponent/index.tsx
@@ -0,0 +1,58 @@
+// Modals.tsx
+import IconComponent from "../../../../components/genericIconComponent";
+import { Button } from "../../../../components/ui/button";
+import DeleteConfirmationModal from "../../../../modals/deleteConfirmationModal";
+import FoldersModal from "../../../../modals/foldersModal";
+import NewFlowModal from "../../../../modals/newFlowModal";
+import { cn } from "../../../../utils/utils";
+
+interface ModalsProps {
+ openModal: boolean;
+ setOpenModal: (value: boolean) => void;
+ openFolderModal: boolean;
+ setOpenFolderModal: (value: boolean) => void;
+ openDeleteFolderModal: boolean;
+ setOpenDeleteFolderModal: (value: boolean) => void;
+ handleDeleteFolder: () => void;
+}
+
+const ModalsComponent = ({
+ openModal,
+ setOpenModal,
+ openFolderModal,
+ setOpenFolderModal,
+ openDeleteFolderModal,
+ setOpenDeleteFolderModal,
+ handleDeleteFolder,
+}: ModalsProps) => (
+ <>
+ {openModal &&
+
+
+ Select items to delete
+ ) : (
+ Delete selected items
+ )
+ }
+ >
+
+
+
+
+
+
+ );
+};
+export default HeaderTabsSearchComponent;
diff --git a/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/inputSearchComponent/index.tsx b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/inputSearchComponent/index.tsx
new file mode 100644
index 000000000..382dd4274
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/inputSearchComponent/index.tsx
@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { Input } from "../../../../../../components/ui/input";
+import useFlowsManagerStore from "../../../../../../stores/flowsManagerStore";
+import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
+
+type InputSearchComponentProps = {
+ loading: boolean;
+};
+
+const InputSearchComponent = ({ loading }: InputSearchComponentProps) => {
+ const pagePath = window.location.pathname;
+
+ const [inputValue, setInputValue] = useState("");
+ const allFlows = useFlowsManagerStore((state) => state.allFlows);
+
+ const setSearchFlowsComponents = useFlowsManagerStore(
+ (state) => state.setSearchFlowsComponents,
+ );
+
+ const searchFlowsComponents = useFlowsManagerStore(
+ (state) => state.searchFlowsComponents,
+ );
+
+ const disableInputSearch =
+ loading ||
+ !allFlows ||
+ (allFlows?.length === 0 && searchFlowsComponents === "");
+
+ const getSearchPlaceholder = () => {
+ if (pagePath.includes("flows")) {
+ return "Search Flows";
+ } else if (pagePath.includes("components")) {
+ return "Search Components";
+ } else {
+ return "Search Flows and Components";
+ }
+ };
+
+ return (
+ <>
+
+ {
+ setSearchFlowsComponents(e.target.value);
+ setInputValue(e.target.value);
+ }}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ setSearchFlowsComponents(inputValue);
+ }
+ }}
+ value={inputValue}
+ />
+
+
+
+ );
+};
+export default InputSearchComponent;
diff --git a/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/tabsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/tabsComponent/index.tsx
new file mode 100644
index 000000000..8a3bb5bae
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/myCollectionComponent/components/tabsComponent/index.tsx
@@ -0,0 +1,77 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useFolderStore } from "../../../../../../stores/foldersStore";
+
+type TabsSearchComponentProps = {
+ tabsOptions: string[];
+ setActiveTab: (tab: string) => void;
+ loading: boolean;
+ tabActive: string;
+};
+
+const TabsSearchComponent = ({
+ tabsOptions,
+ setActiveTab,
+ loading,
+ tabActive,
+}: TabsSearchComponentProps) => {
+ const navigate = useNavigate();
+ const folderUrl = useFolderStore((state) => state.folderUrl);
+
+ const changeLocation = (tabOption) => {
+ const location = window.location.pathname;
+ let newLocation = "";
+ switch (tabOption) {
+ case "Flows":
+ newLocation = location.replace(/components|all/, "flows");
+ break;
+ case "Components":
+ newLocation = location.replace(/flows|all/, "components");
+ break;
+ default:
+ newLocation = location.replace(/flows|components/, "all");
+ break;
+ }
+
+ navigate(newLocation, { state: { folderId: folderUrl } });
+ };
+
+ useEffect(() => {
+ const path = window.location.pathname;
+ if (path.includes("components")) {
+ setActiveTab("Components");
+ } else if (path.includes("flows")) {
+ setActiveTab("Flows");
+ } else {
+ setActiveTab("All");
+ }
+ }, [window.location.pathname]);
+
+ return (
+ <>
+
+ {tabsOptions.map((tabOption, index) => {
+ return (
+
+ );
+ })}
+
+
+ );
+};
+export default TabsSearchComponent;
diff --git a/src/frontend/src/pages/MainPage/components/myCollectionComponent/index.tsx b/src/frontend/src/pages/MainPage/components/myCollectionComponent/index.tsx
new file mode 100644
index 000000000..f61a48eb2
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/myCollectionComponent/index.tsx
@@ -0,0 +1,19 @@
+import ComponentsComponent from "../componentsComponent";
+import HeaderTabsSearchComponent from "./components/headerTabsSearchComponent";
+
+type MyCollectionComponentProps = {
+ key: string;
+ type: string;
+};
+
+const MyCollectionComponent = ({ key, type }: MyCollectionComponentProps) => {
+ return (
+ <>
+
+
+
+ );
+};
+export default MyCollectionComponent;
diff --git a/src/frontend/src/pages/MainPage/entities/index.tsx b/src/frontend/src/pages/MainPage/entities/index.tsx
new file mode 100644
index 000000000..74c3c773f
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/entities/index.tsx
@@ -0,0 +1,26 @@
+import { FlowType } from "../../../types/flow";
+
+export type FolderType = {
+ name: string;
+ description: string;
+ id?: string | null;
+ parent_id: string;
+ flows: FlowType[];
+};
+
+export type AddFolderType = {
+ name: string;
+ description: string;
+ id?: string | null;
+ parent_id: string;
+ flows?: string[];
+ components?: string[];
+};
+
+export type StarterProjectsType = {
+ name?: string;
+ description?: string;
+ flows?: FlowType[];
+ id: string;
+ parent_id: string;
+};
diff --git a/src/frontend/src/pages/MainPage/hooks/use-delete-folder.tsx b/src/frontend/src/pages/MainPage/hooks/use-delete-folder.tsx
new file mode 100644
index 000000000..257f1b6d2
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/hooks/use-delete-folder.tsx
@@ -0,0 +1,32 @@
+import useAlertStore from "../../../stores/alertStore";
+import { useFolderStore } from "../../../stores/foldersStore";
+import { deleteFolder, getFolderById } from "../services";
+
+const useDeleteFolder = ({ navigate, getFoldersApi }) => {
+ const setSuccessData = useAlertStore((state) => state.setSuccessData);
+ const setErrorData = useAlertStore((state) => state.setErrorData);
+ const folderToEdit = useFolderStore((state) => state.folderToEdit);
+ const myCollectionId = useFolderStore((state) => state.myCollectionId);
+
+ const handleDeleteFolder = () => {
+ deleteFolder(folderToEdit?.id!)
+ .then(() => {
+ setSuccessData({
+ title: "Folder deleted successfully.",
+ });
+ getFolderById(myCollectionId!);
+ getFoldersApi(true);
+ navigate("/all");
+ })
+ .catch((err) => {
+ console.error(err);
+ setErrorData({
+ title: "Error deleting folder.",
+ });
+ });
+ };
+
+ return { handleDeleteFolder };
+};
+
+export default useDeleteFolder;
diff --git a/src/frontend/src/pages/MainPage/hooks/use-dropdown-options.tsx b/src/frontend/src/pages/MainPage/hooks/use-dropdown-options.tsx
new file mode 100644
index 000000000..69e2c2df3
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/hooks/use-dropdown-options.tsx
@@ -0,0 +1,36 @@
+import { CONSOLE_ERROR_MSG } from "../../../constants/alerts_constants";
+import useAlertStore from "../../../stores/alertStore";
+
+const useDropdownOptions = ({ uploadFlow, navigate, is_component }) => {
+ const setSuccessData = useAlertStore((state) => state.setSuccessData);
+ const setErrorData = useAlertStore((state) => state.setErrorData);
+ const handleImportFromJSON = () => {
+ uploadFlow({
+ newProject: true,
+ isComponent: is_component,
+ })
+ .then((id) => {
+ setSuccessData({
+ title: `${is_component ? "Component" : "Flow"} uploaded successfully`,
+ });
+ if (!is_component) navigate("/flow/" + id);
+ })
+ .catch((error) => {
+ setErrorData({
+ title: CONSOLE_ERROR_MSG,
+ list: [error],
+ });
+ });
+ };
+
+ const dropdownOptions = [
+ {
+ name: "Import from JSON",
+ onBtnClick: handleImportFromJSON,
+ },
+ ];
+
+ return [...dropdownOptions];
+};
+
+export default useDropdownOptions;
diff --git a/src/frontend/src/pages/MainPage/hooks/use-on-file-drop.tsx b/src/frontend/src/pages/MainPage/hooks/use-on-file-drop.tsx
new file mode 100644
index 000000000..c0b898dfa
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/hooks/use-on-file-drop.tsx
@@ -0,0 +1,64 @@
+import { useLocation } from "react-router-dom";
+import {
+ CONSOLE_ERROR_MSG,
+ UPLOAD_ALERT_LIST,
+ WRONG_FILE_ERROR_ALERT,
+} from "../../../constants/alerts_constants";
+import useAlertStore from "../../../stores/alertStore";
+import { useFolderStore } from "../../../stores/foldersStore";
+
+const useFileDrop = (uploadFlow, type) => {
+ const location = useLocation();
+ const setSuccessData = useAlertStore((state) => state.setSuccessData);
+ const setErrorData = useAlertStore((state) => state.setErrorData);
+ const getFolderById = useFolderStore((state) => state.getFolderById);
+ const folderId = location?.state?.folderId;
+ const myCollectionId = useFolderStore((state) => state.myCollectionId);
+
+ const handleFileDrop = (e) => {
+ e.preventDefault();
+ if (e.dataTransfer.types.some((type) => type === "Files")) {
+ const file = e.dataTransfer.files.item(0);
+
+ if (file.type === "application/json") {
+ const reader = new FileReader();
+
+ reader.onload = (event) => {
+ const fileContent = event.target!.result;
+ const fileContentJson = JSON.parse(fileContent as string);
+ const is_component = fileContentJson.is_component;
+ uploadFlow({
+ newProject: true,
+ file: file,
+ isComponent: type === "all" ? null : type === "component",
+ })
+ .then(() => {
+ setSuccessData({
+ title: `${
+ is_component ? "Component" : "Flow"
+ } uploaded successfully`,
+ });
+ getFolderById(folderId ? folderId : myCollectionId);
+ })
+ .catch((error) => {
+ setErrorData({
+ title: CONSOLE_ERROR_MSG,
+ list: [error],
+ });
+ });
+ };
+
+ reader.readAsText(file);
+ } else {
+ setErrorData({
+ title: WRONG_FILE_ERROR_ALERT,
+ list: [UPLOAD_ALERT_LIST],
+ });
+ }
+ }
+ };
+
+ return [handleFileDrop];
+};
+
+export default useFileDrop;
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
deleted file mode 100644
index 08de20b31..000000000
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { Group, ToyBrick } from "lucide-react";
-import { useEffect, useState } from "react";
-import { Outlet, useLocation, useNavigate } from "react-router-dom";
-import DropdownButton from "../../components/dropdownButtonComponent";
-import IconComponent from "../../components/genericIconComponent";
-import PageLayout from "../../components/pageLayout";
-import SidebarNav from "../../components/sidebarComponent";
-import { Button } from "../../components/ui/button";
-import { CONSOLE_ERROR_MSG } from "../../constants/alerts_constants";
-import {
- MY_COLLECTION_DESC,
- USER_PROJECTS_HEADER,
-} from "../../constants/constants";
-import NewFlowModal from "../../modals/newFlowModal";
-import useAlertStore from "../../stores/alertStore";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
-import { downloadFlows } from "../../utils/reactflowUtils";
-export default function HomePage(): JSX.Element {
- const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
- const setCurrentFlowId = useFlowsManagerStore(
- (state) => state.setCurrentFlowId
- );
- const uploadFlows = useFlowsManagerStore((state) => state.uploadFlows);
- const setSuccessData = useAlertStore((state) => state.setSuccessData);
- const setErrorData = useAlertStore((state) => state.setErrorData);
- const location = useLocation();
- const pathname = location.pathname;
- const [openModal, setOpenModal] = useState(false);
- const is_component = pathname === "/components";
- const dropdownOptions = [
- {
- name: "Import from JSON",
- onBtnClick: () => {
- uploadFlow({
- newProject: true,
- isComponent: is_component,
- })
- .then((id) => {
- setSuccessData({
- title: `${
- is_component ? "Component" : "Flow"
- } uploaded successfully`,
- });
- if (!is_component) navigate("/flow/" + id);
- })
- .catch((error) => {
- setErrorData({
- title: CONSOLE_ERROR_MSG,
- list: [error],
- });
- });
- },
- },
- ];
- const sidebarNavItems = [
- {
- title: "Flows",
- href: "/flows",
- icon:
-
-
-
-
-
+
+
+
+
+
+
- {loading ? {}} isPlayground>
- <>
- }
+ return (
+ (
- CONTROL_PATCH_USER_STATE
+ CONTROL_PATCH_USER_STATE,
);
const { autoLogin } = useContext(AuthContext);
@@ -113,110 +113,109 @@ export default function GeneralPage() {
+ {loading ? (
+ {}} isPlayground>
+ <>
+
+ )}
+
+ );
+}
diff --git a/src/frontend/src/pages/SettingsPage/index.tsx b/src/frontend/src/pages/SettingsPage/index.tsx
index 554be79b6..e4f856599 100644
--- a/src/frontend/src/pages/SettingsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/index.tsx
@@ -8,7 +8,7 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function SettingsPage(): JSX.Element {
const pathname = location.pathname;
const setCurrentFlowId = useFlowsManagerStore(
- (state) => state.setCurrentFlowId
+ (state) => state.setCurrentFlowId,
);
useEffect(() => {
setCurrentFlowId("");
@@ -25,36 +25,7 @@ export default function SettingsPage(): JSX.Element {
/>
),
},
- /* {
- title: "Theme",
- href: "/settings/theme",
- icon: (
-
+
- )
-}
\ No newline at end of file
+ ) : (
+
-
- {
- handlePatchGradient();
- event.preventDefault();
- }}
- >
-
-
- Profile Gradient
-
- Choose the gradient that appears as your profile picture.
-
-
-
-
+
+
+
+
+
+
+
)}
- {
+ handlePatchGradient();
+ event.preventDefault();
+ }}
+ >
+
+
+ Profile Gradient
+
+ Choose the gradient that appears as your profile picture.
+
+
+
+
+
+
+
+
+
+
+
+ {!autoLogin && (
+ {
+ handlePatchPassword();
+ event.preventDefault();
+ }}
+ >
+
+
+ Password
+
+ Type your new password and confirm it.
+
+
+
+
-
-
-
-
-
-
- {!autoLogin && (
- {
- handlePatchPassword();
- event.preventDefault();
- }}
- >
-
-
- Password
-
- Type your new password and confirm it.
-
-
-
-
-
-
-
-
-
-
-
+
+ Please confirm your password
+
+
+
+
+ {
+ handleInput({ target: { name: "gradient", value } });
+ }}
+ />
+
+
+
+ {
- handleInput({ target: { name: "gradient", value } });
+ handleInput({ target: { name: "password", value } });
}}
+ value={password}
+ isForm
+ password={true}
+ placeholder="Password"
+ className="w-full"
+ />
+
+ Please enter your password
+
+
+
+ {
+ handleInput({
+ target: { name: "cnfPassword", value },
+ });
+ }}
+ value={cnfPassword}
+ isForm
+ password={true}
+ placeholder="Confirm Password"
+ className="w-full"
/>
-
-
-
- {
- handleInput({ target: { name: "password", value } });
- }}
- value={password}
- isForm
- password={true}
- placeholder="Password"
- className="w-full"
- />
-
- Please enter your password
-
-
-
- {
- handleInput({
- target: { name: "cnfPassword", value },
- });
- }}
- value={cnfPassword}
- isForm
- password={true}
- placeholder="Confirm Password"
- className="w-full"
- />
-
- Please confirm your password
-
-
-
-
- {
- setSelectedRows(event.api.getSelectedRows().map((row) => row.name));
- }}
- rowSelection="multiple"
- suppressRowClickSelection={true}
- pagination={true}
- columnDefs={colDefs}
- rowData={rowData}
- />
+
+
+ {
+ setSelectedRows(
+ event.api.getSelectedRows().map((row) => row.name),
+ );
+ }}
+ rowSelection="multiple"
+ suppressRowClickSelection={true}
+ pagination={true}
+ columnDefs={colDefs}
+ rowData={rowData}
+ />
+
+
);
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index 434b657be..49b905f41 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -10,8 +10,8 @@ import ApiKeysPage from "./pages/ApiKeysPage";
import DeleteAccountPage from "./pages/DeleteAccountPage";
import FlowPage from "./pages/FlowPage";
import LoginPage from "./pages/LoginPage";
-import HomePage from "./pages/MainPage";
-import ComponentsComponent from "./pages/MainPage/components/components";
+import MyCollectionComponent from "./pages/MainPage/components/myCollectionComponent";
+import HomePage from "./pages/MainPage/pages/mainPage";
import PlaygroundPage from "./pages/Playground";
import SettingsPage from "./pages/SettingsPage";
import GeneralPage from "./pages/SettingsPage/pages/GeneralPage";
@@ -32,14 +32,18 @@ const Router = () => {
}
>
-