🔧 chore(GenericNode): optimize imports and remove duplicate imports

🔧 chore(ShadTooltipComponent): remove unused import and set default value for delayDuration prop
🔧 chore(ApiModal): optimize imports and remove unused imports
🔧 chore(genericModal): optimize imports and remove unused imports

The changes were made to optimize the imports and remove duplicate and unused imports in the respective files. This improves the codebase by reducing unnecessary dependencies and improving maintainability.

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

@@ -1,3 +1,15 @@
+import { Zap } from "lucide-react";
+import { useContext, useEffect, useRef, useState } from "react";
+import { NodeToolbar } from "reactflow";
+import ShadTooltip from "../../components/ShadTooltipComponent";
+import Tooltip from "../../components/TooltipComponent";
+import { useSSE } from "../../contexts/SSEContext";
+import { alertContext } from "../../contexts/alertContext";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { typesContext } from "../../contexts/typesContext";
+import NodeModal from "../../modals/NodeModal";
+import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
+import { NodeDataType } from "../../types/flow";
 import {
   classNames,
   nodeColors,
@@ -5,18 +17,6 @@ import {
   toTitleCase,
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
-import { typesContext } from "../../contexts/typesContext";
-import { useContext, useState, useEffect, useRef } from "react";
-import { NodeDataType } from "../../types/flow";
-import { alertContext } from "../../contexts/alertContext";
-import { PopUpContext } from "../../contexts/popUpContext";
-import NodeModal from "../../modals/NodeModal";
-import Tooltip from "../../components/TooltipComponent";
-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,
@@ -94,10 +94,7 @@ export default function GenericNode({
               }}
             />
             <div className="generic-node-tooltip-div">
-              <ShadTooltip
-                delayDuration={1500}
-                content={data.node.display_name}
-              >
+              <ShadTooltip content={data.node.display_name}>
                 <div className="generic-node-tooltip-div text-primary">
                   {data.node.display_name}
                 </div>

src/frontend/src/components/ShadTooltipComponent/index.tsx

@@ -1,4 +1,4 @@
-import { RadialProgressType, ShadToolTipType } from "../../types/components";
+import { ShadToolTipType } from "../../types/components";
 import {
   Tooltip,
   TooltipContent,
@@ -11,15 +11,20 @@ export default function ShadTooltip({
   side,
   asChild = true,
   children,
-  delayDuration,
-  style
+  style,
+  delayDuration = 500,
 }: ShadToolTipType) {
   return (
     <TooltipProvider>
       <Tooltip delayDuration={delayDuration}>
         <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
 
-        <TooltipContent className={style} side={side} avoidCollisions={false} sticky="always">
+        <TooltipContent
+          className={style}
+          side={side}
+          avoidCollisions={false}
+          sticky="always"
+        >
           {content}
         </TooltipContent>
       </Tooltip>

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

@@ -1,42 +1,15 @@
-import { useContext, useEffect, useRef, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
+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 "ace-builds/src-noconflict/ext-language_tools";
+import { useContext, useEffect, useRef, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
 // import "ace-builds/webpack-resolver";
-import { darkContext } from "../../contexts/darkContext";
+import { Check, Clipboard, Code2 } from "lucide-react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../components/ui/dialog";
-import { FlowType } from "../../types/flow/index";
-import { getCurlCode, getPythonApiCode, getPythonCode } from "../../constants";
-import { EXPORT_CODE_DIALOG } from "../../constants";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../components/ui/tabs";
-import { Check, Clipboard, Code2 } from "lucide-react";
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../components/ui/table";
-import { buildTweaks, classNames, limitScrollFieldsModal } from "../../utils";
 import AccordionComponent from "../../components/AccordionComponent";
+import ShadTooltip from "../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import Dropdown from "../../components/dropdownComponent";
 import FloatComponent from "../../components/floatComponent";
@@ -47,9 +20,38 @@ import IntComponent from "../../components/intComponent";
 import PromptAreaComponent from "../../components/promptComponent";
 import TextAreaComponent from "../../components/textAreaComponent";
 import ToggleShadComponent from "../../components/toggleShadComponent";
-import ShadTooltip from "../../components/ShadTooltipComponent";
-import { cloneDeep, filter } from "lodash";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../components/ui/tabs";
+import {
+  EXPORT_CODE_DIALOG,
+  getCurlCode,
+  getPythonApiCode,
+  getPythonCode,
+} from "../../constants";
+import { darkContext } from "../../contexts/darkContext";
 import { TabsContext } from "../../contexts/tabsContext";
+import { FlowType } from "../../types/flow/index";
+import { buildTweaks, classNames } from "../../utils";
 
 export default function ApiModal({ flow }: { flow: FlowType }) {
   const [open, setOpen] = useState(true);
@@ -420,7 +422,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                     ) : t.data.node.template[n]
                                                         .multiline ? (
                                                       <ShadTooltip
-                                                        delayDuration={1000}
                                                         content={buildContent(
                                                           t.data.node.template[
                                                             n
@@ -508,7 +509,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                 ) : t.data.node.template[n]
                                                     .type === "file" ? (
                                                   <ShadTooltip
-                                                    delayDuration={1000}
                                                     content={buildContent(
                                                       getValue(
                                                         t.data.node.template[n]
@@ -624,7 +624,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                 ) : t.data.node.template[n]
                                                     .type === "prompt" ? (
                                                   <ShadTooltip
-                                                    delayDuration={1000}
                                                     content={buildContent(
                                                       getValue(
                                                         t.data.node.template[n]
@@ -661,7 +660,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                 ) : t.data.node.template[n]
                                                     .type === "code" ? (
                                                   <ShadTooltip
-                                                    delayDuration={1000}
                                                     content={buildContent(
                                                       getValue(
                                                         t.data.node.template[n]
@@ -722,7 +720,7 @@ 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">

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

@@ -1,8 +1,9 @@
-import { useContext, useRef, useState, useEffect } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { darkContext } from "../../contexts/darkContext";
-import { postValidatePrompt } from "../../controllers/API";
-import { alertContext } from "../../contexts/alertContext";
+import DOMPurify from "dompurify";
+import { FileText, Variable } from "lucide-react";
+import { useContext, useEffect, useRef, useState } from "react";
+import ShadTooltip from "../../components/ShadTooltipComponent";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -12,14 +13,16 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { Button } from "../../components/ui/button";
 import { Textarea } from "../../components/ui/textarea";
 import {
   HIGHLIGH_CSS,
   PROMPT_DIALOG_SUBTITLE,
   TEXT_DIALOG_SUBTITLE,
 } from "../../constants";
-import { FileText } from "lucide-react";
+import { alertContext } from "../../contexts/alertContext";
+import { darkContext } from "../../contexts/darkContext";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { postValidatePrompt } from "../../controllers/API";
 import { APIClassType } from "../../types/api";
 import {
   INVALID_CHARACTERS,
@@ -29,10 +32,6 @@ import {
   regexHighlight,
   varHighlightHTML,
 } from "../../utils";
-import { Badge } from "../../components/ui/badge";
-import ShadTooltip from "../../components/ShadTooltipComponent";
-import DOMPurify from "dompurify";
-import { Variable } from "lucide-react";
 
 export default function GenericModal({
   field_name = "",
@@ -238,39 +237,38 @@ export default function GenericModal({
 
         {type == TypeModal.PROMPT && (
           <>
-          <div className="h-[60px] overflow-y-auto custom-scroll sm:6/6 mt-3 mr-28">
-            <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="sm:6/6 mr-28 mt-3 h-[60px] 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}
-                  delayDuration={1500}
-                >
-                  <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>
-        </>
+          </>
         )}
 
         <DialogFooter>