🔨 refactor(chatComponent): remove unused import of ChatModal to improve code cleanliness

🔨 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

@@ -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 &&

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"
             />
           )}

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..."