Add Slack integration support across components

- Introduced a new 'slack' entry in the ConfigurationWizard for Slack integration setup.
- Updated NodeLibrary to include Slack as a node type with associated color coding.
- Enhanced BaseNode with Slack icon representation.
- Configured nodeTypeConfigs for Slack with detailed descriptions and common use cases.
- Added connection suggestions for Slack nodes to facilitate integration patterns.

src/components/ConfigurationWizard.tsx

@@ -135,6 +135,17 @@ const WIZARD_STEPS: Record<NodeType, WizardStep[]> = {
       helpText: "Set up your database operation parameters",
     },
   ],
+  // Slack integration
+  slack: [
+    {
+      id: "slack-config",
+      title: "Slack Integration",
+      description: "Configure your Slack integration",
+      component: DataInputWizard, // Placeholder - will be replaced with SlackWizard
+      validation: (data: any) => !!data.operation && !!data.botToken,
+      helpText: "Set up your Slack operation parameters",
+    },
+  ],
 };
 
 export const ConfigurationWizard: React.FC<ConfigurationWizardProps> = ({
@@ -196,6 +207,7 @@ export const ConfigurationWizard: React.FC<ConfigurationWizardProps> = ({
       similaritySearch: "Similarity Search",
       structuredOutput: "Structured Output",
       database: "Database Operations",
+      slack: "Slack Integration",
     };
     return labels[type] || "New Node";
   };

src/components/NodeLibrary.tsx

@@ -41,6 +41,7 @@ export const NodeLibrary: React.FC = () => {
     "structuredOutput",
     "dataOutput",
     "database",
+    "slack",
   ];
 
   const nodeTypeColors: Record<NodeType, string> = {
@@ -52,6 +53,7 @@ export const NodeLibrary: React.FC = () => {
     structuredOutput: "indigo",
     dataOutput: "gray",
     database: "cyan",
+    slack: "purple",
   };
 
   const nodeTypesByCategory = getNodeTypesByCategory();

src/components/nodes/BaseNode.tsx

@@ -13,6 +13,7 @@ import {
   XCircle,
   AlertCircle,
   Database,
+  MessageSquare,
 } from "lucide-react";
 import { clsx } from "clsx";
 
@@ -25,6 +26,7 @@ const nodeIcons: Record<NodeType, React.ComponentType<any>> = {
   dataInput: ArrowUpFromLine,
   dataOutput: ArrowDownToLine,
   database: Database,
+  slack: MessageSquare,
 };
 
 const nodeColors: Record<
@@ -79,6 +81,12 @@ const nodeColors: Record<
     icon: "text-cyan-600",
     accent: "bg-cyan-500",
   },
+  slack: {
+    bg: "bg-purple-50",
+    border: "border-purple-200",
+    icon: "text-purple-600",
+    accent: "bg-purple-500",
+  },
 };
 
 const statusConfig = {

src/config/nodeTypeConfigs.ts

@@ -132,6 +132,25 @@ export const nodeTypeConfigs: Record<NodeType, NodeTypeConfig> = {
       "Sync data between different systems",
     ],
   },
+  slack: {
+    technicalName: "slack",
+    userFriendlyName: "Slack Integration",
+    description:
+      "Send messages, manage channels, interact with users, and more on Slack",
+    category: "Communication",
+    icon: "💬",
+    helpText:
+      "Integrate with Slack to send messages, create channels, manage users, share files, add reactions, and set reminders. Perfect for notifications and team communication.",
+    commonUseCases: [
+      "Send automated notifications to channels",
+      "Post daily reports and updates",
+      "Create project-specific channels",
+      "Send direct messages to team members",
+      "Share files and documents",
+      "Set reminders for important tasks",
+      "React to messages with emojis",
+    ],
+  },
 };
 
 export const getNodeTypeConfig = (nodeType: NodeType): NodeTypeConfig => {

src/utils/connectionSuggestions.ts

@@ -113,7 +113,20 @@ const NODE_COMPATIBILITY: Record<
       "Query → Generate embeddings",
       "Insert/Update/Delete → Confirm output",
     ],
-    description: "Database operations can feed into processing nodes or output confirmation",
+    description:
+      "Database operations can feed into processing nodes or output confirmation",
+  },
+  // Slack node
+  slack: {
+    canConnectTo: ["dataOutput"],
+    shouldConnectTo: ["dataOutput"],
+    commonPatterns: [
+      "Process → Send notification",
+      "Generate report → Post to channel",
+      "Data analysis → Share results",
+    ],
+    description:
+      "Slack nodes typically send notifications and updates to team channels",
   },
 };