@assistkick/create 1.7.0 → 1.8.0

package/templates/assistkick-product-system/packages/frontend/src/components/workflow/WorkflowCanvas.tsx

@@ -0,0 +1,335 @@
+import React, { useCallback, useRef, useMemo, useState } from 'react';
+import {
+  ReactFlow,
+  MiniMap,
+  Background,
+  BackgroundVariant,
+  Controls,
+  Panel,
+  addEdge,
+  useNodesState,
+  useEdgesState,
+  useReactFlow,
+  type Connection,
+  type Edge,
+  type Node,
+  type NodeTypes,
+  type OnConnect,
+  ReactFlowProvider,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { LayoutGrid } from 'lucide-react';
+import { StartNode } from './StartNode';
+import { EndNode } from './EndNode';
+import { TransitionCardNode } from './TransitionCardNode';
+import { RunAgentNode } from './RunAgentNode';
+import { CheckCardPositionNode } from './CheckCardPositionNode';
+import { CheckCycleCountNode } from './CheckCycleCountNode';
+import { SetCardMetadataNode } from './SetCardMetadataNode';
+import { GroupNode } from './GroupNode';
+import { NODE_DEFAULTS } from './workflow_types';
+import type { WorkflowNodeType } from './workflow_types';
+import { autoLayoutNodes } from './autoLayout';
+import { colorizeEdges } from './edgeColors';
+
+const NODE_TYPE_MAP: NodeTypes = {
+  start: StartNode,
+  end: EndNode,
+  transitionCard: TransitionCardNode,
+  runAgent: RunAgentNode,
+  checkCardPosition: CheckCardPositionNode,
+  checkCycleCount: CheckCycleCountNode,
+  setCardMetadata: SetCardMetadataNode,
+  group: GroupNode,
+};
+
+interface ContextMenuState {
+  x: number;
+  y: number;
+  selectedNodeIds: string[];
+}
+
+interface WorkflowCanvasProps {
+  initialNodes: Node[];
+  initialEdges: Edge[];
+  onNodesChange?: (nodes: Node[]) => void;
+  onEdgesChange?: (edges: Edge[]) => void;
+  onChange?: (nodes: Node[], edges: Edge[]) => void;
+  onSaveAsGroup?: (name: string, nodes: Node[], edges: Edge[], inputHandles: string[], outputHandles: string[]) => void;
+}
+
+export function WorkflowCanvasInner({
+  initialNodes,
+  initialEdges,
+  onChange,
+  onSaveAsGroup,
+}: WorkflowCanvasProps) {
+  const reactFlowWrapper = useRef<HTMLDivElement>(null);
+  const nodeIdCounter = useRef(0);
+  const getNextNodeId = useCallback(() => `node_${Date.now()}_${++nodeIdCounter.current}`, []);
+  const [nodes, setNodes, onNodesChangeHandler] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChangeHandler] = useEdgesState(initialEdges);
+  const { fitView } = useReactFlow();
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+
+  const nodeTypes = useMemo(() => NODE_TYPE_MAP, []);
+
+  // Compute colored edges — each source node's outgoing edges get distinct colors
+  const coloredEdges = useMemo(() => colorizeEdges(edges), [edges]);
+
+  const onConnect: OnConnect = useCallback(
+    (connection: Connection) => {
+      setEdges((eds) => addEdge(connection, eds));
+    },
+    [setEdges],
+  );
+
+  const handleNodesChange = useCallback(
+    (changes: any) => {
+      onNodesChangeHandler(changes);
+    },
+    [onNodesChangeHandler],
+  );
+
+  const handleEdgesChange = useCallback(
+    (changes: any) => {
+      onEdgesChangeHandler(changes);
+    },
+    [onEdgesChangeHandler],
+  );
+
+  // Notify parent of changes
+  const nodesRef = useRef(nodes);
+  const edgesRef = useRef(edges);
+  nodesRef.current = nodes;
+  edgesRef.current = edges;
+
+  const notifyChange = useCallback(() => {
+    onChange?.(nodesRef.current, edgesRef.current);
+  }, [onChange]);
+
+  const onDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const { screenToFlowPosition } = useReactFlow();
+
+  const onDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+      const type = event.dataTransfer.getData('application/reactflow') as WorkflowNodeType;
+      const groupDataStr = event.dataTransfer.getData('application/workflow-group');
+
+      if (groupDataStr) {
+        // Dropping a reusable group from the palette
+        const groupData = JSON.parse(groupDataStr);
+        const position = screenToFlowPosition({
+          x: event.clientX,
+          y: event.clientY,
+        });
+
+        const newNode: Node = {
+          id: getNextNodeId(),
+          type: 'group',
+          position,
+          data: {
+            groupId: groupData.id,
+            groupName: groupData.name,
+            internalNodes: JSON.parse(groupData.graphData).nodes || [],
+            internalEdges: JSON.parse(groupData.graphData).edges || [],
+            inputHandles: JSON.parse(groupData.graphData).inputHandles || ['input'],
+            outputHandles: JSON.parse(groupData.graphData).outputHandles || ['output'],
+          },
+        };
+
+        setNodes((nds) => [...nds, newNode]);
+        return;
+      }
+
+      if (!type) return;
+
+      const position = screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+
+      const defaults = NODE_DEFAULTS[type];
+      if (!defaults) return;
+
+      const newNode: Node = {
+        id: getNextNodeId(),
+        type,
+        position,
+        data: defaults(),
+      };
+
+      setNodes((nds) => [...nds, newNode]);
+    },
+    [setNodes, screenToFlowPosition, getNextNodeId],
+  );
+
+  const handleAutoLayout = useCallback(() => {
+    setNodes((currentNodes) => autoLayoutNodes(currentNodes, edgesRef.current));
+    setTimeout(() => fitView({ padding: 0.2, duration: 300 }), 50);
+  }, [setNodes, fitView]);
+
+  // Expose current state via a callback whenever nodes/edges change
+  React.useEffect(() => {
+    notifyChange();
+  }, [nodes, edges, notifyChange]);
+
+  // Context menu on right-click when multiple nodes selected
+  const onNodeContextMenu = useCallback(
+    (event: React.MouseEvent, node: Node) => {
+      event.preventDefault();
+      const selectedIds = nodesRef.current
+        .filter((n) => n.selected)
+        .map((n) => n.id);
+
+      // Only show context menu if 2+ nodes are selected
+      if (selectedIds.length < 2) {
+        setContextMenu(null);
+        return;
+      }
+
+      // Ensure the right-clicked node is in the selection
+      if (!selectedIds.includes(node.id)) {
+        setContextMenu(null);
+        return;
+      }
+
+      setContextMenu({
+        x: event.clientX,
+        y: event.clientY,
+        selectedNodeIds: selectedIds,
+      });
+    },
+    [],
+  );
+
+  const onPaneClick = useCallback(() => {
+    setContextMenu(null);
+  }, []);
+
+  const handleSaveAsGroup = useCallback(() => {
+    if (!contextMenu || !onSaveAsGroup) return;
+
+    const selectedIds = new Set(contextMenu.selectedNodeIds);
+    const selectedNodes = nodesRef.current.filter((n) => selectedIds.has(n.id));
+
+    // Find internal edges (both endpoints in selection)
+    const internalEdges = edgesRef.current.filter(
+      (e) => selectedIds.has(e.source) && selectedIds.has(e.target),
+    );
+
+    // Find external connection points:
+    // Input handles: edges coming INTO the selection from outside
+    // Output handles: edges going OUT from the selection to outside
+    const incomingEdges = edgesRef.current.filter(
+      (e) => !selectedIds.has(e.source) && selectedIds.has(e.target),
+    );
+    const outgoingEdges = edgesRef.current.filter(
+      (e) => selectedIds.has(e.source) && !selectedIds.has(e.target),
+    );
+
+    const inputHandles = incomingEdges.length > 0
+      ? incomingEdges.map((e) => e.targetHandle || 'input')
+      : ['input'];
+    const outputHandles = outgoingEdges.length > 0
+      ? outgoingEdges.map((e) => e.sourceHandle || 'output')
+      : ['output'];
+
+    // Deduplicate handles
+    const uniqueInputs = [...new Set(inputHandles)];
+    const uniqueOutputs = [...new Set(outputHandles)];
+
+    // Normalize node positions relative to the group's top-left
+    const minX = Math.min(...selectedNodes.map((n) => n.position.x));
+    const minY = Math.min(...selectedNodes.map((n) => n.position.y));
+    const normalizedNodes = selectedNodes.map((n) => ({
+      ...n,
+      position: { x: n.position.x - minX, y: n.position.y - minY },
+      selected: false,
+    }));
+
+    const name = prompt('Enter a name for this reusable group:');
+    if (!name || !name.trim()) {
+      setContextMenu(null);
+      return;
+    }
+
+    onSaveAsGroup(name.trim(), normalizedNodes, internalEdges, uniqueInputs, uniqueOutputs);
+    setContextMenu(null);
+  }, [contextMenu, onSaveAsGroup]);
+
+  return (
+    <div ref={reactFlowWrapper} className="flex-1 h-full relative">
+      <ReactFlow
+        nodes={nodes}
+        edges={coloredEdges}
+        onNodesChange={handleNodesChange}
+        onEdgesChange={handleEdgesChange}
+        onConnect={onConnect}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+        nodeTypes={nodeTypes}
+        onNodeContextMenu={onNodeContextMenu}
+        onPaneClick={onPaneClick}
+        selectionMode={1 /* SelectionMode.Partial */}
+        multiSelectionKeyCode="Shift"
+        snapToGrid
+        snapGrid={[16, 16]}
+        fitView
+        deleteKeyCode={['Backspace', 'Delete']}
+        defaultEdgeOptions={{
+          type: 'smoothstep',
+          animated: true,
+        }}
+        className="workflow-canvas"
+      >
+        <Background variant={BackgroundVariant.Dots} gap={16} size={1} color="var(--border-color)" />
+        <MiniMap
+          nodeStrokeColor="var(--accent)"
+          nodeColor="var(--bg-tertiary)"
+          maskColor="rgba(0,0,0,0.3)"
+          className="!bg-surface !border !border-edge !rounded-lg"
+        />
+        <Controls className="!bg-surface !border !border-edge !rounded-lg !shadow-none [&>button]:!bg-surface [&>button]:!border-edge [&>button]:!text-content [&>button:hover]:!bg-surface-raised" />
+        <Panel position="top-right">
+          <button
+            onClick={handleAutoLayout}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-surface border border-edge text-[12px] text-content hover:bg-surface-raised transition-colors shadow-sm"
+            title="Auto-layout nodes as a tree"
+          >
+            <LayoutGrid size={14} />
+            Auto Layout
+          </button>
+        </Panel>
+      </ReactFlow>
+
+      {/* Context menu for multi-selection */}
+      {contextMenu && (
+        <div
+          className="fixed z-50 bg-surface border border-edge rounded-lg shadow-lg py-1 min-w-[180px]"
+          style={{ left: contextMenu.x, top: contextMenu.y }}
+        >
+          <button
+            onClick={handleSaveAsGroup}
+            className="w-full text-left px-3 py-2 text-[12px] text-content hover:bg-surface-raised transition-colors"
+          >
+            Save as Reusable Group ({contextMenu.selectedNodeIds.length} nodes)
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function WorkflowCanvas(props: WorkflowCanvasProps) {
+  return (
+    <ReactFlowProvider>
+      <WorkflowCanvasInner {...props} />
+    </ReactFlowProvider>
+  );
+}