From 4595d51e62364d313b52efc63b7d59c5158949d3 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 6 Jul 2023 21:38:42 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20set?=
 =?UTF-8?q?=20disabled=20prop=20to=20false=20in=20TextAreaComponent=20to?=
 =?UTF-8?q?=20enable=20editing=20=E2=9C=A8=20feat(GenericNode):=20import?=
 =?UTF-8?q?=20Zap=20icon=20from=20lucide-react=20to=20use=20in=20validatio?=
 =?UTF-8?q?n=20status=20tooltip=20=F0=9F=90=9B=20fix(textAreaComponent):?=
 =?UTF-8?q?=20import=20classNames=20from=20utils=20to=20fix=20missing=20im?=
 =?UTF-8?q?port=20error=20=F0=9F=90=9B=20fix(constants):=20update=20HIGHLI?=
 =?UTF-8?q?GH=5FCSS=20constant=20to=20add=20overflow-y-hidden=20and=20max-?=
 =?UTF-8?q?w-[75vw]=20classes=20=F0=9F=90=9B=20fix(ApiModal):=20add=20cond?=
 =?UTF-8?q?ition=20to=20check=20if=20tweak.current=20exists=20before=20cal?=
 =?UTF-8?q?ling=20startTweaks()=20=E2=9C=A8=20feat(ApiModal):=20import=20V?=
 =?UTF-8?q?ariable=20icon=20from=20lucide-react=20to=20use=20in=20input=20?=
 =?UTF-8?q?variables=20section=20=F0=9F=90=9B=20fix(genericModal):=20impor?=
 =?UTF-8?q?t=20Variable=20icon=20from=20lucide-react=20to=20use=20in=20inp?=
 =?UTF-8?q?ut=20variables=20section=20=F0=9F=90=9B=20fix(utils):=20add=20n?=
 =?UTF-8?q?ewline=20character=20to=20INVALID=5FCHARACTERS=20array=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(tailwind.config.js):=20set=20height=20proper?=
 =?UTF-8?q?ty=20to=20"8px"=20for=20scrollbar=20in=20custom-scroll=20class?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/parameterComponent/index.tsx   |  2 +-
 .../src/CustomNodes/GenericNode/index.tsx     |  4 +-
 .../components/textAreaComponent/index.tsx    | 42 ++++-------
 src/frontend/src/constants.tsx                |  2 +-
 src/frontend/src/modals/ApiModal/index.tsx    |  6 +-
 .../src/modals/genericModal/index.tsx         | 75 ++++++++++---------
 src/frontend/src/utils.ts                     |  1 +
 src/frontend/tailwind.config.js               |  1 +
 8 files changed, 68 insertions(+), 65 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 56c65354d..8e22eafac 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -222,7 +222,7 @@ export default function ParameterComponent({
               />
             ) : data.node.template[name].multiline ? (
               <TextAreaComponent
-                disabled={disabled}
+                disabled={false}
                 value={data.node.template[name].value ?? ""}
                 onChange={handleOnNewValue}
               />
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index c2226a126..56d574920 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -16,6 +16,7 @@ import { NodeToolbar } from "reactflow";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { useSSE } from "../../contexts/SSEContext";
+import { Zap } from "lucide-react";
 
 export default function GenericNode({
   data,
@@ -117,7 +118,8 @@ export default function GenericNode({
               <Tooltip
                 title={
                   !validationStatus ? (
-                    "Validating..."
+                      <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/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index c62af4b30..dc6f92cd2 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
-import { TypeModal } from "../../utils";
+import { TypeModal, classNames } from "../../utils";
 
 import { ExternalLink } from "lucide-react";
 
@@ -30,34 +30,24 @@ export default function TextAreaComponent({
     <div className={disabled ? "cursor-not-allowed" : ""}>
       <div
         className={
-          (editNode ? "w-full items-center" : "flex w-full items-center") +
+          (editNode ? "w-full relative top-2" : "flex w-full items-center") +
           (disabled ? " pointer-events-none" : "")
         }
       >
-        <span
-          onClick={() => {
-            openPopUp(
-              <GenericModal
-                type={TypeModal.TEXT}
-                buttonText="Finishing Editing"
-                modalTitle="Edit Text"
-                value={myValue}
-                setValue={(t: string) => {
-                  setMyValue(t);
-                  onChange(t);
-                }}
-              />
-            );
-          }}
-          className={
-            editNode
-              ? "input-edit-node input-dialog "
-              : "input-dialog input-primary " +
-                (disabled ? "input-disable" : "")
-          }
-        >
-          {myValue !== "" ? myValue : "Type something..."}
-        </span>
+
+        <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);
+        }}
+      />
 
         <button
           onClick={() => {
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 56adef9de..ca8220e94 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -529,4 +529,4 @@ export const USER_PROJECTS_HEADER = "My Collection";
  *
  */
 export const HIGHLIGH_CSS =
-  "block pl-3 pr-14 py-2 w-full h-full text-sm outline-0 border-0 break-all";
+  "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]";
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index b37f6fe40..81e7b0e61 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -111,7 +111,9 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
         startTweaks();
       }
     } else {
-      startTweaks();
+      if(tweak?.current){
+        startTweaks();
+      }
     }
   }, [closeEdit]);
 
@@ -313,7 +315,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
             >
               {index < 3 ? (
                 <SyntaxHighlighter
-                  className="h-[60vh] w-full overflow-auto"
+                  className="h-[60vh] w-full overflow-auto custom-scroll"
                   language={tab.mode}
                   style={oneDark}
                 >
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 3367c956b..b709f5426 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -39,6 +39,7 @@ import {
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { set } from "lodash";
 import DOMPurify from "dompurify";
+import { Variable } from "lucide-react";
 
 export default function GenericModal({
   field_name = "",
@@ -206,39 +207,6 @@ export default function GenericModal({
           </DialogDescription>
         </DialogHeader>
 
-        {type == TypeModal.PROMPT &&
-          inputValue &&
-          inputValue != "" &&
-          wordsHighlight.length > 0 && (
-            <>
-              <div>
-                <span className="">Variables: </span>
-                {wordsHighlight.map((word, index) => (
-                  <ShadTooltip
-                    key={getRandomKeyByssmm() + index}
-                    content={word.replace(/[{}]/g, "")}
-                    asChild={false}
-                    delayDuration={1500}
-                  >
-                    <Badge
-                      key={index}
-                      size="lg"
-                      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
           className={classNames(
             !isEdit ? "rounded-lg border" : "",
@@ -248,7 +216,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"
+              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"
               value={inputValue}
               onBlur={() => {
                 blur();
@@ -278,6 +246,45 @@ export default function GenericModal({
           )}
         </div>
 
+        
+        {type == TypeModal.PROMPT && (
+            <>
+              <div className="">
+              <div className="items-center flex flex-wrap">
+                <Variable className=" -ml-px mr-1 h-4 w-4 text-primary flex"></Variable>
+                <span className="text-md font-semibold text-primary">
+                  Input Variables: {wordsHighlight &&
+          wordsHighlight.length == 0 ? '-' : ''}
+                </span>
+
+                {wordsHighlight.map((word, index) => (
+                  <ShadTooltip
+                    key={getRandomKeyByssmm() + index}
+                    content={word.replace(/[{}]/g, "")}
+                    asChild={false}
+                    delayDuration={1500}
+                  >
+                    <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"
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 09d12c75d..525914256 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -1022,6 +1022,7 @@ export const INVALID_CHARACTERS = [
   ")",
   "[",
   "]",
+  "\n"
 ];
 
 export const regexHighlight = /\{([^}]+)\}/g;
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 8f49e9a4f..df7bc87ac 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -199,6 +199,7 @@ module.exports = {
         ".custom-scroll": {
           "&::-webkit-scrollbar": {
             width: "8px",
+            height: "8px"
           },
           "&::-webkit-scrollbar-track": {
             backgroundColor: "#f1f1f1",