- Prompt variables can be created with any chosen name inside curly brackets, - e.g. `{variable_name}` -
- - -Here is how it looks when you get it from the sidebar. - -- The `TextInput` component serves as a straightforward means for setting Text - input values in the chat window. It ensures that textual data can be - seamlessly passed to subsequent components in the flow. -
- +The **Record Template** field is used to specify how a `Record` should be converted into `Text`. This is particularly useful when you want to extract specific information from a `Record` and pass it as text to the next component in the sequence. -It should look like this when dropped directly from the sidebar. - -- We appreciate your understanding as we polish our documentation – it may contain some rough edges. Share your feedback or report issues to help us improve! 🛠️📝 + Thanks for your patience as we improve our documentation—it might have some rough edges. Share your feedback or report issues to help us enhance it! 🛠️📝
- The component retrieves messages based on the provided criteria, including the specific file path for stored messages. If no specific criteria are provided, it will return the most recent messages up to the specified limit. This component can be used to review past interactions and analyze the flow of conversations. + The component retrieves messages based on the provided criteria, including the specific file path for stored messages. If no specific criteria are provided, it returns the most recent messages up to the specified limit. This component can be used to review past interactions and analyze conversation flows.
- We appreciate your understanding as we polish our documentation – it may contain some rough edges. Share your feedback or report issues to help us improve! 🛠️📝 + Thank you for your patience as we refine our documentation. You might encounter some inconsistencies. Please help us improve by sharing your feedback or reporting any issues! 🛠️📝
- If _`As Record`_ is _`true`_ and the _`Message`_ is a _`Record`_, the data of the _`Record`_ will be updated with the _`Sender`_, _`Sender Name`_, and _`Session ID`_. + If `As Record` is `true` and the `Message` is a `Record`, the data in the `Record` is updated with the `Sender`, `Sender Name`, and `Session ID`.
- The `TextOutput` component serves as a straightforward means for displaying text data. It ensures that textual data can be seamlessly observed in the chat window throughout your flow. -
-- We appreciate your understanding as we polish our documentation – it may - contain some rough edges. Share your feedback or report issues to help us - improve! 🛠️📝 + Thank you for your patience as we refine our documentation. It may + still have some areas under development. Please share your feedback or report any issues to help us improve!
- We appreciate your understanding as we polish our documentation – it may contain some rough edges. Share your feedback or report issues to help us improve! 🛠️📝 + We appreciate your patience as we enhance our documentation. It may have some imperfections. Please share your feedback or report issues to help us improve. 🛠️📝
- We appreciate your understanding as we polish our documentation – it may - contain some rough edges. Share your feedback or report issues to help us - improve! 🛠️📝 + Thank you for your patience as we enhance our documentation. It might + currently have some rough edges. Please share your feedback or report any + issues to assist us in improving! 🛠️📝
- We appreciate your understanding as we polish our documentation – it may contain some rough edges. Share your feedback or report issues to help us improve! 🛠️📝 + Thanks for your patience as we refine our documentation. It might have some rough edges currently. Please share your feedback or report issues to help us enhance it! 🛠️📝
- We appreciate your understanding as we polish our documentation – it may - contain some rough edges. Share your feedback or report issues to help us - improve! 🛠️📝 -
+- The Unique ID Generator is crucial for scenarios requiring distinct identifiers, such as session management, transaction tracking, or any context where different instances or entities must be uniquely identified. The generated UUID is provided as a hexadecimal string, offering a high level of uniqueness and security for identification purposes. -
+ The Unique ID Generator is crucial for scenarios requiring distinct identifiers, such as session management, transaction tracking, or any context where different instances or entities must be uniquely identified. The generated UUID is provided as a hexadecimal string, offering a high level of uniqueness and security for identification purposes.- Ensure that the required Astra DB token and API endpoint are properly configured. -
- + Ensure you configure the necessary Astra DB token and API endpoint before + starting.Ensure that pymongo is installed to use MongoDB Atlas Vector Store.
+ Ensure pymongo is installed for using MongoDB Atlas Vector Store.- Ensure that the required PostgreSQL server is accessible and properly - configured. -
+ Ensure the PostgreSQL server is accessible and configured correctly.- Ensure that the required Pinecone API key and environment are properly - configured. -
+ Ensure the Pinecone API key and environment are correctly configured.- Ensure that the required Redis server connection URL and index name are - properly configured. If no documents are provided, a schema must be - provided. -
+ Ensure the Redis server URL and index name are configured correctly. Provide a + schema if no documents are available.- Ensure that the required Supabase service key, Supabase URL, and table name - are properly configured. -
+ Ensure the Supabase service key, URL, and table name are properly configured.- If `inputs` are provided, they will be upserted to the corpus. If - `files_url` are provided, Vectara will process the files from the URLs. -
+ If inputs or files_url are provided, they will be processed accordingly.- Before using the Weaviate Vector Store component, ensure that you have a - Weaviate instance running and accessible at the specified URL. Additionally, - make sure to provide the correct API key for authentication if required. - Adjust the index name, text key, and attributes according to your dataset - and indexing requirements. Finally, ensure that the provided embeddings are - compatible with Weaviate's requirements. -
+ Ensure Weaviate instance is running and accessible. Verify API key, index + name, text key, and attributes are set correctly.- Please, check out our [Possible Installation Issues - section](/migration/possible-installation-issues) if you encounter any - problems. -
-- We are currently working on updating the documentation for Langflow 1.0. -
-RawComponent
+
+ );
+};
+export default RawComponent;
diff --git a/src/frontend/src/components/ImageViewer/index.tsx b/src/frontend/src/components/ImageViewer/index.tsx
new file mode 100644
index 000000000..8433962a7
--- /dev/null
+++ b/src/frontend/src/components/ImageViewer/index.tsx
@@ -0,0 +1,162 @@
+import { saveAs } from "file-saver";
+import OpenSeadragon from "openseadragon";
+import { useEffect, useRef, useState } from "react";
+import { IMGViewErrorMSG, IMGViewErrorTitle } from "../../constants/constants";
+import useAlertStore from "../../stores/alertStore";
+import ForwardedIconComponent from "../genericIconComponent";
+import { Separator } from "../ui/separator";
+
+export default function ImageViewer({ image }) {
+ const viewerRef = useRef(null);
+ const [errorDownloading, setErrordownloading] = useState(false);
+ const setErrorList = useAlertStore((state) => state.setErrorData);
+ const [initialMsg, setInicialMsg] = useState("Please build your flow");
+
+ useEffect(() => {
+ try {
+ if (viewerRef.current) {
+ // Initialize OpenSeadragon viewer
+ const viewer = OpenSeadragon({
+ element: viewerRef.current,
+ prefixUrl:
+ "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/images/", // Optional: Set the path to OpenSeadragon images
+ tileSources: { type: "image", url: image },
+ defaultZoomLevel: 1,
+ maxZoomPixelRatio: 4,
+ showNavigationControl: false,
+ });
+ const zoomInButton = document.getElementById("zoom-in-button");
+ const zoomOutButton = document.getElementById("zoom-out-button");
+ const homeButton = document.getElementById("home-button");
+ const fullPageButton = document.getElementById("full-page-button");
+
+ zoomInButton!.addEventListener("click", () =>
+ viewer.viewport.zoomBy(1.2),
+ );
+ zoomOutButton!.addEventListener("click", () =>
+ viewer.viewport.zoomBy(0.8),
+ );
+ homeButton!.addEventListener("click", () => viewer.viewport.goHome());
+ fullPageButton!.addEventListener("click", () =>
+ viewer.setFullScreen(true),
+ );
+
+ // Optionally, you can set additional viewer options here
+
+ // Cleanup function
+ return () => {
+ viewer.destroy();
+ zoomInButton!.removeEventListener("click", () =>
+ viewer.viewport.zoomBy(1.2),
+ );
+ zoomOutButton!.removeEventListener("click", () =>
+ viewer.viewport.zoomBy(0.8),
+ );
+ homeButton!.removeEventListener("click", () =>
+ viewer.viewport.goHome(),
+ );
+ fullPageButton!.removeEventListener("click", () =>
+ viewer.setFullScreen(true),
+ );
+ };
+ }
+ } catch (error) {
+ console.error("Error initializing OpenSeadragon:", error);
+ }
+ }, [image]);
+
+ function download() {
+ const imageUrl = image;
+ // Fetch the image data
+ fetch(imageUrl)
+ .then((response) => response.blob())
+ .then((blob) => {
+ // Save the image using FileSaver.js
+ saveAs(blob, "image.jpg");
+ })
+ .catch((error) => {
+ setErrorList({ title: "There was an error downloading your image" });
+ console.error("Error downloading image:", error);
+ });
+ }
+
+ return image === "" ? (
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+ {IMGViewErrorMSG}
+
+
+
+
+ );
+}
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}
+
+ ))}
+
+
+
+
+
+ {
+ ref.current = edit["src"];
+ }}
+ onChange={(edit) => {
+ ref.current = edit["src"];
+ }}
+ src={ref.current}
+ />
+
+ );
+}
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx
new file mode 100644
index 000000000..2e95e78ef
--- /dev/null
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx
@@ -0,0 +1,107 @@
+import _ from "lodash";
+import { useRef } from "react";
+import IconComponent from "../../../../../../components/genericIconComponent";
+import { Input } from "../../../../../../components/ui/input";
+import { classNames } from "../../../../../../utils/utils";
+
+export type IOKeyPairInputProps = {
+ value: any;
+ onChange: (value: any) => void;
+ duplicateKey: boolean;
+ isList: boolean;
+ isInputField?: boolean;
+};
+
+const IOKeyPairInput = ({
+ value,
+ onChange,
+ duplicateKey,
+ isList = true,
+ isInputField,
+}: IOKeyPairInputProps) => {
+ const checkValueType = (value) => {
+ return Array.isArray(value) ? value : [value];
+ };
+
+ const ref = useRef
+ {ref.current?.map((obj, index) => {
+ return Object.keys(obj).map((key, idx) => {
+ return (
+
+
+ );
+};
+
+export default IOKeyPairInput;
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
index ba8f83706..050f1acbb 100644
--- a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
@@ -1,9 +1,30 @@
import { cloneDeep } from "lodash";
+import { useState } from "react";
+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,
+ SelectGroup,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "../../../../components/ui/select";
import { Textarea } from "../../../../components/ui/textarea";
+import { PDFViewConstant } from "../../../../constants/constants";
import { InputOutput } from "../../../../constants/enums";
import useFlowStore from "../../../../stores/flowStore";
import { IOFieldViewProps } from "../../../../types/components";
+import {
+ convertValuesToNumbers,
+ hasDuplicateKeys,
+} from "../../../../utils/reactflowUtils";
import IOFileInput from "./components/FileInput";
+import IoJsonInput from "./components/JSONInput";
+import IOKeyPairInput from "./components/keyPairInput";
export default function IOFieldView({
type,
@@ -15,6 +36,21 @@ export default function IOFieldView({
const setNode = useFlowStore((state) => state.setNode);
const flowPool = useFlowStore((state) => state.flowPool);
const node = nodes.find((node) => node.id === fieldId);
+ const flowPoolNode = (flowPool[node!.id] ?? [])[
+ (flowPool[node!.id]?.length ?? 1) - 1
+ ];
+ const handleChangeSelect = (e) => {
+ if (node) {
+ let newNode = cloneDeep(node);
+ if (newNode.data.node.template.separator) {
+ newNode.data.node.template.separator.value = e;
+ setNode(newNode.id, newNode);
+ }
+ }
+ };
+
+ const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
+
function handleOutputType() {
if (!node) return <>"No node found!";
switch (type) {
@@ -53,6 +89,57 @@ export default function IOFieldView({
/>
);
+ case "KeyPairInput":
+ return (
+
+ handleChangeKey(event, index)}
+ disabled={!isInputField}
+ />
+
+
+ handleChangeValue(event.target.value, index)
+ }
+ disabled={!isInputField}
+ />
+
+ {isList && isInputField && index === ref.current.length - 1 ? (
+
+ ) : isList && isInputField ? (
+
+ ) : (
+ ""
+ )}
+
+ );
+ });
+ })}
+ {PDFViewConstant}
+ ) : (
+
+ Expand the ouptut to see the CSV
+
+
+ CSV separator
+
+
+
+ ) : (
+ <>
+ Expand the view to see the image
+ ) : (
+
+
+ );
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 39f754ff4..3f516945c 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
@@ -6,9 +6,9 @@ import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import MaleTechnology from "../../../../../assets/male-technologist.png";
import Robot from "../../../../../assets/robot.png";
-import SanitizedHTMLWrapper from "../../../../../components/SanitizedHTMLWrapper";
import CodeTabsComponent from "../../../../../components/codeTabsComponent";
import IconComponent from "../../../../../components/genericIconComponent";
+import SanitizedHTMLWrapper from "../../../../../components/sanitizedHTMLWrapper";
import useAlertStore from "../../../../../stores/alertStore";
import useFlowStore from "../../../../../stores/flowStore";
import { chatMessagePropsType } from "../../../../../types/components";
@@ -114,19 +114,19 @@ export default function ChatMessage({
+
{template ? (
<>
) : (
state.nodes);
const inputs = useFlowStore((state) => state.inputs).filter(
- (input) => input.type !== "ChatInput"
+ (input) => input.type !== "ChatInput",
);
const chatInput = useFlowStore((state) => state.inputs).find(
- (input) => input.type === "ChatInput"
+ (input) => input.type === "ChatInput",
);
const outputs = useFlowStore((state) => state.outputs).filter(
- (output) => output.type !== "ChatOutput"
+ (output) => output.type !== "ChatOutput",
);
const chatOutput = useFlowStore((state) => state.outputs).find(
- (output) => output.type === "ChatOutput"
+ (output) => output.type === "ChatOutput",
);
const nodes = useFlowStore((state) => state.nodes).filter(
(node) =>
inputs.some((input) => input.id === node.id) ||
- outputs.some((output) => output.id === node.id)
+ outputs.some((output) => output.id === node.id),
);
const haveChat = chatInput || chatOutput;
const [selectedTab, setSelectedTab] = useState(
- inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
+ inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0,
);
function startView() {
@@ -83,11 +83,11 @@ export default function IOModal({
return updateVerticesOrder(currentFlow!.id, null);
}
- useEffect(() => {
- if (open) {
- updateVertices();
- }
- }, [open, currentFlow]);
+ // useEffect(() => {
+ // if (open) {
+ // updateVertices();
+ // }
+ // }, [open, currentFlow]);
async function sendMessage({repeat=1,files}:{repeat:number,files?:string[]}): Promise {
if (isBuilding) return;
@@ -124,7 +124,7 @@ export default function IOModal({
return (
- Interaction Panel
+ Playground
@@ -147,7 +147,7 @@ export default function IOModal({
{selectedTab !== 0 && (
{nodes
.filter((node) =>
- inputs.some((input) => input.id === node.id)
+ inputs.some((input) => input.id === node.id),
)
.map((node, index) => {
const input = inputs.find(
- (input) => input.id === node.id
+ (input) => input.id === node.id,
)!;
return (
limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll"
- : ""
+ : "",
)}
>
{nodeLength > 0 && (
@@ -138,8 +143,8 @@ const EditNodeModal = forwardRef(
templateParam.charAt(0) !== "_" &&
myData.node?.template[templateParam].show &&
LANGFLOW_SUPPORTED_TYPES.has(
- myData.node.template[templateParam].type
- )
+ myData.node!.template[templateParam].type,
+ ),
)
.map((templateParam, index) => {
let id = {
@@ -161,8 +166,8 @@ const EditNodeModal = forwardRef(
myData.node?.template[templateParam]
.proxy,
}
- : id
- )
+ : id,
+ ),
) ?? false;
return (
{myData.node?.template[templateParam]
.display_name
- ? myData.node.template[templateParam]
+ ? myData.node!.template[templateParam]
.display_name
: myData.node?.template[templateParam]
.name}
@@ -198,58 +202,62 @@ const EditNodeModal = forwardRef(
- {myData.node?.template[templateParam].type ===
- "str" &&
- !myData.node.template[templateParam].options ? (
+
+
+
+
+
+
+
+
+
{
@@ -392,42 +416,53 @@ 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" ? (
+
+
+
{
@@ -435,21 +470,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) => {
@@ -459,8 +497,11 @@ const EditNodeModal = forwardRef(
}}
>
- ) : myData.node?.template[templateParam]
- .type === "prompt" ? (
+
+
+
{
@@ -482,21 +523,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" ? (
+
+
+
{
@@ -520,16 +566,16 @@ const EditNodeModal = forwardRef(
}}
id={
"code-area-edit" +
- myData.node.template[templateParam].name
+ myData.node!.template[templateParam]
+ .name
}
/>
- ) : myData.node?.template[templateParam]
- .type === "Any" ? (
- "-"
- ) : (
-
- )}
+
+
+
+ <>-
+
{nodes
.filter((node) =>
- outputs.some((output) => output.id === node.id)
+ outputs.some((output) => output.id === node.id),
)
.map((node, index) => {
const output = outputs.find(
- (output) => output.id === node.id
+ (output) => output.id === node.id,
)!;
return (
) => void;
description?: string;
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
similarity index 79%
rename from src/frontend/src/modals/EditNodeModal/index.tsx
rename to src/frontend/src/modals/editNodeModal/index.tsx
index 17da8c73b..0db4bdcf5 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/editNodeModal/index.tsx
@@ -1,6 +1,5 @@
import { cloneDeep } from "lodash";
import { forwardRef, useEffect, useState } from "react";
-import ShadTooltip from "../../components/ShadTooltipComponent";
import CodeAreaComponent from "../../components/codeAreaComponent";
import DictComponent from "../../components/dictComponent";
import Dropdown from "../../components/dropdownComponent";
@@ -12,6 +11,7 @@ import InputListComponent from "../../components/inputListComponent";
import IntComponent from "../../components/intComponent";
import KeypairListComponent from "../../components/keypairListComponent";
import PromptAreaComponent from "../../components/promptComponent";
+import ShadTooltip from "../../components/shadTooltipComponent";
import TextAreaComponent from "../../components/textAreaComponent";
import ToggleShadComponent from "../../components/toggleShadComponent";
import { Badge } from "../../components/ui/badge";
@@ -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 {
@@ -52,7 +53,7 @@ const EditNodeModal = forwardRef(
open: boolean;
setOpen: (open: boolean) => void;
},
- ref
+ ref,
) => {
const [myData, setMyData] = useState(data);
@@ -84,6 +85,10 @@ const EditNodeModal = forwardRef(
const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
+ const type = (templateParam) => {
+ return myData.node?.template[templateParam].type;
+ };
+
return (
@@ -334,7 +334,7 @@ export default function IOModal({
{inputs.some(
- (input) => input.id === selectedViewField.id
+ (input) => input.id === selectedViewField.id,
) ? (
{haveChat ? (
@@ -391,7 +391,7 @@ export default function IOModal({
"h-4 w-4",
isBuilding
? "animate-spin"
- : "fill-current text-medium-indigo"
+ : "fill-current text-medium-indigo",
)}
/>
Run Flow
diff --git a/src/frontend/src/modals/apiModal/utils/build-content.tsx b/src/frontend/src/modals/apiModal/utils/build-content.tsx
new file mode 100644
index 000000000..80468fe71
--- /dev/null
+++ b/src/frontend/src/modals/apiModal/utils/build-content.tsx
@@ -0,0 +1,10 @@
+export function buildContent(value: string) {
+ const htmlContent = (
+ '\\` : ""
+ }
+ -d '{"input_value": "message",
+ "output_type": "chat",
+ "input_type": "chat",
+ "tweaks": ${JSON.stringify(tweaksObject, null, 2)}'
+ `;
+ }
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-python-api-code.tsx b/src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx
new file mode 100644
index 000000000..207ae2d48
--- /dev/null
+++ b/src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx
@@ -0,0 +1,58 @@
+/**
+ * Function to get the python code for the API
+ * @param {string} flowId - The id of the flow
+ * @param {boolean} isAuth - If the API is authenticated
+ * @param {any[]} tweak - The tweaks
+ * @returns {string} - The python code
+ */
+export default function getPythonApiCode(
+ flowId: string,
+ isAuth: boolean,
+ tweaksBuildedObject,
+ ): string {
+ const tweaksObject = tweaksBuildedObject[0];
+ return `import requests
+ from typing import Optional
+
+ BASE_API_URL = "${window.location.protocol}//${window.location.host}/api/v1/run"
+ FLOW_ID = "${flowId}"
+ # You can tweak the flow by adding a tweaks dictionary
+ # e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}}
+ TWEAKS = ${JSON.stringify(tweaksObject, null, 2)}
+
+ def run_flow(message: str,
+ flow_id: str,
+ output_type: str = "chat",
+ input_type: str = "chat",
+ tweaks: Optional[dict] = None,
+ api_key: Optional[str] = None) -> dict:
+ """
+ Run a flow with a given message and optional tweaks.
+
+ :param message: The message to send to the flow
+ :param flow_id: The ID of the flow to run
+ :param tweaks: Optional tweaks to customize the flow
+ :return: The JSON response from the flow
+ """
+ api_url = f"{BASE_API_URL}/{flow_id}"
+
+ payload = {
+ "input_value": message,
+ "output_type": output_type,
+ "input_type": input_type,
+ }
+ headers = None
+ if tweaks:
+ payload["tweaks"] = tweaks
+ if api_key:
+ headers = {"x-api-key": api_key}
+ response = requests.post(api_url, json=payload, headers=headers)
+ return response.json()
+
+ # Setup any tweaks you want to apply to the flow
+ message = "message"
+ ${!isAuth ? `api_key = ""` : ""}
+ print(run_flow(message=message, flow_id=FLOW_ID, tweaks=TWEAKS${
+ !isAuth ? `, api_key=api_key` : ""
+ }))`;
+ }
\ No newline at end of file
diff --git a/src/frontend/src/modals/apiModal/utils/get-python-code.tsx b/src/frontend/src/modals/apiModal/utils/get-python-code.tsx
new file mode 100644
index 000000000..d5327c3e7
--- /dev/null
+++ b/src/frontend/src/modals/apiModal/utils/get-python-code.tsx
@@ -0,0 +1,17 @@
+/**
+ * Function to get the python code for the API
+ * @param {string} flow - The current flow
+ * @param {any[]} tweak - The tweaks
+ * @returns {string} - The python code
+ */
+export default function getPythonCode(flowName: string, tweaksBuildedObject): string {
+ const tweaksObject = tweaksBuildedObject[0];
+
+ return `from langflow.load import run_flow_from_json
+ TWEAKS = ${JSON.stringify(tweaksObject, null, 2)}
+
+ result = run_flow_from_json(flow="${flowName}.json",
+ input_value="message",
+ fallback_to_env_vars=True, # False by default
+ tweaks=TWEAKS)`;
+ }
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/utils/get-widget-code.tsx b/src/frontend/src/modals/apiModal/utils/get-widget-code.tsx
new file mode 100644
index 000000000..a44cba757
--- /dev/null
+++ b/src/frontend/src/modals/apiModal/utils/get-widget-code.tsx
@@ -0,0 +1,24 @@
+/**
+ * Function to get the widget code for the API
+ * @param {string} flow - The current flow.
+ * @returns {string} - The widget code
+ */
+export default function getWidgetCode(
+ flowId: string,
+ flowName: string,
+ isAuth: boolean,
+ ): string {
+ 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 15a471fff..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 (
,
React.ReactElement,
React.ReactElement?,
- React.ReactElement?
+ React.ReactElement?,
];
open?: boolean;
setOpen?: (open: boolean) => void;
@@ -78,6 +84,8 @@ interface BaseModalProps {
| "large-h-full"
| "small-h-full"
| "medium-h-full"
+ | "md-thin"
+ | "sm-thin"
| "smaller-h-full";
disable?: boolean;
@@ -93,16 +101,16 @@ function BaseModal({
type = "dialog",
}: BaseModalProps) {
const headerChild = React.Children.toArray(children).find(
- (child) => (child as React.ReactElement).type === Header
+ (child) => (child as React.ReactElement).type === Header,
);
const triggerChild = React.Children.toArray(children).find(
- (child) => (child as React.ReactElement).type === Trigger
+ (child) => (child as React.ReactElement).type === Trigger,
);
const ContentChild = React.Children.toArray(children).find(
- (child) => (child as React.ReactElement).type === Content
+ (child) => (child as React.ReactElement).type === Content,
);
const ContentFooter = React.Children.toArray(children).find(
- (child) => (child as React.ReactElement).type === Footer
+ (child) => (child as React.ReactElement).type === Footer,
);
let minWidth: string;
@@ -111,7 +119,7 @@ function BaseModal({
switch (size) {
case "x-small":
minWidth = "min-w-[20vw]";
- height = " ";
+ height = "h-full";
break;
case "smaller":
minWidth = "min-w-[40vw]";
@@ -127,6 +135,7 @@ function BaseModal({
break;
case "small-h-full":
minWidth = "min-w-[40vw]";
+ height = "h-full";
break;
case "medium":
minWidth = "min-w-[60vw]";
@@ -134,6 +143,8 @@ function BaseModal({
break;
case "medium-h-full":
minWidth = "min-w-[60vw]";
+ height = "h-full";
+
break;
case "large":
minWidth = "min-w-[85vw]";
@@ -147,8 +158,20 @@ function BaseModal({
minWidth = "min-w-[65vw]";
height = "h-[80vh]";
break;
+
+ case "md-thin":
+ minWidth = "min-w-[85vw]";
+ height = "h-[70vh]";
+ break;
+
+ case "sm-thin":
+ minWidth = "min-w-[65vw]";
+ height = "h-[70vh]";
+ break;
+
case "large-h-full":
minWidth = "min-w-[80vw]";
+ height = "h-full";
break;
default:
minWidth = "min-w-[80vw]";
@@ -173,7 +196,7 @@ function BaseModal({
{headerChild}
+ {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-curl-code.tsx b/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
new file mode 100644
index 000000000..9ae8ec48f
--- /dev/null
+++ b/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
@@ -0,0 +1,26 @@
+/**
+ * Function to get the curl code for the API
+ * @param {string} flowId - The id of the flow
+ * @param {boolean} isAuth - If the API is authenticated
+ * @returns {string} - The curl code
+ */
+export default function getCurlCode(
+ flowId: string,
+ isAuth: boolean,
+ tweaksBuildedObject,
+ ): string {
+ const tweaksObject = tweaksBuildedObject[0];
+
+ return `curl -X POST \\
+ ${window.location.protocol}//${
+ window.location.host
+ }/api/v1/run/${flowId}?stream=false \\
+ -H 'Content-Type: application/json'\\${
+ !isAuth ? `\n -H 'x-api-key: {children}
;
};
-const Trigger: React.FC
{ContentChild}
@@ -190,7 +213,7 @@ function BaseModal({
{headerChild}
{ContentChild}
diff --git a/src/frontend/src/modals/ConfirmationModal/index.tsx b/src/frontend/src/modals/confirmationModal/index.tsx
similarity index 97%
rename from src/frontend/src/modals/ConfirmationModal/index.tsx
rename to src/frontend/src/modals/confirmationModal/index.tsx
index 2c6377a12..9f8efa165 100644
--- a/src/frontend/src/modals/ConfirmationModal/index.tsx
+++ b/src/frontend/src/modals/confirmationModal/index.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
-import ShadTooltip from "../../components/ShadTooltipComponent";
+import ShadTooltip from "../../components/shadTooltipComponent";
import { Button } from "../../components/ui/button";
import {
ConfirmationModalType,
diff --git a/src/frontend/src/modals/DeleteConfirmationModal/index.tsx b/src/frontend/src/modals/deleteConfirmationModal/index.tsx
similarity index 82%
rename from src/frontend/src/modals/DeleteConfirmationModal/index.tsx
rename to src/frontend/src/modals/deleteConfirmationModal/index.tsx
index 3621e27cf..d03a0d707 100644
--- a/src/frontend/src/modals/DeleteConfirmationModal/index.tsx
+++ b/src/frontend/src/modals/deleteConfirmationModal/index.tsx
@@ -15,14 +15,20 @@ export default function DeleteConfirmationModal({
onConfirm,
description,
asChild,
+ open,
+ setOpen,
+ note = "",
}: {
children: JSX.Element;
onConfirm: (e: React.MouseEvent
- {myData.node.template[templateParam]
- .list ? (
+ {myData.node!.template[templateParam]
+ ?.list ? (
{
handleOnNewValue(
value,
- templateParam
+ templateParam,
);
}}
/>
- ) : myData.node.template[templateParam]
+ ) : myData.node!.template[templateParam]
.multiline ? (
{
handleOnNewValue(
value,
- templateParam
+ templateParam,
);
}}
/>
@@ -274,8 +282,13 @@ const EditNodeModal = forwardRef(
/>
)}
- ) : myData.node?.template[templateParam]
- .type === "NestedDict" ? (
+ 1
? "my-3"
- : ""
+ : "",
)}
>
- ) : myData.node?.template[templateParam]
- .type === "bool" ? (
+
{" "}
{
handleOnNewValue(
isEnabled,
- templateParam
+ templateParam,
);
}}
size="small"
editNode={true}
/>
- ) : myData.node?.template[templateParam]
- .type === "float" ? (
+
@@ -584,7 +630,7 @@ const EditNodeModal = forwardRef(
);
- }
+ },
);
export default EditNodeModal;
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 9fac4d0a8..9eca267e8 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -1,5 +1,5 @@
import { ReactNode, forwardRef, useEffect, useState } from "react";
-import EditFlowSettings from "../../components/EditFlowSettingsComponent";
+import EditFlowSettings from "../../components/editFlowSettingsComponent";
import IconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox";
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/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index fb880967d..1daeb0fe1 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
-import EditFlowSettings from "../../components/EditFlowSettingsComponent";
+import EditFlowSettings from "../../components/editFlowSettingsComponent";
import IconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { SETTINGS_DIALOG_SUBTITLE } from "../../constants/constants";
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/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index e00462218..0e111c548 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from "react";
-import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
-import ShadTooltip from "../../components/ShadTooltipComponent";
import IconComponent from "../../components/genericIconComponent";
+import SanitizedHTMLWrapper from "../../components/sanitizedHTMLWrapper";
+import ShadTooltip from "../../components/shadTooltipComponent";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import { Textarea } from "../../components/ui/textarea";
@@ -24,8 +24,9 @@ import { postValidatePrompt } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore";
import { genericModalPropsType } from "../../types/components";
import { handleKeyDown } from "../../utils/reactflowUtils";
-import { classNames, varHighlightHTML } from "../../utils/utils";
+import { classNames } from "../../utils/utils";
import BaseModal from "../baseModal";
+import varHighlightHTML from "./utils/var-highlight-html";
export default function GenericModal({
field_name = "",
@@ -82,7 +83,7 @@ export default function GenericModal({
}
const filteredWordsHighlight = matches.filter(
- (word) => !invalid_chars.includes(word)
+ (word) => !invalid_chars.includes(word),
);
setWordsHighlight(filteredWordsHighlight);
@@ -133,7 +134,7 @@ export default function GenericModal({
// to the first key of the custom_fields object
if (field_name === "") {
field_name = Array.isArray(
- apiReturn.data?.frontend_node?.custom_fields?.[""]
+ apiReturn.data?.frontend_node?.custom_fields?.[""],
)
? apiReturn.data?.frontend_node?.custom_fields?.[""][0] ?? ""
: apiReturn.data?.frontend_node?.custom_fields?.[""] ?? "";
@@ -209,7 +210,7 @@ export default function GenericModal({
+
+
+ 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
+
+
+
+
{type === TypeModal.PROMPT && isEdit && !readonly ? (
diff --git a/src/frontend/src/modals/genericModal/utils/var-highlight-html.tsx b/src/frontend/src/modals/genericModal/utils/var-highlight-html.tsx
new file mode 100644
index 000000000..d88be4965
--- /dev/null
+++ b/src/frontend/src/modals/genericModal/utils/var-highlight-html.tsx
@@ -0,0 +1,6 @@
+import { IVarHighlightType } from "../../../types/components";
+
+export default function varHighlightHTML({ name }: IVarHighlightType): string {
+ const html = ``;
+ return html;
+}
diff --git a/src/frontend/src/modals/NewFlowModal/components/NewFlowCardComponent/index.tsx b/src/frontend/src/modals/newFlowModal/components/NewFlowCardComponent/index.tsx
similarity index 70%
rename from src/frontend/src/modals/NewFlowModal/components/NewFlowCardComponent/index.tsx
rename to 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
similarity index 90%
rename from src/frontend/src/modals/NewFlowModal/components/undrawCards/index.tsx
rename to 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/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/nodeModal/components/modalField/index.tsx
similarity index 100%
rename from src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
rename to src/frontend/src/modals/nodeModal/components/modalField/index.tsx
diff --git a/src/frontend/src/modals/SecretKeyModal/index.tsx b/src/frontend/src/modals/secretKeyModal/index.tsx
similarity index 100%
rename from src/frontend/src/modals/SecretKeyModal/index.tsx
rename to src/frontend/src/modals/secretKeyModal/index.tsx
diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx
index f37c166f3..b6c5a2aed 100644
--- a/src/frontend/src/modals/shareModal/index.tsx
+++ b/src/frontend/src/modals/shareModal/index.tsx
@@ -1,6 +1,6 @@
import { Loader2 } from "lucide-react";
import { ReactNode, useEffect, useMemo, useState } from "react";
-import EditFlowSettings from "../../components/EditFlowSettingsComponent";
+import EditFlowSettings from "../../components/editFlowSettingsComponent";
import IconComponent from "../../components/genericIconComponent";
import { TagsSelector } from "../../components/tagsSelectorComponent";
import { Button } from "../../components/ui/button";
@@ -22,9 +22,10 @@ import {
removeFileNameFromComponents,
removeGlobalVariableFromComponents,
} from "../../utils/reactflowUtils";
-import { getTagsIds } from "../../utils/storeUtils";
-import ConfirmationModal from "../ConfirmationModal";
import BaseModal from "../baseModal";
+import ConfirmationModal from "../confirmationModal";
+import ExportModal from "../exportModal";
+import getTagsIds from "./utils/get-tags-ids";
export default function ShareModal({
component,
@@ -251,18 +252,35 @@ export default function ShareModal({
-
+ {!is_component && (
+
+
+
+ )}
+ {is_component && (
+
+ )}