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

Refactor: Move texts to constants files

Browse source
This commit is contained in:
igorrCarvalho 2024-02-27 15:46:07 -03:00
commit 8461eec180
32 changed files with 104 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -19,6 +19,8 @@ import { Button } from "../../../../components/ui/button";
import {
LANGFLOW_SUPPORTED_TYPES,
TOOLTIP_EMPTY,
inputHandleHover,
outputHandleHover,
} from "../../../../constants/constants";
import { postCustomComponentUpdate } from "../../../../controllers/API";
import useAlertStore from "../../../../stores/alertStore";
@ -182,8 +184,8 @@ export default function ParameterComponent({
{index === 0 && (
<span>
{left
? "Avaliable input components:"
: "Avaliable output components:"}
? inputHandleHover
: outputHandleHover}
</span>
)}
<span

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

@ -8,7 +8,7 @@ import Checkmark from "../../components/ui/checkmark";
import Loading from "../../components/ui/loading";
import { Textarea } from "../../components/ui/textarea";
import Xmark from "../../components/ui/xmark";
import { priorityFields } from "../../constants/constants";
import { priorityFields, statusBuild, statusBuilding } from "../../constants/constants";
import { BuildStatus } from "../../constants/enums";
import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
import { useDarkStore } from "../../stores/darkStore";
@ -471,9 +471,9 @@ export default function GenericNode({
<ShadTooltip
content={
buildStatus === BuildStatus.BUILDING ? (
<span>Building...</span>
<span> {statusBuilding} </span>
) : !validationStatus ? (
<span className="flex">Build to validate status.</span>
<span className="flex">{statusBuild}</span>
) : (
<div className="max-h-96 overflow-auto">
{typeof validationStatus.params === "string"

3
src/frontend/src/alerts/alertDropDown/index.tsx
View file

@ -8,6 +8,7 @@ import {
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,
@ -68,7 +69,7 @@ export default function AlertDropdown({
))
) : (
<div className="flex h-full w-full items-center justify-center pb-16 text-ring">
No new notifications
{zeroNotifications}
</div>
)}
</div>

6
src/frontend/src/components/IOview/index.tsx
View file

@ -1,6 +1,6 @@
import { cloneDeep } from "lodash";
import { useEffect, useState } from "react";
import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
import { CHAT_FORM_DIALOG_SUBTITLE, outputsModalTitle, textInputModalTitle } from "../../constants/constants";
import BaseModal from "../../modals/baseModal";
import useAlertStore from "../../stores/alertStore";
import useFlowStore from "../../stores/flowStore";
@ -127,7 +127,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
>
<div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
<IconComponent className="h-4 w-4" name={"Type"} />
Text Inputs
{textInputModalTitle}
</div>
{nodes
.filter((node) =>
@ -188,7 +188,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
>
<div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
<IconComponent className="h-4 w-4" name={"Braces"} />
Prompt Outputs
{outputsModalTitle}
</div>
{nodes
.filter((node) =>

2
src/frontend/src/components/chatComponent/buildTrigger/index.tsx
View file

@ -8,7 +8,7 @@ import useFlowStore from "../../../stores/flowStore";
import { validateNodes } from "../../../utils/reactflowUtils";
import RadialProgressComponent from "../../RadialProgress";
import IconComponent from "../../genericIconComponent";
import { MISSED_ERROR_ALERT } from "../../../alerts_constants";
import { MISSED_ERROR_ALERT } from "../../../constants/alerts_constants";
export default function BuildTrigger({
open,

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

@ -17,6 +17,7 @@ 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,
@ -127,7 +128,7 @@ export const MenuBar = ({
</div>
<ShadTooltip
content={
"Last saved at " +
savedHover +
new Date(currentFlow.updated_at ?? "").toLocaleString("en-US", {
hour: "numeric",
minute: "numeric",

2
src/frontend/src/components/inputFileComponent/index.tsx
View file

@ -4,7 +4,7 @@ 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 "../../alerts_constants";
import { CONSOLE_ERROR_MSG, CONSOLE_SUCCESS_MSG, INVALID_FILE_ALERT } from "../../constants/alerts_constants";
export default function InputFileComponent({
value,

5
src/frontend/src/components/newChatView/chatInput/index.tsx
View file

@ -3,6 +3,7 @@ import IconComponent from "../../../components/genericIconComponent";
import { Textarea } from "../../../components/ui/textarea";
import { chatInputType } from "../../../types/components";
import { classNames } from "../../../utils/utils";
import { chatInputPlaceholder, chatInputPlaceholderSend } from "../../../constants/constants";
export default function ChatInput({
lockChat,
@ -72,8 +73,8 @@ export default function ChatInput({
)}
placeholder={
noInput
? "No chat input variables found. Click to run your flow."
: "Send a message..."
? chatInputPlaceholder
: chatInputPlaceholderSend
}
/>
<div className="form-modal-send-icon-position">

7
src/frontend/src/components/newChatView/index.tsx
View file

@ -14,7 +14,8 @@ import {
import { classNames } from "../../utils/utils";
import ChatInput from "./chatInput";
import ChatMessage from "./chatMessage";
import { INFO_MISSING_ALERT, NOCHATOUTPUT_NOTICE_ALERT } from "../../alerts_constants";
import { INFO_MISSING_ALERT, NOCHATOUTPUT_NOTICE_ALERT } from "../../constants/alerts_constants";
import { chatFirstInitialText, chatSecondInitialText } from "../../constants/constants";
export default function NewChatView({
sendMessage,
@ -178,14 +179,14 @@ export default function NewChatView({
<br />
<div className="langflow-chat-desc">
<span className="langflow-chat-desc-span">
Start a conversation and click the agent's thoughts{" "}
{chatFirstInitialText}{" "}
<span>
<IconComponent
name="MessageSquare"
className="mx-1 inline h-5 w-5 animate-bounce "
/>
</span>{" "}
to inspect the chaining process.
{chatSecondInitialText}
</span>
</div>
</div>

3
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -4,6 +4,7 @@ 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,
@ -37,7 +38,7 @@ export default function TextAreaComponent({
<GenericModal
type={TypeModal.TEXT}
buttonText="Finish Editing"
modalTitle="Edit Text"
modalTitle={editTextModalTitle}
value={value}
setValue={(value: string) => {
onChange(value);

49
src/frontend/src/constants/alerts_constants.tsx Normal file
View file

@ -0,0 +1,49 @@
// 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 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."
// 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."
// 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!"

32
src/frontend/src/constants/constants.ts
View file

@ -682,3 +682,35 @@ 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 chatSecondInitialText = "to inspect the chaining process.";
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 saveWApiCheckbox = "Save with my API keys";
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 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 "

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

@ -8,7 +8,7 @@ import useAlertStore from "../../stores/alertStore";
import { ApiKeyType } from "../../types/components";
import { nodeIconsLucide } from "../../utils/styleUtils";
import BaseModal from "../baseModal";
import { COPIED_NOTICE_ALERT } from "../../alerts_constants";
import { COPIED_NOTICE_ALERT } from "../../constants/alerts_constants";
export default function SecretKeyModal({
title,

11
src/frontend/src/modals/StoreApiKeyModal/index.tsx
View file

@ -9,7 +9,8 @@ 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 "../../alerts_constants";
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,10 +61,10 @@ export default function StoreApiKeyModal({
<BaseModal.Header
description={
(hasApiKey && !validApiKey
? "Your API key is not valid. "
? invalidApi
: !hasApiKey
? "You don't have an API key. "
: "") + "Insert your Langflow API key."
? noApi
: "") + insertApi
}
>
<span className="pr-2">API Key</span>
@ -98,7 +99,7 @@ export default function StoreApiKeyModal({
</div>
<div className="flex items-end justify-between">
<span className="pr-1 text-xs text-muted-foreground">
Don’t have an API key? Sign up at{" "}
{createApi} {" "}
<a
className="text-high-indigo underline"
href="https://langflow.store/"

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

@ -9,14 +9,14 @@ 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 } from "../../constants/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 "../../alerts_constants";
import { BUG_ALERT, CODE_ERROR_ALERT, CODE_SUCCESS_ALERT, FUNC_ERROR_ALERT, IMPORT_ERROR_ALERT } from "../../constants/alerts_constants";
export default function CodeAreaModal({
value,
@ -144,7 +144,7 @@ export default function CodeAreaModal({
<BaseModal open={open} setOpen={setOpen}>
<BaseModal.Trigger>{children}</BaseModal.Trigger>
<BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
<span className="pr-2">Edit Code</span>
<span className="pr-2"> {editCodeTitle} </span>
<IconComponent
name="prompts"
className="h-6 w-6 pl-1 text-primary "

9
src/frontend/src/modals/exportModal/index.tsx
View file

@ -3,13 +3,13 @@ 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 } from "../../constants/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 "../../alerts_constants";
import { API_WARNING_NOTICE_ALERT } from "../../constants/alerts_constants";
const ExportModal = forwardRef(
(props: { children: ReactNode }, ref): JSX.Element => {
@ -52,12 +52,11 @@ const ExportModal = forwardRef(
}}
/>
<label htmlFor="terms" className="export-modal-save-api text-sm ">
Save with my API keys
{saveWApiCheckbox}
</label>
</div>
<span className=" text-xs text-destructive ">
Caution: Uncheck this box only removes API keys from fields
specifically designated for API keys.
{alertSaveWApi}
</span>
</BaseModal.Content>

7
src/frontend/src/modals/formModal/chatInput/index.tsx
View file

@ -3,6 +3,7 @@ import IconComponent from "../../../components/genericIconComponent";
import { Textarea } from "../../../components/ui/textarea";
import { chatInputType } from "../../../types/components";
import { classNames } from "../../../utils/utils";
import { chatInputPlaceholder, chatInputPlaceholderSend } from "../../../constants/constants";
export default function ChatInput({
lockChat,
@ -51,7 +52,7 @@ export default function ChatInput({
? "Thinking..."
: typeof chatValue === "object" &&
Object.keys(chatValue)?.length === 0
? "No chat input variables found. Click to run your flow."
? chatInputPlaceholder
: chatValue
}
onChange={(event): void => {
@ -68,8 +69,8 @@ export default function ChatInput({
)}
placeholder={
noInput
? "No chat input variables found. Click to run your flow."
: "Send a message..."
? chatInputPlaceholder
: chatInputPlaceholderSend
}
/>
<div className="form-modal-send-icon-position">

10
src/frontend/src/modals/formModal/index.tsx
View file

@ -20,14 +20,14 @@ import {
DialogTrigger,
} from "../../components/ui/dialog";
import { Textarea } from "../../components/ui/textarea";
import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/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 "../../alerts_constants";
import { CHAT_ERROR_ALERT, INFO_MISSING_ALERT, MSG_ERROR_ALERT } from "../../constants/alerts_constants";
export default function FormModal({
flow,
@ -585,20 +585,20 @@ export default function FormModal({
<span>
👋{" "}
<span className="langflow-chat-span">
Langflow Chat
{langflowChatTitle}
</span>
</span>
<br />
<div className="langflow-chat-desc">
<span className="langflow-chat-desc-span">
Start a conversation and click the agent's thoughts{" "}
{chatFirstInitialText} {" "}
<span>
<IconComponent
name="MessageSquare"
className="mx-1 inline h-5 w-5 animate-bounce "
/>
</span>{" "}
to inspect the chaining process.
{chatSecondInitialText}
</span>
</div>
</div>

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

@ -10,6 +10,8 @@ import {
MAX_WORDS_HIGHLIGHT,
PROMPT_DIALOG_SUBTITLE,
TEXT_DIALOG_SUBTITLE,
editTextModalTitle,
editTextPlaceholder,
regexHighlight,
} from "../../constants/constants";
import { TypeModal } from "../../constants/enums";
@ -19,7 +21,7 @@ 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 "../../alerts_constants";
import { BUG_ALERT, PROMPT_ERROR_ALERT, PROMPT_SUCCESS_ALERT, TEMP_NOTICE_ALERT } from "../../constants/alerts_constants";
export default function GenericModal({
field_name = "",
@ -211,7 +213,7 @@ export default function GenericModal({
setInputValue(event.target.value);
checkVariables(event.target.value);
}}
placeholder="Type message here."
placeholder={editTextPlaceholder}
onKeyDown={(e) => {
handleKeyDown(e, inputValue, "");
}}
@ -233,7 +235,7 @@ export default function GenericModal({
onChange={(event) => {
setInputValue(event.target.value);
}}
placeholder="Type message here."
placeholder={editTextPlaceholder}
onKeyDown={(e) => {
handleKeyDown(e, value, "");
}}

2
src/frontend/src/pages/AdminPage/LoginPage/index.tsx
View file

@ -11,7 +11,7 @@ import {
inputHandlerEventType,
loginInputStateType,
} from "../../../types/components";
import { SIGNIN_ERROR_ALERT } from "../../../alerts_constants";
import { SIGNIN_ERROR_ALERT } from "../../../constants/alerts_constants";
export default function LoginAdminPage() {
const navigate = useNavigate();

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