From 355b846be435bae8ce5f38f87fe9d93dc3dd5610 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 27 Jun 2023 20:54:24 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(constants.tsx):=20add=20CH?=
 =?UTF-8?q?AT=5FFORM=5FDIALOG=5FSUBTITLE=20constant=20to=20improve=20code?=
 =?UTF-8?q?=20readability=20=E2=9C=A8=20feat(formModal):=20add=20Input=20V?=
 =?UTF-8?q?ariables=20section=20to=20Chat=20Form=20modal=20to=20allow=20us?=
 =?UTF-8?q?ers=20to=20input=20variables=20=F0=9F=8E=A8=20style(formModal):?=
 =?UTF-8?q?=20adjust=20width=20of=20Chat=20Form=20modal=20and=20Input=20Va?=
 =?UTF-8?q?riables=20section=20to=20improve=20UI=20=F0=9F=8E=A8=20style(fo?=
 =?UTF-8?q?rmModal):=20adjust=20layout=20of=20Input=20Variables=20section?=
 =?UTF-8?q?=20to=20improve=20UI=20=F0=9F=8E=A8=20style(formModal):=20adjus?=
 =?UTF-8?q?t=20layout=20of=20From=20Chat=20switch=20to=20improve=20UI=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(formModal):=20replace=20Switch=20component?=
 =?UTF-8?q?=20with=20custom=20ToggleShadComponent=20to=20fix=20styling=20i?=
 =?UTF-8?q?ssue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/constants.tsx              |  7 ++++++
 src/frontend/src/modals/formModal/index.tsx | 26 ++++++++++++++++-----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index f569046ea..d87008971 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -22,6 +22,13 @@ export const SETTINGS_DIALOG_SUBTITLE = "Edit details about your project.";
 export const CODE_DIALOG_SUBTITLE =
   "Export your flow to use it with this code.";
 
+/**
+ * The base text for subtitle of Chat Form
+ * @constant
+ */
+export const CHAT_FORM_DIALOG_SUBTITLE =
+  "Export your flow to use it with this code.";
+
 /**
  * The base text for subtitle of Edit Node Dialog
  * @constant
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index e1d2e1067..0d139a2d6 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -5,7 +5,7 @@ import { alertContext } from "../../contexts/alertContext";
 import { validateNodes } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
 import ChatMessage from "./chatMessage";
-import { X, MessagesSquare, Eraser, TerminalSquare, MessageCircle, MessageSquareDashed, MessageSquare } from "lucide-react";
+import { X, MessagesSquare, Eraser, TerminalSquare, MessageCircle, MessageSquareDashed, MessageSquare, Variable } from "lucide-react";
 import { sendAllProps } from "../../types/api";
 import { ChatMessageType } from "../../types/chat";
 import ChatInput from "./chatInput";
@@ -21,7 +21,7 @@ import {
   DialogTrigger,
 } from "../../components/ui/dialog";
 import { dark } from "@mui/material/styles/createPalette";
-import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
+import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants";
 import { postValidateCode } from "../../controllers/API";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
@@ -38,6 +38,8 @@ import { Textarea } from "../../components/ui/textarea";
 import { Badge } from "../../components/ui/badge";
 import { Separator } from "../../components/ui/separator";
 import { Switch } from "../../components/ui/switch";
+import { CardTitle } from "../../components/ui/card";
+import ToggleShadComponent from "../../components/toggleShadComponent";
 
 export default function FormModal({
   flow,
@@ -359,19 +361,26 @@ export default function FormModal({
   return (
     <Dialog open={open} onOpenChange={setModalOpen}>
       <DialogTrigger className="hidden"></DialogTrigger>
-      <DialogContent className="min-w-[95vw]">
+      <DialogContent className="min-w-[80vw]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
-            <span className="pr-2">Chat Form</span>
+            <span className="pr-2">Chat</span>
             <TerminalSquare
               className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
+          <DialogDescription>{CHAT_FORM_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
 
         <div className="flex h-[80vh] w-full mt-2">
-          <div className="w-2/5 h-full flex flex-col justify-start mr-6">
+          <div className="w-1/4 h-full flex flex-col justify-start mr-6">
+          <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>
             <Accordion type="single" collapsible className="w-full">
               {tabsState[id.current].formKeysData.input_keys.map((i, k) => (
                 <AccordionItem key={k} value={i}>
@@ -379,8 +388,13 @@ export default function FormModal({
                   <AccordionContent>
                     <div className="p-1 flex flex-col gap-4">
                     <div className="flex items-center space-x-2">
-                      <Switch id="airplane-mode" checked={chatKey === k } onCheckedChange={(value) => handleOnCheckedChange(value, k)}/>
                       <Label htmlFor="airplane-mode">From Chat</Label>
+                      <ToggleShadComponent
+                                  enabled={chatKey === k }
+                                  setEnabled={(value) => handleOnCheckedChange(value, k)}
+                                  size="small"
+                                  disabled={false}
+                                />
                     </div>
                       <Textarea value={keysValue[k]} onChange={(e) => setKeysValue({...keysValue, [k]: e.target.value})} disabled={chatKey === k} placeholder="Enter text..."></Textarea>
                     </div>