Refactor NodeConfiguration and NodeLibrary components for improved clarity and performance

- Removed unused imports and streamlined the code structure in NodeConfiguration and NodeLibrary components.
- Updated CSS for field labels to enhance styling consistency.
- Optimized category generation in NodeLibrary using useMemo for better performance.
- Cleaned up commented-out code and unnecessary variables to improve readability.

src/components/NodeConfiguration.tsx

@@ -1,19 +1,10 @@
 import React, { useState } from "react";
-import { NodeData, Workflow } from "../types";
+import { NodeData } from "../types";
 import { useWorkflowStore } from "../store/workflowStore";
 import { X, Settings, Sparkles } from "lucide-react";
 import { promptOptimizer } from "../services/promptOptimizer";
 import { callOpenAI } from "../services/openaiService";
 import { Button } from "./ui/button";
-import { Input } from "./ui/input";
-import { Textarea } from "./ui/textarea";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./ui/select";
 import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 import { Badge } from "./ui/badge";
 import { DatabaseNodeConfiguration } from "./DatabaseNodeConfiguration";
@@ -21,7 +12,6 @@ import { LabelChangeDialog } from "./LabelChangeDialog";
 import { LabelDependencyManager } from "../utils/labelDependencyManager";
 import { FieldWithHelp } from "./FieldWithHelp";
 import { getNodeTypeConfig } from "../config/nodeTypeConfigs";
-import { getFieldsForNodeType } from "../config/fieldConfigs";
 
 interface NodeConfigurationProps {
   nodeId: string;

src/components/NodeLibrary.tsx

@@ -1,21 +1,12 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from "react";
 import { useWorkflowStore } from "../store/workflowStore";
-import {
-  Search,
-  Grid,
-  List,
-  Brain,
-  Globe,
-  ArrowRight,
-  Database,
-  FileText,
-  // X, // Removed unused import
-  ChevronLeft,
-  // ChevronRight, // Removed unused import
-  Zap,
-  Search as SearchIcon,
-  HelpCircle,
-} from "lucide-react";
+import { Search, Grid, List, ChevronLeft, HelpCircle } from "lucide-react";
 import {
   getNodeTypeConfig,
   getNodeTypesByCategory,
@@ -55,20 +46,6 @@ export const NodeLibrary: React.FC = () => {
     "databaseDelete",
   ];
 
-  const nodeTypeIcons: Record<NodeType, any> = {
-    dataInput: ArrowRight,
-    webScraping: Globe,
-    llmTask: Brain,
-    embeddingGenerator: Zap,
-    similaritySearch: SearchIcon,
-    structuredOutput: FileText,
-    dataOutput: ArrowRight,
-    databaseQuery: Database,
-    databaseInsert: Database,
-    databaseUpdate: Database,
-    databaseDelete: Database,
-  };
-
   const nodeTypeColors: Record<NodeType, string> = {
     dataInput: "blue",
     webScraping: "green",
@@ -84,13 +61,16 @@ export const NodeLibrary: React.FC = () => {
   };
 
   const nodeTypesByCategory = getNodeTypesByCategory();
-  const categories = [
-    { name: "All", count: nodeTypesList.length },
-    ...Object.entries(nodeTypesByCategory).map(([category, nodes]) => ({
-      name: category,
-      count: nodes.length,
-    })),
-  ];
+  const categories = useMemo(
+    () => [
+      { name: "All", count: nodeTypesList.length },
+      ...Object.entries(nodeTypesByCategory).map(([category, nodes]) => ({
+        name: category,
+        count: nodes.length,
+      })),
+    ],
+    [nodeTypesByCategory, nodeTypesList.length]
+  );
 
   const filteredNodes = nodeTypesList.filter((nodeType) => {
     const config = getNodeTypeConfig(nodeType);
@@ -269,7 +249,6 @@ export const NodeLibrary: React.FC = () => {
         className={`bg-white border-r border-gray-200 flex flex-col shadow-lg transition-all duration-300 ${
           isCollapsed ? "w-16" : "w-64 lg:w-72"
         }`}
-        role="complementary"
         aria-label="Node Library"
       >
         {/* Header */}
@@ -467,7 +446,6 @@ export const NodeLibrary: React.FC = () => {
                 ) : (
                   filteredNodes.map((nodeType, index) => {
                     const config = getNodeTypeConfig(nodeType);
-                    const IconComponent = nodeTypeIcons[nodeType];
                     const isFocused = focusedNodeIndex === index;
                     const isHelpOpen = showHelp === nodeType;
 

src/index.css

@@ -263,7 +263,7 @@
   }
 
   .field-label {
-    @apply block text-sm font-medium text-gray-700 mb-1 flex items-center;
+    @apply text-sm font-medium text-gray-700 mb-1 flex items-center;
   }
 
   .field-input {