From 07276523a350878b91ff009d0187addb4804c9e4 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 7 Jul 2023 11:35:50 -0300
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B=20fix(chatMessage/index.tsx):?=
 =?UTF-8?q?=20remove=20unnecessary=20div=20wrapper=20around=20matched=20te?=
 =?UTF-8?q?xt=20in=20AccordionContent=20=F0=9F=94=A8=20refactor(chatMessag?=
 =?UTF-8?q?e/index.tsx):=20simplify=20rendering=20of=20matched=20text=20in?=
 =?UTF-8?q?=20AccordionContent=20by=20using=20a=20span=20instead=20of=20a?=
 =?UTF-8?q?=20div=20=F0=9F=94=A8=20refactor(chatMessage/index.tsx):=20remo?=
 =?UTF-8?q?ve=20unnecessary=20div=20wrapper=20around=20chat.message[chat.c?=
 =?UTF-8?q?hatKey]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modals/formModal/chatMessage/index.tsx    | 36 ++++++++-----------
 1 file changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 722365e0c..499a7bee1 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -138,15 +138,15 @@ export default function ChatMessage({
         <div className="flex w-full items-center">
           <div className="inline-block text-start">
             <span className=" break-all text-primary">
-              <Accordion type="single" collapsible className="mb-4">
+              <Accordion type="single" collapsible className="mb-2 flex">
                 <AccordionItem
                   className=" rounded-md border border-ring/60 bg-muted px-4"
                   value="prompt"
                 >
-                  <AccordionTrigger className="flex gap-4 text-base font-semibold">
+                  <AccordionTrigger className="gap-4 text-base font-semibold">
                     Initial Prompt
                   </AccordionTrigger>
-                  <AccordionContent className="max-h-96 overflow-auto break-all p-2 text-base">
+                  <AccordionContent className="max-h-96 overflow-auto break-all p-2">
                     {
                       // Make all the variables that are inside curly braces bold
                       template.split("\n").map((line, index) => {
@@ -160,24 +160,14 @@ export default function ChatMessage({
                             parts.push(line.substring(lastIndex, match.index));
                           }
                           // Push div with matched text
-                          parts.push(
-                            <div>
-                              <div className="my-1 inline-block rounded-md bg-indigo-100 px-2">
-                                <span key={match.index}>
-                                  <span className=" text-xs font-semibold text-high-indigo">
-                                    {match[1]}
-                                  </span>
-                                  {chat.message[match[1]] ? (
-                                    <span>
-                                      &nbsp;&nbsp;{chat.message[match[1]]}
-                                    </span>
-                                  ) : (
-                                    ""
-                                  )}
-                                </span>
-                              </div>
-                            </div>
-                          );
+                          if (chat.message[match[1]]) {
+                            parts.push(
+                              <span className="my-1 rounded-md bg-indigo-100">
+                                {chat.message[match[1]]}
+                              </span>
+                            );
+                          }
+
                           // Update last index
                           lastIndex = regex.lastIndex;
                         }
@@ -191,7 +181,9 @@ export default function ChatMessage({
                   </AccordionContent>
                 </AccordionItem>
               </Accordion>
-              {chat.message[chat.chatKey]}
+              <span className="prose text-primary dark:prose-invert">
+                {chat.message[chat.chatKey]}
+              </span>
             </span>
           </div>
         </div>

From 3842b9090796e6e62df4e4f79312eebac9030158 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 7 Jul 2023 11:36:34 -0300
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9B=20fix(GenericNode):=20improve?=
 =?UTF-8?q?=20readability=20of=20tooltip=20title=20by=20formatting=20the?=
 =?UTF-8?q?=20JSX=20code=20=F0=9F=90=9B=20fix(inputFileComponent):=20fix?=
 =?UTF-8?q?=20class=20order=20in=20className=20to=20ensure=20proper=20styl?=
 =?UTF-8?q?ing=20=F0=9F=90=9B=20fix(textAreaComponent):=20fix=20class=20or?=
 =?UTF-8?q?der=20in=20className=20to=20ensure=20proper=20styling=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(API):=20remove=20trailing=20whitespace=20at?=
 =?UTF-8?q?=20the=20end=20of=20the=20file=20=F0=9F=90=9B=20fix(ApiModal):?=
 =?UTF-8?q?=20add=20missing=20space=20before=20if=20statement=20condition?=
 =?UTF-8?q?=20=F0=9F=90=9B=20fix(genericModal):=20remove=20unnecessary=20w?=
 =?UTF-8?q?hitespace=20and=20fix=20class=20order=20in=20className=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(utils):=20add=20missing=20comma=20in=20INVAL?=
 =?UTF-8?q?ID=5FCHARACTERS=20array=20=F0=9F=90=9B=20fix(tailwind.config.js?=
 =?UTF-8?q?):=20add=20missing=20comma=20in=20custom-scroll=20CSS=20rule?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/CustomNodes/GenericNode/index.tsx     | 10 +++++--
 .../components/inputFileComponent/index.tsx   |  2 +-
 .../components/textAreaComponent/index.tsx    | 27 +++++++++----------
 src/frontend/src/controllers/API/index.ts     |  2 +-
 src/frontend/src/modals/ApiModal/index.tsx    |  2 +-
 .../src/modals/genericModal/index.tsx         | 27 +++++++++----------
 src/frontend/src/utils.ts                     |  2 +-
 src/frontend/tailwind.config.js               |  2 +-
 8 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 56d574920..0567580e3 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -118,8 +118,14 @@ export default function GenericNode({
               <Tooltip
                 title={
                   !validationStatus ? (
-                      <span className="flex">Build <Zap className="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1" strokeWidth={1.5} /> flow to validate status.</span>
-                    
+                    <span className="flex">
+                      Build{" "}
+                      <Zap
+                        className="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
+                        strokeWidth={1.5}
+                      />{" "}
+                      flow to validate status.
+                    </span>
                   ) : (
                     <div className="max-h-96 overflow-auto">
                       {validationStatus.params
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 99f066aff..f1919f220 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -112,7 +112,7 @@ export default function InputFileComponent({
           {!editNode && !loading && (
             <FileSearch2
               strokeWidth={1.5}
-              className="h-6 w-6 hover:text-accent-foreground ml-3"
+              className="ml-3 h-6 w-6 hover:text-accent-foreground"
             />
           )}
           {!editNode && loading && (
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index dc6f92cd2..c7c7f5e80 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -30,24 +30,23 @@ export default function TextAreaComponent({
     <div className={disabled ? "cursor-not-allowed" : ""}>
       <div
         className={
-          (editNode ? "w-full relative top-2" : "flex w-full items-center") +
+          (editNode ? "relative top-2 w-full" : "flex w-full items-center") +
           (disabled ? " pointer-events-none" : "")
         }
       >
-
         <input
-        value={myValue}
-        className={
-          editNode
-            ? "input-edit-node"
-            : "input-primary" + (disabled ? " input-disable " : "")
-        }
-        placeholder={"Type something..."}
-        onChange={(e) => {
-          setMyValue(e.target.value);
-          onChange(e.target.value);
-        }}
-      />
+          value={myValue}
+          className={
+            editNode
+              ? "input-edit-node"
+              : "input-primary" + (disabled ? " input-disable " : "")
+          }
+          placeholder={"Type something..."}
+          onChange={(e) => {
+            setMyValue(e.target.value);
+            onChange(e.target.value);
+          }}
+        />
 
         <button
           onClick={() => {
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 165ce843c..72204ee68 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -338,4 +338,4 @@ export async function uploadFile(
   const formData = new FormData();
   formData.append("file", file);
   return await axios.post(`/api/v1/upload/${id}`, formData);
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 81e7b0e61..8cc9c73df 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -111,7 +111,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
         startTweaks();
       }
     } else {
-      if(tweak?.current){
+      if (tweak?.current) {
         startTweaks();
       }
     }
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 47e32ca3d..826ccf310 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -206,7 +206,7 @@ export default function GenericModal({
           {type == TypeModal.PROMPT && isEdit ? (
             <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 custom-scroll"
+              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"
               value={inputValue}
               onBlur={() => {
                 blur();
@@ -236,15 +236,14 @@ export default function GenericModal({
           )}
         </div>
 
-        
         {type == TypeModal.PROMPT && (
-            <>
-              <div className="h-[6vh] overflow-y-auto custom-scroll">
-              <div className="items-center flex flex-wrap">
-                <Variable className=" -ml-px mr-1 h-4 w-4 text-primary flex"></Variable>
+          <>
+            <div className="h-[6vh] 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: {wordsHighlight &&
-          wordsHighlight.length == 0 ? '-' : ''}
+                  Input Variables:{" "}
+                  {wordsHighlight && wordsHighlight.length == 0 ? "-" : ""}
                 </span>
 
                 {wordsHighlight.map((word, index) => (
@@ -256,7 +255,8 @@ export default function GenericModal({
                   >
                     <Badge
                       key={index}
-                      variant="gray" size="md"
+                      variant="gray"
+                      size="md"
                       className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
                     >
                       <div className="relative bottom-[1px]">
@@ -269,11 +269,10 @@ export default function GenericModal({
                     </Badge>
                   </ShadTooltip>
                 ))}
-
               </div>
-              </div>
-            </>
-          )}
+            </div>
+          </>
+        )}
 
         <DialogFooter>
           <Button
@@ -282,7 +281,7 @@ export default function GenericModal({
               switch (myModalType) {
                 case 1:
                   setValue(inputValue);
-                    setModalOpen(false);
+                  setModalOpen(false);
                   break;
                 case 2:
                   validatePrompt(false);
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 525914256..7db5628bf 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -1022,7 +1022,7 @@ export const INVALID_CHARACTERS = [
   ")",
   "[",
   "]",
-  "\n"
+  "\n",
 ];
 
 export const regexHighlight = /\{([^}]+)\}/g;
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index df7bc87ac..b3d296560 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -199,7 +199,7 @@ module.exports = {
         ".custom-scroll": {
           "&::-webkit-scrollbar": {
             width: "8px",
-            height: "8px"
+            height: "8px",
           },
           "&::-webkit-scrollbar-track": {
             backgroundColor: "#f1f1f1",