From c76b8766c0b16141ae589b15c2c005a7c52b09b5 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 28 Jun 2023 11:51:21 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20refactor(chatComponent):=20remov?=
 =?UTF-8?q?e=20unused=20import=20of=20ChatModal=20to=20improve=20code=20cl?=
 =?UTF-8?q?eanliness?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔨 refactor(chatComponent): update code to correctly access template value from node data

🔨 refactor(chatInput): update button styling and positioning

🔨 refactor(chatInput): update Lock icon styling and positioning

🔨 refactor(chatInput): update Send icon styling and positioning

🔨 refactor(formModal): update setKeysValue function to correctly update the value at a specific index in the array
---
 src/frontend/src/components/chatComponent/index.tsx   | 6 +++---
 src/frontend/src/modals/formModal/chatInput/index.tsx | 6 +++---
 src/frontend/src/modals/formModal/index.tsx           | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index eaf0ba4ef..cd3c9c789 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -3,7 +3,6 @@ import { useNodes } from "reactflow";
 import { ChatType } from "../../types/chat";
 import ChatTrigger from "./chatTrigger";
 import BuildTrigger from "./buildTrigger";
-import ChatModal from "../../modals/chatModal";
 
 import { getBuildStatus } from "../../controllers/API";
 import { NodeType } from "../../types/flow";
@@ -45,10 +44,11 @@ export default function Chat({ flow }: ChatType) {
   const prevNodesRef = useRef<any[] | undefined>();
   const nodes = useNodes();
   useEffect(() => {
+    
     const prevNodes = prevNodesRef.current;
     const currentNodes = nodes.map(
-      (node: NodeType) => node.data.node.template.value
-    );
+      (node: NodeType) => node.data.node.template
+      );
 
     if (
       prevNodes &&
diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx
index 17a673d68..50d42dd3f 100644
--- a/src/frontend/src/modals/formModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/formModal/chatInput/index.tsx
@@ -59,15 +59,15 @@ export default function ChatInput({
         placeholder={"Send a message..."}
       />
       <div className="absolute bottom-2 right-4">
-        <button className={classNames("p-2 pl-1 pr-3 transition-all duration-300 rounded-md",chatValue == "" ? "text-primary" : " bg-indigo-600 text-background")} disabled={lockChat} onClick={() => sendMessage()}>
+        <button className={classNames("p-2 px-1 transition-all duration-300 rounded-md",chatValue == "" ? "text-primary" : " bg-indigo-600 text-background")} disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <Lock
-              className="h-5 w-5 text-primary animate-pulse"
+              className="h-5 w-5 ml-1 mr-11 animate-pulse"
               aria-hidden="true"
             />
           ) : (
             <LucideSend
-              className="h-5 w-5 rotate-[44deg] "
+              className="h-5 w-5 mr-2 rotate-[44deg] "
               aria-hidden="true"
             />
           )}
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index d4748065d..365022026 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -414,7 +414,7 @@ export default function FormModal({
                         <Textarea
                           value={keysValue[k]}
                           onChange={(e) =>
-                            setKeysValue({ ...keysValue, [k]: e.target.value })
+                            setKeysValue((old) => [...old.slice(0, k), e.target.value, ...old.slice(k + 1)])
                           }
                           disabled={chatKey === k}
                           placeholder="Enter text..."