From a1d1ad22cecf5e33b9e2844d630b318a9a047f02 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Wed, 29 May 2024 12:39:44 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(chatInput):=20add=20helper=20funct?=
 =?UTF-8?q?ion=20to=20generate=20class=20names=20for=20file=20preview=20?=
 =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(chatInput):=20refactor=20file=20preview?=
 =?UTF-8?q?=20class=20name=20logic=20to=20use=20helper=20function?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chatInput/helpers/get-class-file-preview.ts     |  7 +++++++
 .../IOModal/components/chatView/chatInput/index.tsx | 13 +++++--------
 2 files changed, 12 insertions(+), 8 deletions(-)
 create mode 100644 src/frontend/src/modals/IOModal/components/chatView/chatInput/helpers/get-class-file-preview.ts

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}