🔧 fix(ApiModal): import ReactNode from react to fix missing type error

✨ feat(ApiModal): add BaseModal component as a wrapper for the modal to improve code organization and reusability
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop

🐛 fix(extraSidebarComponent): remove unnecessary onClick event handlers for Export and Code buttons
✨ feat(extraSidebarComponent): wrap Export and Code buttons with ExportModal and ApiModal components respectively to handle click events and display modals
🐛 fix(nodeToolbarComponent): remove unnecessary onClick event handler for Edit button
✨ feat(nodeToolbarComponent): wrap Edit button with EditNodeModal component to handle click events and display modal

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

@@ -2,7 +2,7 @@ import "ace-builds/src-noconflict/ext-language_tools";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
-import { useContext, useEffect, useRef, useState } from "react";
+import { ReactNode, useContext, useEffect, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 // import "ace-builds/webpack-resolver";
 import { Check, Clipboard, Code2 } from "lucide-react";
@@ -52,8 +52,9 @@ import { darkContext } from "../../contexts/darkContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { FlowType } from "../../types/flow/index";
 import { buildTweaks, classNames } from "../../utils";
+import BaseModal from "../baseModal";
 
-export default function ApiModal({ flow }: { flow: FlowType }) {
+export default function ApiModal({ flow, children }: { flow: FlowType; children: ReactNode }) {
   const [open, setOpen] = useState(true);
   const { dark } = useContext(darkContext);
   const { closePopUp, closeEdit, setCloseEdit } = useContext(PopUpContext);
@@ -265,21 +266,25 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   }
 
   return (
-    <Dialog open={true} onOpenChange={setModalOpen}>
-      <DialogTrigger></DialogTrigger>
-      <DialogContent className="h-[80vh] md:max-w-[80vw]">
-        <DialogHeader>
-          <DialogTitle className="flex items-center">
-            <span className="pr-2">Code</span>
-            <Code2
-              className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
-              aria-hidden="true"
-            />
-          </DialogTitle>
-          <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
-        </DialogHeader>
 
-        <Tabs
+    <BaseModal>
+    <BaseModal.Trigger>
+      {children}
+    </BaseModal.Trigger>
+  <BaseModal.Header description={EXPORT_CODE_DIALOG}>
+
+    <DialogTitle className="flex items-center">
+      <span className="pr-2">Code</span>
+      <Code2
+        strokeWidth={1.5}
+        className="h-6 w-6 pl-1 text-primary "
+        aria-hidden="true"
+      />
+    </DialogTitle>
+  </BaseModal.Header>
+  <BaseModal.Content>
+
+  <Tabs
           value={activeTab}
           className="api-modal-tabs"
           onValueChange={(value) => {
@@ -318,7 +323,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
             >
               {index < 3 ? (
                 <SyntaxHighlighter
-                  className="h-[60vh] w-full overflow-auto custom-scroll"
+                  className="h-[70vh] w-full overflow-auto custom-scroll"
                   language={tab.mode}
                   style={oneDark}
                 >
@@ -329,7 +334,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                   <div className="api-modal-according-display">
                     <div
                       className={classNames(
-                        "h-[60vh] w-full rounded-lg bg-muted",
+                        "h-[70vh] w-full rounded-lg bg-muted",
                         1 == 1
                           ? "overflow-scroll overflow-x-hidden custom-scroll"
                           : "overflow-hidden"
@@ -720,34 +725,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                           )}
                         </div>
                       ))}
-
-                      {/*
-                      <div className="flex flex-col gap-5 bg-muted">
-                        <Table className="table-fixed bg-muted outline-1">
-                          <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">
-                            <TableRow className="dark:border-b-muted">
-                              <TableHead className="h-5 text-center">
-                                TWEAK
-                              </TableHead>
-                              <TableHead className="p-0 h-5 text-center">
-                                VALUE
-                              </TableHead>
-                            </TableRow>
-                          </TableHeader>
-                          <TableBody>
-                            {invoices.map((invoice) => (
-                              <TableRow className="p-0 text-center text-gray-900 text-sm">
-                                <TableCell className="p-2 text-center text-gray-900 text-sm truncate">
-                                  {invoice.paymentStatus}
-                                </TableCell>
-                                <TableCell className="p-2 text-center text-gray-900 text-sm truncate">
-                                  {invoice.paymentMethod}
-                                </TableCell>
-                              </TableRow>
-                            ))}
-                          </TableBody>
-                        </Table>
-                      </div> */}
                     </div>
                   </div>
                 </>
@@ -755,7 +732,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
             </TabsContent>
           ))}
         </Tabs>
-      </DialogContent>
+  </BaseModal.Content>
-    </Dialog>
+
+
+</BaseModal>
+
   );
 }

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

@@ -1,5 +1,5 @@
 import { Variable } from "lucide-react";
-import { useContext, useRef, useState } from "react";
+import { ReactNode, useContext, useRef, useState } from "react";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import Dropdown from "../../components/dropdownComponent";
 import FloatComponent from "../../components/floatComponent";
@@ -28,7 +28,7 @@ import { NodeDataType } from "../../types/flow";
 import { classNames, limitScrollFieldsModal } from "../../utils";
 import BaseModal from "../baseModal";
 
-export default function EditNodeModal({ data }: { data: NodeDataType }) {
+export default function EditNodeModal({ data, children }: { data: NodeDataType; children: ReactNode }) {
   const [open, setOpen] = useState(true);
   const [nodeLength, setNodeLength] = useState(
     Object.keys(data.node.template).filter(
@@ -58,12 +58,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
     closePopUp();
   }
 
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-    if (x === false) {
-      closePopUp();
-    }
-  }
 
   function changeAdvanced(node) {
     Object.keys(data.node.template).map((n, i) => {
@@ -89,8 +83,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
     });
   };
 
+  
   return (
-    <BaseModal open={true} setOpen={setModalOpen} size="large-h-full">
+    <BaseModal size="large-h-full">
+      <BaseModal.Trigger>
+        {children}
+      </BaseModal.Trigger>
       <BaseModal.Header description={data.node?.description}>
         <DialogTitle className="flex items-center">
           <span className="pr-2">{data.type}</span>
@@ -309,7 +307,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
         <Button
           className="mt-3"
           onClick={() => {
-            setModalOpen(false);
+            setOpen(false);
           }}
           type="submit"
         >

src/frontend/src/modals/exportModal/index.tsx

@@ -1,5 +1,5 @@
 import { Download } from "lucide-react";
-import { useContext, useRef, useState } from "react";
+import { ReactNode, useContext, useRef, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
@@ -11,30 +11,22 @@ import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils";
 import BaseModal from "../baseModal";
 
-export default function ExportModal() {
+export default function ExportModal({children} : {children: ReactNode}) {
-  const [open, setOpen] = useState(true);
   const { closePopUp } = useContext(PopUpContext);
-  const ref = useRef();
-  const { setErrorData } = useContext(alertContext);
   const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
     useContext(TabsContext);
-  const [isMaxLength, setIsMaxLength] = useState(false);
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-    if (x === false) {
-      setTimeout(() => {
-        closePopUp();
-      }, 300);
-    }
-  }
   const [checked, setChecked] = useState(false);
   const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
   const [description, setDescription] = useState(
     flows.find((f) => f.id === tabId).description
   );
   return (
-    <BaseModal open={true} setOpen={setModalOpen} size="smaller">
+    <BaseModal size="smaller">
+        <BaseModal.Trigger>
+          {children}
+        </BaseModal.Trigger>
       <BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
+
         <DialogTitle className="flex items-center">
           <span className="pr-2">Export</span>
           <Download

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

@@ -40,7 +40,7 @@ export default function GenericModal({
   value: string;
   buttonText: string;
   modalTitle: string;
-  type: number;
+  type: "prompt" | "text";
   children: ReactNode;
   nodeClass?: APIClassType;
   setNodeClass?: (Class: APIClassType) => void;
@@ -92,7 +92,7 @@ export default function GenericModal({
   }
 
   useEffect(() => {
-    if (type === TypeModal.PROMPT && inputValue && inputValue != "") {
+    if (type === "prompt" && inputValue && inputValue != "") {
       checkVariables(inputValue);
     }
   }, [inputValue, type]);
@@ -198,7 +198,7 @@ export default function GenericModal({
               "flex h-full w-full"
             )}
           >
-            {type === TypeModal.PROMPT && isEdit ? (
+            {type === "prompt" && isEdit ? (
               <Textarea
                 ref={divRefPrompt}
                 className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
@@ -213,9 +213,9 @@ export default function GenericModal({
                 }}
                 placeholder="Type message here."
               />
-            ) : type === TypeModal.PROMPT && !isEdit ? (
+            ) : type === "prompt" && !isEdit ? (
               <TextAreaContentView />
-            ) : type !== TypeModal.PROMPT ? (
+            ) : type !== "prompt" ? (
               <Textarea
                 ref={ref}
                 className="form-input h-full w-full rounded-lg focus-visible:ring-1"
@@ -232,7 +232,7 @@ export default function GenericModal({
 
           <div className="mt-6 flex h-fit w-full items-end justify-between">
             <div className="mb-auto flex-1">
-              {type === TypeModal.PROMPT && (
+              {type === "prompt" && (
                 <div className=" mr-2">
                   <div
                     ref={divRef}
@@ -279,11 +279,11 @@ export default function GenericModal({
             <Button
               onClick={() => {
                 switch (myModalType) {
-                  case 1:
+                  case "text":
                     setValue(inputValue);
                     setModalOpen(false);
                     break;
-                  case 2:
+                  case "prompt":
                     !inputValue || inputValue === ""
                       ? setModalOpen(false)
                       : validatePrompt(false);

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -76,27 +76,28 @@ export default function ExtraSidebar() {
         </ShadTooltip>
 
         <ShadTooltip content="Export" side="top">
-          <button
+        <ExportModal>
+        <button
             className={classNames("extra-side-bar-buttons")}
-            onClick={(event) => {
-              openPopUp(<ExportModal />);
-            }}
           >
             <FileDown
               strokeWidth={1.5}
               className="side-bar-button-size"
             ></FileDown>
           </button>
+
+        </ExportModal>
+
         </ShadTooltip>
         <ShadTooltip content="Code" side="top">
-          <button
+        <ApiModal flow={flows.find((f) => f.id === tabId)}>
+        <button
             className={classNames("extra-side-bar-buttons")}
-            onClick={(event) => {
-              openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
-            }}
           >
             <Code2 strokeWidth={1.5} className="side-bar-button-size"></Code2>
           </button>
+        </ApiModal>
+
         </ShadTooltip>
 
         <ShadTooltip content="Save" side="top">

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -95,23 +95,21 @@ const NodeToolbarComponent = (props) => {
           </ShadTooltip>
 
           <ShadTooltip content="Edit" side="top">
-            <button
+          <EditNodeModal data={props.data} >
+
+          <button
               className={classNames(
                 "relative -ml-px inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
                   (nodeLength == 0
                     ? " text-muted-foreground"
                     : " text-foreground")
               )}
-              onClick={(event) => {
-                if (nodeLength == 0) {
-                  event.preventDefault();
-                }
-                event.preventDefault();
-                props.openPopUp(<EditNodeModal data={props.data} />);
-              }}
             >
               <Settings2 className="h-4 w-4 "></Settings2>
             </button>
+            
+          </EditNodeModal>
+
           </ShadTooltip>
 
           {/*