diff --git a/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx
index 092a797f1..704efae0f 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import IconComponent, {
   ForwardedIconComponent,
 } from "../../../../../components/genericIconComponent";
+import formatFileName from "./utils/format-file-name";
 
 export default function FilePreview({
   error,
@@ -18,15 +19,6 @@ export default function FilePreview({
 
   const [isHovered, setIsHovered] = useState(false);
 
-  const formatFileName = (name) => {
-    const fileExtension = name.split(".").pop(); // Get the file extension
-    const baseName = name.slice(0, name.lastIndexOf(".")); // Get the base name without the extension
-    if (baseName.length > 6) {
-      return `${baseName.slice(0, 29)}...${fileExtension}`;
-    }
-    return name;
-  };
-
   return (
     <div className="relative inline-block">
       {loading ? (
diff --git a/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/utils/format-file-name.tsx b/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/utils/format-file-name.tsx
new file mode 100644
index 000000000..0e8a23921
--- /dev/null
+++ b/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/utils/format-file-name.tsx
@@ -0,0 +1,8 @@
+export default function formatFileName(name: string): string {
+  const fileExtension = name.split(".").pop(); // Get the file extension
+  const baseName = name.slice(0, name.lastIndexOf(".")); // Get the base name without the extension
+  if (baseName.length > 6) {
+    return `${baseName.slice(0, 29)}...${fileExtension}`;
+  }
+  return name;
+}