Refactor: Move texts to constants files

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -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:"
+                  ? inputHandleHover
-                  : "Avaliable output components:"}
+                  : outputHandleHover}
               </span>
             )}
             <span

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -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"

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -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>

src/frontend/src/components/IOview/index.tsx

@@ -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) =>

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -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,

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -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",

src/frontend/src/components/inputFileComponent/index.tsx

@@ -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,

src/frontend/src/components/newChatView/chatInput/index.tsx

@@ -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."
+              ? chatInputPlaceholder
-              : "Send a message..."
+              : chatInputPlaceholderSend
           }
         />
         <div className="form-modal-send-icon-position">

src/frontend/src/components/newChatView/index.tsx

@@ -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>

src/frontend/src/components/textAreaComponent/index.tsx

@@ -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);

src/frontend/src/constants/constants.ts

@@ -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 "

src/frontend/src/modals/SecretKeyModal/index.tsx

@@ -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,

src/frontend/src/modals/StoreApiKeyModal/index.tsx

@@ -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. "
+            ? noApi
-            : "") + "Insert your Langflow API key."
+            : "") + 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/"

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -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 "

src/frontend/src/modals/exportModal/index.tsx

@@ -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
+            {alertSaveWApi}
-            specifically designated for API keys.
           </span>
         </BaseModal.Content>
 

src/frontend/src/modals/formModal/chatInput/index.tsx

@@ -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."
+            ? chatInputPlaceholder
-            : "Send a message..."
+            : chatInputPlaceholderSend
         }
       />
       <div className="form-modal-send-icon-position">

src/frontend/src/modals/formModal/index.tsx

@@ -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>

src/frontend/src/modals/genericModal/index.tsx

@@ -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, "");
                 }}

src/frontend/src/pages/AdminPage/LoginPage/index.tsx

@@ -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();

src/frontend/src/pages/AdminPage/index.tsx

@@ -33,7 +33,7 @@ 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 "../../alerts_constants";
+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("");

src/frontend/src/pages/ApiKeysPage/index.tsx

@@ -26,7 +26,7 @@ import {
 } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import { ApiKey } from "../../types/components";
-import { DEL_KEY_ERROR_ALERT, DEL_KEY_SUCCESS_ALERT } from "../../alerts_constants";
+import { DEL_KEY_ERROR_ALERT, DEL_KEY_SUCCESS_ALERT } from "../../constants/alerts_constants";
 
 export default function ApiKeysPage() {
   const [loadingKeys, setLoadingKeys] = useState(true);

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -31,7 +31,7 @@ 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 "../../../../alerts_constants";
+import { INVALID_SELECTION_ERROR_ALERT, UPLOAD_ALERT_LIST, UPLOAD_ERROR_ALERT, WRONG_FILE_ERROR_ALERT } from "../../../../constants/alerts_constants";
 
 const nodeTypes = {
   genericNode: GenericNode,

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -25,7 +25,7 @@ import {
 } from "../../../../utils/utils";
 import DisclosureComponent from "../DisclosureComponent";
 import SidebarDraggableComponent from "./sideBarDraggableComponent";
-import { UPLOAD_ERROR_ALERT } from "../../../../alerts_constants";
+import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
 
 export default function ExtraSidebar(): JSX.Element {
   const data = useTypesStore((state) => state.data);

src/frontend/src/pages/MainPage/components/components/index.tsx

@@ -9,7 +9,7 @@ import { Button } from "../../../../components/ui/button";
 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 "../../../../alerts_constants";
+import { CONSOLE_ERROR_MSG, UPLOAD_ALERT_LIST, WRONG_FILE_ERROR_ALERT } from "../../../../constants/alerts_constants";
 
 export default function ComponentsComponent({
   is_component = true,

src/frontend/src/pages/MainPage/index.tsx

@@ -6,11 +6,11 @@ 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 } from "../../constants/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 "../../alerts_constants";
+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);
@@ -72,7 +72,7 @@ export default function HomePage(): JSX.Element {
   return (
     <PageLayout
       title={USER_PROJECTS_HEADER}
-      description="Manage your personal projects. Download or upload your collection."
+      description={myCollectionDesc}
       button={
         <div className="flex gap-2">
           <Button

src/frontend/src/pages/ProfileSettingsPage/index.tsx

@@ -16,7 +16,7 @@ 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 "../../alerts_constants";
+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

src/frontend/src/pages/StorePage/index.tsx

@@ -28,7 +28,8 @@ 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 "../../alerts_constants";
+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);
@@ -172,8 +173,8 @@ export default function StorePage(): JSX.Element {
   return (
     <PageLayout
       betaIcon
-      title="Langflow Store"
+      title={storeTitle}
-      description="Search flows and components from the community."
+      description={storeDesc}
       button={
         <>
           {StoreApiKeyModal && (

src/frontend/src/pages/loginPage/index.tsx

@@ -13,7 +13,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 LoginPage(): JSX.Element {
   const [inputState, setInputState] =

src/frontend/src/pages/signUpPage/index.tsx

@@ -15,7 +15,7 @@ import {
   inputHandlerEventType,
   signUpInputStateType,
 } from "../../types/components";
-import { SIGNUP_ERROR_ALERT } from "../../alerts_constants";
+import { SIGNUP_ERROR_ALERT } from "../../constants/alerts_constants";
 
 export default function SignUp(): JSX.Element {
   const [inputState, setInputState] =

src/frontend/src/stores/flowStore.ts

@@ -9,7 +9,7 @@ import {
   applyNodeChanges,
 } from "reactflow";
 import { create } from "zustand";
-import { FLOW_BUILD_SUCCESS_ALERT, MISSED_ERROR_ALERT } from "../alerts_constants";
+import { FLOW_BUILD_SUCCESS_ALERT, MISSED_ERROR_ALERT } from "../constants/alerts_constants";
 import { BuildStatus } from "../constants/enums";
 import { getFlowPool, updateFlowInDatabase } from "../controllers/API";
 import { VertexBuildTypeAPI } from "../types/api";

src/frontend/src/utils/reactflowUtils.ts

@@ -13,6 +13,7 @@ import {
   LANGFLOW_SUPPORTED_TYPES,
   OUTPUT_TYPES,
   specialCharsRegex,
+  successBuild,
 } from "../constants/constants";
 import { downloadFlowsFromDatabase } from "../controllers/API";
 import {
@@ -1087,7 +1088,7 @@ export function getGroupStatus(
   flow: FlowType,
   ssData: { [key: string]: { valid: boolean; params: string } }
 ) {
-  let status = { valid: true, params: "Built sucessfully ✨" };
+  let status = { valid: true, params: successBuild };
   const { nodes } = flow.data!;
   const ids = nodes.map((n: NodeType) => n.data.id);
   ids.forEach((id) => {