feat[GenericNode]: Change GenericNode icon to generic icon

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

@@ -33,6 +33,8 @@ export default function GenericNode({
   // any to avoid type conflict
   const Icon: any =
     nodeIconsLucide[data.type] || nodeIconsLucide[types[data.type]];
+  console.log({ data, Icon, types: data.type || types[data.type], color: nodeColors[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();
@@ -86,12 +88,11 @@ export default function GenericNode({
       >
         <div className="generic-node-div-title">
           <div className="generic-node-title-arrangement">
-            <Icon
+            <IconComponent
-              strokeWidth={1.5}
+              name={name}
-              className="generic-node-icon"
+              style="generic-node-icon"
-              style={{
+              method="LUCIDE"
-                color: nodeColors[types[data.type]] ?? nodeColors.unknown,
+              iconColor={`${nodeColors[types[data.type]]}`}
-              }}
             />
             <div className="generic-node-tooltip-div">
               <ShadTooltip content={data.node.display_name}>

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

@@ -4,14 +4,16 @@ import { nodeIconsLucide, svgIcons } from "../../utils";
 export function IconFromLucide({
   name,
   style,
+  iconColor,
 }: IconProps): JSX.Element {
   const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
-  return <TargetIcon className={ style } />;
+  return <TargetIcon className={ style } style={{ color: iconColor }} />;
 }
 
 export function IconFromSvg({
   name,
-  style
+  style,
+  iconColor,
 }: IconProps): JSX.Element {
   const TargetSvg = svgIcons[name] ?? nodeIconsLucide["unknown"];
   return <TargetSvg className={ style } />;
@@ -21,12 +23,13 @@ export default function IconComponent({
   method,
   name,
   style,
+  iconColor,
 }: IconComponentProps): JSX.Element {
   switch (method) {
     case "SVG":
-      return <IconFromSvg name={name} style={ style } />;
+      return <IconFromSvg name={name} style={ style } iconColor={ iconColor } />;
     case "LUCIDE":
-      return <IconFromLucide name={name} style={ style } />;
+      return <IconFromLucide name={name} style={ style } iconColor={ iconColor } />;
     default:
       console.error("IconComponent: invalid method");
       return <IconFromLucide name={"unknown"} style={"unknown"} />;

src/frontend/src/types/components/index.ts

@@ -165,10 +165,12 @@ export interface IVarHighlightType {
 export type IconProps = {
   name: string;
   style: string;
+  iconColor?: string;
 };
 
 export type IconComponentProps = {
   method: "SVG" | "LUCIDE";
   name: string;
   style: string;
+  iconColor?: string;
 };

src/frontend/src/utils.ts

@@ -136,7 +136,7 @@ export enum TypeModal {
 }
 
 export const svgIcons = {
-  Airbyte: SvgAirbyte,
+  /* Airbyte: SvgAirbyte,
   Anthropic: SvgAnthropicBox,
   Bing: SvgBing,
   Chroma: SvgChroma,
@@ -165,7 +165,7 @@ export const svgIcons = {
   Weaviate: SvgWeaviate,
   Wikipedia: SvgWikipedia,
   Wolfram: SvgWolfram,
-  Word: SvgWord,
+  Word: SvgWord, */
 };
 
 export const textColors = {