🔧 chore(frontend): fix formatting issues in multiple files

🚀 feat(frontend): add hover effect to file search icon in InputFileComponent
🚀 feat(frontend): add support for dark mode in alert icons
🚀 feat(frontend): add support for dark mode in dropdown chevron icon
🚀 feat(frontend): add support for dark mode in success alert icon
🚀 feat(frontend): add support for dark mode in notice alert icon
🚀 feat(frontend): add support for dark mode in error alert icon
🚀 feat(frontend): add support for process.env.PORT environment variable to be able to run app on a configurable port
🚀 feat(frontend): add parameter types to GenericNode component
🚀 feat(frontend): add hover effect to external link icon in CodeAreaComponent
🚀 feat(frontend): add hover effect to plus icon in MenuBar component
🚀 feat(frontend): add hover effect to settings icon in MenuBar component
🚀 feat(frontend): add hover effect to undo icon in MenuBar component
🚀 feat(frontend): add hover effect to redo icon in MenuBar component

🎨 style(inputListComponent): add space before self-closing tag to improve readability
🎨 style(promptComponent): add space before self-closing tag to improve readability
🎨 style(ApiModal): fix indentation to improve readability
🎨 style(chatInput): add space before self-closing tag to improve readability
🎨 style(chatMessage): remove unnecessary line breaks to improve readability
🎨 style(fileComponent): add space before self-closing tag to improve readability
🎨 style(chatModal): remove unnecessary line breaks to improve readability
🎨 style(codeAreaModal): fix indentation to improve readability
🎨 style(genericModal): fix indentation to improve readability
🎨 style(DisclosureComponent): add space before self-closing tag to improve readability
🎨 style(extraSidebarComponent): fix indentation to improve readability

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

@@ -6,7 +6,16 @@ import {
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
 import { typesContext } from "../../contexts/typesContext";
-import { useContext, useState, useEffect, useRef, ForwardRefExoticComponent, ComponentType, SVGProps, ReactNode } from "react";
+import {
+  useContext,
+  useState,
+  useEffect,
+  useRef,
+  ForwardRefExoticComponent,
+  ComponentType,
+  SVGProps,
+  ReactNode,
+} from "react";
 import { NodeDataType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -1,4 +1,3 @@
-
 import { Link } from "react-router-dom";
 import { Transition } from "@headlessui/react";
 import { useState } from "react";
@@ -34,7 +33,6 @@ export default function SingleAlert({
               className="h-5 w-5 text-red-400 dark:text-red-50"
               aria-hidden="true"
             />
-
           </div>
           <div className="ml-3">
             <h3 className="text-sm break-words font-medium text-red-800 dark:text-white/80">
@@ -82,7 +80,6 @@ export default function SingleAlert({
               className="h-5 w-5 text-blue-400 dark:text-blue-50"
               aria-hidden="true"
             />
-
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
             <p className="text-sm text-blue-700 dark:text-white/80">
@@ -129,7 +126,6 @@ export default function SingleAlert({
               className="h-5 w-5 text-green-400 dark:text-green-50"
               aria-hidden="true"
             />
-
           </div>
           <div className="ml-3">
             <p className="text-sm font-medium text-green-800 dark:bg-white/80">

src/frontend/src/alerts/error/index.tsx

@@ -47,7 +47,6 @@ export default function ErrorAlert({
               className="h-5 w-5 text-red-400 dark:text-red-50"
               aria-hidden="true"
             />
-
           </div>
           <div className="ml-3">
             <h3 className="text-sm font-medium text-red-800 dark:text-white/80">

src/frontend/src/alerts/notice/index.tsx

@@ -44,7 +44,6 @@ export default function NoticeAlert({
               className="h-5 w-5 text-blue-400 dark:text-blue-50"
               aria-hidden="true"
             />
-
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
             <p className="text-sm text-blue-700 dark:text-white/80">{title}</p>

src/frontend/src/alerts/success/index.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from "react";
 import { SuccessAlertType } from "../../types/alerts";
 import { CheckCircle2 } from "lucide-react";
 
-
 export default function SuccessAlert({
   title,
   id,
@@ -40,11 +39,9 @@ export default function SuccessAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <CheckCircle2
-          
               className="h-5 w-5 text-green-400 dark:text-green-50"
               aria-hidden="true"
             />
-
           </div>
           <div className="ml-3">
             <p className="text-sm font-medium text-green-800 dark:text-white/80">

src/frontend/src/components/chatComponent/chatMessage/index.tsx

@@ -1,4 +1,3 @@
-
 import { useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { nodeColors } from "../../../utils";

src/frontend/src/components/dropdownComponent/index.tsx

@@ -47,7 +47,6 @@ export default function Dropdown({
                     className="h-5 w-5 text-gray-400"
                     aria-hidden="true"
                   />
-
                 </span>
               </Listbox.Button>
 
@@ -106,7 +105,6 @@ export default function Dropdown({
                                 }
                                 aria-hidden="true"
                               />
-
                             </span>
                           ) : null}
                         </>

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -70,7 +70,6 @@ export const MenuBar = ({ flows, tabId }) => {
                 handleAddFlow();
               }}
               className="cursor-pointer"
-
             >
               <Plus className="w-4 h-4 mr-2" />
               New
@@ -80,7 +79,6 @@ export const MenuBar = ({ flows, tabId }) => {
                 openPopUp(<FlowSettingsModal />);
               }}
               className="cursor-pointer"
-
             >
               <Settings2 className="w-4 h-4 mr-2 dark:text-gray-300" />
               Settings
@@ -90,7 +88,6 @@ export const MenuBar = ({ flows, tabId }) => {
                 undo();
               }}
               className="cursor-pointer"
-
             >
               <Undo className="w-4 h-4 mr-2 dark:text-gray-300" />
               Undo
@@ -100,7 +97,6 @@ export const MenuBar = ({ flows, tabId }) => {
                 redo();
               }}
               className="cursor-pointer"
-
             >
               <Redo className="w-4 h-4 mr-2 dark:text-gray-300" />
               Redo

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

@@ -88,9 +88,7 @@ export default function InputFileComponent({
           {myValue !== "" ? myValue : "No file"}
         </span>
         <button onClick={handleButtonClick}>
-          {!editNode && (
+          {!editNode && <FileSearch2 className="w-8 h-8  hover:text-ring" />}
-            <FileSearch2 className="w-8 h-8  hover:text-ring" />
-          )}
         </button>
       </div>
     </div>

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

@@ -91,7 +91,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
               className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
               aria-hidden="true"
             />
-
           </DialogTitle>
           <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
         </DialogHeader>

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

@@ -72,9 +72,7 @@ export default function ChatMessage({
                 onClick={() => setHidden((prev) => !prev)}
                 className="absolute -top-1 -left-2 cursor-pointer"
               >
-                <MessageCircle 
+                <MessageCircle className="w-5 h-5 animate-bounce dark:text-white" />
-                className="w-5 h-5 animate-bounce dark:text-white"
-                />
               </div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && (

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

@@ -55,7 +55,6 @@ export default function CodeAreaModal({
               className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
               aria-hidden="true"
             />
-
           </DialogTitle>
           <DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>

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

@@ -58,7 +58,6 @@ export default function GenericModal({
               className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
               aria-hidden="true"
             />
-
           </DialogTitle>
           <DialogDescription>
             {(() => {