import React, { useState, useCallback, useRef, useEffect } from 'react';

import ReactFlow, {
addEdge,
useNodesState,
useEdgesState,
Controls,
Background,
BackgroundVariant,
Connection,
Edge,
ReactFlowProvider,
Node,
NodeChange,
EdgeChange,
OnNodesChange,
OnEdgesChange,
} from 'reactflow';
import Sidebar from './components/Sidebar';
import CustomNode from './components/CustomNode';
import FloatingOverlay from './components/FloatingOverlay';
import { INITIAL_NODES, INITIAL_EDGES } from './constants';
import { PhoenixNode, PhoenixEdge, NodeType } from './types';
import { Plus } from 'lucide-react';

const nodeTypes = {
custom: CustomNode,
};

interface HistoryItem {
nodes: PhoenixNode[];
edges: PhoenixEdge[];
}

const FlowArea = () => {
const reactFlowWrapper = useRef<HTMLDivElement>(null);
const [nodes, setNodes, onNodesChange] = useNodesState(INITIAL_NODES);
const [edges, setEdges, onEdgesChange] = useEdgesState(INITIAL_EDGES);
const [isExecuting, setIsExecuting] = useState(false);

// Undo/Redo History State
const [past, setPast] = useState<HistoryItem[]>([]);
const [future, setFuture] = useState<HistoryItem[]>([]);

// Capture current state into history
const takeSnapshot = useCallback(() => {
setPast((p) => {
const newPast = [...p, { nodes, edges }];
// Limit history depth to 50
return newPast.length > 50 ? newPast.slice(1) : newPast;
});
setFuture([]);
}, [nodes, edges]);

const undo = useCallback(() => {
if (past.length === 0) return;
const previous = past[past.length - 1];
const newPast = past.slice(0, past.length - 1);

setFuture((f) => [{ nodes, edges }, ...f]);
setPast(newPast);
setNodes(previous.nodes);
setEdges(previous.edges);
}, [past, nodes, edges, setNodes, setEdges]);

const redo = useCallback(() => {
if (future.length === 0) return;
const next = future[0];
const newFuture = future.slice(1);

setPast((p) => [...p, { nodes, edges }]);
setFuture(newFuture);
setNodes(next.nodes);
setEdges(next.edges);
}, [future, nodes, edges, setNodes, setEdges]);

// Keyboard Shortcuts
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
// Undo: Ctrl+Z or Cmd+Z
if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
e.preventDefault();
undo();
}
// Redo: Ctrl+Y, Cmd+Y, or Ctrl+Shift+Z
if (
((e.ctrlKey || e.metaKey) && e.key === 'y') ||
((e.ctrlKey || e.metaKey) && e.key === 'z' && e.shiftKey)
) {
e.preventDefault();
redo();
}
};

window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [undo, redo]);

// Wrapped Event Handlers to trigger Snapshots

const onNodesChangeWrapper: OnNodesChange = useCallback((changes) => {
// Snapshot on explicit removal (e.g. Backspace)
// Note: We don't snapshot on 'dimensions' or 'select' changes to avoid spam
if (changes.some(c => c.type === 'remove')) {
takeSnapshot();
}
onNodesChange(changes);
}, [onNodesChange, takeSnapshot]);

const onEdgesChangeWrapper: OnEdgesChange = useCallback((changes) => {
if (changes.some(c => c.type === 'remove')) {
takeSnapshot();
}
onEdgesChange(changes);
}, [onEdgesChange, takeSnapshot]);

const onConnect = useCallback(
(params: Connection) => {
takeSnapshot(); // Save state before connection
setEdges((eds) => addEdge({ ...params, animated: true, style: { stroke: '#64748b', strokeWidth: 2 } }, eds));
},
[setEdges, takeSnapshot]
);

const onDragOver = useCallback((event: React.DragEvent) => {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
}, []);

const onDrop = useCallback(
(event: React.DragEvent) => {
event.preventDefault();

const type = event.dataTransfer.getData('application/reactflow');
const label = event.dataTransfer.getData('application/reactflow-label');

if (typeof type === 'undefined' || !type) {
return;
}

const reactFlowBounds = reactFlowWrapper.current?.getBoundingClientRect();
const position = reactFlowBounds ? {
x: event.clientX - reactFlowBounds.left - 100,
y: event.clientY - reactFlowBounds.top - 20
} : { x: 0, y: 0 };

const newNode: PhoenixNode = {
id: `node_${Date.now()}`,
type: 'custom',
position,
data: {
label: label,
icon: type,
status: 'idle'
},
};

takeSnapshot(); // Save state before adding node
setNodes((nds) => nds.concat(newNode));
},
[setNodes, takeSnapshot]
);

const onNodeDragStart = useCallback(() => {
takeSnapshot(); // Save state before moving node
}, [takeSnapshot]);

const handleGeminiGeneration = useCallback((newNodes: PhoenixNode[], newEdges: PhoenixEdge[]) => {
takeSnapshot(); // Save state before AI generation overwrites

const formattedNodes = newNodes.map(n => ({
...n,
type: 'custom',
data: {
...n.data,
icon: n.data.icon || (n.type === NodeType.WEBHOOK ? 'webhook' : 'code'),
status: 'idle'
}
}));

const formattedEdges = newEdges.map(e => ({
...e,
animated: true,
style: { stroke: '#64748b', strokeWidth: 2 }
}));

setNodes(formattedNodes);
setEdges(formattedEdges);
}, [setNodes, setEdges, takeSnapshot]);

const runWorkflow = useCallback(async () => {
setIsExecuting(true);
const nodeIds = nodes.map(n => n.id);

for (const id of nodeIds) {
setNodes(nds => nds.map(n => n.id === id ? { ...n, data: { ...n.data, status: 'running' } } : n));
await new Promise(r => setTimeout(r, 800));
setNodes(nds => nds.map(n => n.id === id ? { ...n, data: { ...n.data, status: 'success' } } : n));
}

setIsExecuting(false);
}, [nodes, setNodes]);

return (
<div className="flex h-screen bg-black overflow-hidden">
<Sidebar />

<div className="flex-1 relative h-full" ref={reactFlowWrapper}>
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChangeWrapper}
onEdgesChange={onEdgesChangeWrapper}
onConnect={onConnect}
onDragOver={onDragOver}
onDrop={onDrop}
onNodeDragStart={onNodeDragStart}
nodeTypes={nodeTypes}
fitView
proOptions={{ hideAttribution: true }}
snapToGrid={true}
snapGrid={[20, 20]}
>
<Background
variant={BackgroundVariant.Dots}
gap={20}
size={1}
color="#334155"
className="bg-void-950"
/>
<Controls className="bg-slate-800 border-slate-700 fill-white" />
</ReactFlow>

<FloatingOverlay
onGenerate={handleGeminiGeneration}
onRun={runWorkflow}
isExecuting={isExecuting}
onUndo={undo}
onRedo={redo}
canUndo={past.length > 0}
canRedo={future.length > 0}
/>

{nodes.length === 0 && (
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center pointer-events-none opacity-50">
<div className="w-16 h-16 bg-slate-800 rounded-full mx-auto mb-4 flex items-center justify-center">
<Plus className="w-8 h-8 text-slate-500" />
</div>
<h3 className="text-xl font-bold text-slate-300">Start Building</h3>
<p className="text-slate-500">Drag nodes from the sidebar or ask AI to generate a flow.</p>
</div>
)}
</div>
</div>
);
};

export default function App() {
return (
<ReactFlowProvider>
<FlowArea />
</ReactFlowProvider>
);
}

README.md

@@ -1,10 +1,13 @@
 ---
-title: Phoenix Flow Builder
-emoji: 📉
-colorFrom: yellow
-colorTo: green
+title: Phoenix Flow Builder 🔥
+colorFrom: purple
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/custom-node.js

@@ -0,0 +1,99 @@
+class CustomNode extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .node-container {
+          background: rgba(15, 23, 42, 0.9);
+          border: 1px solid rgba(71, 85, 105, 0.5);
+          border-radius: 0.5rem;
+          padding: 1rem;
+          min-width: 200px;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+          transition: all 0.2s ease;
+        }
+        
+        .node-container:hover {
+          border-color: #fb923c;
+          box-shadow: 0 10px 15px -3px rgba(251, 146, 60, 0.1);
+        }
+        
+        .node-header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 0.75rem;
+        }
+        
+        .node-icon {
+          width: 2rem;
+          height: 2rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(251, 146, 60, 0.1);
+          border-radius: 0.25rem;
+          margin-right: 0.75rem;
+          color: #fb923c;
+        }
+        
+        .node-title {
+          font-weight: 600;
+          color: #e2e8f0;
+        }
+        
+        .node-body {
+          font-size: 0.875rem;
+          color: #94a3b8;
+        }
+        
+        .node-status {
+          height: 0.5rem;
+          width: 0.5rem;
+          border-radius: 50%;
+          margin-left: auto;
+        }
+        
+        .status-idle {
+          background-color: #64748b;
+        }
+        
+        .status-running {
+          background-color: #f59e0b;
+          animation: pulse 1.5s infinite;
+        }
+        
+        .status-success {
+          background-color: #10b981;
+        }
+        
+        .status-error {
+          background-color: #ef4444;
+        }
+        
+        @keyframes pulse {
+          0%, 100% {
+            opacity: 1;
+          }
+          50% {
+            opacity: 0.5;
+          }
+        }
+      </style>
+      
+      <div class="node-container">
+        <div class="node-header">
+          <div class="node-icon">
+            <i data-feather="code"></i>
+          </div>
+          <div class="node-title">Node</div>
+          <div class="node-status status-idle"></div>
+        </div>
+        <div class="node-body">
+          Drag handles to connect nodes
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('custom-node', CustomNode);

components/floating-overlay.js

@@ -0,0 +1,124 @@
+class FloatingOverlay extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          position: absolute;
+          bottom: 1rem;
+          right: 1rem;
+          z-index: 10;
+        }
+        
+        .overlay-container {
+          display: flex;
+          gap: 0.5rem;
+        }
+        
+        .action-button {
+          width: 3rem;
+          height: 3rem;
+          border-radius: 50%;
+          background: rgba(15, 23, 42, 0.9);
+          border: 1px solid rgba(71, 85, 105, 0.5);
+          color: #94a3b8;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        
+        .action-button:hover {
+          background: rgba(251, 146, 60, 0.1);
+          color: #fb923c;
+          border-color: #fb923c;
+        }
+        
+        .primary-button {
+          background: #fb923c;
+          color: white;
+          border-color: #fb923c;
+        }
+        
+        .primary-button:hover {
+          background: #ea580c;
+        }
+        
+        .disabled {
+          opacity: 0.5;
+          pointer-events: none;
+        }
+      </style>
+      
+      <div class="overlay-container">
+        <div class="action-button" id="undo-btn" title="Undo (Ctrl+Z)">
+          <i data-feather="corner-up-left"></i>
+        </div>
+        <div class="action-button" id="redo-btn" title="Redo (Ctrl+Y)">
+          <i data-feather="corner-up-right"></i>
+        </div>
+        <div class="action-button" id="ai-btn" title="Generate with AI">
+          <i data-feather="sparkles"></i>
+        </div>
+        <div class="action-button primary-button" id="run-btn" title="Run Workflow">
+          <i data-feather="play"></i>
+        </div>
+      </div>
+    `;
+    
+    this.setupEventListeners();
+    this.updateButtonStates();
+  }
+  
+  setupEventListeners() {
+    this.shadowRoot.getElementById('undo-btn').addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('undo'));
+    });
+    
+    this.shadowRoot.getElementById('redo-btn').addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('redo'));
+    });
+    
+    this.shadowRoot.getElementById('ai-btn').addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('generate'));
+    });
+    
+    this.shadowRoot.getElementById('run-btn').addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('run'));
+    });
+  }
+  
+  updateButtonStates() {
+    const canUndo = this.hasAttribute('can-undo');
+    const canRedo = this.hasAttribute('can-redo');
+    const isExecuting = this.hasAttribute('is-executing');
+    
+    const undoBtn = this.shadowRoot.getElementById('undo-btn');
+    const redoBtn = this.shadowRoot.getElementById('redo-btn');
+    const runBtn = this.shadowRoot.getElementById('run-btn');
+    
+    undoBtn.classList.toggle('disabled', !canUndo);
+    redoBtn.classList.toggle('disabled', !canRedo);
+    runBtn.classList.toggle('disabled', isExecuting);
+    
+    if (isExecuting) {
+      runBtn.innerHTML = '<i data-feather="loader" class="animate-spin"></i>';
+    } else {
+      runBtn.innerHTML = '<i data-feather="play"></i>';
+    }
+  }
+  
+  static get observedAttributes() {
+    return ['can-undo', 'can-redo', 'is-executing'];
+  }
+  
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'can-undo' || name === 'can-redo' || name === 'is-executing') {
+      this.updateButtonStates();
+    }
+  }
+}
+
+customElements.define('floating-overlay', FloatingOverlay);

components/sidebar.js

@@ -0,0 +1,153 @@
+class CustomSidebar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 280px;
+          height: 100vh;
+          background: rgba(15, 23, 42, 0.95);
+          border-right: 1px solid rgba(71, 85, 105, 0.5);
+          color: #e2e8f0;
+          overflow-y: auto;
+          position: relative;
+          z-index: 10;
+        }
+        
+        .sidebar-header {
+          padding: 1.5rem;
+          border-bottom: 1px solid rgba(71, 85, 105, 0.5);
+        }
+        
+        .sidebar-title {
+          font-size: 1.25rem;
+          font-weight: 600;
+          color: #fb923c;
+          margin-bottom: 0.5rem;
+        }
+        
+        .sidebar-subtitle {
+          font-size: 0.875rem;
+          color: #94a3b8;
+        }
+        
+        .node-category {
+          padding: 1rem 1.5rem;
+          border-bottom: 1px solid rgba(71, 85, 105, 0.5);
+        }
+        
+        .category-title {
+          font-size: 0.875rem;
+          font-weight: 500;
+          color: #94a3b8;
+          margin-bottom: 0.75rem;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+        }
+        
+        .node-item {
+          display: flex;
+          align-items: center;
+          padding: 0.75rem;
+          margin-bottom: 0.5rem;
+          border-radius: 0.375rem;
+          background: rgba(30, 41, 59, 0.5);
+          cursor: grab;
+          transition: all 0.2s ease;
+        }
+        
+        .node-item:hover {
+          background: rgba(251, 146, 60, 0.1);
+          border-color: #fb923c;
+        }
+        
+        .node-icon {
+          width: 2rem;
+          height: 2rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(251, 146, 60, 0.1);
+          border-radius: 0.25rem;
+          margin-right: 0.75rem;
+          color: #fb923c;
+        }
+        
+        .node-label {
+          font-size: 0.875rem;
+          font-weight: 500;
+        }
+      </style>
+      
+      <div class="sidebar-header">
+        <div class="sidebar-title">Phoenix Flow Builder</div>
+        <div class="sidebar-subtitle">Drag nodes to the canvas</div>
+      </div>
+      
+      <div class="node-category">
+        <div class="category-title">Triggers</div>
+        <div class="node-item" draggable="true" data-type="trigger" data-label="Webhook">
+          <div class="node-icon">
+            <i data-feather="activity"></i>
+          </div>
+          <div class="node-label">Webhook Trigger</div>
+        </div>
+        <div class="node-item" draggable="true" data-type="trigger" data-label="Schedule">
+          <div class="node-icon">
+            <i data-feather="clock"></i>
+          </div>
+          <div class="node-label">Scheduled Trigger</div>
+        </div>
+      </div>
+      
+      <div class="node-category">
+        <div class="category-title">Actions</div>
+        <div class="node-item" draggable="true" data-type="action" data-label="API Request">
+          <div class="node-icon">
+            <i data-feather="send"></i>
+          </div>
+          <div class="node-label">API Request</div>
+        </div>
+        <div class="node-item" draggable="true" data-type="action" data-label="Database Query">
+          <div class="node-icon">
+            <i data-feather="database"></i>
+          </div>
+          <div class="node-label">Database Query</div>
+        </div>
+      </div>
+      
+      <div class="node-category">
+        <div class="category-title">Logic</div>
+        <div class="node-item" draggable="true" data-type="condition" data-label="If Condition">
+          <div class="node-icon">
+            <i data-feather="code"></i>
+          </div>
+          <div class="node-label">If Condition</div>
+        </div>
+        <div class="node-item" draggable="true" data-type="condition" data-label="Switch">
+          <div class="node-icon">
+            <i data-feather="git-branch"></i>
+          </div>
+          <div class="node-label">Switch</div>
+        </div>
+      </div>
+    `;
+    
+    this.setupDragEvents();
+  }
+  
+  setupDragEvents() {
+    const nodeItems = this.shadowRoot.querySelectorAll('.node-item');
+    
+    nodeItems.forEach(node => {
+      node.addEventListener('dragstart', (event) => {
+        event.dataTransfer.setData('application/reactflow', node.dataset.type);
+        event.dataTransfer.setData('application/reactflow-label', node.dataset.label);
+        event.dataTransfer.effectAllowed = 'move';
+      });
+    });
+  }
+}
+
+customElements.define('custom-sidebar', CustomSidebar);

index.html

@@ -1,19 +1,44 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Phoenix Flow Builder</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: {
+                50: '#fff7ed',
+                100: '#ffedd5',
+                200: '#fed7aa',
+                300: '#fdba74',
+                400: '#fb923c',
+                500: '#f97316',
+                600: '#ea580c',
+                700: '#c2410c',
+                800: '#9a3412',
+                900: '#7c2d12',
+              }
+            }
+          }
+        }
+      }
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-900 text-gray-100">
+    <div id="app" class="h-screen"></div>
+    <script src="components/sidebar.js"></script>
+    <script src="components/custom-node.js"></script>
+    <script src="components/floating-overlay.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,26 @@
+// Main application logic will go here
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize the app
+  console.log('Phoenix Flow Builder initialized');
+  
+  // Dark mode by default
+  document.documentElement.classList.add('dark');
+});
+
+// Constants for initial nodes and edges
+const INITIAL_NODES = [];
+const INITIAL_EDGES = [];
+
+// Custom node types
+const NodeType = {
+  ACTION: 'action',
+  TRIGGER: 'trigger',
+  CONDITION: 'condition',
+};
+
+// Export them for use in components
+window.FlowConstants = {
+  INITIAL_NODES,
+  INITIAL_EDGES,
+  NodeType
+};

style.css

@@ -1,28 +1,50 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  font-family: 'Inter', sans-serif;
+  overflow: hidden;
+}
+
+.react-flow__node-custom {
+  background: rgba(15, 23, 42, 0.8);
+  border: 1px solid rgba(71, 85, 105, 0.5);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  transition: all 0.2s ease;
+}
+
+.react-flow__node-custom:hover {
+  border-color: #fb923c;
+  box-shadow: 0 10px 15px -3px rgba(251, 146, 60, 0.1), 0 4px 6px -2px rgba(251, 146, 60, 0.05);
+}
+
+.react-flow__edge-path {
+  stroke: #64748b;
+  stroke-width: 2;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.react-flow__controls {
+  background: rgba(15, 23, 42, 0.8) !important;
+  border: 1px solid rgba(71, 85, 105, 0.5) !important;
+  border-radius: 0.5rem !important;
+  box-shadow: none !important;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.react-flow__controls-button {
+  background: transparent !important;
+  border-bottom: 1px solid rgba(71, 85, 105, 0.5) !important;
+  color: #94a3b8 !important;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.react-flow__controls-button:hover {
+  background: rgba(251, 146, 60, 0.1) !important;
+  color: #fb923c !important;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.react-flow__controls-button svg {
+  fill: currentColor !important;
 }
+
+.react-flow__background {
+  background-color: #0f172a !important;
+}