🐛 fix(parameterComponent): use strict equality operator (===) instead of loose equality operator (==) for item.type comparison to improve code quality and avoid potential bugs

🐛 fix(parameterComponent): update style prop value in ShadTooltip component to use class names 'tooltip-fixed-width' and 'custom-scroll' for consistent styling and better readability
🐛 fix(parameterComponent): update disabled prop value in TextAreaComponent to use the disabled variable passed as a prop for consistency and better code organization
🐛 fix(AccordionComponent): use strict equality operator (===) instead of loose equality operator (==) for open.length comparison to improve code quality and avoid potential bugs
🐛 fix(codeAreaComponent): remove unnecessary space in className prop value to improve code readability
🐛 fix(codeAreaComponent): remove unnecessary space in className prop value to improve code readability
🐛 fix(codeAreaComponent): remove unnecessary space in className prop value to improve code readability
🐛 fix(codeAreaComponent): remove unnecessary space in className prop value to improve code readability
🐛 fix(inputFileComponent): remove unnecessary space in className prop value to improve code readability
🐛 fix(inputFileComponent): remove unnecessary space in className prop value to improve code readability
🐛 fix(inputFileComponent): remove unnecessary space in className prop value to improve code readability
🐛 fix(inputFileComponent): remove unnecessary space in className prop value to improve code readability
🐛 fix(intComponent): remove unnecessary space in className prop value to improve code readability
🐛 fix(intComponent): remove unnecessary space in className prop value to improve code readability
🐛 fix(promptComponent): add missing dependencies to useEffect dependency array to avoid potential bugs and improve code quality
🐛 fix(promptComponent): remove unnecessary space in className prop value to improve code readability
🐛 fix(textAreaComponent): remove unnecessary space in className prop value to improve code readability
🐛 fix(textAreaComponent): remove unnecessary space in className prop value to improve code readability
🐛 fix(tabsContext): change getTweak initial state from an object to an empty array to match the expected type and avoid potential bugs
🐛 fix(ApiModal): add missing curly braces around the buildTweaks function call to ensure the correct value is pushed to the tweak.current array

🐛 fix(EditNodeModal): remove unnecessary 'save' variable from useContext destructuring
🐛 fix(chatMessage): use strict equality operator (===) instead of loose equality operator (==) for comparison
🐛 fix(chatModal): use strict equality operator (===) instead of loose equality operator (==) for comparison
🐛 fix(codeAreaModal): add 'setCloseEdit' to useContext destructuring and add 'setModalOpen' function
🐛 fix(chatInput): use strict equality operator (===) instead of loose equality operator (==) for comparison
🐛 fix(chatMessage): use strict equality operator (===) instead of loose equality operator (==) for comparison
🐛 fix(formModal): use strict equality operator (===) instead of loose equality operator (==) for comparison
🐛 fix(formModal): use strict equality operator (===) instead of loose equality operator (==) for comparison
🐛 fix(formModal): use strict equality operator (===) instead of loose equality operator (==) for comparison
🐛 fix(formModal): use strict equality operator (===) instead of loose equality operator (==) for comparison
🐛 fix(genericModal): use strict equality operator (===) instead of loose equality operator (==) for comparison
🐛 fix(flow): add missing newline at the end of the file
🐛 fix(tabs): add missing import for TweaksType from flow

🐛 fix(utils.ts): change comparison operator from '==' to '===' for better type safety and strict equality check

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -122,7 +122,7 @@ export default function ParameterComponent({
             {nodeNames[item.family] ?? ""}{" "}
             <span className="text-xs">
               {" "}
-              {item.type == "" ? "" : " - "}
+              {item.type === "" ? "" : " - "}
               {item.type.split(", ").length > 2
                 ? item.type.split(", ").map((el, i) => (
                     <React.Fragment key={el + i}>
@@ -176,7 +176,7 @@ export default function ParameterComponent({
           <></>
         ) : (
           <ShadTooltip
-            style="max-w-[30vw] max-h-[20vh] overflow-auto custom-scroll"
+            style="tooltip-fixed-width custom-scroll"
             delayDuration={0}
             content={refHtml.current}
             side={left ? "left" : "right"}
@@ -217,7 +217,7 @@ export default function ParameterComponent({
               />
             ) : data.node.template[name].multiline ? (
               <TextAreaComponent
-                disabled={false}
+                disabled={disabled}
                 value={data.node.template[name].value ?? ""}
                 onChange={handleOnNewValue}
               />

src/frontend/src/components/AccordionComponent/index.tsx

@@ -13,7 +13,7 @@ export default function AccordionComponent({
   open = [],
 }: AccordionComponentType) {
   const [value, setValue] = useState(
-    open.length == 0 ? "" : getOpenAccordion()
+    open.length === 0 ? "" : getOpenAccordion()
   );
 
   function getOpenAccordion() {

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -27,15 +27,10 @@ export default function CodeAreaComponent({
   useEffect(() => {
     setMyValue(typeof value == "string" ? value : JSON.stringify(value));
   }, [value]);
+  
 
   return (
-    <div className={disabled ? "cursor-not-allowed" : ""}>
+      <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
-      <div
-        className={
-          (editNode ? "w-full items-center" : "flex w-full items-center") +
-          (disabled ? " pointer-events-none" : "")
-        }
-      >
         <div className="flex w-full items-center">
           <span
             onClick={() => {
@@ -53,9 +48,8 @@ export default function CodeAreaComponent({
             }}
             className={
               editNode
-                ? "input-edit-node input-dialog "
+                ? "input-edit-node"
-                : "input-dialog input-primary " +
+                : "input-primary text-muted-foreground" + (disabled ? " input-disable" : "")
-                  (disabled ? "input-disable" : "")
             }
           >
             {myValue !== "" ? myValue : "Type something..."}
@@ -87,6 +81,5 @@ export default function CodeAreaComponent({
           </button>
         </div>
       </div>
-    </div>
   );
 }

src/frontend/src/components/inputFileComponent/index.tsx

@@ -98,10 +98,8 @@ export default function InputFileComponent({
           onClick={handleButtonClick}
           className={
             editNode
-              ? " input-edit-node " + " input-dialog "
+              ? "input-edit-node input-dialog text-muted-foreground"
-              : (disabled ? " input-disable " : "") +
+              : (disabled ? "input-disable input-primary input-dialog" : "input-primary input-dialog text-muted-foreground") 
-                " input-primary " +
-                " input-dialog "
           }
         >
           {myValue !== "" ? myValue : "No file"}

src/frontend/src/components/intComponent/index.tsx

@@ -30,7 +30,7 @@ export default function IntComponent({
     <div
       className={
         "w-full " +
-        (disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full")
+        (disabled ? "pointer-events-none w-full cursor-not-allowed" : "")
       }
     >
       <input
@@ -70,7 +70,7 @@ export default function IntComponent({
         className={
           editNode
             ? " input-edit-node "
-            : " input-primary " + (disabled ? " input-disable " : "")
+            : " input-primary " + (disabled ? " input-disable" : "")
         }
         placeholder={editNode ? "Integer number" : "Type an integer number"}
         onChange={(e) => {

src/frontend/src/components/promptComponent/index.tsx

@@ -44,7 +44,7 @@ export default function PromptAreaComponent({
         })
         .catch((error) => {});
     }
-  }, [reactFlowInstance, field_name]);
+  }, [reactFlowInstance, field_name, myValue, nodeClass, setNodeClass]);
 
   return (
     <div className={disabled ? "cursor-not-allowed" : ""}>
@@ -69,10 +69,9 @@ export default function PromptAreaComponent({
             }}
             className={
               editNode
-                ? " input-edit-node " + " input-dialog "
+                ? "input-edit-node input-dialog"
                 : (disabled ? " input-disable " : "") +
-                  " input-primary " +
+                  " input-primary input-dialog"
-                  " input-dialog "
             }
           >
             {myValue !== "" ? myValue : "Type your prompt here"}

src/frontend/src/components/textAreaComponent/index.tsx

@@ -27,13 +27,8 @@ export default function TextAreaComponent({
   }, [closePopUp]);
 
   return (
-    <div className={disabled ? "cursor-not-allowed" : ""}>
+      <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
-      <div
+        <div className="flex w-full items-center">
-        className={
-          (editNode ? "relative top-2 w-full" : "flex w-full items-center") +
-          (disabled ? " pointer-events-none" : "")
-        }
-      >
         <input
           value={myValue}
           className={
@@ -46,6 +41,7 @@ export default function TextAreaComponent({
             setMyValue(e.target.value);
             onChange(e.target.value);
           }}
+
         />
 
         <button

src/frontend/src/contexts/tabsContext.tsx

@@ -54,7 +54,7 @@ const TabsContextInitialValue: TabsContextType = {
   setTabsState: (state: TabsState) => {},
   getNodeId: (nodeType: string) => "",
   setTweak: (tweak: any) => {},
-  getTweak: {},
+  getTweak: [],
   paste: (
     selection: { nodes: any; edges: any },
     position: { x: number; y: number; paneX?: number; paneY?: number }
@@ -75,7 +75,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   const { templates, reactFlowInstance } = useContext(typesContext);
   const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
   const [tabsState, setTabsState] = useState<TabsState>({});
-  const [getTweak, setTweak] = useState({});
+  const [getTweak, setTweak] = useState([]);
 
   const newNodeId = useRef(uid());
   function incrementNodeId() {

src/frontend/src/index.css

@@ -205,6 +205,7 @@ The cursor: default; property value restores the browser's default cursor style
   .input-primary {
     @apply bg-background block border-ring form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full;
   }
+
   .input-edit-node{
     @apply input-primary placeholder:text-center pt-0.5 pb-0.5 text-center
   }
@@ -212,7 +213,7 @@ The cursor: default; property value restores the browser's default cursor style
     @apply input-primary pr-7 mx-2
   }
   .input-disable{
-    @apply bg-input
+    @apply bg-input text-muted-foreground
   }
   .input-dialog{
     @apply text-ring cursor-pointer bg-transparent
@@ -1049,5 +1050,8 @@ The cursor: default; property value restores the browser's default cursor style
     @apply relative w-full rounded-md shadow-sm
   }
 
+  .tooltip-fixed-width{
+    @apply max-w-[30vw] max-h-[20vh] overflow-auto
+  }
 
 }

src/frontend/src/modals/ApiModal/index.tsx

@@ -142,7 +142,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   }
 
   function startTweaks() {
-    tweak?.current?.push(buildTweaks(flow));
+    const t = buildTweaks(flow);
+      tweak?.current?.push(t);
   }
 
   function filterNodes() {
@@ -266,7 +267,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="h-[80vh] lg:max-w-[80vw]">
+      <DialogContent className="h-[80vh] md:max-w-[80vw]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
@@ -382,10 +383,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                             key={i}
                                             className="h-10 dark:border-b-muted"
                                           >
-                                            <TableCell className="p-0 text-center text-sm text-gray-900">
+                                            <TableCell className="p-0 text-center text-sm text-foreground">
                                               {n}
                                             </TableCell>
-                                            <TableCell className="p-0 text-center text-xs text-gray-900 dark:text-gray-300">
+                                            <TableCell className="p-0 text-xs text-foreground">
                                               <div className="m-auto w-[250px]">
                                                 {t.data.node.template[n]
                                                   .type === "str" &&

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -55,7 +55,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   const { closePopUp } = useContext(PopUpContext);
   const { types } = useContext(typesContext);
   const ref = useRef();
-  const { setTabsState, tabId, save } = useContext(TabsContext);
+  const { setTabsState, tabId } = useContext(TabsContext);
   const { reactFlowInstance } = useContext(typesContext);
 
   let disabled =

src/frontend/src/modals/chatModal/chatMessage/index.tsx

@@ -86,7 +86,7 @@ export default function ChatMessage({
                     components={{
                       code({ node, inline, className, children, ...props }) {
                         if (children.length) {
-                          if (children[0] == "▍") {
+                          if (children[0] === "▍") {
                             return (
                               <span className="chat-message-modal-markdown-span">
                                 ▍

src/frontend/src/modals/chatModal/index.tsx

@@ -374,7 +374,7 @@ export default function ChatModal({
                       <ChatMessage
                         lockChat={lockChat}
                         chat={c}
-                        lastMessage={chatHistory.length - 1 == i ? true : false}
+                        lastMessage={chatHistory.length - 1 === i ? true : false}
                         key={i}
                       />
                     ))

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -31,7 +31,7 @@ export default function CodeAreaModal({
   const [code, setCode] = useState(value);
   const [loading, setLoading] = useState(false);
   const { dark } = useContext(darkContext);
-  const { closePopUp } = useContext(PopUpContext);
+  const { closePopUp, setCloseEdit } = useContext(PopUpContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const [error, setError] = useState<{
     detail: { error: string; traceback: string };
@@ -41,6 +41,13 @@ export default function CodeAreaModal({
     setValue(code);
   }, [code, setValue]);
 
+  function setModalOpen(x: boolean) {
+    if (x === false) {
+      setCloseEdit("codearea");
+      closePopUp();
+    }
+  }
+
   function handleClick() {
     setLoading(true);
     postValidateCode(code)
@@ -55,6 +62,7 @@ export default function CodeAreaModal({
             });
             setValue(code);
             setOpen((old) => !old);
+            setModalOpen(false);
           } else {
             if (funcErrors.length !== 0) {
               setErrorData({

src/frontend/src/modals/formModal/chatInput/index.tsx

@@ -57,7 +57,7 @@ export default function ChatInput({
         <button
           className={classNames(
             "form-modal-send-button",
-            chatValue == "" ? "text-primary" : " bg-indigo-600 text-background"
+            chatValue === "" ? "text-primary" : " bg-indigo-600 text-background"
           )}
           disabled={lockChat}
           onClick={() => sendMessage()}

src/frontend/src/modals/formModal/chatMessage/index.tsx

@@ -34,13 +34,13 @@ export default function ChatMessage({
         {!chat.isSend ? (
           <div className="form-modal-chat-image">
             <div className="form-modal-chat-bot-icon ">
-              <img src={Robot} className="form-modal-chat-icon-img" />
+              <img src={Robot} className="form-modal-chat-icon-img" alt="robot_image"/>
             </div>
           </div>
         ) : (
           <div className="form-modal-chat-image">
             <div className="form-modal-chat-user-icon ">
-              <img src={MaleTechnology} className="form-modal-chat-icon-img" />
+              <img src={MaleTechnology} className="form-modal-chat-icon-img" alt="male_technology"/>
             </div>
           </div>
         )}
@@ -75,7 +75,7 @@ export default function ChatMessage({
                     components={{
                       code({ node, inline, className, children, ...props }) {
                         if (children.length) {
-                          if (children[0] == "▍") {
+                          if (children[0] === "▍") {
                             return (
                               <span className="form-modal-markdown-span">
                                 ▍

src/frontend/src/modals/formModal/index.tsx

@@ -63,12 +63,14 @@ export default function FormModal({
 
   const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
   const { reactFlowInstance } = useContext(typesContext);
-  const { setErrorData, setNoticeData } = useContext(alertContext);
+  const { setErrorData } = useContext(alertContext);
   const ws = useRef<WebSocket | null>(null);
   const [lockChat, setLockChat] = useState(false);
   const isOpen = useRef(open);
   const messagesRef = useRef(null);
   const id = useRef(flow.id);
+  const tabsStateFlowId = tabsState[flow.id];
+  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)
@@ -86,7 +88,7 @@ export default function FormModal({
   }, [open]);
   useEffect(() => {
     id.current = flow.id;
-  }, [flow.id, tabsState[flow.id], tabsState[flow.id].formKeysData]);
+  }, [flow.id, tabsStateFlowId, tabsStateFlowIdFormKeysData]);
 
   var isStream = false;
 
@@ -515,7 +517,7 @@ export default function FormModal({
                       <ChatMessage
                         lockChat={lockChat}
                         chat={c}
-                        lastMessage={chatHistory.length - 1 == i ? true : false}
+                        lastMessage={chatHistory.length - 1 === i ? true : false}
                         key={i}
                       />
                     ))

src/frontend/src/modals/genericModal/index.tsx

@@ -202,13 +202,12 @@ export default function GenericModal({
             "flex h-[55vh] w-full"
           )}
         >
-          {type == TypeModal.PROMPT && isEdit ? (
+          {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"
               value={inputValue}
               onBlur={() => {
-                blur();
                 setIsEdit(false);
               }}
               autoFocus
@@ -218,9 +217,9 @@ export default function GenericModal({
               }}
               placeholder="Type message here."
             />
-          ) : type == TypeModal.PROMPT && !isEdit ? (
+          ) : type === TypeModal.PROMPT && !isEdit ? (
             <TextAreaContentView />
-          ) : type != TypeModal.PROMPT ? (
+          ) : 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"
@@ -235,7 +234,7 @@ export default function GenericModal({
           )}
         </div>
 
-        {type == TypeModal.PROMPT && (
+        {type === TypeModal.PROMPT && (
           <>
             <div className="sm:6/6 mr-28 mt-3 h-[60px] overflow-y-auto custom-scroll">
               <div className="flex flex-wrap items-center">
@@ -281,7 +280,7 @@ export default function GenericModal({
                   setModalOpen(false);
                   break;
                 case 2:
-                  !inputValue || inputValue == ""
+                  !inputValue || inputValue === ""
                     ? setModalOpen(false)
                     : validatePrompt(false);
                   break;

src/frontend/src/types/flow/index.ts

@@ -27,3 +27,12 @@ export type FlowStyleType = {
   color: string;
   flow_id: string;
 };
+
+
+export type TweaksType = Array<
+  {
+    [key: string]: {
+      output_key?: string;
+    };
+  } & FlowStyleType
+>;

src/frontend/src/types/tabs/index.ts

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from "react";
-import { FlowType } from "../flow";
+import { FlowType, TweaksType } from "../flow";
 
 export type TabsContextType = {
   saveFlow: (flow: FlowType) => Promise<void>;
@@ -32,8 +32,8 @@ export type TabsContextType = {
   ) => void;
   lastCopiedSelection: { nodes: any; edges: any };
   setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;
-  setTweak: (tweak: any) => void;
+  setTweak: (tweak: TweaksType) => void;
-  getTweak: any;
+  getTweak: TweaksType[];
 };
 
 export type TabsState = {

src/frontend/src/utils.ts

@@ -843,7 +843,7 @@ export function groupByFamily(data, baseClasses, left, type) {
     });
   });
 
-  if (left == false) {
+  if (left === false) {
     let groupedBy = arrOfType.filter((object, index, self) => {
       const foundIndex = self.findIndex(
         (o) => o.family === object.family && o.type === object.type
@@ -866,7 +866,7 @@ export function groupByFamily(data, baseClasses, left, type) {
         });
       }
 
-      if (left == false) {
+      if (left === false) {
         let resFil = result.filter((group) => group.family === parentOutput);
         result = resFil;
       }
@@ -893,8 +893,8 @@ export function groupByFamily(data, baseClasses, left, type) {
     }
 
     groupedArray.forEach((object, index, self) => {
-      const findObj = arrOfLength.find((x) => x.type == object.family);
+      const findObj = arrOfLength.find((x) => x.type === object.family);
-      if (object.component.length == findObj.length) {
+      if (object.component.length === findObj.length) {
         self[index]["type"] = "";
       } else {
         self[index]["type"] = object.component.join(", ");