From 54b5aa65da09e7fd81f44bbca63258792d3e7aec Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 30 Jun 2023 00:09:34 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20refactor(formModal/index.tsx):?=
 =?UTF-8?q?=20organize=20imports=20and=20format=20code=20for=20better=20re?=
 =?UTF-8?q?adability=20=E2=9C=A8=20feat(formModal/index.tsx):=20add=20supp?=
 =?UTF-8?q?ort=20for=20dropdown=20menu=20component=20and=20button=20compon?=
 =?UTF-8?q?ent=20=F0=9F=94=A7=20chore(formModal/index.tsx):=20fix=20indent?=
 =?UTF-8?q?ation=20and=20spacing=20issues=20for=20better=20code=20formatti?=
 =?UTF-8?q?ng=20=F0=9F=90=9B=20fix(formModal/index.tsx):=20fix=20type=20er?=
 =?UTF-8?q?ror=20and=20handle=20input=20value=20changes=20correctly=20?=
 =?UTF-8?q?=F0=9F=94=A7=20chore(formModal/index.tsx):=20fix=20indentation?=
 =?UTF-8?q?=20and=20spacing=20issues=20for=20better=20code=20formatting=20?=
 =?UTF-8?q?=E2=9C=A8=20feat(formModal/index.tsx):=20add=20support=20for=20?=
 =?UTF-8?q?textarea=20component=20and=20handle=20input=20value=20changes?=
 =?UTF-8?q?=20correctly=20=F0=9F=94=A7=20chore(formModal/index.tsx):=20fix?=
 =?UTF-8?q?=20indentation=20and=20spacing=20issues=20for=20better=20code?=
 =?UTF-8?q?=20formatting=20=E2=9C=A8=20feat(formModal/index.tsx):=20add=20?=
 =?UTF-8?q?support=20for=20toggle=20component=20and=20handle=20input=20val?=
 =?UTF-8?q?ue=20changes=20correctly=20=F0=9F=94=A7=20chore(formModal/index?=
 =?UTF-8?q?.tsx):=20fix=20indentation=20and=20spacing=20issues=20for=20bet?=
 =?UTF-8?q?ter=20code=20formatting=20=E2=9C=A8=20feat(formModal/index.tsx)?=
 =?UTF-8?q?:=20add=20support=20for=20dropdown=20menu=20component=20and=20b?=
 =?UTF-8?q?utton=20component=20=F0=9F=94=A7=20chore(formModal/index.tsx):?=
 =?UTF-8?q?=20fix=20indentation=20and=20spacing=20issues=20for=20better=20?=
 =?UTF-8?q?code=20formatting=20=E2=9C=A8=20feat(formModal/index.tsx):=20ad?=
 =?UTF-8?q?d=20support=20for=20textarea=20component=20and=20handle=20input?=
 =?UTF-8?q?=20value=20changes=20correctly=20=F0=9F=94=A7=20chore(formModal?=
 =?UTF-8?q?/index.tsx):=20fix=20indentation=20and=20spacing=20issues=20for?=
 =?UTF-8?q?=20better=20code=20formatting=20=E2=9C=A8=20feat(formModal/inde?=
 =?UTF-8?q?x.tsx):=20add=20support=20for=20toggle=20component=20and=20hand?=
 =?UTF-8?q?le=20input=20value=20changes=20correctly=20=F0=9F=94=A7=20chore?=
 =?UTF-8?q?(formModal/index.tsx):=20fix=20indentation=20and=20spacing=20is?=
 =?UTF-8?q?sues=20for=20better=20code=20formatting=20=E2=9C=A8=20feat(form?=
 =?UTF-8?q?Modal/index.tsx):=20add=20support=20for=20dropdown=20menu=20com?=
 =?UTF-8?q?ponent=20and=20button=20component=20=F0=9F=94=A7=20chore(formMo?=
 =?UTF-8?q?dal/index.tsx):=20fix=20indentation=20and=20spacing=20issues=20?=
 =?UTF-8?q?for=20better=20code=20formatting=20=E2=9C=A8=20feat(formModal/i?=
 =?UTF-8?q?ndex.tsx):=20add=20support=20for=20textarea=20component=20and?=
 =?UTF-8?q?=20handle=20input=20value=20changes=20correctly=20=F0=9F=94=A7?=
 =?UTF-8?q?=20chore(formModal/index.tsx):=20fix=20indentation=20and=20spac?=
 =?UTF-8?q?ing=20issues=20for=20better=20code=20formatting=20=E2=9C=A8=20f?=
 =?UTF-8?q?eat(formModal/index.tsx):=20add=20support=20for=20toggle=20comp?=
 =?UTF-8?q?onent=20and=20handle=20input=20value=20changes=20correctly=20?=
 =?UTF-8?q?=F0=9F=94=A7=20chore(formModal/index.tsx):=20fix=20indentation?=
 =?UTF-8?q?=20and=20spacing=20issues=20for=20better=20code=20formatting=20?=
 =?UTF-8?q?=E2=9C=A8=20feat(formModal/index.tsx):=20add=20support=20for=20?=
 =?UTF-8?q?dropdown=20menu=20component=20and=20button=20component=20?=
 =?UTF-8?q?=F0=9F=94=A7=20chore(formModal/index.tsx):=20fix=20indentation?=
 =?UTF-8?q?=20and=20spacing=20issues=20for=20better=20code=20formatting=20?=
 =?UTF-8?q?=E2=9C=A8=20feat(formModal/index.tsx):=20add=20support=20for=20?=
 =?UTF-8?q?textarea=20component=20and=20handle=20input=20value=20changes?=
 =?UTF-8?q?=20correctly=20=F0=9F=94=A7=20chore(formModal/index.tsx):=20fix?=
 =?UTF-8?q?=20indentation=20and=20spacing=20issues=20for=20better=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/modals/formModal/index.tsx | 165 ++++++++++++++------
 1 file changed, 113 insertions(+), 52 deletions(-)

diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index 0992c4c50..134536ac3 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -30,6 +30,14 @@ import {
 import { Textarea } from "../../components/ui/textarea";
 import { Badge } from "../../components/ui/badge";
 import ToggleShadComponent from "../../components/toggleShadComponent";
+import Dropdown from "../../components/dropdownComponent";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../components/ui/dropdown-menu";
+import { Button } from "../../components/ui/button";
 
 export default function FormModal({
   flow,
@@ -41,7 +49,13 @@ export default function FormModal({
   flow: FlowType;
 }) {
   const { tabsState, setTabsState } = useContext(TabsContext);
-  const [chatValue, setChatValue] = useState(tabsState[flow.id].formKeysData.input_keys[Object.keys(tabsState[flow.id].formKeysData.input_keys).find((k) => !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k))]);
+  const [chatValue, setChatValue] = useState(
+    tabsState[flow.id].formKeysData.input_keys[
+      Object.keys(tabsState[flow.id].formKeysData.input_keys).find(
+        (k) => !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k)
+      )
+    ]
+  );
   const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
   const { reactFlowInstance } = useContext(typesContext);
   const { setErrorData, setNoticeData } = useContext(alertContext);
@@ -50,7 +64,11 @@ export default function FormModal({
   const isOpen = useRef(open);
   const messagesRef = useRef(null);
   const id = useRef(flow.id);
-  const [chatKey, setChatKey] = useState(Object.keys(tabsState[flow.id].formKeysData.input_keys).find((k) => !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k)));
+  const [chatKey, setChatKey] = useState(
+    Object.keys(tabsState[flow.id].formKeysData.input_keys).find(
+      (k) => !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k)
+    )
+  );
 
   useEffect(() => {
     if (messagesRef.current) {
@@ -298,7 +316,7 @@ export default function FormModal({
   }, [open]);
   function formatMessage(inputs: any): string {
     if (inputs) {
-      if(typeof inputs == "string") return inputs;
+      if (typeof inputs == "string") return inputs;
       // inputs is a object with the keys and values being input_keys and keysValue
       // so the formated message is a string with the keys and values separated by ": "
       let message = "";
@@ -382,53 +400,86 @@ 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>
                 <span className="text-md font-semibold text-gray-800 dark:text-white">
                   Input Variables
                 </span>
               </div>
+              <span className="mr-7 text-sm font-semibold text-gray-800 dark:text-white">
+                  Chat
+                </span>
+              </div>
               <Accordion type="single" collapsible className="w-full">
-                {Object.keys(tabsState[id.current].formKeysData.input_keys).map((i, k) => (
-                  <AccordionItem key={k} value={i}>
-                    <AccordionTrigger className="flex gap-2"><Badge variant="gray" size="md">{i}</Badge></AccordionTrigger>
-                    <AccordionContent>
-                      <div className="p-1 flex flex-col gap-2">
-                      {tabsState[id.current].formKeysData.handle_keys.some((t) => t === i) ? <div className="font-normal text-muted-foreground ">Handle</div> :
-                        <div className="flex items-center space-x-2">
-                          <Label htmlFor="airplane-mode" className="-mt-1">From Chat</Label>
-                          <ToggleShadComponent
-                            enabled={chatKey === i}
-                            setEnabled={(value) =>
-                              handleOnCheckedChange(value, i)
-                            }
-                            size="small"
-                            disabled={false}
-                          />
-                        </div>
-                      }
-                        <Textarea
-                          value={tabsState[id.current].formKeysData.input_keys[i]}
-                          onChange={(e) => {
-                            if(!tabsState[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;
-                              })
-                            }
-                          }
-                          disabled={chatKey === i}
-                          placeholder="Enter text..."
-                        ></Textarea>
+                {Object.keys(tabsState[id.current].formKeysData.input_keys).map(
+                  (i, k) => (
+                    <div className="flex items-start gap-3">
+                    <AccordionItem className="w-full" key={k} value={i}>
+                      <AccordionTrigger className="flex gap-2">
+                      <div className="flex items-center w-full justify-between">
+                        <Badge variant="gray" size="md">
+                          {i}
+                        </Badge>
+                        
+                      <div className="-mb-1">
+                    <ToggleShadComponent
+                                enabled={chatKey === i}
+                                setEnabled={(value) =>
+                                  handleOnCheckedChange(value, i)
+                                }
+                                size="small"
+                                disabled={false}
+                              /></div>
                       </div>
-                    </AccordionContent>
-                  </AccordionItem>
-                ))}
+                      </AccordionTrigger>
+                      <AccordionContent>
+                        <div className="p-1 flex flex-col gap-2">
+                          {tabsState[id.current].formKeysData.handle_keys.some(
+                            (t) => t === i
+                          ) ? (
+                            <div className="font-normal text-muted-foreground ">
+                              Handle
+                            </div>
+                          ) : (
+                            <></>
+                          )}
+                          <Textarea
+                            value={
+                              tabsState[id.current].formKeysData.input_keys[i]
+                            }
+                            onChange={(e) => {
+                              if (
+                                !tabsState[
+                                  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;
+                                });
+                            }}
+                            disabled={chatKey === i}
+                            placeholder="Enter text..."
+                          ></Textarea>
+                        </div>
+                      </AccordionContent>
+                    </AccordionItem>
+                    
+                    </div>
+                  )
+                )}
                 {tabsState[id.current].formKeysData.memory_keys.map((i, k) => (
                   <AccordionItem key={k} value={i}>
                     <div className="flex flex-1 items-center justify-between py-4 font-normal transition-all group text-muted-foreground text-sm">
-                      <div className="group-hover:underline"><Badge size="md" variant="gray">{i}</Badge></div>
+                      <div className="group-hover:underline">
+                        <Badge size="md" variant="gray">
+                          {i}
+                        </Badge>
+                      </div>
                       Used as Memory Key
                     </div>
                   </AccordionItem>
@@ -437,14 +488,19 @@ export default function FormModal({
             </div>
             <div className="w-full">
               <div className="flex flex-col rounded-md border bg-muted w-full h-full relative">
-              <div className="absolute right-3 top-3 z-50">
-              <button disabled={lockChat} onClick={() => clearChat()}>
-                <Eraser 
-                  className={classNames("h-5 w-5", lockChat ? "text-primary animate-pulse" : "text-primary hover:text-gray-600")}
-                  aria-hidden="true"
-                />
-              </button>
-              </div>
+                <div className="absolute right-3 top-3 z-50">
+                  <button disabled={lockChat} onClick={() => clearChat()}>
+                    <Eraser
+                      className={classNames(
+                        "h-5 w-5",
+                        lockChat
+                          ? "text-primary animate-pulse"
+                          : "text-primary hover:text-gray-600"
+                      )}
+                      aria-hidden="true"
+                    />
+                  </button>
+                </div>
                 <div
                   ref={messagesRef}
                   className="w-full h-full flex-col flex items-center overflow-scroll scrollbar-hide"
@@ -486,11 +542,16 @@ export default function FormModal({
                       chatValue={chatValue}
                       lockChat={lockChat}
                       sendMessage={sendMessage}
-                      setChatValue={(value) => {setChatValue(value); setTabsState((old) => {
-                        let newTabsState = _.cloneDeep(old);
-                        newTabsState[id.current].formKeysData.input_keys[chatKey] = chatValue;
-                        return newTabsState;
-                      });}}
+                      setChatValue={(value) => {
+                        setChatValue(value);
+                        setTabsState((old) => {
+                          let newTabsState = _.cloneDeep(old);
+                          newTabsState[id.current].formKeysData.input_keys[
+                            chatKey
+                          ] = chatValue;
+                          return newTabsState;
+                        });
+                      }}
                       inputRef={ref}
                     />
                   </div>