diff --git a/src/frontend/src/constants.ts b/src/frontend/src/constants.ts
index b3cbeedcc..c642f09f7 100644
--- a/src/frontend/src/constants.ts
+++ b/src/frontend/src/constants.ts
@@ -1,6 +1,7 @@
 // src/constants.tsx
 
 import { MessageSquare } from "lucide-react";
+import { IVarHighlightType } from "./types/components";
 import { FlowType } from "./types/flow";
 import { TabsState } from "./types/tabs";
 import { buildInputs } from "./utils";
@@ -13,6 +14,38 @@ import { buildTweaks } from "./utils/reactflowUtils";
 interface languageMap {
   [key: string]: string | undefined;
 }
+/**
+ * invalid characters for flow name
+ * @constant
+ */
+export const INVALID_CHARACTERS = [
+  " ",
+  ",",
+  ".",
+  ":",
+  ";",
+  "!",
+  "?",
+  "/",
+  "\\",
+  "(",
+  ")",
+  "[",
+  "]",
+  "\n",
+];
+
+/**
+ * regex to highlight the variables in the text
+ * @constant
+ */
+
+export const regexHighlight = /\{([^}]+)\}/g;
+
+export const varHighlightHTML = ({ name }: IVarHighlightType) => {
+  const html = `<span class="font-semibold chat-message-highlight">{${name}}</span>`;
+  return html;
+};
 
 export const programmingLanguages: languageMap = {
   javascript: ".js",
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 9de3b1b73..a53ce1218 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -7,23 +7,20 @@ import { Button } from "../../components/ui/button";
 import { DialogTitle } from "../../components/ui/dialog";
 import { Textarea } from "../../components/ui/textarea";
 import {
+  INVALID_CHARACTERS,
   MAX_WORDS_HIGHLIGHT,
   PROMPT_DIALOG_SUBTITLE,
   TEXT_DIALOG_SUBTITLE,
   TypeModal,
+  regexHighlight,
+  varHighlightHTML,
 } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { postValidatePrompt } from "../../controllers/API";
 import { APIClassType } from "../../types/api";
-import {
-  INVALID_CHARACTERS,
-  classNames,
-  getRandomKeyByssmm,
-  regexHighlight,
-  varHighlightHTML,
-} from "../../utils";
+import { classNames, getRandomKeyByssmm } from "../../utils";
 import BaseModal from "../baseModal";
 
 export default function GenericModal({
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index beec2239e..af83e83ff 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -1,7 +1,6 @@
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "./flow_constants";
-import { IVarHighlightType } from "./types/components";
 
 export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");
@@ -252,27 +251,3 @@ export function getRandomKeyByssmm(): string {
   const milliseconds = String(now.getMilliseconds()).padStart(3, "0");
   return seconds + milliseconds + Math.abs(Math.floor(Math.random() * 10001));
 }
-
-export const INVALID_CHARACTERS = [
-  " ",
-  ",",
-  ".",
-  ":",
-  ";",
-  "!",
-  "?",
-  "/",
-  "\\",
-  "(",
-  ")",
-  "[",
-  "]",
-  "\n",
-];
-
-export const regexHighlight = /\{([^}]+)\}/g;
-
-export const varHighlightHTML = ({ name }: IVarHighlightType) => {
-  const html = `<span class="font-semibold chat-message-highlight">{${name}}</span>`;
-  return html;
-};