diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/helpers/get-class-file-preview.ts b/src/frontend/src/modals/IOModal/components/chatView/chatInput/helpers/get-class-file-preview.ts
new file mode 100644
index 000000000..e400424a5
--- /dev/null
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/helpers/get-class-file-preview.ts
@@ -0,0 +1,7 @@
+export const getClassNamesFilePreview = (inputFocus) => {
+  return `flex w-full items-center gap-2 rounded-t-md bg-background px-10 py-5 ${
+    inputFocus
+      ? "border-2 border-b-0 border-ring"
+      : "border border-b-0 border-border"
+  }`;
+};
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
index 64cf8e5f1..069d11f73 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
@@ -12,6 +12,7 @@ import {
 import FilePreview from "../filePreviewChat";
 import ButtonSendWrapper from "./components/buttonSendWrapper";
 import TextAreaWrapper from "./components/textAreaWrapper";
+import { getClassNamesFilePreview } from "./helpers/get-class-file-preview";
 import useAutoResizeTextArea from "./hooks/use-auto-resize-text-area";
 import useDragAndDrop from "./hooks/use-drag-and-drop";
 import useFocusOnUnlock from "./hooks/use-focus-unlock";
@@ -38,7 +39,7 @@ export default function ChatInput({
   const { dragOver, dragEnter, dragLeave, onDrop } = useDragAndDrop(
     setIsDragging,
     setFiles,
-    currentFlowId,
+    currentFlowId
   );
 
   const send = () => {
@@ -59,6 +60,8 @@ export default function ChatInput({
     );
   };
 
+  const classNameFilePreview = getClassNamesFilePreview(inputFocus);
+
   return (
     <div className="flex w-full flex-col-reverse">
       <div className="relative w-full">
@@ -92,13 +95,7 @@ export default function ChatInput({
         </div>
       </div>
       {files.length > 0 && (
-        <div
-          className={`flex w-full items-center gap-2 rounded-t-md bg-background px-10 py-5 ${
-            inputFocus
-              ? "border-2 border-b-0 border-ring"
-              : "border border-b-0 border-border"
-          }`}
-        >
+        <div className={classNameFilePreview}>
           {files.map((file) => (
             <FilePreview
               error={file.error}