Fix formatting issues in code

This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-02-28 21:50:22 -03:00
commit 546e0ad701
41 changed files with 347 additions and 189 deletions

View file

@ -18,10 +18,10 @@ import { getHealth } from "./controllers/API";
import Router from "./routes";
import useAlertStore from "./stores/alertStore";
import { useDarkStore } from "./stores/darkStore";
import useFlowStore from "./stores/flowStore";
import useFlowsManagerStore from "./stores/flowsManagerStore";
import { useStoreStore } from "./stores/storeStore";
import { useTypesStore } from "./stores/typesStore";
import useFlowStore from "./stores/flowStore";
export default function App() {
const removeFromTempNotificationList = useAlertStore(
@ -45,24 +45,31 @@ export default function App() {
const refreshStars = useDarkStore((state) => state.refreshStars);
const checkHasStore = useStoreStore((state) => state.checkHasStore);
const handleModalWShortcut = useFlowStore(state => state.handleModalWShortcut);
const nodes = useFlowStore(state => state.nodes);
const handleModalWShortcut = useFlowStore(
(state) => state.handleModalWShortcut
);
const nodes = useFlowStore((state) => state.nodes);
useEffect(() => {
const onKeyDown = (event: KeyboardEvent) => {
const selectedNode = nodes.filter((obj) => obj.selected);
if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "C" && selectedNode.length > 0) {
if (
(event.ctrlKey || event.metaKey) &&
event.shiftKey &&
event.key === "C" &&
selectedNode.length > 0
) {
event.preventDefault();
handleModalWShortcut("code");
}
};
document.addEventListener("keydown", onKeyDown);
return () => {
document.removeEventListener("keydown", onKeyDown);
};
}, [handleModalWShortcut, nodes]);
}, [handleModalWShortcut, nodes]);
useEffect(() => {
refreshStars();

View file

@ -182,11 +182,7 @@ export default function ParameterComponent({
return (
<div key={index}>
{index === 0 && (
<span>
{left
? inputHandleHover
: outputHandleHover}
</span>
<span>{left ? inputHandleHover : outputHandleHover}</span>
)}
<span
key={index}

View file

@ -466,7 +466,7 @@ export default function GenericNode({
if (buildStatus === BuildStatus.BUILDING || isBuilding)
return;
setValidationStatus(null);
buildFlow({nodeId: data.id});
buildFlow({ nodeId: data.id });
}}
>
<div>

View file

@ -6,10 +6,10 @@ import {
PopoverContent,
PopoverTrigger,
} from "../../components/ui/popover";
import { zeroNotifications } from "../../constants/constants";
import useAlertStore from "../../stores/alertStore";
import { AlertDropdownType } from "../../types/alerts";
import SingleAlert from "./components/singleAlertComponent";
import { zeroNotifications } from "../../constants/constants";
export default function AlertDropdown({
children,

View file

@ -24,7 +24,8 @@ export default function IOInputField({
e.target.value;
if (node) {
let newNode = cloneDeep(node);
newNode.data.node!.template["input_value"].value = e.target.value;
newNode.data.node!.template["input_value"].value =
e.target.value;
setNode(node.id, newNode);
}
}}
@ -54,7 +55,8 @@ export default function IOInputField({
e.target.value;
if (node) {
let newNode = cloneDeep(node);
newNode.data.node!.template["input_value"].value = e.target.value;
newNode.data.node!.template["input_value"].value =
e.target.value;
setNode(node.id, newNode);
}
}}

View file

@ -20,7 +20,10 @@ export default function IOOutputView({
className="w-full custom-scroll"
placeholder={"Empty"}
// update to real value on flowPool
value={((flowPool[node.id] ?? [])[(flowPool[node.id]?.length ?? 1) - 1])?.params ?? ""}
value={
(flowPool[node.id] ?? [])[(flowPool[node.id]?.length ?? 1) - 1]
?.params ?? ""
}
readOnly
/>
);
@ -35,7 +38,8 @@ export default function IOOutputView({
e.target.value;
if (node) {
let newNode = cloneDeep(node);
newNode.data.node!.template["input_value"].value = e.target.value;
newNode.data.node!.template["input_value"].value =
e.target.value;
setNode(node.id, newNode);
}
}}

View file

@ -15,7 +15,7 @@ export default function ShadTooltip({
<TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
<TooltipContent
className={cn(styleClasses, "max-w-96") }
className={cn(styleClasses, "max-w-96")}
side={side}
avoidCollisions={false}
sticky="always"

View file

@ -3,12 +3,12 @@ import { useState } from "react";
import Loading from "../../../components/ui/loading";
import { FlowType } from "../../../types/flow";
import { MISSED_ERROR_ALERT } from "../../../constants/alerts_constants";
import useAlertStore from "../../../stores/alertStore";
import useFlowStore from "../../../stores/flowStore";
import { validateNodes } from "../../../utils/reactflowUtils";
import RadialProgressComponent from "../../RadialProgress";
import IconComponent from "../../genericIconComponent";
import { MISSED_ERROR_ALERT } from "../../../constants/alerts_constants";
export default function BuildTrigger({
open,

View file

@ -9,6 +9,7 @@ import {
import { useNavigate } from "react-router-dom";
import { Node } from "reactflow";
import { savedHover } from "../../../../constants/constants";
import FlowSettingsModal from "../../../../modals/flowSettingsModal";
import useAlertStore from "../../../../stores/alertStore";
import useFlowStore from "../../../../stores/flowStore";
@ -17,7 +18,6 @@ import { cn } from "../../../../utils/utils";
import ShadTooltip from "../../../ShadTooltipComponent";
import IconComponent from "../../../genericIconComponent";
import { Button } from "../../../ui/button";
import { savedHover } from "../../../../constants/constants";
export const MenuBar = ({
removeFunction,

View file

@ -1,10 +1,14 @@
import { useEffect, useState } from "react";
import {
CONSOLE_ERROR_MSG,
CONSOLE_SUCCESS_MSG,
INVALID_FILE_ALERT,
} from "../../constants/alerts_constants";
import { uploadFile } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { FileComponentType } from "../../types/components";
import IconComponent from "../genericIconComponent";
import { CONSOLE_ERROR_MSG, CONSOLE_SUCCESS_MSG, INVALID_FILE_ALERT } from "../../constants/alerts_constants";
export default function InputFileComponent({
value,

View file

@ -1,10 +1,13 @@
import { useEffect, useState } from "react";
import IconComponent from "../../../components/genericIconComponent";
import { Textarea } from "../../../components/ui/textarea";
import {
chatInputPlaceholder,
chatInputPlaceholderSend,
} from "../../../constants/constants";
import useFlowsManagerStore from "../../../stores/flowsManagerStore";
import { chatInputType } from "../../../types/components";
import { classNames } from "../../../utils/utils";
import { chatInputPlaceholder, chatInputPlaceholderSend } from "../../../constants/constants";
import useFlowsManagerStore from "../../../stores/flowsManagerStore";
export default function ChatInput({
lockChat,
@ -22,7 +25,7 @@ export default function ChatInput({
}
}, [lockChat, inputRef]);
/* function handleChange(value: number) {
/* function handleChange(value: number) {
console.log(value);
if (value > 0) {
setRepeat(value);
@ -43,7 +46,12 @@ export default function ChatInput({
<div className="relative w-full">
<Textarea
onKeyDown={(event) => {
if (event.key === "Enter" && !lockChat && !saveLoading && !event.shiftKey) {
if (
event.key === "Enter" &&
!lockChat &&
!saveLoading &&
!event.shiftKey
) {
sendMessage(repeat);
}
}}
@ -60,12 +68,14 @@ export default function ChatInput({
: "hidden"
}`,
}}
value={lockChat ? "Thinking..." : (saveLoading ? "Saving..." : chatValue)}
value={
lockChat ? "Thinking..." : saveLoading ? "Saving..." : chatValue
}
onChange={(event): void => {
setChatValue(event.target.value);
}}
className={classNames(
(lockChat || saveLoading)
lockChat || saveLoading
? " form-modal-lock-true bg-input"
: noInput
? "form-modal-no-input bg-input"
@ -74,9 +84,7 @@ export default function ChatInput({
"form-modal-lockchat"
)}
placeholder={
noInput
? chatInputPlaceholder
: chatInputPlaceholderSend
noInput ? chatInputPlaceholder : chatInputPlaceholderSend
}
/>
<div className="form-modal-send-icon-position">

View file

@ -1,10 +1,10 @@
import { useEffect } from "react";
import { editTextModalTitle } from "../../constants/constants";
import { TypeModal } from "../../constants/enums";
import GenericModal from "../../modals/genericModal";
import { TextAreaComponentType } from "../../types/components";
import IconComponent from "../genericIconComponent";
import { Input } from "../ui/input";
import { editTextModalTitle } from "../../constants/constants";
export default function TextAreaComponent({
value,

View file

@ -12,7 +12,6 @@ export default function Xmark({ initial = true, isVisible, className }) {
className={"CheckIcon " + className}
>
<motion.path
initial={{ pathLength: 0, pathOffset: 1, strokeLinecap: "butt" }}
animate={{ pathLength: 1, pathOffset: 0, strokeLinecap: "round" }}
exit={{ pathLength: 0, pathOffset: 1, strokeLinecap: "butt" }}

View file

@ -1,49 +1,58 @@
// ERROR
export const MISSED_ERROR_ALERT = "Oops! Looks like you missed something";
export const INVALID_FILE_ALERT = "Please select a valid file. Only these file types are allowed:";
export const INVALID_FILE_ALERT =
"Please select a valid file. Only these file types are allowed:";
export const CONSOLE_ERROR_MSG = "Error occurred while uploading file";
export const CONSOLE_SUCCESS_MSG = "File uploaded successfully";
export const INFO_MISSING_ALERT = "Oops! Looks like you missed some required information:";
export const FUNC_ERROR_ALERT = "There is an error in your function"
export const IMPORT_ERROR_ALERT = "There is an error in your imports"
export const BUG_ALERT = "Something went wrong, please try again"
export const CODE_ERROR_ALERT = "There is something wrong with this code, please review it"
export const CHAT_ERROR_ALERT = "Please build the flow again before using the chat."
export const MSG_ERROR_ALERT = "There was an error sending the message"
export const PROMPT_ERROR_ALERT = "There is something wrong with this prompt, please review it"
export const API_ERROR_ALERT = "There was an error saving the API Key, please try again."
export const USER_DEL_ERROR_ALERT = "Error on delete user"
export const USER_EDIT_ERROR_ALERT = "Error on edit user"
export const USER_ADD_ERROR_ALERT = "Error when adding new user"
export const SIGNIN_ERROR_ALERT = "Error signing in"
export const DEL_KEY_ERROR_ALERT = "Error on delete key"
export const UPLOAD_ERROR_ALERT = "Error uploading file"
export const WRONG_FILE_ERROR_ALERT = "Invalid file type"
export const UPLOAD_ALERT_LIST = "Please upload a JSON file"
export const INVALID_SELECTION_ERROR_ALERT = "Invalid selection"
export const EDIT_PASSWORD_ERROR_ALERT = "Error changing password"
export const EDIT_PASSWORD_ALERT_LIST = "Passwords do not match"
export const SAVE_ERROR_ALERT = "Error saving changes"
export const SIGNUP_ERROR_ALERT = "Error signing up"
export const APIKEY_ERROR_ALERT = "API Key Error"
export const NOAPI_ERROR_ALERT = "You don't have an API Key. Please add one to use the Langflow Store."
export const INVALID_API_ERROR_ALERT = "Your API Key is not valid. Please add a valid API Key to use the Langflow Store."
export const COMPONENTS_ERROR_ALERT = "Error getting components."
export const INFO_MISSING_ALERT =
"Oops! Looks like you missed some required information:";
export const FUNC_ERROR_ALERT = "There is an error in your function";
export const IMPORT_ERROR_ALERT = "There is an error in your imports";
export const BUG_ALERT = "Something went wrong, please try again";
export const CODE_ERROR_ALERT =
"There is something wrong with this code, please review it";
export const CHAT_ERROR_ALERT =
"Please build the flow again before using the chat.";
export const MSG_ERROR_ALERT = "There was an error sending the message";
export const PROMPT_ERROR_ALERT =
"There is something wrong with this prompt, please review it";
export const API_ERROR_ALERT =
"There was an error saving the API Key, please try again.";
export const USER_DEL_ERROR_ALERT = "Error on delete user";
export const USER_EDIT_ERROR_ALERT = "Error on edit user";
export const USER_ADD_ERROR_ALERT = "Error when adding new user";
export const SIGNIN_ERROR_ALERT = "Error signing in";
export const DEL_KEY_ERROR_ALERT = "Error on delete key";
export const UPLOAD_ERROR_ALERT = "Error uploading file";
export const WRONG_FILE_ERROR_ALERT = "Invalid file type";
export const UPLOAD_ALERT_LIST = "Please upload a JSON file";
export const INVALID_SELECTION_ERROR_ALERT = "Invalid selection";
export const EDIT_PASSWORD_ERROR_ALERT = "Error changing password";
export const EDIT_PASSWORD_ALERT_LIST = "Passwords do not match";
export const SAVE_ERROR_ALERT = "Error saving changes";
export const SIGNUP_ERROR_ALERT = "Error signing up";
export const APIKEY_ERROR_ALERT = "API Key Error";
export const NOAPI_ERROR_ALERT =
"You don't have an API Key. Please add one to use the Langflow Store.";
export const INVALID_API_ERROR_ALERT =
"Your API Key is not valid. Please add a valid API Key to use the Langflow Store.";
export const COMPONENTS_ERROR_ALERT = "Error getting components.";
// NOTICE
export const NOCHATOUTPUT_NOTICE_ALERT = "There is no ChatOutput node in the flow."
export const API_WARNING_NOTICE_ALERT = "Warning: Critical data, JSON file may include API keys."
export const COPIED_NOTICE_ALERT = "API Key copied!"
export const TEMP_NOTICE_ALERT = "Your template does not have any variables."
export const NOCHATOUTPUT_NOTICE_ALERT =
"There is no ChatOutput node in the flow.";
export const API_WARNING_NOTICE_ALERT =
"Warning: Critical data, JSON file may include API keys.";
export const COPIED_NOTICE_ALERT = "API Key copied!";
export const TEMP_NOTICE_ALERT = "Your template does not have any variables.";
// SUCCESS
export const CODE_SUCCESS_ALERT = "Code is ready to run"
export const PROMPT_SUCCESS_ALERT = "Prompt is ready"
export const API_SUCCESS_ALERT = "Success! Your API Key has been saved."
export const USER_DEL_SUCCESS_ALERT = "Success! User deleted!"
export const USER_EDIT_SUCCESS_ALERT = "Success! User edited!"
export const USER_ADD_SUCCESS_ALERT = "Success! New user added!"
export const DEL_KEY_SUCCESS_ALERT = "Success! Key deleted!"
export const FLOW_BUILD_SUCCESS_ALERT = `Flow built successfully`
export const SAVE_SUCCESS_ALERT = "Changes saved successfully!"
export const CODE_SUCCESS_ALERT = "Code is ready to run";
export const PROMPT_SUCCESS_ALERT = "Prompt is ready";
export const API_SUCCESS_ALERT = "Success! Your API Key has been saved.";
export const USER_DEL_SUCCESS_ALERT = "Success! User deleted!";
export const USER_EDIT_SUCCESS_ALERT = "Success! User edited!";
export const USER_ADD_SUCCESS_ALERT = "Success! New user added!";
export const DEL_KEY_SUCCESS_ALERT = "Success! Key deleted!";
export const FLOW_BUILD_SUCCESS_ALERT = `Flow built successfully`;
export const SAVE_SUCCESS_ALERT = "Changes saved successfully!";

View file

@ -683,7 +683,8 @@ export const priorityFields = new Set(["code", "template"]);
export const INPUT_TYPES = new Set(["ChatInput", "TextInput"]);
export const OUTPUT_TYPES = new Set(["ChatOutput", "TextOutput"]);
export const chatFirstInitialText = "Start a conversation and click the agent's thoughts";
export const chatFirstInitialText =
"Start a conversation and click the agent's thoughts";
export const chatSecondInitialText = "to inspect the chaining process.";
@ -691,26 +692,29 @@ export const zeroNotifications = "No new notifications";
export const successBuild = "Built sucessfully ✨";
export const alertSaveWApi = "Caution: Uncheck this box only removes API keys from fields specifically designated for API keys."
export const alertSaveWApi =
"Caution: Uncheck this box only removes API keys from fields specifically designated for API keys.";
export const saveWApiCheckbox = "Save with my API keys";
export const editTextModalTitle = "Edit Text"
export const editTextPlaceholder = "Type message here."
export const editTextModalTitle = "Edit Text";
export const editTextPlaceholder = "Type message here.";
export const inputHandleHover = "Avaliable input components:";
export const outputHandleHover = "Avaliable output components:";
export const textInputModalTitle = "Text Inputs";
export const outputsModalTitle = "Prompt Outputs"
export const langflowChatTitle = "Langflow Chat"
export const chatInputPlaceholder = "No chat input variables found. Click to run your flow."
export const chatInputPlaceholderSend = "Send a message..."
export const editCodeTitle = "Edit Code"
export const myCollectionDesc = "Manage your personal projects. Download or upload your collection."
export const outputsModalTitle = "Prompt Outputs";
export const langflowChatTitle = "Langflow Chat";
export const chatInputPlaceholder =
"No chat input variables found. Click to run your flow.";
export const chatInputPlaceholderSend = "Send a message...";
export const editCodeTitle = "Edit Code";
export const myCollectionDesc =
"Manage your personal projects. Download or upload your collection.";
export const storeDesc = "Search flows and components from the community.";
export const storeTitle = "Langflow Store"
export const noApi = "You don't have an API key. "
export const insertApi = "Insert your Langflow API key."
export const invalidApi = "Your API key is not valid. "
export const createApi = `Dont have an API key? Sign up at`
export const statusBuild = "Build to validate status."
export const statusBuilding = "Building..."
export const savedHover = "Last saved at "
export const storeTitle = "Langflow Store";
export const noApi = "You don't have an API key. ";
export const insertApi = "Insert your Langflow API key.";
export const invalidApi = "Your API key is not valid. ";
export const createApi = `Dont have an API key? Sign up at`;
export const statusBuild = "Build to validate status.";
export const statusBuilding = "Building...";
export const savedHover = "Last saved at ";

View file

@ -123,7 +123,9 @@ function ApiInterceptor() {
async function clearBuildVerticesState(error) {
if (error?.response?.status === 500) {
const vertices = useFlowStore.getState().verticesBuild;
useFlowStore.getState().updateBuildStatus(vertices?.verticesIds ?? [], BuildStatus.BUILT);
useFlowStore
.getState()
.updateBuildStatus(vertices?.verticesIds ?? [], BuildStatus.BUILT);
useFlowStore.getState().setIsBuilding(false);
}
}

View file

@ -870,9 +870,12 @@ export async function getVerticesOrder(
export async function postBuildVertex(
flowId: string,
vertexId: string,
input_value: string,
input_value: string
): Promise<AxiosResponse<VertexBuildTypeAPI>> {
return await api.post(`${BASE_URL_API}build/${flowId}/vertices/${vertexId}`, input_value ? {inputs: {input_value: input_value}} : undefined);
return await api.post(
`${BASE_URL_API}build/${flowId}/vertices/${vertexId}`,
input_value ? { inputs: { input_value: input_value } } : undefined
);
}
export async function downloadImage({ flowId, fileName }): Promise<any> {

View file

@ -3,12 +3,12 @@ import { useEffect, useRef, useState } from "react";
import IconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
import { COPIED_NOTICE_ALERT } from "../../constants/alerts_constants";
import { createApiKey } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore";
import { ApiKeyType } from "../../types/components";
import { nodeIconsLucide } from "../../utils/styleUtils";
import BaseModal from "../baseModal";
import { COPIED_NOTICE_ALERT } from "../../constants/alerts_constants";
export default function SecretKeyModal({
title,

View file

@ -3,14 +3,22 @@ import { useContext, useState } from "react";
import IconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
import {
API_ERROR_ALERT,
API_SUCCESS_ALERT,
} from "../../constants/alerts_constants";
import {
createApi,
insertApi,
invalidApi,
noApi,
} from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext";
import { addApiKeyStore } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore";
import { useStoreStore } from "../../stores/storeStore";
import { StoreApiKeyType } from "../../types/components";
import BaseModal from "../baseModal";
import { API_ERROR_ALERT, API_SUCCESS_ALERT } from "../../constants/alerts_constants";
import { createApi, insertApi, invalidApi, noApi } from "../../constants/constants";
export default function StoreApiKeyModal({
children,
@ -60,11 +68,8 @@ export default function StoreApiKeyModal({
<BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
<BaseModal.Header
description={
(hasApiKey && !validApiKey
? invalidApi
: !hasApiKey
? noApi
: "") + insertApi
(hasApiKey && !validApiKey ? invalidApi : !hasApiKey ? noApi : "") +
insertApi
}
>
<span className="pr-2">API Key</span>
@ -99,7 +104,7 @@ export default function StoreApiKeyModal({
</div>
<div className="flex items-end justify-between">
<span className="pr-1 text-xs text-muted-foreground">
{createApi} {" "}
{createApi}{" "}
<a
className="text-high-indigo underline"
href="https://langflow.store/"

View file

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

View file

@ -9,14 +9,23 @@ import AceEditor from "react-ace";
import IconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
import { CODE_PROMPT_DIALOG_SUBTITLE, editCodeTitle } from "../../constants/constants";
import {
BUG_ALERT,
CODE_ERROR_ALERT,
CODE_SUCCESS_ALERT,
FUNC_ERROR_ALERT,
IMPORT_ERROR_ALERT,
} from "../../constants/alerts_constants";
import {
CODE_PROMPT_DIALOG_SUBTITLE,
editCodeTitle,
} from "../../constants/constants";
import { postCustomComponent, postValidateCode } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore";
import { useDarkStore } from "../../stores/darkStore";
import useFlowStore from "../../stores/flowStore";
import { codeAreaModalPropsType } from "../../types/components";
import BaseModal from "../baseModal";
import { BUG_ALERT, CODE_ERROR_ALERT, CODE_SUCCESS_ALERT, FUNC_ERROR_ALERT, IMPORT_ERROR_ALERT } from "../../constants/alerts_constants";
export default function CodeAreaModal({
value,
@ -47,26 +56,33 @@ export default function CodeAreaModal({
}
}, []);
const handleModalWShortcut = useFlowStore((state) => state.handleModalWShortcut)
const openCodeModalWShortcut = useFlowStore(state => state.openCodeModalWShortcut);
const nodes = useFlowStore(state => state.nodes);
const handleModalWShortcut = useFlowStore(
(state) => state.handleModalWShortcut
);
const openCodeModalWShortcut = useFlowStore(
(state) => state.openCodeModalWShortcut
);
const nodes = useFlowStore((state) => state.nodes);
useEffect(() => {
const onKeyDown = (event: KeyboardEvent) => {
const selectedNode = nodes.filter((obj) => obj.selected);
if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "C" && selectedNode.length > 0) {
event.preventDefault();
setOpen(openCodeModalWShortcut)
}
}
document.addEventListener("keydown", onKeyDown);
return () => {
document.removeEventListener("keydown", onKeyDown);
}
}, []);
useEffect(() => {
const onKeyDown = (event: KeyboardEvent) => {
const selectedNode = nodes.filter((obj) => obj.selected);
if (
(event.ctrlKey || event.metaKey) &&
event.shiftKey &&
event.key === "C" &&
selectedNode.length > 0
) {
event.preventDefault();
setOpen(openCodeModalWShortcut);
}
};
document.addEventListener("keydown", onKeyDown);
return () => {
document.removeEventListener("keydown", onKeyDown);
};
}, []);
useEffect(() => {
if (openModal) setOpen(true);

View file

@ -3,13 +3,17 @@ import EditFlowSettings from "../../components/EditFlowSettingsComponent";
import IconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox";
import { EXPORT_DIALOG_SUBTITLE, alertSaveWApi, saveWApiCheckbox } from "../../constants/constants";
import { API_WARNING_NOTICE_ALERT } from "../../constants/alerts_constants";
import {
EXPORT_DIALOG_SUBTITLE,
alertSaveWApi,
saveWApiCheckbox,
} from "../../constants/constants";
import useAlertStore from "../../stores/alertStore";
import { useDarkStore } from "../../stores/darkStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { downloadFlow, removeApiKeys } from "../../utils/reactflowUtils";
import BaseModal from "../baseModal";
import { API_WARNING_NOTICE_ALERT } from "../../constants/alerts_constants";
const ExportModal = forwardRef(
(props: { children: ReactNode }, ref): JSX.Element => {
@ -55,9 +59,7 @@ const ExportModal = forwardRef(
{saveWApiCheckbox}
</label>
</div>
<span className=" text-xs text-destructive ">
{alertSaveWApi}
</span>
<span className=" text-xs text-destructive ">{alertSaveWApi}</span>
</BaseModal.Content>
<BaseModal.Footer>
@ -77,8 +79,7 @@ const ExportModal = forwardRef(
description
);
setNoticeData({
title:
API_WARNING_NOTICE_ALERT,
title: API_WARNING_NOTICE_ALERT,
});
} else
downloadFlow(

View file

@ -1,9 +1,12 @@
import { useEffect } from "react";
import IconComponent from "../../../components/genericIconComponent";
import { Textarea } from "../../../components/ui/textarea";
import {
chatInputPlaceholder,
chatInputPlaceholderSend,
} from "../../../constants/constants";
import { chatInputType } from "../../../types/components";
import { classNames } from "../../../utils/utils";
import { chatInputPlaceholder, chatInputPlaceholderSend } from "../../../constants/constants";
export default function ChatInput({
lockChat,
@ -67,11 +70,7 @@ export default function ChatInput({
"form-modal-lockchat"
)}
placeholder={
noInput
? chatInputPlaceholder
: chatInputPlaceholderSend
}
placeholder={noInput ? chatInputPlaceholder : chatInputPlaceholderSend}
/>
<div className="form-modal-send-icon-position">
<button

View file

@ -20,14 +20,23 @@ import {
DialogTrigger,
} from "../../components/ui/dialog";
import { Textarea } from "../../components/ui/textarea";
import { CHAT_FORM_DIALOG_SUBTITLE, chatFirstInitialText, chatSecondInitialText, langflowChatTitle } from "../../constants/constants";
import {
CHAT_ERROR_ALERT,
INFO_MISSING_ALERT,
MSG_ERROR_ALERT,
} from "../../constants/alerts_constants";
import {
CHAT_FORM_DIALOG_SUBTITLE,
chatFirstInitialText,
chatSecondInitialText,
langflowChatTitle,
} from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext";
import { getBuildStatus } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore";
import useFlowStore from "../../stores/flowStore";
import { FlowState } from "../../types/tabs";
import { validateNodes } from "../../utils/reactflowUtils";
import { CHAT_ERROR_ALERT, INFO_MISSING_ALERT, MSG_ERROR_ALERT } from "../../constants/alerts_constants";
export default function FormModal({
flow,
@ -591,7 +600,7 @@ export default function FormModal({
<br />
<div className="langflow-chat-desc">
<span className="langflow-chat-desc-span">
{chatFirstInitialText} {" "}
{chatFirstInitialText}{" "}
<span>
<IconComponent
name="MessageSquare"

View file

@ -5,12 +5,17 @@ import IconComponent from "../../components/genericIconComponent";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import { Textarea } from "../../components/ui/textarea";
import {
BUG_ALERT,
PROMPT_ERROR_ALERT,
PROMPT_SUCCESS_ALERT,
TEMP_NOTICE_ALERT,
} from "../../constants/alerts_constants";
import {
INVALID_CHARACTERS,
MAX_WORDS_HIGHLIGHT,
PROMPT_DIALOG_SUBTITLE,
TEXT_DIALOG_SUBTITLE,
editTextModalTitle,
editTextPlaceholder,
regexHighlight,
} from "../../constants/constants";
@ -21,7 +26,6 @@ import { genericModalPropsType } from "../../types/components";
import { handleKeyDown } from "../../utils/reactflowUtils";
import { classNames, varHighlightHTML } from "../../utils/utils";
import BaseModal from "../baseModal";
import { BUG_ALERT, PROMPT_ERROR_ALERT, PROMPT_SUCCESS_ALERT, TEMP_NOTICE_ALERT } from "../../constants/alerts_constants";
export default function GenericModal({
field_name = "",

View file

@ -2,6 +2,7 @@ import { useContext, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Button } from "../../../components/ui/button";
import { Input } from "../../../components/ui/input";
import { SIGNIN_ERROR_ALERT } from "../../../constants/alerts_constants";
import { CONTROL_LOGIN_STATE } from "../../../constants/constants";
import { AuthContext } from "../../../contexts/authContext";
import { onLogin } from "../../../controllers/API";
@ -11,7 +12,6 @@ import {
inputHandlerEventType,
loginInputStateType,
} from "../../../types/components";
import { SIGNIN_ERROR_ALERT } from "../../../constants/alerts_constants";
export default function LoginAdminPage() {
const navigate = useNavigate();

View file

@ -16,6 +16,14 @@ import {
TableHeader,
TableRow,
} from "../../components/ui/table";
import {
USER_ADD_ERROR_ALERT,
USER_ADD_SUCCESS_ALERT,
USER_DEL_ERROR_ALERT,
USER_DEL_SUCCESS_ALERT,
USER_EDIT_ERROR_ALERT,
USER_EDIT_SUCCESS_ALERT,
} from "../../constants/alerts_constants";
import {
ADMIN_HEADER_DESCRIPTION,
ADMIN_HEADER_TITLE,
@ -33,7 +41,6 @@ import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { Users } from "../../types/api";
import { UserInputType } from "../../types/components";
import { USER_ADD_ERROR_ALERT, USER_ADD_SUCCESS_ALERT, USER_DEL_ERROR_ALERT, USER_DEL_SUCCESS_ALERT, USER_EDIT_ERROR_ALERT, USER_EDIT_SUCCESS_ALERT } from "../../constants/alerts_constants";
export default function AdminPage() {
const [inputValue, setInputValue] = useState("");

View file

@ -17,6 +17,10 @@ import SecretKeyModal from "../../modals/SecretKeyModal";
import moment from "moment";
import Header from "../../components/headerComponent";
import {
DEL_KEY_ERROR_ALERT,
DEL_KEY_SUCCESS_ALERT,
} from "../../constants/alerts_constants";
import {
API_PAGE_PARAGRAPH_1,
API_PAGE_PARAGRAPH_2,
@ -26,7 +30,6 @@ import {
} from "../../constants/constants";
import useAlertStore from "../../stores/alertStore";
import { ApiKey } from "../../types/components";
import { DEL_KEY_ERROR_ALERT, DEL_KEY_SUCCESS_ALERT } from "../../constants/alerts_constants";
export default function ApiKeysPage() {
const [loadingKeys, setLoadingKeys] = useState(true);

View file

@ -13,6 +13,12 @@ import ReactFlow, {
} from "reactflow";
import GenericNode from "../../../../CustomNodes/GenericNode";
import Chat from "../../../../components/chatComponent";
import {
INVALID_SELECTION_ERROR_ALERT,
UPLOAD_ALERT_LIST,
UPLOAD_ERROR_ALERT,
WRONG_FILE_ERROR_ALERT,
} from "../../../../constants/alerts_constants";
import useAlertStore from "../../../../stores/alertStore";
import useFlowStore from "../../../../stores/flowStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
@ -31,7 +37,6 @@ import { getRandomName, isWrappedWithClass } from "../../../../utils/utils";
import ConnectionLineComponent from "../ConnectionLineComponent";
import SelectionMenu from "../SelectionMenuComponent";
import ExtraSidebar from "../extraSidebarComponent";
import { INVALID_SELECTION_ERROR_ALERT, UPLOAD_ALERT_LIST, UPLOAD_ERROR_ALERT, WRONG_FILE_ERROR_ALERT } from "../../../../constants/alerts_constants";
const nodeTypes = {
genericNode: GenericNode,
@ -91,7 +96,11 @@ export default function Page({
useEffect(() => {
const onKeyDown = (event: KeyboardEvent) => {
const selectedNode = nodes.filter((obj) => obj.selected);
if ((event.ctrlKey || event.metaKey) && event.key === "p" && selectedNode.length > 0) {
if (
(event.ctrlKey || event.metaKey) &&
event.key === "p" &&
selectedNode.length > 0
) {
event.preventDefault();
setNode(selectedNode[0].id, (old) => ({
...old,
@ -104,12 +113,19 @@ export default function Page({
},
}));
}
if ((event.ctrlKey || event.metaKey) && event.key === "d" && selectedNode.length > 0) {
if (
(event.ctrlKey || event.metaKey) &&
event.key === "d" &&
selectedNode.length > 0
) {
event.preventDefault();
paste({nodes: selectedNode, edges: []}, {
x: position.current.x,
y: position.current.y,
});
paste(
{ nodes: selectedNode, edges: [] },
{
x: position.current.x,
y: position.current.y,
}
);
}
if (!isWrappedWithClass(event, "noundo")) {
if (

View file

@ -4,6 +4,7 @@ import ShadTooltip from "../../../../components/ShadTooltipComponent";
import IconComponent from "../../../../components/genericIconComponent";
import { Input } from "../../../../components/ui/input";
import { Separator } from "../../../../components/ui/separator";
import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
import ApiModal from "../../../../modals/ApiModal";
import ExportModal from "../../../../modals/exportModal";
import ShareModal from "../../../../modals/shareModal";
@ -25,7 +26,6 @@ import {
} from "../../../../utils/utils";
import DisclosureComponent from "../DisclosureComponent";
import SidebarDraggableComponent from "./sideBarDraggableComponent";
import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
export default function ExtraSidebar(): JSX.Element {
const data = useTypesStore((state) => state.data);

View file

@ -90,12 +90,16 @@ export default function NodeToolbarComponent({
}, [showModalAdvanced]);
const updateNodeInternals = useUpdateNodeInternals();
const openCodeModalWShortcut = useFlowStore(state => state.openCodeModalWShortcut);
const handleModalWShortcut = useFlowStore(state => state.handleModalWShortcut);
const openCodeModalWShortcut = useFlowStore(
(state) => state.openCodeModalWShortcut
);
const handleModalWShortcut = useFlowStore(
(state) => state.handleModalWShortcut
);
useEffect(() => {
setOpenModal(openCodeModalWShortcut)
}, [openCodeModalWShortcut, handleModalWShortcut])
setOpenModal(openCodeModalWShortcut);
}, [openCodeModalWShortcut, handleModalWShortcut]);
const setLastCopiedSelection = useFlowStore(
(state) => state.setLastCopiedSelection

View file

@ -6,10 +6,14 @@ import CardsWrapComponent from "../../../../components/cardsWrapComponent";
import IconComponent from "../../../../components/genericIconComponent";
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";
import { CONSOLE_ERROR_MSG, UPLOAD_ALERT_LIST, WRONG_FILE_ERROR_ALERT } from "../../../../constants/alerts_constants";
export default function ComponentsComponent({
is_component = true,

View file

@ -6,11 +6,14 @@ import IconComponent from "../../components/genericIconComponent";
import PageLayout from "../../components/pageLayout";
import SidebarNav from "../../components/sidebarComponent";
import { Button } from "../../components/ui/button";
import { USER_PROJECTS_HEADER, myCollectionDesc } from "../../constants/constants";
import { CONSOLE_ERROR_MSG } from "../../constants/alerts_constants";
import {
USER_PROJECTS_HEADER,
myCollectionDesc,
} from "../../constants/constants";
import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { downloadFlows } from "../../utils/reactflowUtils";
import { CONSOLE_ERROR_MSG } from "../../constants/alerts_constants";
export default function HomePage(): JSX.Element {
const addFlow = useFlowsManagerStore((state) => state.addFlow);
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);

View file

@ -6,6 +6,12 @@ import GradientChooserComponent from "../../components/gradientChooserComponent"
import Header from "../../components/headerComponent";
import InputComponent from "../../components/inputComponent";
import { Button } from "../../components/ui/button";
import {
EDIT_PASSWORD_ALERT_LIST,
EDIT_PASSWORD_ERROR_ALERT,
SAVE_ERROR_ALERT,
SAVE_SUCCESS_ALERT,
} from "../../constants/alerts_constants";
import { CONTROL_PATCH_USER_STATE } from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext";
import { resetPassword, updateUser } from "../../controllers/API";
@ -16,7 +22,6 @@ import {
patchUserInputStateType,
} from "../../types/components";
import { gradients } from "../../utils/styleUtils";
import { EDIT_PASSWORD_ALERT_LIST, EDIT_PASSWORD_ERROR_ALERT, SAVE_ERROR_ALERT, SAVE_SUCCESS_ALERT } from "../../constants/alerts_constants";
export default function ProfileSettingsPage(): JSX.Element {
const setCurrentFlowId = useFlowsManagerStore(
(state) => state.setCurrentFlowId

View file

@ -20,6 +20,13 @@ import {
SelectTrigger,
SelectValue,
} from "../../components/ui/select";
import {
APIKEY_ERROR_ALERT,
COMPONENTS_ERROR_ALERT,
INVALID_API_ERROR_ALERT,
NOAPI_ERROR_ALERT,
} from "../../constants/alerts_constants";
import { storeDesc, storeTitle } from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext";
import { getStoreComponents, getStoreTags } from "../../controllers/API";
import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
@ -28,8 +35,6 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { useStoreStore } from "../../stores/storeStore";
import { storeComponent } from "../../types/store";
import { cn } from "../../utils/utils";
import { APIKEY_ERROR_ALERT, COMPONENTS_ERROR_ALERT, INVALID_API_ERROR_ALERT, NOAPI_ERROR_ALERT } from "../../constants/alerts_constants";
import { storeDesc, storeTitle } from "../../constants/constants";
export default function StorePage(): JSX.Element {
const hasApiKey = useStoreStore((state) => state.hasApiKey);
@ -65,17 +70,13 @@ export default function StorePage(): JSX.Element {
if (!hasApiKey) {
setErrorData({
title: APIKEY_ERROR_ALERT,
list: [
NOAPI_ERROR_ALERT,
],
list: [NOAPI_ERROR_ALERT],
});
setLoading(false);
} else if (!validApiKey) {
setErrorData({
title: APIKEY_ERROR_ALERT,
list: [
INVALID_API_ERROR_ALERT,
],
list: [INVALID_API_ERROR_ALERT],
});
}
}

View file

@ -4,6 +4,7 @@ import { Link, useNavigate } from "react-router-dom";
import InputComponent from "../../components/inputComponent";
import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
import { SIGNIN_ERROR_ALERT } from "../../constants/alerts_constants";
import { CONTROL_LOGIN_STATE } from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext";
import { onLogin } from "../../controllers/API";
@ -13,7 +14,6 @@ import {
inputHandlerEventType,
loginInputStateType,
} from "../../types/components";
import { SIGNIN_ERROR_ALERT } from "../../constants/alerts_constants";
export default function LoginPage(): JSX.Element {
const [inputState, setInputState] =

View file

@ -4,6 +4,7 @@ import { Link, useNavigate } from "react-router-dom";
import InputComponent from "../../components/inputComponent";
import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
import { SIGNUP_ERROR_ALERT } from "../../constants/alerts_constants";
import {
CONTROL_INPUT_STATE,
SIGN_UP_SUCCESS,
@ -15,7 +16,6 @@ import {
inputHandlerEventType,
signUpInputStateType,
} from "../../types/components";
import { SIGNUP_ERROR_ALERT } from "../../constants/alerts_constants";
export default function SignUp(): JSX.Element {
const [inputState, setInputState] =

View file

@ -57,15 +57,15 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
inputs: [],
outputs: [],
openCodeModalWShortcut: false,
handleModalWShortcut: ((modal) => {
handleModalWShortcut: (modal) => {
switch (modal) {
case "code":
set((state) => ({
openCodeModalWShortcut: !state.openCodeModalWShortcut,
}));
break
break;
}
}),
},
setFlowPool: (flowPool) => {
set({ flowPool });
},
@ -494,7 +494,12 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
};
},
updateVerticesBuild: (
vertices: { verticesIds: string[], verticesOrder: string[][], verticesLayers: string[][], runId: string } | null
vertices: {
verticesIds: string[];
verticesOrder: string[][];
verticesLayers: string[][];
runId: string;
} | null
) => {
set({ verticesBuild: vertices });
},

View file

@ -25,7 +25,10 @@ export type FlowPoolObjectType = {
timestamp: string;
valid: boolean;
params: any;
data: { artifacts: any | ChatOutputType | chatInputType; results: any | ChatOutputType | chatInputType };
data: {
artifacts: any | ChatOutputType | chatInputType;
results: any | ChatOutputType | chatInputType;
};
duration?: string;
progress?: number;
id: string;
@ -38,7 +41,7 @@ export type FlowPoolType = {
export type FlowStoreType = {
openCodeModalWShortcut: boolean;
handleModalWShortcut: (modal: string) => void
handleModalWShortcut: (modal: string) => void;
flowPool: FlowPoolType;
inputs: Array<{ type: string; id: string }>;
outputs: Array<{ type: string; id: string }>;
@ -88,13 +91,35 @@ export type FlowStoreType = {
getFilterEdge: any[];
onConnect: (connection: Connection) => void;
unselectAll: () => void;
buildFlow: ({nodeId, input_value}: {nodeId?: string, input_value?: string}) => Promise<void>;
buildFlow: ({
nodeId,
input_value,
}: {
nodeId?: string;
input_value?: string;
}) => Promise<void>;
getFlow: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
updateVerticesBuild: (vertices: {verticesIds: string[], verticesLayers: string[][], verticesOrder: string[][], runId: string} | null) => void;
removeFromVerticesBuild: (vertices: string[]) => void;
verticesBuild: {verticesIds: string[], verticesLayers: string[][], verticesOrder: string[][], runId: string} | null;
updateVerticesBuild: (
vertices: {
verticesIds: string[];
verticesLayers: string[][];
verticesOrder: string[][];
runId: string;
} | null
) => void;
removeFromVerticesBuild: (vertices: string[]) => void;
verticesBuild: {
verticesIds: string[];
verticesLayers: string[][];
verticesOrder: string[][];
runId: string;
} | null;
updateBuildStatus: (nodeId: string[], status: BuildStatus) => void;
revertBuiltStatusFromBuilding: () => void;
flowBuildStatus: { [key: string]: BuildStatus };
updateFlowPool: (nodeId:string, data:FlowPoolObjectType | ChatOutputType | chatInputType,buildId?:string) => void;
updateFlowPool: (
nodeId: string,
data: FlowPoolObjectType | ChatOutputType | chatInputType,
buildId?: string
) => void;
};

View file

@ -39,7 +39,15 @@ function getInactiveVertexData(vertexId: string): VertexBuildTypeAPI {
return inactiveVertexData;
}
export async function updateVerticesOrder(flowId: string, nodeId: string | null): Promise<{ verticesLayers: string[][], verticesIds: string[], verticesOrder: string[][], runId: string }> {
export async function updateVerticesOrder(
flowId: string,
nodeId: string | null
): Promise<{
verticesLayers: string[][];
verticesIds: string[];
verticesOrder: string[][];
runId: string;
}> {
return new Promise(async (resolve, reject) => {
const setErrorData = useAlertStore.getState().setErrorData;
let orderResponse;
@ -79,7 +87,12 @@ export async function updateVerticesOrder(flowId: string, nodeId: string | null)
const verticesIds = verticesLayers.flat();
useFlowStore
.getState()
.updateVerticesBuild({ verticesLayers, verticesIds, verticesOrder, runId });
.updateVerticesBuild({
verticesLayers,
verticesIds,
verticesOrder,
runId,
});
resolve({ verticesLayers, verticesIds, verticesOrder, runId });
});
}
@ -106,7 +119,7 @@ export async function buildVertices({
let stop = false;
if (onGetOrderSuccess) onGetOrderSuccess();
if (validateNodes) {
try {
validateNodes(verticesOrder.flatMap((id) => id));

View file

@ -280,7 +280,7 @@ export const nodeIconsLucide: iconsType = {
Meta: MetaIcon,
Midjorney: MidjourneyIcon,
MongoDBAtlasVectorSearch: MongoDBIcon,
MongoDB:MongoDBIcon,
MongoDB: MongoDBIcon,
MongoDBChatMessageHistory: MongoDBIcon,
NotionDirectoryLoader: NotionIcon,
ChatOpenAI: OpenAiIcon,