machinaos 0.0.1

package/client/src/components/ui/ComponentItem.tsx

@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import { useAppTheme } from '../../hooks/useAppTheme';
+import { INodeTypeDescription } from '../../types/INodeProperties';
+
+interface ComponentItemProps {
+  definition: INodeTypeDescription;
+  onDragStart: (event: React.DragEvent, definition: INodeTypeDescription) => void;
+}
+
+const ComponentItem: React.FC<ComponentItemProps> = ({ definition, onDragStart }) => {
+  const theme = useAppTheme();
+  const [isDragging, setIsDragging] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  
+  // Helper to get colors from new interface format
+  const getNodeColor = () => definition.defaults.color || '#9E9E9E';
+  const isImageIcon = () => {
+    const icon = definition.icon;
+    return icon && (icon.startsWith('data:') || icon.startsWith('http') || icon.startsWith('/'));
+  };
+  const getIconBackground = () => isImageIcon() ? theme.colors.backgroundAlt : getNodeColor();
+  const getBorderColor = () => {
+    // Create a darker shade for border
+    const color = getNodeColor();
+    // Simple color darkening - could be enhanced
+    if (color.startsWith('#')) {
+      const hex = color.substring(1);
+      const r = Math.max(0, parseInt(hex.substring(0, 2), 16) - 40);
+      const g = Math.max(0, parseInt(hex.substring(2, 4), 16) - 40);
+      const b = Math.max(0, parseInt(hex.substring(4, 6), 16) - 40);
+      return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    }
+    return color;
+  };
+
+  return (
+    <div
+      draggable
+      onDragStart={(e) => {
+        setIsDragging(true);
+        onDragStart(e, definition);
+      }}
+      onDragEnd={() => setIsDragging(false)}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{
+        padding: '12px',
+        backgroundColor: theme.colors.background,
+        border: `2px solid ${isHovered ? getBorderColor() : theme.colors.border}`,
+        borderRadius: theme.borderRadius.lg,
+        cursor: 'grab',
+        transition: `all ${theme.transitions.fast}`,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        boxShadow: isHovered
+          ? theme.isDarkMode
+            ? `0 4px 12px ${getNodeColor()}25, 0 0 0 1px ${getNodeColor()}15`
+            : `0 4px 12px ${getNodeColor()}30, 0 0 0 1px ${getNodeColor()}20`
+          : theme.isDarkMode
+            ? `0 1px 3px ${theme.colors.shadowLight}`
+            : `0 1px 4px rgba(0,0,0,0.08)`,
+        transform: isHovered ? 'translateY(-2px) scale(1.02)' : 'translateY(0)',
+        opacity: isDragging ? 0.5 : 1,
+        fontFamily: 'system-ui, sans-serif',
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Gradient Background on Hover */}
+      <div style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: theme.isDarkMode
+          ? `linear-gradient(135deg, ${getNodeColor()}08 0%, ${getNodeColor()}12 100%)`
+          : `linear-gradient(135deg, ${getNodeColor()}06 0%, ${getNodeColor()}12 100%)`,
+        opacity: isHovered ? 1 : 0,
+        transition: `opacity ${theme.transitions.fast}`,
+        pointerEvents: 'none',
+      }} />
+      
+      {/* Icon */}
+      <div
+        style={{
+          fontSize: '18px',
+          width: '36px',
+          height: '36px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: theme.borderRadius.md,
+          backgroundColor: getIconBackground(),
+          boxShadow: `0 2px 4px ${getNodeColor()}30`,
+          flexShrink: 0,
+          position: 'relative',
+          zIndex: 1,
+        }}
+      >
+        {definition.icon && (definition.icon.startsWith('data:') || definition.icon.startsWith('http') || definition.icon.startsWith('/')) ? (
+          <img src={definition.icon} alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} />
+        ) : (
+          definition.icon || '📦'
+        )}
+      </div>
+      
+      {/* Content */}
+      <div style={{ 
+        flex: 1, 
+        overflow: 'hidden',
+        position: 'relative',
+        zIndex: 1,
+      }}>
+        <div style={{
+          fontWeight: theme.fontWeight.medium,
+          fontSize: theme.fontSize.base,
+          color: theme.colors.text,
+          marginBottom: '2px',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}>
+          {definition.displayName}
+        </div>
+        <div style={{
+          fontSize: theme.fontSize.xs,
+          color: theme.colors.textSecondary,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          lineHeight: '1.3',
+        }}>
+          {definition.description}
+        </div>
+      </div>
+
+      {/* Drag Indicator */}
+      <div style={{
+        fontSize: '14px',
+        color: theme.colors.textSecondary,
+        opacity: isHovered ? 0.6 : 0.3,
+        transition: `opacity ${theme.transitions.fast}`,
+        position: 'relative',
+        zIndex: 1,
+      }}>
+        ⋮⋮
+      </div>
+    </div>
+  );
+};
+
+export default ComponentItem;

package/client/src/components/ui/ComponentPalette.tsx

@@ -0,0 +1,321 @@
+import React from 'react';
+import { useAppTheme } from '../../hooks/useAppTheme';
+import { ComponentPaletteProps } from '../../types/ComponentTypes';
+import { INodeTypeDescription } from '../../types/INodeProperties';
+import ComponentItem from './ComponentItem';
+import CollapsibleSection from './CollapsibleSection';
+
+// Category emoji icons
+const CATEGORY_EMOJIS: Record<string, string> = {
+  workflow: '⚡',
+  trigger: '🕐',
+  ai: '🤖',
+  agent: '🤖',
+  model: '🧬',
+  skill: '🎯',
+  tool: '🛠️',
+  location: '📍',
+  whatsapp: '💬',
+  android: '📱',
+  chat: '💭',
+  code: '💻',
+  data: '🗄️',
+  util: '🔧',
+};
+
+// Categories shown in simple (noob) mode - only AI related
+const SIMPLE_MODE_CATEGORIES = ['agent', 'model', 'skill'];
+
+const ComponentPalette: React.FC<ComponentPaletteProps> = ({
+  nodeDefinitions,
+  searchQuery,
+  onSearchChange,
+  collapsedSections,
+  onToggleSection,
+  onDragStart,
+  proMode = false,  // Default to simple mode
+}) => {
+  const theme = useAppTheme();
+
+  const getCategoryConfig = (category: string) => {
+    const key = category.toLowerCase();
+    // Use theme-specific category colors (darker for light mode, vibrant for dark mode)
+    const colors = theme.colors as Record<string, string>;
+    const colorMap: Record<string, string> = {
+      workflow: colors.categoryWorkflow || theme.dracula.orange,
+      trigger: colors.categoryTrigger || theme.dracula.pink,
+      ai: colors.categoryAI || theme.dracula.purple,
+      agent: colors.categoryAgent || theme.dracula.purple,
+      model: colors.categoryModel || theme.dracula.cyan,
+      skill: colors.categorySkill || theme.dracula.green,
+      tool: colors.categoryTool || theme.dracula.green,
+      location: colors.categoryLocation || theme.dracula.red,
+      whatsapp: colors.categoryWhatsapp || theme.dracula.green,
+      android: colors.categoryAndroid || theme.dracula.cyan,
+      chat: colors.categoryChat || theme.dracula.yellow,
+      code: colors.categoryCode || theme.dracula.orange,
+      data: colors.categoryTrigger || theme.dracula.pink,
+      util: colors.categoryUtil || theme.dracula.purple,
+    };
+    const labelMap: Record<string, string> = {
+      workflow: 'Workflow',
+      trigger: 'Triggers',
+      ai: 'AI',
+      agent: 'AI Agents',
+      model: 'AI Models',
+      skill: 'AI Skills',
+      tool: 'AI Tools',
+      location: 'Google Maps',
+      whatsapp: 'WhatsApp',
+      android: 'Android',
+      chat: 'Chat',
+      code: 'Code Executors',
+      data: 'Data',
+      util: 'Utilities',
+    };
+    return {
+      icon: CATEGORY_EMOJIS[key] || '📦',
+      color: colorMap[key] || theme.colors.textSecondary,
+      label: labelMap[key] || category
+    };
+  };
+
+  const categorizedComponents = React.useMemo(() => {
+    const categories: Record<string, INodeTypeDescription[]> = {};
+
+    const filteredDefinitions = Object.values(nodeDefinitions).filter((definition) => {
+      // Filter by search query
+      if (searchQuery.trim()) {
+        try {
+          const query = searchQuery.toLowerCase();
+          const matchesQuery = (
+            (definition.displayName || '').toLowerCase().includes(query) ||
+            (definition.description || '').toLowerCase().includes(query) ||
+            (definition.group?.[0] || '').toLowerCase().includes(query)
+          );
+          if (!matchesQuery) return false;
+        } catch (error) {
+          return false;
+        }
+      }
+
+      // Filter by proMode - in simple mode, only show AI-related categories
+      if (!proMode) {
+        const categoryKey = (definition.group?.[0] || '').toLowerCase();
+        if (!SIMPLE_MODE_CATEGORIES.includes(categoryKey)) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+
+    filteredDefinitions.forEach((definition) => {
+      try {
+        const categoryKey = definition.group?.[0] || 'Uncategorized';
+        if (!categories[categoryKey]) {
+          categories[categoryKey] = [];
+        }
+        categories[categoryKey].push(definition);
+      } catch (error) {
+        // Skip invalid definitions
+      }
+    });
+
+    return categories;
+  }, [nodeDefinitions, searchQuery, proMode]);
+
+  const totalComponents = Object.values(categorizedComponents).reduce(
+    (acc, components) => acc + components.length, 
+    0
+  );
+
+  return (
+    <div style={{
+      width: '100%',
+      height: '100%',
+      overflowY: 'auto',
+      backgroundColor: theme.colors.backgroundPanel,
+      display: 'flex',
+      flexDirection: 'column',
+    }}>
+      {/* Header Section */}
+      <div style={{
+        padding: theme.spacing.lg,
+        borderBottom: `1px solid ${theme.colors.border}`,
+        background: theme.colors.background,
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: theme.spacing.md }}>
+          <h2 style={{
+            margin: 0,
+            fontSize: theme.fontSize.lg,
+            fontWeight: theme.fontWeight.semibold,
+            color: theme.colors.text,
+            fontFamily: 'system-ui, sans-serif',
+          }}>
+            Components
+          </h2>
+          <span style={{
+            fontSize: theme.fontSize.xs,
+            padding: '4px 10px',
+            backgroundColor: theme.colors.backgroundAlt,
+            borderRadius: '12px',
+            color: theme.colors.textSecondary,
+            fontWeight: theme.fontWeight.medium,
+          }}>
+            {totalComponents}
+          </span>
+        </div>
+
+        {/* Search Input */}
+        <div style={{ position: 'relative' }}>
+          <input
+            type="text"
+            placeholder="Search..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            style={{
+              width: '100%',
+              padding: '10px 12px',
+              paddingLeft: '36px',
+              fontSize: theme.fontSize.sm,
+              border: `1px solid ${theme.colors.border}`,
+              borderRadius: theme.borderRadius.md,
+              backgroundColor: theme.colors.backgroundAlt,
+              color: theme.colors.text,
+              fontFamily: 'system-ui, sans-serif',
+              outline: 'none',
+              transition: `all ${theme.transitions.fast}`,
+            }}
+            onFocus={(e) => {
+              e.currentTarget.style.borderColor = theme.colors.focus;
+              e.currentTarget.style.backgroundColor = theme.colors.background;
+            }}
+            onBlur={(e) => {
+              e.currentTarget.style.borderColor = theme.colors.border;
+              e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt;
+            }}
+          />
+          <svg
+            style={{
+              position: 'absolute',
+              left: '12px',
+              top: '50%',
+              transform: 'translateY(-50%)',
+              width: '16px',
+              height: '16px',
+              color: theme.colors.textSecondary,
+              pointerEvents: 'none',
+            }}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+      </div>
+
+      {/* Categories */}
+      <div style={{ 
+        padding: theme.spacing.md,
+        flex: 1,
+        overflowY: 'auto',
+      }}>
+        {Object.keys(categorizedComponents).length === 0 ? (
+          <div style={{
+            textAlign: 'center',
+            padding: theme.spacing.xxl,
+            color: theme.colors.textSecondary,
+          }}>
+            <svg
+              style={{ width: '48px', height: '48px', marginBottom: theme.spacing.md, opacity: 0.5 }}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            <p style={{ margin: 0, fontSize: theme.fontSize.sm }}>
+              No components found matching "{searchQuery}"
+            </p>
+          </div>
+        ) : (
+          Object.entries(categorizedComponents).map(([category, components]) => {
+            try {
+              const isCollapsed = collapsedSections[category];
+              const config = getCategoryConfig(category);
+
+              return (
+                <div key={category || 'unknown'} style={{ marginBottom: theme.spacing.md }}>
+                  <CollapsibleSection
+                    title={
+                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                          <span style={{
+                            width: '28px',
+                            height: '28px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            backgroundColor: `${config.color}20`,
+                            borderRadius: '6px',
+                            fontSize: '16px',
+                          }}>
+                            {config.icon}
+                          </span>
+                          <span style={{
+                            fontWeight: theme.fontWeight.semibold,
+                            color: theme.colors.text,
+                          }}>
+                            {config.label}
+                          </span>
+                        </div>
+                        <span style={{
+                          fontSize: theme.fontSize.xs,
+                          padding: '3px 10px',
+                          backgroundColor: `${config.color}15`,
+                          borderRadius: '12px',
+                          color: theme.colors.textSecondary,
+                          fontWeight: theme.fontWeight.medium,
+                        }}>
+                          {components?.length || 0}
+                        </span>
+                      </div>
+                    }
+                    isCollapsed={isCollapsed}
+                    onToggle={() => onToggleSection(category)}
+                  >
+                    <div style={{
+                      display: 'grid',
+                      gap: theme.spacing.sm,
+                      paddingTop: theme.spacing.sm,
+                    }}>
+                      {(components || []).map((definition, idx) => {
+                        try {
+                          return (
+                            <ComponentItem
+                              key={definition?.name || `item-${idx}`}
+                              definition={definition}
+                              onDragStart={onDragStart}
+                            />
+                          );
+                        } catch (error) {
+                          return null;
+                        }
+                      })}
+                    </div>
+                  </CollapsibleSection>
+                </div>
+              );
+            } catch (error) {
+              return null;
+            }
+          })
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ComponentPalette;