From fe1646791419c3fc92f31ad6d8a708237060a40d Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 30 Jun 2023 10:48:51 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(toggleShadComponent):=20remo?=
 =?UTF-8?q?ve=20unused=20useEffect=20hook=20to=20improve=20code=20readabil?=
 =?UTF-8?q?ity=20and=20maintainability=20=E2=9C=A8=20feat(toggleShadCompon?=
 =?UTF-8?q?ent):=20add=20disabled=20prop=20to=20Switch=20component=20to=20?=
 =?UTF-8?q?disable=20interaction=20when=20disabled=20is=20true?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 fix(formModal): remove unused imports to improve code cleanliness
✨ feat(formModal): add MessageSquarePlus icon to represent chat input
✨ feat(formModal): add multiple collapsible accordions for input variables
🐛 fix(formModal): disable Toggle component when handle key is present in formKeysData
---
 .../components/toggleShadComponent/index.tsx  |  8 +--
 src/frontend/src/modals/formModal/index.tsx   | 53 ++++++++++---------
 2 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/frontend/src/components/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx
index 290a46cb4..6619c1d36 100644
--- a/src/frontend/src/components/toggleShadComponent/index.tsx
+++ b/src/frontend/src/components/toggleShadComponent/index.tsx
@@ -8,11 +8,6 @@ export default function ToggleShadComponent({
   disabled,
   size,
 }: ToggleComponentType) {
-  useEffect(() => {
-    if (disabled) {
-      setEnabled(false);
-    }
-  }, [disabled, setEnabled]);
   let scaleX, scaleY;
   switch (size) {
     case "small":
@@ -32,11 +27,12 @@ export default function ToggleShadComponent({
       scaleY = 1;
   }
   return (
-    <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+    <div className={disabled ? "pointer-events-none cursor-not-allowed " : ""}>
       <Switch
         style={{
           transform: `scaleX(${scaleX}) scaleY(${scaleY})`,
         }}
+        disabled={disabled}
         className="data-[state=unchecked]:bg-slate-500"
         checked={enabled}
         onCheckedChange={(x: boolean) => {
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index 5ed82d0d7..a41c53a46 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -4,7 +4,13 @@ import { alertContext } from "../../contexts/alertContext";
 import { classNames, validateNodes } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
 import ChatMessage from "./chatMessage";
-import { TerminalSquare, MessageSquare, Variable, Eraser } from "lucide-react";
+import {
+  TerminalSquare,
+  MessageSquare,
+  Variable,
+  Eraser,
+  MessageSquarePlus,
+} from "lucide-react";
 import { sendAllProps } from "../../types/api";
 import { ChatMessageType } from "../../types/chat";
 import ChatInput from "./chatInput";
@@ -401,17 +407,20 @@ export default function FormModal({
           <div className="flex h-[80vh] w-full mt-2 ">
             <div className="w-2/5 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6">
               <div className="flex justify-between items-center">
-                <div className="flex py-2">
-                  <Variable className="w-6 h-6 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable>
+                <div className="flex py-2 items-center">
+                  <Variable className="w-6 h-6 pe-1 text-primary"></Variable>
                   <span className="text-md font-semibold text-primary">
                     Input Variables
                   </span>
                 </div>
-                <span className="mr-2 text-md font-semibold text-primary">
-                  Chat Input
-                </span>
+                <div className="flex py-2 items-center">
+                  <MessageSquarePlus className="w-6 h-6 pe-1 mr-0.5 text-primary" />
+                  <span className=" text-md font-semibold text-primary">
+                    Chat Input
+                  </span>
+                </div>
               </div>
-              <Accordion type="single" collapsible className="w-full">
+              <Accordion type="multiple" className="w-full">
                 {Object.keys(tabsState[id.current].formKeysData.input_keys).map(
                   (i, k) => (
                     <div className="flex items-start gap-3">
@@ -434,7 +443,9 @@ export default function FormModal({
                                   handleOnCheckedChange(value, i)
                                 }
                                 size="small"
-                                disabled={false}
+                                disabled={tabsState[
+                                  id.current
+                                ].formKeysData.handle_keys.some((t) => t === i)}
                               />
                             </div>
                           </div>
@@ -443,33 +454,23 @@ export default function FormModal({
                           <div className="p-1 flex flex-col gap-2">
                             {tabsState[
                               id.current
-                            ].formKeysData.handle_keys.some((t) => t === i) ? (
+                            ].formKeysData.handle_keys.some((t) => t === i) && (
                               <div className="font-normal text-muted-foreground ">
-                                Handle
+                                Source: Component
                               </div>
-                            ) : (
-                              <></>
                             )}
                             <Textarea
                               value={
                                 tabsState[id.current].formKeysData.input_keys[i]
                               }
                               onChange={(e) => {
-                                if (
-                                  !tabsState[
+                                setTabsState((old) => {
+                                  let newTabsState = _.cloneDeep(old);
+                                  newTabsState[
                                     id.current
-                                  ].formKeysData.handle_keys.some(
-                                    (t) => t === i
-                                  )
-                                )
-                                  setTabsState((old) => {
-                                    let newTabsState = _.cloneDeep(old);
-                                    newTabsState[
-                                      id.current
-                                    ].formKeysData.input_keys[i] =
-                                      e.target.value;
-                                    return newTabsState;
-                                  });
+                                  ].formKeysData.input_keys[i] = e.target.value;
+                                  return newTabsState;
+                                });
                               }}
                               disabled={chatKey === i}
                               placeholder="Enter text..."