feat[genericIconComponent]: Add a lucide method to the icon component

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

@@ -1,8 +1,15 @@
-import { IconComponentProps, SvgIconProps } from "../../types/components";
+import { IconComponentProps, IconProps } from "../../types/components";
-import { svgIcons } from "../../utils";
+import { nodeIconsLucide, svgIcons } from "../../utils";
 
-export function IconFromSvg({ name }: SvgIconProps): JSX.Element {
+export function IconFromLucide({ name }: IconProps): JSX.Element {
-  const TargetSvg = svgIcons[name]
+  const TargetIcon = nodeIconsLucide[name];
+  return (
+    <TargetIcon />
+  );
+}
+
+export function IconFromSvg({ name }: IconProps): JSX.Element {
+  const TargetSvg = svgIcons[name];
   return (
     <TargetSvg />
   );
@@ -12,5 +19,9 @@ export default function IconComponent({ method, name }: IconComponentProps): JSX
   switch (method) {
     case 'SVG':
       return <IconFromSvg name={ name } />
+    case 'LUCIDE':
+      return <IconFromLucide name={ name } />
+    default:
+      return 
   }
 }

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

@@ -162,7 +162,7 @@ export interface IVarHighlightType {
   name: string;
 }
 
-export type SvgIconProps = {
+export type IconProps = {
   name: string;
 }
 

src/frontend/src/utils.ts

@@ -96,7 +96,7 @@ export const svgIcons = {
   Airbyte: SvgAirbyte,
   Anthropic: SvgAnthropicBox,
   Bing: SvgBing,
-  ChromaIcon: SvgChroma,
+  Chroma: SvgChroma,
   Cohere: SvgCohere,
   Evernote: SvgEvernoteIcon,
   FacebookMessenger: SvgFacebookMessengerLogo2020,
@@ -215,161 +215,57 @@ export const nodeNames: { [char: string]: string } = {
   unknown: "Unknown",
 };
 
-export const nodeIconsLucide: {
+export const nodeIconsLucide = {
-  [char: string]: React.ForwardRefExoticComponent<
+  Chroma: ChromaIcon,
-    ComponentType<SVGProps<SVGSVGElement>>
+  AirbyteJSONLoader: AirbyteIcon,
-  >;
+  Anthropic: AnthropicIcon,
-} = {
+  ChatAnthropic: AnthropicIcon,
-  Chroma: ChromaIcon as React.ForwardRefExoticComponent<
+  BingSearchAPIWrapper: BingIcon,
-    ComponentType<SVGProps<SVGSVGElement>>
+  BingSearchRun: BingIcon,
-  >,
+  Cohere: CohereIcon,
-  AirbyteJSONLoader: AirbyteIcon as React.ForwardRefExoticComponent<
+  CohereEmbeddings: CohereIcon,
-    ComponentType<SVGProps<SVGSVGElement>>
+  EverNoteLoader: EvernoteIcon,
-  >,
+  FacebookChatLoader: FBIcon,
-  Anthropic: AnthropicIcon as React.ForwardRefExoticComponent<
+  GitbookLoader: GitBookIcon,
-    ComponentType<SVGProps<SVGSVGElement>>
+  GoogleSearchAPIWrapper: GoogleIcon,
-  >,
+  GoogleSearchResults: GoogleIcon,
-  ChatAnthropic: AnthropicIcon as React.ForwardRefExoticComponent<
+  GoogleSearchRun: GoogleIcon,
-    ComponentType<SVGProps<SVGSVGElement>>
+  HNLoader: HackerNewsIcon,
-  >,
+  HuggingFaceHub: HuggingFaceIcon,
-  BingSearchAPIWrapper: BingIcon as React.ForwardRefExoticComponent<
+  HuggingFaceEmbeddings: HuggingFaceIcon,
-    ComponentType<SVGProps<SVGSVGElement>>
+  IFixitLoader: IFixIcon,
-  >,
+  Meta: MetaIcon,
-  BingSearchRun: BingIcon as React.ForwardRefExoticComponent<
+  Midjorney: MidjourneyIcon,
-    ComponentType<SVGProps<SVGSVGElement>>
+  MongoDBAtlasVectorSearch: MongoDBIcon,
-  >,
+  NotionDirectoryLoader: NotionIcon,
-  Cohere: CohereIcon as React.ForwardRefExoticComponent<
+  ChatOpenAI: OpenAiIcon,
-    ComponentType<SVGProps<SVGSVGElement>>
+  OpenAI: OpenAiIcon,
-  >,
+  OpenAIEmbeddings: OpenAiIcon,
-  CohereEmbeddings: CohereIcon as React.ForwardRefExoticComponent<
+  Pinecone: PineconeIcon,
-    ComponentType<SVGProps<SVGSVGElement>>
+  Qdrant: QDrantIcon,
-  >,
+  Searx: SearxIcon,
-  EverNoteLoader: EvernoteIcon as React.ForwardRefExoticComponent<
+  SlackDirectoryLoader: SlackIcon,
-    ComponentType<SVGProps<SVGSVGElement>>
+  SupabaseVectorStore: SupabaseIcon,
-  >,
+  VertexAI: VertexAIIcon,
-  FacebookChatLoader: FBIcon as React.ForwardRefExoticComponent<
+  ChatVertexAI: VertexAIIcon,
-    ComponentType<SVGProps<SVGSVGElement>>
+  agents: Rocket,
-  >,
+  chains: Link,
-  GitbookLoader: GitBookIcon as React.ForwardRefExoticComponent<
+  memories: Cpu,
-    ComponentType<SVGProps<SVGSVGElement>>
+  llms: Lightbulb,
-  >,
+  prompts: TerminalSquare,
-  GoogleSearchAPIWrapper: GoogleIcon as React.ForwardRefExoticComponent<
+  tools: Wrench,
-    ComponentType<SVGProps<SVGSVGElement>>
+  advanced: Laptop2,
-  >,
+  chat: MessageCircle,
-  GoogleSearchResults: GoogleIcon as React.ForwardRefExoticComponent<
+  embeddings: Fingerprint,
-    ComponentType<SVGProps<SVGSVGElement>>
+  documentloaders: Paperclip,
-  >,
+  vectorstores: Layers,
-  GoogleSearchRun: GoogleIcon as React.ForwardRefExoticComponent<
+  toolkits: Hammer,
-    ComponentType<SVGProps<SVGSVGElement>>
+  textsplitters: Scissors,
-  >,
+  wrappers: Gift,
-  HNLoader: HackerNewsIcon as React.ForwardRefExoticComponent<
+  utilities: Wand2,
-    ComponentType<SVGProps<SVGSVGElement>>
+  output_parsers: Compass,
-  >,
+  retrievers: FileSearch,
-  HuggingFaceHub: HuggingFaceIcon as React.ForwardRefExoticComponent<
+  unknown: HelpCircle,
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  HuggingFaceEmbeddings: HuggingFaceIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  IFixitLoader: IFixIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  Meta: MetaIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  Midjorney: MidjourneyIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  MongoDBAtlasVectorSearch: MongoDBIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  NotionDirectoryLoader: NotionIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  ChatOpenAI: OpenAiIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  OpenAI: OpenAiIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  OpenAIEmbeddings: OpenAiIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  Pinecone: PineconeIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  Qdrant: QDrantIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  Searx: SearxIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  SlackDirectoryLoader: SlackIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  SupabaseVectorStore: SupabaseIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  VertexAI: VertexAIIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  ChatVertexAI: VertexAIIcon as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  agents: Rocket as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  chains: Link as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  memories: Cpu as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  llms: Lightbulb as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  prompts: TerminalSquare as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  tools: Wrench as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  advanced: Laptop2 as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  chat: MessageCircle as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  embeddings: Fingerprint as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  documentloaders: Paperclip as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  vectorstores: Layers as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  toolkits: Hammer as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  textsplitters: Scissors as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  wrappers: Gift as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  utilities: Wand2 as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  output_parsers: Compass as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  retrievers: FileSearch as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
-  unknown: HelpCircle as React.ForwardRefExoticComponent<
-    ComponentType<SVGProps<SVGSVGElement>>
-  >,
 };
 
 export const gradients = [