From 0471e99a86c04901571cee722db5c8b91b558b15 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 11 Jul 2023 19:58:33 -0300
Subject: [PATCH 01/13] Fixed useEffect bug

---
 src/frontend/src/components/chatComponent/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 850837f6b..58c058866 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -72,7 +72,7 @@ export default function Chat({ flow }: ChatType) {
     }
 
     prevNodesRef.current = currentNodes;
-  }, [tabsState, flow.id, nodes]);
+  }, [tabsState, flow.id]);
 
   return (
     <>

From 2c1203c4377a8f3487da5e80e25dab35c46f9879 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 11 Jul 2023 20:20:21 -0300
Subject: [PATCH 02/13] Fixed colors on formModal

---
 src/frontend/src/index.css                             | 10 +++++++---
 .../src/modals/formModal/chatMessage/index.tsx         |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 0c8aa9ca2..7df82c278 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -921,13 +921,13 @@ The cursor: default; property value restores the browser's default cursor style
   }
 
   .form-modal-lock-true {
-    @apply bg-input text-black
+    @apply bg-input text-primary
   }
   .form-modal-no-input {
-    @apply bg-input text-center text-black dark:bg-gray-700 dark:text-gray-300
+    @apply bg-input text-center text-primary dark:bg-gray-700 dark:text-gray-300
   }
   .form-modal-lock-false {
-    @apply bg-white text-black
+    @apply bg-white text-primary
   }
   .form-modal-lockchat {
     @apply form-input focus:ring-ring focus:border-ring block w-full rounded-md border-border p-4 pr-16 custom-scroll sm:text-sm
@@ -1080,5 +1080,9 @@ The cursor: default; property value restores the browser's default cursor style
     @apply font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70
   }
 
+  .chat-message-highlight {
+    @apply my-1 rounded-md bg-indigo-100 dark:bg-indigo-900
+  }
+
 
 }
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index d75b901fe..5c318cb17 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -181,7 +181,7 @@ export default function ChatMessage({
                       // Push div with matched text
                       if (chat.message[match[1]]) {
                         parts.push(
-                          <span className="my-1 rounded-md bg-indigo-100">
+                          <span className="chat-message-highlight">
                             {chat.message[match[1]]}
                           </span>
                         );

From d15c5636a2da8ac6e36d014730ef634fc3c13081 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 11 Jul 2023 20:33:46 -0300
Subject: [PATCH 03/13] Fixed bug on chatMessage

---
 .../modals/formModal/chatMessage/index.tsx    | 65 ++++++++++---------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 5c318cb17..8cbf0877c 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -150,8 +150,8 @@ export default function ChatMessage({
           </div>
         </div>
       ) : (
-        <div className="flex flex-col">
-          {template && (
+        <div>
+          {template ? (
             <>
               <button
                 className="form-modal-initial-prompt-btn"
@@ -167,40 +167,41 @@ export default function ChatMessage({
                 />
               </button>
               <span className="prose inline-block break-words text-primary dark:prose-invert">
-                {promptOpen &&
-                  template?.split("\n")?.map((line, index) => {
-                    const regex = /{([^}]+)}/g;
-                    let match;
-                    let parts = [];
-                    let lastIndex = 0;
-                    while ((match = regex.exec(line)) !== null) {
-                      // Push text up to the match
-                      if (match.index !== lastIndex) {
-                        parts.push(line.substring(lastIndex, match.index));
-                      }
-                      // Push div with matched text
-                      if (chat.message[match[1]]) {
-                        parts.push(
-                          <span className="chat-message-highlight">
-                            {chat.message[match[1]]}
-                          </span>
-                        );
-                      }
+                {promptOpen
+                  ? template?.split("\n")?.map((line, index) => {
+                      const regex = /{([^}]+)}/g;
+                      let match;
+                      let parts = [];
+                      let lastIndex = 0;
+                      while ((match = regex.exec(line)) !== null) {
+                        // Push text up to the match
+                        if (match.index !== lastIndex) {
+                          parts.push(line.substring(lastIndex, match.index));
+                        }
+                        // Push div with matched text
+                        if (chat.message[match[1]]) {
+                          parts.push(
+                            <span className="chat-message-highlight">
+                              {chat.message[match[1]]}
+                            </span>
+                          );
+                        }
 
-                      // Update last index
-                      lastIndex = regex.lastIndex;
-                    }
-                    // Push text after the last match
-                    if (lastIndex !== line.length) {
-                      parts.push(line.substring(lastIndex));
-                    }
-                    return <p>{parts}</p>;
-                  })}
+                        // Update last index
+                        lastIndex = regex.lastIndex;
+                      }
+                      // Push text after the last match
+                      if (lastIndex !== line.length) {
+                        parts.push(line.substring(lastIndex));
+                      }
+                      return <p>{parts}</p>;
+                    })
+                  : chat.message[chat.chatKey]}
               </span>
             </>
+          ) : (
+            <span>{chat.message[chat.chatKey]}</span>
           )}
-          <br />
-          <span>{chat.message[chat.chatKey]}</span>
         </div>
       )}
     </div>

From aba0ed40dac534c3095bd808de9eecb7d0f1dc98 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 11 Jul 2023 21:06:35 -0300
Subject: [PATCH 04/13] Edit Prompt modal and other generic modals spacing
 fixed

---
 src/frontend/src/constants.tsx                 | 2 +-
 src/frontend/src/modals/genericModal/index.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 25c0dc7d5..4a8056879 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -557,4 +557,4 @@ export const USER_PROJECTS_HEADER = "My Collection";
  *
  */
 export const HIGHLIGHT_CSS =
-  "block pl-3 pr-14 py-2 w-full h-full text-sm outline-0 border-0 break-all overflow-y-hidden max-w-[75vw]";
+  "block px-3 py-2 w-full h-full text-sm outline-0 border-0 break-all overflow-y-hidden";
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 923549e28..1b7b76a40 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -197,13 +197,13 @@ export default function GenericModal({
         <div
           className={classNames(
             !isEdit ? "rounded-lg border" : "",
-            "flex h-[55vh] w-full"
+            "mt-2 flex h-[55vh] w-full"
           )}
         >
           {type === TypeModal.PROMPT && isEdit ? (
             <Textarea
               ref={ref}
-              className="form-input h-full w-full rounded-lg border-gray-300 custom-scroll focus-visible:ring-1 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+              className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
               value={inputValue}
               onBlur={() => {
                 setIsEdit(false);
@@ -220,7 +220,7 @@ export default function GenericModal({
           ) : type !== TypeModal.PROMPT ? (
             <Textarea
               ref={ref}
-              className="form-input h-full w-full rounded-lg border-gray-300 focus-visible:ring-1 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+              className="form-input h-full w-full rounded-lg focus-visible:ring-1"
               value={inputValue}
               onChange={(e) => {
                 setInputValue(e.target.value);
@@ -234,7 +234,7 @@ export default function GenericModal({
 
         {type === TypeModal.PROMPT && (
           <>
-            <div className="sm:6/6 mr-28 mt-3 h-[60px] overflow-y-auto custom-scroll">
+            <div className="sm:6/6 mr-28 mt-3 max-h-20 overflow-y-auto custom-scroll">
               <div className="flex flex-wrap items-center">
                 <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
                 <span className="text-md font-semibold text-primary">

From 7979f3c02ede2ebf6e780355382086a0f4f91488 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 11 Jul 2023 21:08:21 -0300
Subject: [PATCH 05/13] Fixed constant not used correctly

---
 src/frontend/src/constants.tsx                 | 7 -------
 src/frontend/src/index.css                     | 3 +++
 src/frontend/src/modals/genericModal/index.tsx | 8 ++------
 3 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 4a8056879..108b6780b 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -551,10 +551,3 @@ export const NOUNS: string[] = [
  *
  */
 export const USER_PROJECTS_HEADER = "My Collection";
-/**
- * CSS for highlight HTML
- * @constant
- *
- */
-export const HIGHLIGHT_CSS =
-  "block px-3 py-2 w-full h-full text-sm outline-0 border-0 break-all overflow-y-hidden";
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 7df82c278..fd1a29552 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -929,6 +929,9 @@ The cursor: default; property value restores the browser's default cursor style
   .form-modal-lock-false {
     @apply bg-white text-primary
   }
+  .code-highlight{
+    @apply block px-3 py-2 w-full h-full text-sm outline-0 border-0 break-all overflow-y-hidden
+  }
   .form-modal-lockchat {
     @apply form-input focus:ring-ring focus:border-ring block w-full rounded-md border-border p-4 pr-16 custom-scroll sm:text-sm
   }
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 1b7b76a40..95de0a125 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -14,11 +14,7 @@ import {
   DialogTrigger,
 } from "../../components/ui/dialog";
 import { Textarea } from "../../components/ui/textarea";
-import {
-  HIGHLIGHT_CSS,
-  PROMPT_DIALOG_SUBTITLE,
-  TEXT_DIALOG_SUBTITLE,
-} from "../../constants";
+import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -119,7 +115,7 @@ export default function GenericModal({
   const TextAreaContentView = () => {
     return (
       <SanitizedHTMLWrapper
-        className={HIGHLIGHT_CSS}
+        className="code-highlight"
         content={coloredContent}
         onClick={() => {
           setIsEdit(true);

From 9ec48cbd17a08c34d83127a6573fadb0388d9b69 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 11 Jul 2023 21:33:13 -0300
Subject: [PATCH 06/13] Fixed generic modal to use baseModal and fixed
 inputVariables to show on footer

---
 .../src/modals/genericModal/index.tsx         | 256 +++++++++---------
 1 file changed, 122 insertions(+), 134 deletions(-)

diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 95de0a125..3d122066a 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -4,15 +4,7 @@ import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../components/ui/dialog";
+import { DialogTitle } from "../../components/ui/dialog";
 import { Textarea } from "../../components/ui/textarea";
 import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
@@ -28,6 +20,7 @@ import {
   regexHighlight,
   varHighlightHTML,
 } from "../../utils";
+import BaseModal from "../baseModal";
 
 export default function GenericModal({
   field_name = "",
@@ -162,133 +155,128 @@ export default function GenericModal({
   }
 
   return (
-    <Dialog open={true} onOpenChange={setModalOpen}>
-      <DialogTrigger></DialogTrigger>
-      <DialogContent className="min-w-[80vw] gap-2">
-        <DialogHeader>
-          <DialogTitle className="flex items-center">
-            <span className="pr-2">{myModalTitle}</span>
-            <FileText
-              strokeWidth={1.5}
-              className="h-6 w-6 pl-1 text-primary "
-              aria-hidden="true"
-            />
-          </DialogTitle>
-          <DialogDescription>
-            {(() => {
-              switch (myModalTitle) {
-                case "Edit Text":
-                  return TEXT_DIALOG_SUBTITLE;
+    <BaseModal open={true} setOpen={setModalOpen}>
+      <BaseModal.Header
+        description={(() => {
+          switch (myModalTitle) {
+            case "Edit Text":
+              return TEXT_DIALOG_SUBTITLE;
 
-                case "Edit Prompt":
-                  return PROMPT_DIALOG_SUBTITLE;
+            case "Edit Prompt":
+              return PROMPT_DIALOG_SUBTITLE;
 
-                default:
-                  return null;
-              }
-            })()}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div
-          className={classNames(
-            !isEdit ? "rounded-lg border" : "",
-            "mt-2 flex h-[55vh] w-full"
-          )}
-        >
-          {type === TypeModal.PROMPT && isEdit ? (
-            <Textarea
-              ref={ref}
-              className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
-              value={inputValue}
-              onBlur={() => {
-                setIsEdit(false);
-              }}
-              autoFocus
-              onChange={(e) => {
-                setInputValue(e.target.value);
-                checkVariables(e.target.value);
-              }}
-              placeholder="Type message here."
-            />
-          ) : type === TypeModal.PROMPT && !isEdit ? (
-            <TextAreaContentView />
-          ) : type !== TypeModal.PROMPT ? (
-            <Textarea
-              ref={ref}
-              className="form-input h-full w-full rounded-lg focus-visible:ring-1"
-              value={inputValue}
-              onChange={(e) => {
-                setInputValue(e.target.value);
-              }}
-              placeholder="Type message here."
-            />
-          ) : (
-            <></>
-          )}
-        </div>
-
-        {type === TypeModal.PROMPT && (
-          <>
-            <div className="sm:6/6 mr-28 mt-3 max-h-20 overflow-y-auto custom-scroll">
-              <div className="flex flex-wrap items-center">
-                <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
-                <span className="text-md font-semibold text-primary">
-                  Input Variables:
-                </span>
-
-                {wordsHighlight.map((word, index) => (
-                  <ShadTooltip
-                    key={getRandomKeyByssmm() + index}
-                    content={word.replace(/[{}]/g, "")}
-                    asChild={false}
-                  >
-                    <Badge
-                      key={index}
-                      variant="gray"
-                      size="md"
-                      className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
-                    >
-                      <div className="relative bottom-[1px]">
-                        <span>
-                          {word.replace(/[{}]/g, "").length > 59
-                            ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
-                            : word.replace(/[{}]/g, "")}
-                        </span>
-                      </div>
-                    </Badge>
-                  </ShadTooltip>
-                ))}
-              </div>
-            </div>
-          </>
-        )}
-
-        <DialogFooter>
-          <Button
-            className="mt-3"
-            onClick={() => {
-              switch (myModalType) {
-                case 1:
-                  setValue(inputValue);
-                  setModalOpen(false);
-                  break;
-                case 2:
-                  !inputValue || inputValue === ""
-                    ? setModalOpen(false)
-                    : validatePrompt(false);
-                  break;
-
-                default:
-                  break;
-              }
-            }}
-            type="submit"
+            default:
+              return null;
+          }
+        })()}
+      >
+        <DialogTitle className="flex items-center">
+          <span className="pr-2">{myModalTitle}</span>
+          <FileText
+            strokeWidth={1.5}
+            className="h-6 w-6 pl-1 text-primary "
+            aria-hidden="true"
+          />
+        </DialogTitle>
+      </BaseModal.Header>
+      <BaseModal.Content>
+        <div className="flex h-full flex-col">
+          <div
+            className={classNames(
+              !isEdit ? "rounded-lg border" : "",
+              "flex h-full w-full"
+            )}
           >
-            {myButtonText}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+            {type === TypeModal.PROMPT && isEdit ? (
+              <Textarea
+                ref={ref}
+                className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
+                value={inputValue}
+                onBlur={() => {
+                  setIsEdit(false);
+                }}
+                autoFocus
+                onChange={(e) => {
+                  setInputValue(e.target.value);
+                  checkVariables(e.target.value);
+                }}
+                placeholder="Type message here."
+              />
+            ) : type === TypeModal.PROMPT && !isEdit ? (
+              <TextAreaContentView />
+            ) : type !== TypeModal.PROMPT ? (
+              <Textarea
+                ref={ref}
+                className="form-input h-full w-full rounded-lg focus-visible:ring-1"
+                value={inputValue}
+                onChange={(e) => {
+                  setInputValue(e.target.value);
+                }}
+                placeholder="Type message here."
+              />
+            ) : (
+              <></>
+            )}
+          </div>
+
+          <div className="mt-4 flex h-fit w-full items-end justify-between">
+            {type === TypeModal.PROMPT && (
+              <div className="mb-auto mr-2 max-h-20 flex-1 overflow-y-auto custom-scroll">
+                <div className="flex flex-wrap items-center">
+                  <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
+                  <span className="text-md font-semibold text-primary">
+                    Input Variables:
+                  </span>
+
+                  {wordsHighlight.map((word, index) => (
+                    <ShadTooltip
+                      key={getRandomKeyByssmm() + index}
+                      content={word.replace(/[{}]/g, "")}
+                      asChild={false}
+                    >
+                      <Badge
+                        key={index}
+                        variant="gray"
+                        size="md"
+                        className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
+                      >
+                        <div className="relative bottom-[1px]">
+                          <span>
+                            {word.replace(/[{}]/g, "").length > 59
+                              ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
+                              : word.replace(/[{}]/g, "")}
+                          </span>
+                        </div>
+                      </Badge>
+                    </ShadTooltip>
+                  ))}
+                </div>
+              </div>
+            )}
+            <Button
+              onClick={() => {
+                switch (myModalType) {
+                  case 1:
+                    setValue(inputValue);
+                    setModalOpen(false);
+                    break;
+                  case 2:
+                    !inputValue || inputValue === ""
+                      ? setModalOpen(false)
+                      : validatePrompt(false);
+                    break;
+
+                  default:
+                    break;
+                }
+              }}
+              type="submit"
+            >
+              {myButtonText}
+            </Button>
+          </div>
+        </div>
+      </BaseModal.Content>
+    </BaseModal>
   );
 }

From 4ece1f13ff3a39b107f8ae0387354a72f92088cc Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 11 Jul 2023 21:35:31 -0300
Subject: [PATCH 07/13] Fixed button appearing at start

---
 .../src/modals/genericModal/index.tsx         | 62 ++++++++++---------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 3d122066a..93590b423 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -220,39 +220,41 @@ export default function GenericModal({
           </div>
 
           <div className="mt-4 flex h-fit w-full items-end justify-between">
-            {type === TypeModal.PROMPT && (
-              <div className="mb-auto mr-2 max-h-20 flex-1 overflow-y-auto custom-scroll">
-                <div className="flex flex-wrap items-center">
-                  <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
-                  <span className="text-md font-semibold text-primary">
-                    Input Variables:
-                  </span>
+            <div className="mb-auto flex-1">
+              {type === TypeModal.PROMPT && (
+                <div className=" mr-2 max-h-20 overflow-y-auto custom-scroll">
+                  <div className="flex flex-wrap items-center">
+                    <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
+                    <span className="text-md font-semibold text-primary">
+                      Input Variables:
+                    </span>
 
-                  {wordsHighlight.map((word, index) => (
-                    <ShadTooltip
-                      key={getRandomKeyByssmm() + index}
-                      content={word.replace(/[{}]/g, "")}
-                      asChild={false}
-                    >
-                      <Badge
-                        key={index}
-                        variant="gray"
-                        size="md"
-                        className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
+                    {wordsHighlight.map((word, index) => (
+                      <ShadTooltip
+                        key={getRandomKeyByssmm() + index}
+                        content={word.replace(/[{}]/g, "")}
+                        asChild={false}
                       >
-                        <div className="relative bottom-[1px]">
-                          <span>
-                            {word.replace(/[{}]/g, "").length > 59
-                              ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
-                              : word.replace(/[{}]/g, "")}
-                          </span>
-                        </div>
-                      </Badge>
-                    </ShadTooltip>
-                  ))}
+                        <Badge
+                          key={index}
+                          variant="gray"
+                          size="md"
+                          className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
+                        >
+                          <div className="relative bottom-[1px]">
+                            <span>
+                              {word.replace(/[{}]/g, "").length > 59
+                                ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
+                                : word.replace(/[{}]/g, "")}
+                            </span>
+                          </div>
+                        </Badge>
+                      </ShadTooltip>
+                    ))}
+                  </div>
                 </div>
-              </div>
-            )}
+              )}
+            </div>
             <Button
               onClick={() => {
                 switch (myModalType) {

From fb10a0d5f44eba8b01a13170f7313cf6fdab3846 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 11 Jul 2023 22:29:00 -0300
Subject: [PATCH 08/13] Fixed UI of Prompt Modal on Generic Modal

---
 src/frontend/src/index.css                    |  2 +-
 .../src/modals/genericModal/index.tsx         | 63 ++++++++++---------
 src/frontend/src/utils.ts                     |  6 +-
 3 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index fd1a29552..5c5e27df9 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -1084,7 +1084,7 @@ The cursor: default; property value restores the browser's default cursor style
   }
 
   .chat-message-highlight {
-    @apply my-1 rounded-md bg-indigo-100 dark:bg-indigo-900
+    @apply rounded-md bg-indigo-100 dark:bg-indigo-900
   }
 
 
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 93590b423..b2cf02fdb 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -219,39 +219,46 @@ export default function GenericModal({
             )}
           </div>
 
-          <div className="mt-4 flex h-fit w-full items-end justify-between">
+          <div className="mt-6 flex h-fit w-full items-end justify-between">
             <div className="mb-auto flex-1">
               {type === TypeModal.PROMPT && (
-                <div className=" mr-2 max-h-20 overflow-y-auto custom-scroll">
-                  <div className="flex flex-wrap items-center">
-                    <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
-                    <span className="text-md font-semibold text-primary">
-                      Input Variables:
-                    </span>
+                <div className=" mr-2">
+                  <div className="max-h-20 overflow-y-auto custom-scroll">
+                    <div className="flex flex-wrap items-center">
+                      <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
+                      <span className="text-md font-semibold text-primary">
+                        Prompt Variables:
+                      </span>
 
-                    {wordsHighlight.map((word, index) => (
-                      <ShadTooltip
-                        key={getRandomKeyByssmm() + index}
-                        content={word.replace(/[{}]/g, "")}
-                        asChild={false}
-                      >
-                        <Badge
-                          key={index}
-                          variant="gray"
-                          size="md"
-                          className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
+                      {wordsHighlight.map((word, index) => (
+                        <ShadTooltip
+                          key={getRandomKeyByssmm() + index}
+                          content={word.replace(/[{}]/g, "")}
+                          asChild={false}
                         >
-                          <div className="relative bottom-[1px]">
-                            <span>
-                              {word.replace(/[{}]/g, "").length > 59
-                                ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
-                                : word.replace(/[{}]/g, "")}
-                            </span>
-                          </div>
-                        </Badge>
-                      </ShadTooltip>
-                    ))}
+                          <Badge
+                            key={index}
+                            variant="gray"
+                            size="md"
+                            className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
+                          >
+                            <div className="relative bottom-[1px]">
+                              <span>
+                                {word.replace(/[{}]/g, "").length > 59
+                                  ? word.replace(/[{}]/g, "").slice(0, 56) +
+                                    "..."
+                                  : word.replace(/[{}]/g, "")}
+                              </span>
+                            </div>
+                          </Badge>
+                        </ShadTooltip>
+                      ))}
+                    </div>
                   </div>
+                  <span className="mt-1 text-xs text-muted-foreground">
+                    Prompt variables can be created with any chosen name inside
+                    curly brackets, e.g. {"{variable_name}"}
+                  </span>
                 </div>
               )}
             </div>
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 4983edc60..5ae191c67 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -1038,10 +1038,6 @@ export const INVALID_CHARACTERS = [
 export const regexHighlight = /\{([^}]+)\}/g;
 
 export const varHighlightHTML = ({ name }: IVarHighlightType) => {
-  const html = `<div class="inline-flex items-center justify-center rounded-md font-medium text-primary bg-muted pb-1">
-  <span class='opacity-60 pl-1'>{</span>
-  <span>${name}</span>
-  <span class='opacity-60 pr-1'>}</span>
-</div>`;
+  const html = `<span class="font-semibold chat-message-highlight">{${name}}</span>`;
   return html;
 };

From 562792938ecb52d2584adb971dcd687c3d7bbb0b Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 11 Jul 2023 22:32:19 -0300
Subject: [PATCH 09/13] Fixed notification center styling

---
 src/frontend/src/alerts/alertDropDown/index.tsx       | 2 +-
 src/frontend/src/components/headerComponent/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index cd1ed9137..c14c1806d 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -24,7 +24,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
   return (
     <div
       ref={componentRef}
-      className="z-10 flex h-[500px] w-[400px] flex-col overflow-hidden rounded-md bg-background px-2 py-3 pb-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+      className="z-10 flex h-[500px] w-[400px] flex-col overflow-hidden rounded-md bg-muted px-2 py-3 pb-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
     >
       <div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground">
         Notifications
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 895f01d79..8f8618eff 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -121,7 +121,7 @@ export default function Header() {
                 <>
                   <div
                     className="absolute z-10"
-                    style={{ top: top + 34, left: left - AlertWidth }}
+                    style={{ top: top + 40, left: left - AlertWidth }}
                   >
                     <AlertDropdown />
                   </div>

From 717c8400fe0586764b7895e3bfbd631461ab54bb Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Tue, 11 Jul 2023 22:42:35 -0300
Subject: [PATCH 10/13] change dark primary color

---
 src/frontend/src/index.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 5c5e27df9..1c1597b50 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -60,7 +60,7 @@
 
 .dark {
   --background: 224 35% 7.5%; /* hsl(224 40% 10%) */
-  --foreground: 213 31% 85%; /* hsl(213 31% 91%) */
+  --foreground: 213 31% 80%; /* hsl(213 31% 91%) */
 
   --muted: 223 27% 11%; /* hsl(223 27% 11%) */
   --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
@@ -74,13 +74,13 @@
   --border: 216 24% 17%; /* hsl(216 34% 17%) */
   --input: 216 24% 17%; /* hsl(216 34% 17%) */
 
-  --primary: 210 20% 80%; /* hsl(210 40% 98%) */
+  --primary: 210 20% 80%; /* hsl(210 20% 80%) */
   --primary-foreground: 222.2 27.4% 1.2%; /* hsl(222 47% 1%) */
 
-  --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-  --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+  --secondary: 222.2 37.4% 7.2%; /* hsl(222 47% 11%) */
+  --secondary-foreground: 210 40% 80%; /* hsl(210 40% 80%) */
 
-  --accent: 216 24% 17%; /* hsl(216 34% 17%) */
+  --accent: 216 24% 20%; /* hsl(216 34% 17%) */
   --accent-foreground: 210 30% 98%; /* hsl(210 40% 98%) */
 
   --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
@@ -91,7 +91,7 @@
   --radius: 0.5rem;
 
   --round-btn-shadow: #00000063;
-  
+
   --success-background: #022c22;
   --success-foreground: #ecfdf5;
 

From 6ba70af2b96ea49ff9d4c402f22eaac89f6b23bc Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 11 Jul 2023 22:50:12 -0300
Subject: [PATCH 11/13] added padding on highlight

---
 src/frontend/src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 5c5e27df9..d331f1660 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -1084,7 +1084,7 @@ The cursor: default; property value restores the browser's default cursor style
   }
 
   .chat-message-highlight {
-    @apply rounded-md bg-indigo-100 dark:bg-indigo-900
+    @apply px-0.5 rounded-md bg-indigo-100 dark:bg-indigo-900
   }
 
 

From fcfe927255b7af0dff33a8d112f090d30b855c24 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 11 Jul 2023 22:53:41 -0300
Subject: [PATCH 12/13] changed separator

---
 src/frontend/src/components/ui/separator.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/components/ui/separator.tsx b/src/frontend/src/components/ui/separator.tsx
index a770af987..1fa0287d8 100644
--- a/src/frontend/src/components/ui/separator.tsx
+++ b/src/frontend/src/components/ui/separator.tsx
@@ -17,7 +17,7 @@ const Separator = React.forwardRef<
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border",
+        "shrink-0 bg-ring/40",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
         className
       )}

From 3b41e189d3e603dcc68ae14d9431cbfaa945e9bb Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 11 Jul 2023 23:04:36 -0300
Subject: [PATCH 13/13] Chat behavior fixed when there is no input variables
 empty

---
 src/frontend/src/modals/formModal/index.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index e80bc6c35..45c101f3f 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -50,7 +50,7 @@ export default function FormModal({
       const handleKeys = formKeysData.handle_keys;
 
       const keyToUse = Object.keys(inputKeys).find(
-        (k) => !handleKeys.some((j) => j === k)
+        (k) => !handleKeys.some((j) => j === k) && inputKeys[k] === ""
       );
 
       return inputKeys[keyToUse];
@@ -73,7 +73,9 @@ export default function FormModal({
   const tabsStateFlowIdFormKeysData = tabsStateFlowId.formKeysData;
   const [chatKey, setChatKey] = useState(
     Object.keys(tabsState[flow.id].formKeysData.input_keys).find(
-      (k) => !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k)
+      (k) =>
+        !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k) &&
+        tabsState[flow.id].formKeysData.input_keys[k] === ""
     )
   );
 
@@ -381,6 +383,9 @@ export default function FormModal({
     if (checked === true) {
       setChatKey(i);
       setChatValue(tabsState[flow.id].formKeysData.input_keys[i]);
+    } else {
+      setChatKey(null);
+      setChatValue("");
     }
   }
   return (