diff --git a/src/frontend/src/constants.ts b/src/frontend/src/constants.ts
index d7c8f01ae..7e1e3885e 100644
--- a/src/frontend/src/constants.ts
+++ b/src/frontend/src/constants.ts
@@ -5,6 +5,41 @@ import { FlowType } from "./types/flow";
 import { TabsState } from "./types/tabs";
 import { buildInputs, buildTweaks } from "./utils";
 
+/**
+ * constants fpr programming languages box on chat form
+ * @constant
+ */
+interface languageMap {
+  [key: string]: string | undefined;
+}
+
+export const programmingLanguages: languageMap = {
+  javascript: ".js",
+  python: ".py",
+  java: ".java",
+  c: ".c",
+  cpp: ".cpp",
+  "c++": ".cpp",
+  "c#": ".cs",
+  ruby: ".rb",
+  php: ".php",
+  swift: ".swift",
+  "objective-c": ".m",
+  kotlin: ".kt",
+  typescript: ".ts",
+  go: ".go",
+  perl: ".pl",
+  rust: ".rs",
+  scala: ".scala",
+  haskell: ".hs",
+  lua: ".lua",
+  shell: ".sh",
+  sql: ".sql",
+  html: ".html",
+  css: ".css",
+  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
+};
+
 /**
  * enum for the different types of nodes
  * @enum
diff --git a/src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx b/src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx
index 884215ebb..44011821d 100644
--- a/src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx
@@ -2,7 +2,7 @@ import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
 import { useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import { programmingLanguages } from "../../../../utils";
+import { programmingLanguages } from "../../../../constants";
 
 interface Props {
   language: string;
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 863d907da..0972d9972 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -47,37 +47,6 @@ export function normalCaseToSnakeCase(str: string) {
     .join("_");
 }
 
-interface languageMap {
-  [key: string]: string | undefined;
-}
-
-export const programmingLanguages: languageMap = {
-  javascript: ".js",
-  python: ".py",
-  java: ".java",
-  c: ".c",
-  cpp: ".cpp",
-  "c++": ".cpp",
-  "c#": ".cs",
-  ruby: ".rb",
-  php: ".php",
-  swift: ".swift",
-  "objective-c": ".m",
-  kotlin: ".kt",
-  typescript: ".ts",
-  go: ".go",
-  perl: ".pl",
-  rust: ".rs",
-  scala: ".scala",
-  haskell: ".hs",
-  lua: ".lua",
-  shell: ".sh",
-  sql: ".sql",
-  html: ".html",
-  css: ".css",
-  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
-};
-
 export function toTitleCase(str: string) {
   let result = str
     .split("_")