Merge remote-tracking branch 'refs/remotes/origin/python_custom_node_component' into python_custom_node_component

package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "@svgr/cli": "^8.0.1"
+  }
+}

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

@@ -1,11 +1,11 @@
 import { cloneDeep } from "lodash";
-import { Info } from "lucide-react";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { Handle, Position, useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
 import Dropdown from "../../../../components/dropdownComponent";
 import FloatComponent from "../../../../components/floatComponent";
+import IconComponent from "../../../../components/genericIconComponent";
 import InputComponent from "../../../../components/inputComponent";
 import InputFileComponent from "../../../../components/inputFileComponent";
 import InputListComponent from "../../../../components/inputListComponent";
@@ -13,19 +13,21 @@ import IntComponent from "../../../../components/intComponent";
 import PromptAreaComponent from "../../../../components/promptComponent";
 import TextAreaComponent from "../../../../components/textAreaComponent";
 import ToggleShadComponent from "../../../../components/toggleShadComponent";
-import { MAX_LENGTH_TO_SCROLL_TOOLTIP } from "../../../../constants";
+import { MAX_LENGTH_TO_SCROLL_TOOLTIP } from "../../../../constants/constants";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import { ParameterComponentType } from "../../../../types/components";
+import { isValidConnection } from "../../../../utils/reactflowUtils";
+import {
+  nodeColors,
+  nodeIconsLucide,
+  nodeNames,
+} from "../../../../utils/styleUtils";
 import {
   classNames,
   getRandomKeyByssmm,
   groupByFamily,
-  isValidConnection,
-  nodeColors,
-  nodeIconsLucide,
-  nodeNames,
-} from "../../../../utils";
+} from "../../../../utils/utils";
 
 export default function ParameterComponent({
   left,
@@ -49,6 +51,7 @@ export default function ParameterComponent({
   const [position, setPosition] = useState(0);
   const { setTabsState, tabId, save } = useContext(TabsContext);
 
+  // Update component position
   useEffect(() => {
     if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
       setPosition(ref.current.offsetTop + ref.current.clientHeight / 2);
@@ -84,6 +87,7 @@ export default function ParameterComponent({
   };
 
   useEffect(() => {
+    if (name === "openai_api_base") console.log(info);
     infoHtml.current = (
       <div className="h-full w-full break-words">
         {info.split("\n").map((line, i) => (
@@ -146,7 +150,6 @@ export default function ParameterComponent({
       );
     });
   }, [tooltipTitle]);
-
   return (
     <div
       ref={ref}
@@ -165,7 +168,13 @@ export default function ParameterComponent({
           <div className="">
             {info !== "" && (
               <ShadTooltip content={infoHtml.current}>
-                <Info className="relative bottom-0.5 ml-2 h-3 w-3" />
+                {/* put div to avoid bug that does not display tooltip */}
+                <div>
+                  <IconComponent
+                    name="Info"
+                    className="relative bottom-0.5 ml-2 h-3 w-4"
+                  />
+                </div>
               </ShadTooltip>
             )}
           </div>

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

@@ -1,22 +1,18 @@
 import { cloneDeep } from "lodash";
-import { Zap } from "lucide-react";
 import { useContext, useEffect, useRef, useState } from "react";
 import { NodeToolbar, useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import Tooltip from "../../components/TooltipComponent";
+import IconComponent from "../../components/genericIconComponent";
 import { useSSE } from "../../contexts/SSEContext";
 import { alertContext } from "../../contexts/alertContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
 import { NodeDataType } from "../../types/flow";
-import { cleanEdges } from "../../util/reactflowUtils";
-import {
-  classNames,
-  nodeColors,
-  nodeIconsLucide,
-  toTitleCase,
-} from "../../utils";
+import { cleanEdges } from "../../utils/reactflowUtils";
+import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
+import { classNames, toTitleCase } from "../../utils/utils";
 import ParameterComponent from "./components/parameterComponent";
 
 export default function GenericNode({
@@ -35,6 +31,7 @@ export default function GenericNode({
   // any to avoid type conflict
   const Icon: any =
     nodeIconsLucide[data.type] || nodeIconsLucide[types[data.type]];
+  const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
   const [validationStatus, setValidationStatus] = useState(null);
   // State for outline color
   const { sseData, isBuilding } = useSSE();
@@ -100,12 +97,10 @@ export default function GenericNode({
       >
         <div className="generic-node-div-title">
           <div className="generic-node-title-arrangement">
-            <Icon
-              strokeWidth={1.5}
+            <IconComponent
+              name={name}
               className="generic-node-icon"
-              style={{
-                color: nodeColors[types[data.type]] ?? nodeColors.unknown,
-              }}
+              iconColor={`${nodeColors[types[data.type]]}`}
             />
             <div className="generic-node-tooltip-div">
               <ShadTooltip content={data.node.display_name}>
@@ -124,9 +119,9 @@ export default function GenericNode({
                   ) : !validationStatus ? (
                     <span className="flex">
                       Build{" "}
-                      <Zap
+                      <IconComponent
+                        name="Zap"
                         className="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
-                        strokeWidth={1.5}
                       />{" "}
                       flow to validate status.
                     </span>

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

@@ -1,7 +1,7 @@
 import { Transition } from "@headlessui/react";
-import { CheckCircle2, Info, X, XCircle } from "lucide-react";
 import { useState } from "react";
 import { Link } from "react-router-dom";
+import IconComponent from "../../../../components/genericIconComponent";
 import { SingleAlertComponentType } from "../../../../types/alerts";
 
 export default function SingleAlert({
@@ -29,7 +29,11 @@ export default function SingleAlert({
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
-            <XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
+            <IconComponent
+              name="XCircle"
+              className="h-5 w-5 text-status-red"
+              aria-hidden="true"
+            />
           </div>
           <div className="ml-3">
             <h3 className="break-words text-sm font-medium text-error-foreground">
@@ -62,7 +66,8 @@ export default function SingleAlert({
                 className="inline-flex rounded-md p-1.5 text-status-red"
               >
                 <span className="sr-only">Dismiss</span>
-                <X
+                <IconComponent
+                  name="X"
                   className="h-4 w-4 text-error-foreground"
                   aria-hidden="true"
                 />
@@ -76,7 +81,11 @@ export default function SingleAlert({
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
-            <Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
+            <IconComponent
+              name="Info"
+              className="h-5 w-5 text-status-blue "
+              aria-hidden="true"
+            />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
             <p className="text-sm font-medium text-info-foreground">
@@ -108,7 +117,8 @@ export default function SingleAlert({
                 className="inline-flex rounded-md p-1.5 text-info-foreground"
               >
                 <span className="sr-only">Dismiss</span>
-                <X
+                <IconComponent
+                  name="X"
                   className="h-4 w-4 text-info-foreground"
                   aria-hidden="true"
                 />
@@ -122,7 +132,8 @@ export default function SingleAlert({
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
-            <CheckCircle2
+            <IconComponent
+              name="CheckCircle2"
               className="h-5 w-5 text-status-green"
               aria-hidden="true"
             />
@@ -145,7 +156,8 @@ export default function SingleAlert({
                 className="inline-flex rounded-md p-1.5 text-status-green"
               >
                 <span className="sr-only">Dismiss</span>
-                <X
+                <IconComponent
+                  name="X"
                   className="h-4 w-4 text-success-foreground"
                   aria-hidden="true"
                 />

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

@@ -1,5 +1,5 @@
-import { Trash2, X } from "lucide-react";
 import { useContext, useRef } from "react";
+import IconComponent from "../../components/genericIconComponent";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { AlertDropdownType } from "../../types/alerts";
@@ -36,13 +36,13 @@ export default function AlertDropdown({}: AlertDropdownType) {
               setTimeout(clearNotificationList, 100);
             }}
           >
-            <Trash2 className="h-[1.1rem] w-[1.1rem]" />
+            <IconComponent name="Trash2" className="h-[1.1rem] w-[1.1rem]" />
           </button>
           <button
             className="text-foreground hover:text-status-red"
             onClick={closePopUp}
           >
-            <X className="h-5 w-5" />
+            <IconComponent name="X" className="h-5 w-5" />
           </button>
         </div>
       </div>

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

@@ -1,6 +1,6 @@
 import { Transition } from "@headlessui/react";
-import { XCircle } from "lucide-react";
 import { useEffect, useState } from "react";
+import IconComponent from "../../components/genericIconComponent";
 import { ErrorAlertType } from "../../types/alerts";
 
 export default function ErrorAlert({
@@ -44,7 +44,8 @@ export default function ErrorAlert({
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <XCircle
+            <IconComponent
+              name="XCircle"
               className="error-build-message-circle"
               aria-hidden="true"
             />

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

@@ -1,7 +1,7 @@
 import { Transition } from "@headlessui/react";
-import { Info } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
+import IconComponent from "../../components/genericIconComponent";
 import { NoticeAlertType } from "../../types/alerts";
 
 export default function NoticeAlert({
@@ -40,7 +40,11 @@ export default function NoticeAlert({
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
+            <IconComponent
+              name="Info"
+              className="h-5 w-5 text-status-blue "
+              aria-hidden="true"
+            />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
             <p className="text-sm text-info-foreground">{title}</p>

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

@@ -1,6 +1,6 @@
 import { Transition } from "@headlessui/react";
-import { CheckCircle2 } from "lucide-react";
 import { useEffect, useState } from "react";
+import IconComponent from "../../components/genericIconComponent";
 import { SuccessAlertType } from "../../types/alerts";
 
 export default function SuccessAlert({
@@ -38,7 +38,11 @@ export default function SuccessAlert({
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <CheckCircle2 className="success-alert-icon" aria-hidden="true" />
+            <IconComponent
+              name="CheckCircle2"
+              className="success-alert-icon"
+              aria-hidden="true"
+            />
           </div>
           <div className="ml-3">
             <p className="success-alert-message">{title}</p>

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

@@ -11,13 +11,12 @@ export default function AccordionComponent({
   trigger,
   children,
   open = [],
+  keyValue,
 }: AccordionComponentType) {
   const [value, setValue] = useState(
     open.length === 0 ? "" : getOpenAccordion()
   );
 
-  console.log(open);
-
   function getOpenAccordion() {
     let value = "";
     open.forEach((el) => {
@@ -30,13 +29,18 @@ export default function AccordionComponent({
   }
 
   function handleClick() {
-    value == "" ? setValue(trigger) : setValue("");
+    value === "" ? setValue(keyValue) : setValue("");
   }
 
   return (
     <>
-      <Accordion type="single" value={value} onValueChange={setValue}>
-        <AccordionItem value={trigger} className="border-none">
+      <Accordion
+        type="single"
+        className="w-full"
+        value={value}
+        onValueChange={setValue}
+      >
+        <AccordionItem value={keyValue} className="border-b">
           <AccordionTrigger
             onClick={() => {
               handleClick();

src/frontend/src/components/ExtraSidebarComponent/index.tsx

@@ -1,117 +0,0 @@
-import { Disclosure } from "@headlessui/react";
-import { useContext } from "react";
-import { Link } from "react-router-dom";
-import { locationContext } from "../../contexts/locationContext";
-import { classNames } from "../../utils";
-
-export default function ExtraSidebar() {
-  const {
-    current,
-    isStackedOpen,
-    setIsStackedOpen,
-    extraNavigation,
-    extraComponent,
-  } = useContext(locationContext);
-
-  return (
-    <>
-      <aside
-        className={` ${isStackedOpen ? "w-52" : "w-0 "} unused-side-bar-aside`}
-      >
-        <div className="unused-side-bar-arrangement">
-          <div className="unused-side-bar-division">
-            {extraNavigation.options ? (
-              <div className="p-4">
-                <nav className="unused-side-bar-nav">
-                  {extraNavigation.options.map((item) =>
-                    !item.children ? (
-                      <div key={item.name}>
-                        <Link
-                          to={item.href}
-                          className={classNames(
-                            item.href.split("/")[2] === current[4]
-                              ? "unused-side-bar-link-colors-true"
-                              : "unused-side-bar-link-colors-false",
-                            "unused-side-bar-link"
-                          )}
-                        >
-                          <item.icon
-                            className={classNames(
-                              item.href.split("/")[2] === current[4]
-                                ? "text-ring"
-                                : "unused-side-bar-icon-false",
-                              "unused-side-bar-icon"
-                            )}
-                          />
-                          {item.name}
-                        </Link>
-                      </div>
-                    ) : (
-                      <Disclosure
-                        as="div"
-                        key={item.name}
-                        className="space-y-1"
-                      >
-                        {({ open }) => (
-                          <>
-                            <Disclosure.Button
-                              className={classNames(
-                                item.href.split("/")[2] === current[4]
-                                  ? "unused-side-bar-link-colors-true"
-                                  : "unused-side-bar-link-colors-false",
-                                "unused-side-bar-disclosure"
-                              )}
-                            >
-                              <item.icon
-                                className="unused-side-bar-disclosure-icon"
-                                aria-hidden="true"
-                              />
-                              <span className="flex-1">{item.name}</span>
-                              <svg
-                                className={classNames(
-                                  open
-                                    ? "unused-side-bar-svg-true"
-                                    : "text-ring",
-                                  "unused-side-bar-svg"
-                                )}
-                                viewBox="0 0 20 20"
-                                aria-hidden="true"
-                              >
-                                <path
-                                  d="M6 6L14 10L6 14V6Z"
-                                  fill="currentColor"
-                                />
-                              </svg>
-                            </Disclosure.Button>
-                            <Disclosure.Panel className="space-y-1">
-                              {item.children.map((subItem) => (
-                                <Link
-                                  key={subItem.name}
-                                  to={subItem.href}
-                                  className={classNames(
-                                    subItem.href.split("/")[3] === current[5]
-                                      ? "unused-side-bar-link-colors-true"
-                                      : "unused-side-bar-link-colors-false",
-                                    "unused-side-bar-disclosure-panel"
-                                  )}
-                                >
-                                  {subItem.name}
-                                </Link>
-                              ))}
-                            </Disclosure.Panel>
-                          </>
-                        )}
-                      </Disclosure>
-                    )
-                  )}
-                </nav>
-              </div>
-            ) : (
-              extraComponent
-            )}
-          </div>
-        </div>
-      </aside>
-    </>
-  );
-}

src/frontend/src/components/ReactTooltipComponent/index.tsx

@@ -3,7 +3,7 @@ import type { FC } from "react";
 import React from "react";
 import { Tooltip as ReactTooltip } from "react-tooltip";
 import "react-tooltip/dist/react-tooltip.css";
-import { classNames } from "../../utils";
+import { classNames } from "../../utils/utils";
 
 type TooltipProps = {
   selector: string;

src/frontend/src/components/cardComponent/index.tsx

@@ -1,8 +1,8 @@
-import { Trash2 } from "lucide-react";
 import { useContext } from "react";
 import { TabsContext } from "../../contexts/tabsContext";
 import { FlowType } from "../../types/flow";
-import { gradients } from "../../utils";
+import { gradients } from "../../utils/styleUtils";
+import IconComponent from "../genericIconComponent";
 import {
   Card,
   CardDescription,
@@ -37,7 +37,10 @@ export const CardComponent = ({
           <span className="card-component-title-size">{flow.name}</span>
           {onDelete && (
             <button className="card-component-delete-button" onClick={onDelete}>
-              <Trash2 className="card-component-delete-icon" />
+              <IconComponent
+                name="Trash2"
+                className="card-component-delete-icon"
+              />
             </button>
           )}
         </CardTitle>
@@ -51,15 +54,7 @@ export const CardComponent = ({
 
       <CardFooter>
         <div className="card-component-footer-arrangement">
-          <div className="card-component-footer">
-            {/* <Badge variant="secondary">Agent</Badge>
-            <Badge variant="secondary">
-              <div className="w-3">
-                <OpenAiIcon />
-              </div>
-              <span className="text-base">&nbsp;</span>OpenAI+
-            </Badge> */}
-          </div>
+          <div className="card-component-footer"></div>
           {button && button}
         </div>
       </CardFooter>

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

@@ -1,5 +1,4 @@
 import { Transition } from "@headlessui/react";
-import { Zap } from "lucide-react";
 import { useContext, useState } from "react";
 import Loading from "../../../components/ui/loading";
 import { useSSE } from "../../../contexts/SSEContext";
@@ -7,10 +6,11 @@ import { alertContext } from "../../../contexts/alertContext";
 import { typesContext } from "../../../contexts/typesContext";
 import { postBuildInit } from "../../../controllers/API";
 import { FlowType } from "../../../types/flow";
-import { validateNodes } from "../../../utils";
 
 import { TabsContext } from "../../../contexts/tabsContext";
+import { validateNodes } from "../../../utils/reactflowUtils";
 import RadialProgressComponent from "../../RadialProgress";
+import IconComponent from "../../genericIconComponent";
 
 export default function BuildTrigger({
   open,
@@ -190,8 +190,8 @@ export default function BuildTrigger({
                   className="build-trigger-loading-icon"
                 />
               ) : (
-                <Zap
-                  strokeWidth={1.5}
+                <IconComponent
+                  name="Zap"
                   className="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1"
                 />
               )}

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

@@ -1,5 +1,4 @@
 import { Transition } from "@headlessui/react";
-import { MessagesSquare } from "lucide-react";
 
 import { useContext } from "react";
 import {
@@ -7,8 +6,9 @@ import {
   CHAT_CANNOT_OPEN_TITLE,
   FLOW_NOT_BUILT_DESCRIPTION,
   FLOW_NOT_BUILT_TITLE,
-} from "../../../constants";
+} from "../../../constants/constants";
 import { alertContext } from "../../../contexts/alertContext";
+import IconComponent from "../../genericIconComponent";
 
 export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) {
   const { setErrorData } = useContext(alertContext);
@@ -50,15 +50,14 @@ export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) {
         }
       >
         <div className="flex gap-3">
-          <MessagesSquare
+          <IconComponent
+            name="MessagesSquare"
             className={
               "h-6 w-6 transition-all " +
               (isBuilt && canOpen
                 ? "message-button-icon"
                 : "disabled-message-button-icon")
             }
-            style={{ color: "white" }}
-            strokeWidth={1.5}
           />
         </div>
       </button>

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

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import CodeAreaModal from "../../modals/codeAreaModal";
 import { CodeAreaComponentType } from "../../types/components";
 
-import { ExternalLink } from "lucide-react";
+import IconComponent from "../genericIconComponent";
 
 export default function CodeAreaComponent({
   value,
@@ -51,9 +51,12 @@ export default function CodeAreaComponent({
             {myValue !== "" ? myValue : "Type something..."}
           </span>
           {!editNode && (
-            <ExternalLink
-              strokeWidth={1.5}
-              className="ml-3 h-6 w-6  hover:text-accent-foreground"
+            <IconComponent
+              name="ExternalLink"
+              className={
+                "icons-parameters-comp" +
+                (disabled ? " text-ring" : " hover:text-accent-foreground")
+              }
             />
           )}
         </div>

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -1,4 +1,3 @@
-import { Check, Clipboard, Download } from "lucide-react";
 import { useContext, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
@@ -30,7 +29,8 @@ import {
 } from "../../components/ui/tabs";
 import { darkContext } from "../../contexts/darkContext";
 import { FlowType } from "../../types/flow/index";
-import { classNames } from "../../utils";
+import { classNames } from "../../utils/utils";
+import IconComponent from "../genericIconComponent";
 
 export default function CodeTabsComponent({
   flow,
@@ -143,14 +143,18 @@ export default function CodeTabsComponent({
               className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
               onClick={copyToClipboard}
             >
-              {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
+              {isCopied ? (
+                <IconComponent name="Check" className="h-4 w-4" />
+              ) : (
+                <IconComponent name="Clipboard" className="h-4 w-4" />
+              )}
               {isCopied ? "Copied!" : "Copy code"}
             </button>
             <button
               className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
               onClick={downloadAsFile}
             >
-              <Download size={18} />
+              <IconComponent name="Download" className="h-5 w-5" />
             </button>
           </div>
         )}

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

@@ -1,8 +1,8 @@
 import { Listbox, Transition } from "@headlessui/react";
-import { Check, ChevronsUpDown } from "lucide-react";
 import { Fragment, useEffect, useState } from "react";
 import { DropDownComponentType } from "../../types/components";
-import { classNames } from "../../utils";
+import { classNames } from "../../utils/utils";
+import IconComponent from "../genericIconComponent";
 
 export default function Dropdown({
   value,
@@ -43,7 +43,8 @@ export default function Dropdown({
                   {internalValue}
                 </span>
                 <span className={"dropdown-component-arrow"}>
-                  <ChevronsUpDown
+                  <IconComponent
+                    name="ChevronsUpDown"
                     className="dropdown-component-arrow-color"
                     aria-hidden="true"
                   />
@@ -96,7 +97,8 @@ export default function Dropdown({
                                 "dropdown-component-choosal"
                               )}
                             >
-                              <Check
+                              <IconComponent
+                                name="Check"
                                 className={
                                   active
                                     ? "dropdown-component-check-icon"

src/frontend/src/components/floatComponent/index.tsx

@@ -15,6 +15,7 @@ export default function FloatComponent({
   const min = 0;
   const max = 1;
 
+  // Clear component state
   useEffect(() => {
     if (disabled) {
       onChange("");

src/frontend/src/components/genericIconComponent/index.tsx

@@ -0,0 +1,11 @@
+import { IconComponentProps } from "../../types/components";
+import { nodeIconsLucide } from "../../utils/styleUtils";
+
+export default function IconComponent({
+  name,
+  className,
+  iconColor,
+}: IconComponentProps): JSX.Element {
+  const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
+  return <TargetIcon className={className} style={{ color: iconColor }} />;
+}