jyapayne/langflow
Watch
1
0
Fork
You've already forked langflow
 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fix formatting issues in code

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-02-28 21:50:22 -03:00
commit 546e0ad701
41 changed files with 348 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/frontend/src/App.tsx
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();

6
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
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}

2
src/frontend/src/CustomNodes/GenericNode/index.tsx
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>

2
src/frontend/src/alerts/alertDropDown/index.tsx
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,

6
src/frontend/src/components/IOInputField/index.tsx
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);
}
}}

8
src/frontend/src/components/IOOutputView/index.tsx
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);
}
}}

2
src/frontend/src/components/ShadTooltipComponent/index.tsx
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"

2
src/frontend/src/components/chatComponent/buildTrigger/index.tsx
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,

2
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
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,

6
src/frontend/src/components/inputFileComponent/index.tsx
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,

26
src/frontend/src/components/newChatView/chatInput/index.tsx
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">

2
src/frontend/src/components/textAreaComponent/index.tsx
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,

1
src/frontend/src/components/ui/xmark.tsx
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" }}

91
src/frontend/src/constants/alerts_constants.tsx
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!";

40
src/frontend/src/constants/constants.ts
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 = `Don’t 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 = `Don’t have an API key? Sign up at`;
export const statusBuild = "Build to validate status.";
export const statusBuilding = "Building...";
export const savedHover = "Last saved at ";

4
src/frontend/src/controllers/API/api.tsx
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);
}
}

7
src/frontend/src/controllers/API/index.ts
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> {

2
src/frontend/src/modals/SecretKeyModal/index.tsx
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,

21
src/frontend/src/modals/StoreApiKeyModal/index.tsx
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/"

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

@ -21,7 +21,7 @@ type TriggerProps = {
};
const Content: React.FC<ContentProps> = ({ children }) => {
return <div className="h-full w-full 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 (

Some files were not shown because too many files have changed in this diff Show more