[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "@/app/globals.css" import { ThemeProvider } from "@/components/theme-provider" export const metadata = { title: "Flow Diagram Creator", description: "Create beautiful flow diagrams with AI or manually", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="lib/ai-service.ts" import type { Node, Edge } from "reactflow" import { GoogleGenerativeAI } from "@google/generative-ai" // This function will use the Gemini API to generate a diagram export async function generateDiagramFromPrompt( prompt: string, style = "default", ): Promise<{ nodes: Node[]; edges: Edge[] }> { try { // Initialize the Gemini API with the API key from environment variables const genAI = new GoogleGenerativeAI(process.env.NEXT_PUBLIC_GEMINI_API_KEY || "") const model = genAI.getGenerativeModel({ model: "gemini-1.5-pro" }) // Create a more detailed prompt for better results const enhancedPrompt = ` Create a detailed flow diagram based on the following description: "${prompt}". The diagram should follow the "${style}" style. Return the result as a JSON object with the following structure: { "nodes": [ { "id": "string", "type": "input|default|output|decision|data|process|subflow", "label": "string", "description": "string (optional detailed explanation)", "x": number, "y": number, "width": number (optional), "height": number (optional), "style": { "backgroundColor": "string (hex color)", "borderColor": "string (hex color)", "borderStyle": "string (solid, dashed, etc.)", "borderWidth": number, "fontColor": "string (hex color)", "fontSize": number } } ], "edges": [ { "id": "string", "source": "string (node id)", "target": "string (node id)", "label": "string (optional)", "type": "default|success|error|conditional", "animated": boolean, "style": { "stroke": "string (hex color)", "strokeWidth": number, "strokeDasharray": "string (optional for dashed lines)" } } ], "groups": [ { "id": "string", "label": "string", "nodeIds": ["string (node id)"], "style": { "backgroundColor": "string (hex color, with transparency)", "borderColor": "string (hex color)", "borderStyle": "string", "borderWidth": number } } ] } Make sure to create a logical flow with proper connections between nodes. Start with an input node, include process nodes, decision nodes where appropriate, and end with output nodes. Use descriptive labels and edge connections that make sense for the flow. For decision nodes, create conditional paths with appropriate edge labels. Group related nodes together in the groups array. Position nodes in a way that minimizes edge crossings and creates a clear visual hierarchy. ` // Generate content using Gemini const result = await model.generateContent(enhancedPrompt) const response = await result.response const text = response.text() // Extract JSON from the response const jsonMatch = text.match(/```json\n([\s\S]*?)\n```/) || text.match(/{[\s\S]*}/) || null if (!jsonMatch) { throw new Error("Failed to parse JSON from Gemini response") } const jsonString = jsonMatch[1] || jsonMatch[0] const parsedData = JSON.parse(jsonString) // Transform the parsed data into ReactFlow format const nodes: Node[] = parsedData.nodes.map((node: any) => ({ id: node.id, type: getNodeType(node.type), data: { label: node.label, description: node.description || "", nodeType: node.type || "default", }, position: { x: node.x || 250, y: node.y || 100 }, style: node.style || getDefaultNodeStyle(node.type), width: node.width, height: node.height, })) const edges: Edge[] = parsedData.edges.map((edge: any) => ({ id: edge.id, source: edge.source, target: edge.target, label: edge.label, type: edge.type || "default", animated: edge.animated || edge.type === "success", style: edge.style || getDefaultEdgeStyle(edge.type), labelStyle: { fill: "#64748b", fontWeight: 500 }, })) // Process groups if they exist const groups = parsedData.groups || [] return { nodes, edges, // We'll handle groups separately in the main component } } catch (error) { console.error("Error generating diagram:", error) // Fallback to a simple diagram if the API fails return generateFallbackDiagram(prompt) } } // Map node types to ReactFlow node types function getNodeType(type: string): string { const typeMap: Record = { input: "input", output: "output", decision: "customDecision", data: "customData", process: "default", subflow: "customSubflow", } return typeMap[type] || "default" } // Get default style based on node type function getDefaultNodeStyle(type: string): any { const baseStyle = { padding: "10px", borderRadius: "8px", width: 180, fontSize: 14, } switch (type) { case "input": return { ...baseStyle, background: "#4f46e5", color: "white", border: "1px solid #4338ca", } case "output": return { ...baseStyle, background: "#10b981", color: "white", border: "1px solid #059669", } case "decision": return { ...baseStyle, background: "#f59e0b", color: "white", border: "1px solid #d97706", borderRadius: "0", transform: "rotate(45deg)", } case "data": return { ...baseStyle, background: "#6366f1", color: "white", border: "1px solid #4f46e5", borderRadius: "0 8px 8px 0", } case "subflow": return { ...baseStyle, background: "#8b5cf6", color: "white", border: "2px dashed #7c3aed", } default: return { ...baseStyle, background: "#f59e0b", color: "white", border: "1px solid #d97706", } } } // Get default edge style based on edge type function getDefaultEdgeStyle(type: string): any { switch (type) { case "success": return { stroke: "#10b981", strokeWidth: 2, } case "error": return { stroke: "#ef4444", strokeWidth: 2, } case "conditional": return { stroke: "#f59e0b", strokeWidth: 2, strokeDasharray: "5,5", } default: return { stroke: "#94a3b8", strokeWidth: 1.5, } } } // Fallback function in case the API call fails function generateFallbackDiagram(prompt: string): { nodes: Node[]; edges: Edge[] } { const words = prompt.toLowerCase().split(" ") const nodes: Node[] = [] const edges: Edge[] = [] // Create a start node nodes.push({ id: "1", type: "input", data: { label: "Start", description: "Starting point of the flow" }, position: { x: 250, y: 5 }, style: { background: "#4f46e5", color: "white", border: "1px solid #4338ca", borderRadius: "8px", padding: "10px", width: 150, }, }) // Extract key concepts from the prompt and create nodes const keyWords = words.filter( (word) => word.length > 4 && !["create", "diagram", "flow", "with", "and", "the"].includes(word), ) const uniqueKeyWords = Array.from(new Set(keyWords)).slice(0, 5) uniqueKeyWords.forEach((word, index) => { const nodeId = (index + 2).toString() nodes.push({ id: nodeId, data: { label: word.charAt(0).toUpperCase() + word.slice(1), description: `Process related to ${word}`, }, position: { x: 250, y: (index + 1) * 100 + 5 }, style: { background: "#f59e0b", color: "white", border: "1px solid #d97706", borderRadius: "8px", padding: "10px", width: 150, }, }) // Connect to previous node const sourceId = index === 0 ? "1" : (index + 1).toString() edges.push({ id: `e${sourceId}-${nodeId}`, source: sourceId, target: nodeId, animated: true, style: { stroke: "#94a3b8" }, }) }) // Add an end node if we have any process nodes if (uniqueKeyWords.length > 0) { const endNodeId = (uniqueKeyWords.length + 2).toString() nodes.push({ id: endNodeId, type: "output", data: { label: "End", description: "End point of the flow" }, position: { x: 250, y: (uniqueKeyWords.length + 1) * 100 + 5 }, style: { background: "#10b981", color: "white", border: "1px solid #059669", borderRadius: "8px", padding: "10px", width: 150, }, }) edges.push({ id: `e${uniqueKeyWords.length + 1}-${endNodeId}`, source: (uniqueKeyWords.length + 1).toString(), target: endNodeId, animated: true, style: { stroke: "#94a3b8" }, }) } return { nodes, edges } } // Template library for common diagram patterns export const diagramTemplates = [ { id: "user-auth", name: "User Authentication Flow", description: "A complete user authentication flow with login, registration, and password reset", thumbnail: "/placeholder.svg?height=100&width=150", nodes: [ { id: "1", type: "input", data: { label: "Start", description: "User begins authentication process" }, position: { x: 250, y: 5 }, style: getDefaultNodeStyle("input"), }, { id: "2", type: "default", data: { label: "Login Form", description: "User enters credentials" }, position: { x: 250, y: 100 }, style: getDefaultNodeStyle("default"), }, { id: "3", type: "customDecision", data: { label: "Valid?", description: "Validate user credentials" }, position: { x: 250, y: 200 }, style: getDefaultNodeStyle("decision"), }, { id: "4", type: "default", data: { label: "Dashboard", description: "User's main dashboard" }, position: { x: 450, y: 300 }, style: getDefaultNodeStyle("default"), }, { id: "5", type: "default", data: { label: "Error Message", description: "Show authentication error" }, position: { x: 50, y: 300 }, style: { background: "#ef4444", color: "white", border: "1px solid #dc2626", borderRadius: "8px", padding: "10px", width: 150, }, }, { id: "6", type: "output", data: { label: "End", description: "Authentication process complete" }, position: { x: 250, y: 400 }, style: getDefaultNodeStyle("output"), }, ], edges: [ { id: "e1-2", source: "1", target: "2", animated: true, style: { stroke: "#94a3b8" }, }, { id: "e2-3", source: "2", target: "3", animated: true, style: { stroke: "#94a3b8" }, }, { id: "e3-4", source: "3", target: "4", label: "Yes", animated: true, style: { stroke: "#10b981" }, }, { id: "e3-5", source: "3", target: "5", label: "No", animated: true, style: { stroke: "#ef4444" }, }, { id: "e4-6", source: "4", target: "6", animated: true, style: { stroke: "#94a3b8" }, }, { id: "e5-2", source: "5", target: "2", label: "Retry", type: "step", animated: true, style: { stroke: "#94a3b8" }, }, ], }, { id: "checkout", name: "E-commerce Checkout", description: "Complete e-commerce checkout flow with cart, payment, and confirmation", thumbnail: "/placeholder.svg?height=100&width=150", nodes: [ { id: "1", type: "input", data: { label: "Shopping Cart", description: "User reviews items" }, position: { x: 250, y: 5 }, style: getDefaultNodeStyle("input"), }, { id: "2", type: "default", data: { label: "Shipping Info", description: "User enters shipping details" }, position: { x: 250, y: 100 }, style: getDefaultNodeStyle("default"), }, { id: "3", type: "default", data: { label: "Payment Info", description: "User enters payment details" }, position: { x: 250, y: 200 }, style: getDefaultNodeStyle("default"), }, { id: "4", type: "customDecision", data: { label: "Payment Valid?", description: "Validate payment information" }, position: { x: 250, y: 300 }, style: getDefaultNodeStyle("decision"), }, { id: "5", type: "default", data: { label: "Order Confirmation", description: "Show order confirmation" }, position: { x: 450, y: 400 }, style: getDefaultNodeStyle("default"), }, { id: "6", type: "default", data: { label: "Payment Error", description: "Show payment error message" }, position: { x: 50, y: 400 }, style: { background: "#ef4444", color: "white", border: "1px solid #dc2626", borderRadius: "8px", padding: "10px", width: 150, }, }, { id: "7", type: "output", data: { label: "Order Complete", description: "Checkout process complete" }, position: { x: 450, y: 500 }, style: getDefaultNodeStyle("output"), }, ], edges: [ { id: "e1-2", source: "1", target: "2", animated: true, style: { stroke: "#94a3b8" }, }, { id: "e2-3", source: "2", target: "3", animated: true, style: { stroke: "#94a3b8" }, }, { id: "e3-4", source: "3", target: "4", animated: true, style: { stroke: "#94a3b8" }, }, { id: "e4-5", source: "4", target: "5", label: "Yes", animated: true, style: { stroke: "#10b981" }, }, { id: "e4-6", source: "4", target: "6", label: "No", animated: true, style: { stroke: "#ef4444" }, }, { id: "e5-7", source: "5", target: "7", animated: true, style: { stroke: "#94a3b8" }, }, { id: "e6-3", source: "6", target: "3", label: "Retry", type: "step", animated: true, style: { stroke: "#94a3b8" }, }, ], }, ] [V0_FILE]typescriptreact:file=".env.local" NEXT_PUBLIC_GEMINI_API_KEY=AIzaSyDdYW_C2841eh-sM641_MBACiIKTiZu4tM [V0_FILE]typescriptreact:file="package.json" isFixed="true" isQuickEdit="true" { "name": "flow-diagram-creator", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@google/generative-ai": "^0.2.1", "html-to-image": "^1.11.11", "lucide-react": "^0.294.0", "next": "14.0.4", "react": "^18", "react-dom": "^18", "reactflow": "^11.10.1" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.4", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/template-gallery.tsx" "use client" import { diagramTemplates } from "@/lib/ai-service" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import Image from "next/image" interface TemplateGalleryProps { onSelectTemplate: (template: any) => void } export function TemplateGallery({ onSelectTemplate }: TemplateGalleryProps) { return (

{diagramTemplates.map((template) => ( {template.name} {template.description}

))}

) } [V0_FILE]typescriptreact:file="components/keyboard-shortcuts.tsx" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { ScrollArea } from "@/components/ui/scroll-area" interface KeyboardShortcutsProps { open: boolean onOpenChange: (open: boolean) => void } export function KeyboardShortcuts({ open, onOpenChange }: KeyboardShortcutsProps) { const shortcuts = [ { key: "Ctrl + Z", description: "Undo last action" }, { key: "Ctrl + Y", description: "Redo last action" }, { key: "Delete", description: "Delete selected node or edge" }, { key: "Ctrl + S", description: "Save diagram" }, { key: "Ctrl + E", description: "Export diagram" }, { key: "Ctrl + F", description: "Search in diagram" }, { key: "Ctrl + G", description: "Group selected nodes" }, { key: "Ctrl + U", description: "Ungroup selected nodes" }, { key: "Ctrl + A", description: "Select all nodes" }, { key: "Ctrl + D", description: "Duplicate selected node" }, { key: "Ctrl + Space", description: "Toggle node details" }, { key: "Ctrl + P", description: "Enter presentation mode" }, { key: "Escape", description: "Exit current mode" }, { key: "Arrow keys", description: "Move selected node" }, { key: "Shift + Arrow keys", description: "Move selected node by 10px" }, { key: "Alt + Drag", description: "Create a new edge" }, { key: "Space + Drag", description: "Pan the canvas" }, { key: "Ctrl + Mouse wheel", description: "Zoom in/out" }, ] return ( ) } [V0_FILE]typescriptreact:file="components/node-style-editor.tsx" isQuickEdit="true" "use client" import React from "react" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" interface NodeStyleEditorProps { selectedNode: any onStyleChange: (style: any) => void } export function NodeStyleEditor({ selectedNode, onStyleChange }: NodeStyleEditorProps) { const [style, setStyle] = React.useState({ backgroundColor: selectedNode?.style?.background || "#f59e0b", borderColor: selectedNode?.style?.border?.split(" ")[2] || "#d97706", borderWidth: Number.parseInt(selectedNode?.style?.border?.split(" ")[0]) || 1, borderStyle: selectedNode?.style?.border?.split(" ")[1] || "solid", borderRadius: Number.parseInt(selectedNode?.style?.borderRadius) || 8, padding: Number.parseInt(selectedNode?.style?.padding) || 10, width: selectedNode?.style?.width || 150, fontSize: selectedNode?.style?.fontSize || 14, fontColor: selectedNode?.style?.color || "#ffffff", }) React.useEffect(() => { // Only update the style state when the selectedNode changes if (selectedNode) { setStyle({ backgroundColor: selectedNode?.style?.background || "#f59e0b", borderColor: selectedNode?.style?.border?.split(" ")[2] || "#d97706", borderWidth: Number.parseInt(selectedNode?.style?.border?.split(" ")[0]) || 1, borderStyle: selectedNode?.style?.border?.split(" ")[1] || "solid", borderRadius: Number.parseInt(selectedNode?.style?.borderRadius) || 8, padding: Number.parseInt(selectedNode?.style?.padding) || 10, width: selectedNode?.style?.width || 150, fontSize: selectedNode?.style?.fontSize || 14, fontColor: selectedNode?.style?.color || "#ffffff", }) } }, [selectedNode]) const handleStyleChange = (property: string, value: any) => { setStyle((prevStyle) => { const newStyle = { ...prevStyle, [property]: value } // Convert our style object to ReactFlow node style format const rfStyle = { background: newStyle.backgroundColor, color: newStyle.fontColor, border: `${newStyle.borderWidth}px ${newStyle.borderStyle} ${newStyle.borderColor}`, borderRadius: `${newStyle.borderRadius}px`, padding: `${newStyle.padding}px`, width: newStyle.width, fontSize: `${newStyle.fontSize}px`, } // Use setTimeout to avoid immediate updates during render setTimeout(() => { onStyleChange(rfStyle) }, 0) return newStyle }) } return ( Colors Border Size & Text

Background Color

handleStyleChange("backgroundColor", e.target.value)} />

Text Color

handleStyleChange("fontColor", e.target.value)} />

Border Color

handleStyleChange("borderColor", e.target.value)} />

Border Width ({style.borderWidth}px) handleStyleChange("borderWidth", value[0])} />

Border Style

Border Radius ({style.borderRadius}px) handleStyleChange("borderRadius", value[0])} />

Width ({style.width}px) handleStyleChange("width", value[0])} />

Padding ({style.padding}px) handleStyleChange("padding", value[0])} />

Font Size ({style.fontSize}px) handleStyleChange("fontSize", value[0])} />

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/diagram-annotations.tsx" "use client" import type React from "react" import { useState } from "react" import { X, Edit2, Check, Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent } from "@/components/ui/card" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { ColorPicker } from "./color-picker" interface Annotation { id: string text: string position: { x: number; y: number } color: string fontSize: number width: number } interface DiagramAnnotationsProps { annotations: Annotation[] onAddAnnotation: (annotation: Annotation) => void onUpdateAnnotation: (id: string, annotation: Partial) => void onDeleteAnnotation: (id: string) => void } export function DiagramAnnotations({ annotations, onAddAnnotation, onUpdateAnnotation, onDeleteAnnotation, }: DiagramAnnotationsProps) { const [editingId, setEditingId] = useState(null) const [newAnnotationText, setNewAnnotationText] = useState("") const [newAnnotationColor, setNewAnnotationColor] = useState("#f97316") const [newAnnotationFontSize, setNewAnnotationFontSize] = useState(14) const handleAddAnnotation = (e: React.MouseEvent) => { if (!newAnnotationText.trim()) return const rect = (e.target as HTMLElement).getBoundingClientRect() const newAnnotation: Annotation = { id: Date.now().toString(), text: newAnnotationText, position: { x: e.clientX - rect.left, y: e.clientY - rect.top, }, color: newAnnotationColor, fontSize: newAnnotationFontSize, width: 200, } onAddAnnotation(newAnnotation) setNewAnnotationText("") } const handleStartEditing = (id: string) => { setEditingId(id) } const handleSaveEdit = (id: string, text: string) => { onUpdateAnnotation(id, { text }) setEditingId(null) } const handleDelete = (id: string) => { onDeleteAnnotation(id) } const handleDragStart = (e: React.DragEvent, id: string) => { e.dataTransfer.setData("annotation-id", id) } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() } const handleDrop = (e: React.DragEvent) => { e.preventDefault() const id = e.dataTransfer.getData("annotation-id") if (!id) return const rect = (e.target as HTMLElement).getBoundingClientRect() onUpdateAnnotation(id, { position: { x: e.clientX - rect.left, y: e.clientY - rect.top, }, }) } return (

{annotations.map((annotation) => (

handleDragStart(e, annotation.id)} > {editingId === annotation.id ? (

onUpdateAnnotation(annotation.id, { text: e.target.value })}
                  />
                  <div className="flex justify-between">
                    <ColorPicker
                      color={annotation.color}
                      onChange={(color) => onUpdateAnnotation(annotation.id, { color })}
                    />
                    <Button size="sm" variant="outline" onClick={() => handleSaveEdit(annotation.id, annotation.text)}>
                      <Check className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              ) : (
                <>
                  <div
                    className="text-sm"
                    style={{
                      color: annotation.color,
                      fontSize: `${annotation.fontSize}px`,
                    }}
                  >
                    {annotation.text}
                  </div>
                  <div className="absolute top-1 right-1 flex space-x-1">
                    <Button
                      size="icon"
                      variant="ghost"
                      className="h-5 w-5"
                      onClick={() => handleStartEditing(annotation.id)}
                    >
                      <Edit2 className="h-3 w-3" />
                    </Button>
                    <Button size="icon" variant="ghost" className="h-5 w-5" onClick={() => handleDelete(annotation.id)}>
                      <X className="h-3 w-3" />
                    </Button>
                  </div>
                </>
              )}
            </CardContent>
          </Card>
        </div>
      ))}

<Popover>
        <PopoverTrigger asChild>
          <Button
            className="absolute bottom-4 right-4 pointer-events-auto rounded-full shadow-lg"
            size="icon"
            onClick={(e) => e.stopPropagation()}
          >
            <Plus className="h-4 w-4" />
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-80">
          <div className="space-y-4">
            <h4 className="font-medium">Add Annotation</h4>
            <Textarea
              placeholder="Enter annotation text..."
              value={newAnnotationText}
              onChange={(e) => setNewAnnotationText(e.target.value)}
              className="min-h-[100px]"
            />
            <div className="flex items-center space-x-4">
              <div className="flex-1">
                <ColorPicker color={newAnnotationColor} onChange={setNewAnnotationColor} />
              </div>
              <Button onClick={handleAddAnnotation} disabled={!newAnnotationText.trim()}>
                Add
              </Button>
            </div>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/color-picker.tsx"
"use client"
import { Label } from "@/components/ui/label"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

interface ColorPickerProps {
  color: string
  onChange: (color: string) => void
}

const presetColors = [
  "#f97316", // orange
  "#10b981", // emerald
  "#3b82f6", // blue
  "#8b5cf6", // violet
  "#ec4899", // pink
  "#ef4444", // red
  "#f59e0b", // amber
  "#84cc16", // lime
  "#06b6d4", // cyan
  "#6366f1", // indigo
  "#000000", // black
  "#6b7280", // gray
]

export function ColorPicker({ color, onChange }: ColorPickerProps) {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" className="w-[100px] px-2 justify-start">
          <div className="h-4 w-4 rounded-full mr-2" style={{ backgroundColor: color }} />
          <span className="text-xs">{color}</span>
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-64">
        <div className="space-y-2">
          <div className="flex flex-wrap gap-1">
            {presetColors.map((presetColor) => (
              <div
                key={presetColor}
                className="h-6 w-6 rounded-md cursor-pointer border border-border hover:scale-110 transition-transform"
                style={{ backgroundColor: presetColor }}
                onClick={() => onChange(presetColor)}
              />
            ))}
          </div>
          <div className="flex items-center gap-2">
            <Label htmlFor="custom-color">Custom:</Label>
            <Input
              id="custom-color"
              type="color"
              value={color}
              onChange={(e) => onChange(e.target.value)}
              className="h-8 w-8 p-0 border-0"
            />
            <Input value={color} onChange={(e) => onChange(e.target.value)} className="h-8 flex-1" />
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}

[V0_FILE]typescriptreact:file="components/diagram-minimap.tsx"
"use client"

import { useEffect, useRef } from "react"
import type { Node, Edge } from "reactflow"

interface DiagramMinimapProps {
  nodes: Node[]
  edges: Edge[]
  width?: number
  height?: number
  onClick?: (x: number, y: number) => void
}

export function DiagramMinimap({ nodes, edges, width = 200, height = 150, onClick }: DiagramMinimapProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)

useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

// Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height)

// Find the bounds of the diagram
    let minX = Number.POSITIVE_INFINITY
    let minY = Number.POSITIVE_INFINITY
    let maxX = Number.NEGATIVE_INFINITY
    let maxY = Number.NEGATIVE_INFINITY

nodes.forEach((node) => {
      const nodeWidth = node.style?.width || 150
      const nodeHeight = 50 // Approximate height

minX = Math.min(minX, node.position.x)
      minY = Math.min(minY, node.position.y)
      maxX = Math.max(maxX, node.position.x + nodeWidth)
      maxY = Math.max(maxY, node.position.y + nodeHeight)
    })

// Add some padding
    const padding = 50
    minX -= padding
    minY -= padding
    maxX += padding
    maxY += padding

// Calculate scale to fit the canvas
    const diagramWidth = maxX - minX
    const diagramHeight = maxY - minY
    const scaleX = width / diagramWidth
    const scaleY = height / diagramHeight
    const scale = Math.min(scaleX, scaleY)

// Draw edges
    ctx.strokeStyle = "#94a3b8"
    ctx.lineWidth = 1
    ctx.beginPath()
    edges.forEach((edge) => {
      const sourceNode = nodes.find((node) => node.id === edge.source)
      const targetNode = nodes.find((node) => node.id === edge.target)
      if (!sourceNode || !targetNode) return

const sourceWidth = sourceNode.style?.width || 150
      const targetWidth = targetNode.style?.width || 150
      const sourceHeight = 50 // Approximate height
      const targetHeight = 50 // Approximate height

const sourceX = (sourceNode.position.x - minX + sourceWidth / 2) * scale
      const sourceY = (sourceNode.position.y - minY + sourceHeight / 2) * scale
      const targetX = (targetNode.position.x - minX + targetWidth / 2) * scale
      const targetY = (targetNode.position.y - minY + targetHeight / 2) * scale

ctx.moveTo(sourceX, sourceY)
      ctx.lineTo(targetX, targetY)
    })
    ctx.stroke()

// Draw nodes
    nodes.forEach((node) => {
      const nodeWidth = (node.style?.width || 150) * scale
      const nodeHeight = 50 * scale // Approximate height

const x = (node.position.x - minX) * scale
      const y = (node.position.y - minY) * scale

// Set node color based on type
      let color = "#f59e0b" // default
      if (node.type === "input") color = "#4f46e5"
      else if (node.type === "output") color = "#10b981"
      else if (node.type === "customDecision") color = "#f97316"
      else if (node.type === "customData") color = "#6366f1"
      else if (node.type === "customSubflow") color = "#8b5cf6"

ctx.fillStyle = color
      ctx.fillRect(x, y, nodeWidth, nodeHeight)
    })

// Add click handler
    if (onClick) {
      canvas.onclick = (e) => {
        const rect = canvas.getBoundingClientRect()
        const x = e.clientX - rect.left
        const y = e.clientY - rect.top

// Convert back to diagram coordinates
        const diagramX = x / scale + minX
        const diagramY = y / scale + minY

onClick(diagramX, diagramY)
      }
    }
  }, [nodes, edges, width, height, onClick])

return <canvas ref={canvasRef} width={width} height={height} className="border rounded bg-background" />
}

[V0_FILE]typescriptreact:file="components/presentation-controls.tsx"
"use client"

import React, { useState } from "react"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Play, Pause, SkipForward, SkipBack, Maximize2, Minimize2 } from "lucide-react"
import type { Node, Edge } from "reactflow"

interface PresentationControlsProps {
  nodes: Node[]
  edges: Edge[]
  onFocusNode: (nodeId: string) => void
  onExitPresentation: () => void
  isFullscreen: boolean
  onToggleFullscreen: () => void
}

export function PresentationControls({
  nodes,
  edges,
  onFocusNode,
  onExitPresentation,
  isFullscreen,
  onToggleFullscreen,
}: PresentationControlsProps) {
  const [currentStep, setCurrentStep] = useState(0)
  const [isPlaying, setIsPlaying] = useState(false)
  const [playbackSpeed, setPlaybackSpeed] = useState(3) // seconds per step

// Create a sequence of nodes to focus on
  const sequence = React.useMemo(() => {
    // Start with input nodes
    const inputNodes = nodes.filter((node) => node.type === "input")

// Then process nodes
    const processNodes = nodes.filter((node) => node.type !== "input" && node.type !== "output")

// End with output nodes
    const outputNodes = nodes.filter((node) => node.type === "output")

return [...inputNodes, ...processNodes, ...outputNodes]
  }, [nodes])

React.useEffect(() => {
    let interval: NodeJS.Timeout | null = null

if (isPlaying && sequence.length > 0) {
      interval = setInterval(() => {
        setCurrentStep((prev) => {
          const next = prev + 1
          if (next >= sequence.length) {
            setIsPlaying(false)
            return prev
          }
          onFocusNode(sequence[next].id)
          return next
        })
      }, playbackSpeed * 1000)
    }

return () => {
      if (interval) clearInterval(interval)
    }
  }, [isPlaying, sequence, playbackSpeed, onFocusNode])

const handlePlay = () => {
    setIsPlaying(!isPlaying)
  }

const handleNext = () => {
    if (currentStep < sequence.length - 1) {
      const nextStep = currentStep + 1
      setCurrentStep(nextStep)
      onFocusNode(sequence[nextStep].id)
    }
  }

const handlePrevious = () => {
    if (currentStep > 0) {
      const prevStep = currentStep - 1
      setCurrentStep(prevStep)
      onFocusNode(sequence[prevStep].id)
    }
  }

const handleSliderChange = (value: number[]) => {
    const step = value[0]
    setCurrentStep(step)
    onFocusNode(sequence[step].id)
  }

return (
    <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-background/90 backdrop-blur-sm p-4 rounded-lg shadow-lg border border-border flex flex-col gap-4 w-[400px]">
      <div className="flex justify-between items-center">
        <h3 className="font-medium">Presentation Mode</h3>
        <div className="flex gap-2">
          <Button variant="outline" size="icon" onClick={onToggleFullscreen}>
            {isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
          </Button>
          <Button variant="outline" size="sm" onClick={onExitPresentation}>
            Exit
          </Button>
        </div>
      </div>

{sequence.length > 0 && (
        <>
          <div className="flex items-center gap-2">
            <span className="text-sm text-muted-foreground w-10 text-right">
              {currentStep + 1}/{sequence.length}
            </span>
            <Slider
              value={[currentStep]}
              max={sequence.length - 1}
              step={1}
              onValueChange={handleSliderChange}
              className="flex-1"
            />
          </div>

<div className="flex justify-center gap-2">
            <Button variant="outline" size="icon" onClick={handlePrevious} disabled={currentStep === 0}>
              <SkipBack className="h-4 w-4" />
            </Button>
            <Button variant="outline" size="icon" onClick={handlePlay}>
              {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
            </Button>
            <Button variant="outline" size="icon" onClick={handleNext} disabled={currentStep === sequence.length - 1}>
              <SkipForward className="h-4 w-4" />
            </Button>
          </div>

<div className="flex items-center gap-2">
            <span className="text-sm text-muted-foreground">Speed:</span>
            <Slider
              value={[playbackSpeed]}
              min={1}
              max={5}
              step={0.5}
              onValueChange={(value) => setPlaybackSpeed(value[0])}
              className="flex-1"
            />
            <span className="text-sm text-muted-foreground w-10">{playbackSpeed}s</span>
          </div>
        </>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/diagram-export-dialog.tsx"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Slider } from "@/components/ui/slider"
import { Download, Copy } from "lucide-react"
import type { Node, Edge } from "reactflow"

interface DiagramExportDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onExport: (format: string, options: any) => Promise<string>
  diagramName: string
  nodes: Node[]
  edges: Edge[]
  isDarkMode: boolean
}

export function DiagramExportDialog({
  open,
  onOpenChange,
  onExport,
  diagramName,
  nodes,
  edges,
  isDarkMode,
}: DiagramExportDialogProps) {
  const [activeTab, setActiveTab] = useState("image")
  const [imageFormat, setImageFormat] = useState("png")
  const [imageQuality, setImageQuality] = useState(1)
  const [imageScale, setImageScale] = useState(2)
  const [includeBackground, setIncludeBackground] = useState(true)
  const [includeMinimap, setIncludeMinimap] = useState(false)
  const [includeControls, setIncludeControls] = useState(false)
  const [jsonFormat, setJsonFormat] = useState("pretty")
  const [exportUrl, setExportUrl] = useState<string | null>(null)
  const [isExporting, setIsExporting] = useState(false)

const handleExport = async () => {
    setIsExporting(true)
    try {
      let options: any = {}

if (activeTab === "image") {
        options = {
          format: imageFormat,
          quality: imageQuality,
          scale: imageScale,
          includeBackground,
          includeMinimap,
          includeControls,
        }
      } else if (activeTab === "json") {
        options = {
          format: jsonFormat,
        }
      }

const result = await onExport(activeTab === "image" ? imageFormat : "json", options)
      setExportUrl(result)
    } catch (error) {
      console.error("Export failed:", error)
    } finally {
      setIsExporting(false)
    }
  }

const handleDownload = () => {
    if (!exportUrl) return

const link = document.createElement("a")
    link.href = exportUrl
    link.download = `${diagramName.replace(/\s+/g, "-").toLowerCase()}.${activeTab === "image" ? imageFormat : "json"}`
    link.click()
  }

const handleCopyToClipboard = async () => {
    if (!exportUrl) return

try {
      if (activeTab === "image") {
        const blob = await fetch(exportUrl).then((r) => r.blob())
        await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })])
      } else {
        await navigator.clipboard.writeText(exportUrl)
      }
    } catch (error) {
      console.error("Failed to copy to clipboard:", error)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle>Export Diagram</DialogTitle>
          <DialogDescription>Choose your export format and options</DialogDescription>
        </DialogHeader>

<Tabs value={activeTab} onValueChange={setActiveTab} className="mt-4">
          <TabsList className="grid grid-cols-2">
            <TabsTrigger value="image">Image</TabsTrigger>
            <TabsTrigger value="json">JSON</TabsTrigger>
          </TabsList>

<TabsContent value="image" className="space-y-4 mt-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="imageFormat">Format</Label>
                <Select value={imageFormat} onValueChange={setImageFormat}>
                  <SelectTrigger id="imageFormat">
                    <SelectValue placeholder="Select format" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="png">PNG</SelectItem>
                    <SelectItem value="svg">SVG</SelectItem>
                    <SelectItem value="jpeg">JPEG</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="imageScale">Scale ({imageScale}x)</Label>
                <Slider
                  id="imageScale"
                  min={1}
                  max={4}
                  step={0.5}
                  value={[imageScale]}
                  onValueChange={(value) => setImageScale(value[0])}
                />
              </div>
            </div>

{imageFormat === "jpeg" && (
              <div className="space-y-2">
                <Label htmlFor="imageQuality">Quality ({Math.round(imageQuality * 100)}%)</Label>
                <Slider
                  id="imageQuality"
                  min={0.1}
                  max={1}
                  step={0.1}
                  value={[imageQuality]}
                  onValueChange={(value) => setImageQuality(value[0])}
                />
              </div>
            )}

<div className="space-y-2">
              <Label>Options</Label>
              <div className="flex flex-col gap-2">
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="includeBackground"
                    checked={includeBackground}
                    onCheckedChange={(checked) => setIncludeBackground(checked as boolean)}
                  />
                  <Label htmlFor="includeBackground">Include background</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="includeMinimap"
                    checked={includeMinimap}
                    onCheckedChange={(checked) => setIncludeMinimap(checked as boolean)}
                  />
                  <Label htmlFor="includeMinimap">Include minimap</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="includeControls"
                    checked={includeControls}
                    onCheckedChange={(checked) => setIncludeControls(checked as boolean)}
                  />
                  <Label htmlFor="includeControls">Include controls</Label>
                </div>
              </div>
            </div>
          </TabsContent>

<TabsContent value="json" className="space-y-4 mt-4">
            <div className="space-y-2">
              <Label htmlFor="jsonFormat">Format</Label>
              <Select value={jsonFormat} onValueChange={setJsonFormat}>
                <SelectTrigger id="jsonFormat">
                  <SelectValue placeholder="Select format" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="pretty">Pretty (indented)</SelectItem>
                  <SelectItem value="compact">Compact</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label>JSON will include:</Label>
              <ul className="list-disc list-inside text-sm text-muted-foreground">
                <li>All nodes and their properties</li>
                <li>All edges and connections</li>
                <li>Diagram metadata (name, description)</li>
                <li>Style information</li>
              </ul>
            </div>
          </TabsContent>
        </Tabs>

<div className="flex flex-col gap-4 mt-4">
          {exportUrl ? (
            <div className="space-y-4">
              <div className="flex justify-between">
                <Button variant="outline" onClick={handleDownload}>
                  <Download className="mr-2 h-4 w-4" /> Download
                </Button>
                <Button variant="outline" onClick={handleCopyToClipboard}>
                  <Copy className="mr-2 h-4 w-4" /> Copy to Clipboard
                </Button>
              </div>

{activeTab === "image" && (
                <div className="border rounded-md p-2 bg-muted/30 overflow-hidden">
                  <img src={exportUrl || "/placeholder.svg"} alt="Exported diagram" className="max-h-[200px] mx-auto" />
                </div>
              )}

{activeTab === "json" && (
                <div className="border rounded-md p-2 bg-muted/30 overflow-auto max-h-[200px]">
                  <pre className="text-xs">{exportUrl}</pre>
                </div>
              )}
            </div>
          ) : (
            <Button onClick={handleExport} disabled={isExporting}>
              {isExporting ? "Exporting..." : "Generate Export"}
            </Button>
          )}
        </div>
      </DialogContent>
    </Dialog>
  )
}

[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isQuickEdit="true"
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }

[V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isQuickEdit="true"
"use client"

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
))
AccordionItem.displayName = "AccordionItem"

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
      className,
    )}
    {...props}
  >
    {children}
    <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
  </AccordionPrimitive.Trigger>
))
AccordionTrigger.displayName = "AccordionTrigger"

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className={cn(
      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
      className,
    )}
    {...props}
  >
    <div className="pb-4 pt-0">{children}</div>
  </AccordionPrimitive.Content>
))

AccordionContent.displayName = "AccordionContent"

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

[V0_FILE]typescriptreact:file="components/diagram-simulation.tsx"
"use client"

import React, { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Play, Pause, SkipForward, SkipBack, RefreshCw, Clock } from "lucide-react"
import type { Node, Edge } from "reactflow"

interface DiagramSimulationProps {
  nodes: Node[]
  edges: Edge[]
  onHighlightNode: (nodeId: string | null) => void
  onHighlightEdge: (edgeId: string | null) => void
  isSimulating: boolean
  setIsSimulating: (value: boolean) => void
}

export function DiagramSimulation({
  nodes,
  edges,
  onHighlightNode,
  onHighlightEdge,
  isSimulating,
  setIsSimulating,
}: DiagramSimulationProps) {
  const [simulationPath, setSimulationPath] = useState<string[]>([])
  const [currentStep, setCurrentStep] = useState(0)
  const [simulationSpeed, setSimulationSpeed] = useState(1.5) // seconds per step
  const [isPlaying, setIsPlaying] = useState(false)
  const [simulationData, setSimulationData] = useState<Record<string, any>>({})
  const [currentNodeData, setCurrentNodeData] = useState<any>(null)

// Generate a simulation path when nodes or edges change
  useEffect(() => {
    if (nodes.length === 0 || edges.length === 0) return

// Find start nodes (typically input nodes)
    const startNodes = nodes.filter((node) => node.type === "input")
    const startNodeId = startNodes.length > 0 ? startNodes[0].id : nodes[0].id

// Generate a path through the diagram
    const path = generateSimulationPath(startNodeId, nodes, edges)
    setSimulationPath(path)

// Generate sample data for each node in the path
    const data: Record<string, any> = {}
    path.forEach((nodeId) => {
      const node = nodes.find((n) => n.id === nodeId)
      if (node) {
        // Generate sample data based on node type
        switch (node.type) {
          case "input":
            data[nodeId] = { status: "started", timestamp: new Date().toISOString() }
            break
          case "output":
            data[nodeId] = { status: "completed", result: "success" }
            break
          case "customDecision":
            data[nodeId] = {
              condition: "validation",
              result: Math.random() > 0.3 ? "passed" : "failed",
              details: Math.random() > 0.3 ? "All checks passed" : "Validation error",
            }
            break
          case "customData":
            data[nodeId] = {
              records: Math.floor(Math.random() * 100) + 1,
              processed: Math.floor(Math.random() * 100) + 1,
            }
            break
          default:
            data[nodeId] = {
              status: "processing",
              progress: Math.floor(Math.random() * 100),
              duration: `${(Math.random() * 2).toFixed(1)}s`,
            }
        }
      }
    })

setSimulationData(data)

// Reset simulation state
    setCurrentStep(0)
    setIsPlaying(false)

if (path.length > 0) {
      onHighlightNode(path[0])
    }
  }, [nodes, edges, onHighlightNode])

// Handle auto-play of simulation
  useEffect(() => {
    let interval: NodeJS.Timeout | null = null

if (isPlaying && simulationPath.length > 0) {
      interval = setInterval(() => {
        setCurrentStep((prev) => {
          const next = prev + 1

// If we've reached the end, stop playing
          if (next >= simulationPath.length) {
            setIsPlaying(false)
            return prev
          }

// Highlight the current node and edge
          const currentNodeId = simulationPath[next]
          onHighlightNode(currentNodeId)

// Find the edge connecting to this node
          if (next > 0) {
            const prevNodeId = simulationPath[next - 1]
            const edge = edges.find((e) => e.source === prevNodeId && e.target === currentNodeId)

if (edge) {
              onHighlightEdge(edge.id)
            }
          }

// Update current node data
          setCurrentNodeData(simulationData[currentNodeId])

return next
        })
      }, simulationSpeed * 1000)
    }

return () => {
      if (interval) clearInterval(interval)
    }
  }, [isPlaying, simulationPath, currentStep, simulationSpeed, edges, onHighlightNode, onHighlightEdge, simulationData])

// Generate a path through the diagram
  const generateSimulationPath = (startNodeId: string, nodes: Node[], edges: Edge[]): string[] => {
    const path: string[] = [startNodeId]
    let currentNodeId = startNodeId
    const maxSteps = 20 // Prevent infinite loops

for (let i = 0; i < maxSteps; i++) {
      // Find all edges coming from the current node
      const outgoingEdges = edges.filter((edge) => edge.source === currentNodeId)

if (outgoingEdges.length === 0) break

// For decision nodes, randomly choose a path
      const currentNode = nodes.find((node) => node.id === currentNodeId)
      let nextEdge

if (currentNode?.type === "customDecision") {
        // For decision nodes, prefer the "success" path (usually right or bottom)
        const successEdges = outgoingEdges.filter(
          (edge) =>
            edge.style?.stroke === "#10b981" || // Success color
            edge.sourceHandle === "right" ||
            edge.sourceHandle === "bottom",
        )

if (successEdges.length > 0 && Math.random() > 0.3) {
          nextEdge = successEdges[Math.floor(Math.random() * successEdges.length)]
        } else {
          nextEdge = outgoingEdges[Math.floor(Math.random() * outgoingEdges.length)]
        }
      } else {
        // For other nodes, just take the first edge
        nextEdge = outgoingEdges[0]
      }

if (!nextEdge) break

currentNodeId = nextEdge.target
      path.push(currentNodeId)

// If we've reached an output node, stop
      const targetNode = nodes.find((node) => node.id === currentNodeId)
      if (targetNode?.type === "output") break
    }

return path
  }

const handlePlay = () => {
    setIsPlaying(!isPlaying)
  }

const handleNext = () => {
    if (currentStep < simulationPath.length - 1) {
      const nextStep = currentStep + 1
      setCurrentStep(nextStep)

const currentNodeId = simulationPath[nextStep]
      onHighlightNode(currentNodeId)
      setCurrentNodeData(simulationData[currentNodeId])

// Highlight the edge
      if (nextStep > 0) {
        const prevNodeId = simulationPath[nextStep - 1]
        const edge = edges.find((e) => e.source === prevNodeId && e.target === currentNodeId)

if (edge) {
          onHighlightEdge(edge.id)
        }
      }
    }
  }

const handlePrevious = () => {
    if (currentStep > 0) {
      const prevStep = currentStep - 1
      setCurrentStep(prevStep)

const currentNodeId = simulationPath[prevStep]
      onHighlightNode(currentNodeId)
      setCurrentNodeData(simulationData[currentNodeId])

// Highlight the edge
      if (prevStep > 0) {
        const prevPrevNodeId = simulationPath[prevStep - 1]
        const edge = edges.find((e) => e.source === prevPrevNodeId && e.target === currentNodeId)

if (edge) {
          onHighlightEdge(edge.id)
        }
      }
    }
  }

const handleReset = () => {
    setCurrentStep(0)
    setIsPlaying(false)

if (simulationPath.length > 0) {
      const startNodeId = simulationPath[0]
      onHighlightNode(startNodeId)
      setCurrentNodeData(simulationData[startNodeId])
      onHighlightEdge(null)
    }
  }

if (!isSimulating) return null

return (
    <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-[500px] z-10">
      <Card>
        <CardHeader className="pb-2">
          <div className="flex justify-between items-center">
            <CardTitle className="text-base flex items-center">
              <RefreshCw className="h-4 w-4 mr-2" />
              Simulation Mode
            </CardTitle>
            <Badge variant={isPlaying ? "default" : "outline"} className="h-6">
              {currentStep + 1} / {simulationPath.length}
            </Badge>
          </div>
          <CardDescription>Visualize the flow of data through your diagram</CardDescription>
        </CardHeader>
        <CardContent className="pb-2">
          {currentNodeData && (
            <div className="mb-4 p-2 bg-muted rounded-md text-sm">
              <div className="font-medium mb-1">Current Node Data:</div>
              <div className="grid grid-cols-2 gap-x-4 gap-y-1">
                {Object.entries(currentNodeData).map(([key, value]) => (
                  <React.Fragment key={key}>
                    <div className="text-muted-foreground">{key}:</div>
                    <div>{String(value)}</div>
                  </React.Fragment>
                ))}
              </div>
            </div>
          )}

<div className="flex justify-center gap-2 mb-4">
            <Button variant="outline" size="icon" onClick={handlePrevious} disabled={currentStep === 0}>
              <SkipBack className="h-4 w-4" />
            </Button>
            <Button variant="outline" size="icon" onClick={handlePlay}>
              {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
            </Button>
            <Button
              variant="outline"
              size="icon"
              onClick={handleNext}
              disabled={currentStep === simulationPath.length - 1}
            >
              <SkipForward className="h-4 w-4" />
            </Button>
            <Button variant="outline" size="icon" onClick={handleReset}>
              <RefreshCw className="h-4 w-4" />
            </Button>
          </div>

<div className="flex items-center gap-2">
            <Clock className="h-4 w-4 text-muted-foreground" />
            <Slider
              value={[simulationSpeed]}
              min={0.5}
              max={3}
              step={0.5}
              onValueChange={(value) => setSimulationSpeed(value[0])}
              className="flex-1"
            />
            <span className="text-xs text-muted-foreground w-10">{simulationSpeed}s</span>
          </div>
        </CardContent>
        <CardFooter className="pt-0">
          <Button variant="outline" size="sm" className="w-full" onClick={() => setIsSimulating(false)}>
            Exit Simulation
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/3d-view-controls.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { CuboidIcon as Cube, Maximize, Minimize } from "lucide-react"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

interface ThreeDViewControlsProps {
  is3DMode: boolean
  setIs3DMode: (value: boolean) => void
  rotation: number
  setRotation: (value: number) => void
  elevation: number
  setElevation: (value: number) => void
  depth: number
  setDepth: (value: number) => void
  showShadows: boolean
  setShowShadows: (value: boolean) => void
  autoRotate: boolean
  setAutoRotate: (value: boolean) => void
}

export function ThreeDViewControls({
  is3DMode,
  setIs3DMode,
  rotation,
  setRotation,
  elevation,
  setElevation,
  depth,
  setDepth,
  showShadows,
  setShowShadows,
  autoRotate,
  setAutoRotate,
}: ThreeDViewControlsProps) {
  const [expanded, setExpanded] = useState(false)

if (!is3DMode) return null

return (
    <div className="absolute top-4 right-4 z-10">
      <Card className="w-64">
        <CardHeader className="pb-2">
          <div className="flex justify-between items-center">
            <CardTitle className="text-base flex items-center">
              <Cube className="h-4 w-4 mr-2" />
              3D View
            </CardTitle>
            <Button variant="ghost" size="icon" onClick={() => setExpanded(!expanded)}>
              {expanded ? <Minimize className="h-4 w-4" /> : <Maximize className="h-4 w-4" />}
            </Button>
          </div>
          {expanded && <CardDescription>Adjust 3D visualization settings</CardDescription>}
        </CardHeader>
        {expanded && (
          <CardContent className="pb-2 space-y-4">
            <div className="space-y-2">
              <div className="flex justify-between items-center">
                <Label htmlFor="rotation">Rotation</Label>
                <span className="text-xs text-muted-foreground">{Math.round(rotation)}°</span>
              </div>
              <Slider
                id="rotation"
                value={[rotation]}
                min={0}
                max={360}
                step={1}
                onValueChange={(value) => setRotation(value[0])}
              />
            </div>

<div className="space-y-2">
              <div className="flex justify-between items-center">
                <Label htmlFor="elevation">Elevation</Label>
                <span className="text-xs text-muted-foreground">{Math.round(elevation)}°</span>
              </div>
              <Slider
                id="elevation"
                value={[elevation]}
                min={0}
                max={90}
                step={1}
                onValueChange={(value) => setElevation(value[0])}
              />
            </div>

<div className="space-y-2">
              <div className="flex justify-between items-center">
                <Label htmlFor="depth">Depth</Label>
                <span className="text-xs text-muted-foreground">{depth.toFixed(1)}</span>
              </div>
              <Slider
                id="depth"
                value={[depth]}
                min={0.5}
                max={3}
                step={0.1}
                onValueChange={(value) => setDepth(value[0])}
              />
            </div>

<div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Label htmlFor="shadows">Shadows</Label>
              </div>
              <Switch id="shadows" checked={showShadows} onCheckedChange={setShowShadows} />
            </div>

<div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Label htmlFor="autoRotate">Auto-rotate</Label>
              </div>
              <Switch id="autoRotate" checked={autoRotate} onCheckedChange={setAutoRotate} />
            </div>
          </CardContent>
        )}
        <CardFooter className={expanded ? "pt-0" : "p-2"}>
          <Button variant="outline" size="sm" className="w-full" onClick={() => setIs3DMode(false)}>
            Exit 3D View
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/voice-command-listener.tsx"
"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Mic, MicOff, Volume2, AlertCircle } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"

interface VoiceCommandListenerProps {
  isListening: boolean
  setIsListening: (value: boolean) => void
  onVoiceCommand: (command: string) => void
}

export function VoiceCommandListener({ isListening, setIsListening, onVoiceCommand }: VoiceCommandListenerProps) {
  const [transcript, setTranscript] = useState("")
  const [isProcessing, setIsProcessing] = useState(false)
  const [showHelp, setShowHelp] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const recognitionRef = useRef<any>(null)

// Initialize speech recognition
  useEffect(() => {
    // Check if browser supports speech recognition
    if (!("webkitSpeechRecognition" in window) && !("SpeechRecognition" in window)) {
      setError("Your browser doesn't support speech recognition")
      return
    }

// Create speech recognition instance
    const SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition
    recognitionRef.current = new SpeechRecognition()

// Configure recognition
    recognitionRef.current.continuous = true
    recognitionRef.current.interimResults = true
    recognitionRef.current.lang = "en-US"

// Set up event handlers
    recognitionRef.current.onresult = (event: any) => {
      let interimTranscript = ""
      let finalTranscript = ""

for (let i = event.resultIndex; i < event.results.length; i++) {
        const transcript = event.results[i][0].transcript
        if (event.results[i].isFinal) {
          finalTranscript += transcript
        } else {
          interimTranscript += transcript
        }
      }

// Update transcript
      setTranscript(finalTranscript || interimTranscript)

// Process final results
      if (finalTranscript) {
        processCommand(finalTranscript)
      }
    }

recognitionRef.current.onerror = (event: any) => {
      console.error("Speech recognition error", event.error)
      setError(`Error: ${event.error}`)
    }

recognitionRef.current.onend = () => {
      // Only restart if we're still supposed to be listening
      if (isListening) {
        recognitionRef.current.start()
      }
    }

return () => {
      if (recognitionRef.current) {
        recognitionRef.current.stop()
      }
    }
  }, [])

// Start/stop listening based on isListening state
  useEffect(() => {
    if (!recognitionRef.current) return

if (isListening) {
      try {
        recognitionRef.current.start()
        setError(null)
      } catch (e) {
        console.error("Failed to start speech recognition", e)
        setError("Failed to start speech recognition")
      }
    } else {
      try {
        recognitionRef.current.stop()
      } catch (e) {
        console.error("Failed to stop speech recognition", e)
      }
    }
  }, [isListening])

// Process voice commands
  const processCommand = (command: string) => {
    setIsProcessing(true)

// Convert to lowercase for easier matching
    const lowerCommand = command.toLowerCase().trim()

// Pass the command to the parent component
    onVoiceCommand(lowerCommand)

// Clear transcript after processing
    setTimeout(() => {
      setTranscript("")
      setIsProcessing(false)
    }, 1000)
  }

const toggleListening = () => {
    setIsListening(!isListening)
  }

if (!isListening && !showHelp) {
    return (
      <div className="absolute bottom-4 right-4 z-10">
        <Button
          variant="outline"
          size="icon"
          className="h-10 w-10 rounded-full bg-background shadow-md"
          onClick={toggleListening}
        >
          <Mic className="h-5 w-5" />
        </Button>
      </div>
    )
  }

return (
    <div className="absolute bottom-4 right-4 z-10">
      <Card className="w-80">
        <CardHeader className="pb-2">
          <div className="flex justify-between items-center">
            <CardTitle className="text-base flex items-center">
              {isListening ? (
                <>
                  <Volume2 className="h-4 w-4 mr-2 animate-pulse text-green-500" />
                  Voice Commands
                </>
              ) : (
                <>
                  <MicOff className="h-4 w-4 mr-2" />
                  Voice Commands
                </>
              )}
            </CardTitle>
            <div className="flex items-center gap-2">
              <Switch
                id="voice-toggle"
                checked={isListening}
                onCheckedChange={setIsListening}
                className="data-[state=checked]:bg-green-500"
              />
            </div>
          </div>
          <CardDescription>{isListening ? "Listening for commands..." : "Voice commands are disabled"}</CardDescription>
        </CardHeader>
        <CardContent className="pb-2">
          {error && (
            <div className="mb-2 p-2 bg-destructive/10 text-destructive rounded-md text-sm flex items-center">
              <AlertCircle className="h-4 w-4 mr-2 flex-shrink-0" />
              {error}
            </div>
          )}

{isListening && (
            <div className="mb-2">
              <div className="text-sm font-medium mb-1">I heard:</div>
              <div className="p-2 bg-muted rounded-md text-sm min-h-[40px] relative">
                {transcript || "Waiting for speech..."}
                {isProcessing && <Badge className="absolute top-1 right-1 bg-green-500">Processing</Badge>}
              </div>
            </div>
          )}

<div className="text-sm font-medium mb-1 flex justify-between items-center">
            <span>Example commands:</span>
            <Button variant="ghost" size="sm" onClick={() => setShowHelp(!showHelp)}>
              {showHelp ? "Hide" : "Show more"}
            </Button>
          </div>
          <ul className="text-xs space-y-1 text-muted-foreground">
            <li>"Add a new node"</li>
            <li>"Connect node 1 to node 2"</li>
            <li>"Change color to blue"</li>
            {showHelp && (
              <>
                <li>"Delete selected node"</li>
                <li>"Undo last action"</li>
                <li>"Export as PNG"</li>
                <li>"Switch to 3D view"</li>
                <li>"Start simulation"</li>
                <li>"Auto layout diagram"</li>
                <li>"Save diagram"</li>
                <li>"Toggle dark mode"</li>
              </>
            )}
          </ul>
        </CardContent>
        <CardFooter className="pt-0">
          <Button variant="outline" size="sm" className="w-full" onClick={toggleListening}>
            {isListening ? (
              <>
                <MicOff className="mr-2 h-4 w-4" /> Stop Listening
              </>
            ) : (
              <>
                <Mic className="mr-2 h-4 w-4" /> Start Listening
              </>
            )}
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/diagram-metrics.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { BarChart, PieChart, LineChart, Activity } from "lucide-react"
import type { Node, Edge } from "reactflow"

interface DiagramMetricsProps {
  nodes: Node[]
  edges: Edge[]
}

export function DiagramMetrics({ nodes, edges }: DiagramMetricsProps) {
  const [metrics, setMetrics] = useState({
    complexity: 0,
    connectivity: 0,
    balance: 0,
    depth: 0,
  })

// Calculate metrics when nodes or edges change
  useEffect(() => {
    if (nodes.length === 0) return

// Calculate complexity (based on number of nodes and edges)
    const complexity = Math.min(100, (nodes.length + edges.length) * 5)

// Calculate connectivity (ratio of edges to possible edges)
    const maxPossibleEdges = (nodes.length * (nodes.length - 1)) / 2
    const connectivity = Math.min(100, (edges.length / Math.max(1, maxPossibleEdges)) * 100)

// Calculate balance (distribution of node types)
    const nodeTypes = nodes.map((node) => node.type)
    const uniqueTypes = new Set(nodeTypes)
    const typeDistribution = Array.from(uniqueTypes).map(
      (type) => nodeTypes.filter((t) => t === type).length / nodes.length,
    )
    const balance = Math.min(100, 100 - calculateStandardDeviation(typeDistribution) * 100)

// Calculate depth (longest path from start to end)
    const depth = Math.min(100, calculateLongestPath(nodes, edges) * 10)

setMetrics({
      complexity,
      connectivity,
      balance,
      depth,
    })
  }, [nodes, edges])

// Helper function to calculate standard deviation
  const calculateStandardDeviation = (values: number[]): number => {
    if (values.length === 0) return 0

const mean = values.reduce((sum, val) => sum + val, 0) / values.length
    const squareDiffs = values.map((val) => Math.pow(val - mean, 2))
    const variance = squareDiffs.reduce((sum, val) => sum + val, 0) / values.length

return Math.sqrt(variance)
  }

// Helper function to calculate the longest path
  const calculateLongestPath = (nodes: Node[], edges: Edge[]): number => {
    if (nodes.length === 0 || edges.length === 0) return 0

// Find start nodes (input nodes or nodes with no incoming edges)
    const startNodes = nodes.filter((node) => node.type === "input" || !edges.some((edge) => edge.target === node.id))

if (startNodes.length === 0) return 0

// For each start node, find the longest path
    const pathLengths = startNodes.map((startNode) => {
      const visited = new Set<string>()
      return findLongestPathFromNode(startNode.id, edges, visited)
    })

return Math.max(...pathLengths)
  }

// Recursive function to find longest path from a node
  const findLongestPathFromNode = (nodeId: string, edges: Edge[], visited: Set<string>): number => {
    // Mark node as visited
    visited.add(nodeId)

// Find all outgoing edges from this node
    const outgoingEdges = edges.filter((edge) => edge.source === nodeId)

if (outgoingEdges.length === 0) return 1

// For each outgoing edge, find the longest path
    const childPathLengths = outgoingEdges.map((edge) => {
      // Skip if we've already visited this node (avoid cycles)
      if (visited.has(edge.target)) return 0

// Clone the visited set for this branch
      const branchVisited = new Set(visited)

// Recursively find the longest path from the target node
      return 1 + findLongestPathFromNode(edge.target, edges, branchVisited)
    })

return Math.max(...childPathLengths)
  }

// Get node type distribution for the chart
  const getNodeTypeDistribution = () => {
    const typeCount: Record<string, number> = {}

nodes.forEach((node) => {
      const type = node.type || "default"
      typeCount[type] = (typeCount[type] || 0) + 1
    })

return Object.entries(typeCount).map(([type, count]) => ({
      type:
        type === "customDecision"
          ? "Decision"
          : type === "customData"
            ? "Data"
            : type === "customSubflow"
              ? "Subflow"
              : type.charAt(0).toUpperCase() + type.slice(1),
      count,
    }))
  }

const nodeTypeData = getNodeTypeDistribution()

return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-base flex items-center">
          <Activity className="h-4 w-4 mr-2" />
          Diagram Metrics
        </CardTitle>
        <CardDescription>Quantitative analysis of your diagram</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <div className="flex items-center">
              <BarChart className="h-4 w-4 mr-1 text-blue-500" />
              <span>Complexity</span>
            </div>
            <span>{Math.round(metrics.complexity)}%</span>
          </div>
          <Progress value={metrics.complexity} className="h-2" />
        </div>

<div className="space-y-2">
          <div className="flex justify-between text-sm">
            <div className="flex items-center">
              <LineChart className="h-4 w-4 mr-1 text-green-500" />
              <span>Connectivity</span>
            </div>
            <span>{Math.round(metrics.connectivity)}%</span>
          </div>
          <Progress value={metrics.connectivity} className="h-2" />
        </div>

<div className="space-y-2">
          <div className="flex justify-between text-sm">
            <div className="flex items-center">
              <PieChart className="h-4 w-4 mr-1 text-purple-500" />
              <span>Balance</span>
            </div>
            <span>{Math.round(metrics.balance)}%</span>
          </div>
          <Progress value={metrics.balance} className="h-2" />
        </div>

<div className="space-y-2">
          <div className="flex justify-between text-sm">
            <div className="flex items-center">
              <Activity className="h-4 w-4 mr-1 text-orange-500" />
              <span>Depth</span>
            </div>
            <span>{Math.round(metrics.depth)}%</span>
          </div>
          <Progress value={metrics.depth} className="h-2" />
        </div>

<div className="mt-4">
          <div className="text-sm font-medium mb-2">Node Type Distribution</div>
          <div className="flex items-center justify-between">
            {nodeTypeData.map((item, index) => (
              <div key={index} className="text-center">
                <div className="text-xs text-muted-foreground">{item.type}</div>
                <div className="text-sm font-medium">{item.count}</div>
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/diagram-version-history.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { History, Clock, RotateCcw, Check, ChevronRight } from "lucide-react"
import type { Node, Edge } from "reactflow"

interface DiagramVersion {
  id: string
  timestamp: string
  description: string
  nodes: Node[]
  edges: Edge[]
  thumbnail?: string
}

interface DiagramVersionHistoryProps {
  versions: DiagramVersion[]
  onRestoreVersion: (version: DiagramVersion) => void
  onSaveVersion: (description: string) => void
  currentNodes: Node[]
  currentEdges: Edge[]
}

export function DiagramVersionHistory({
  versions,
  onRestoreVersion,
  onSaveVersion,
  currentNodes,
  currentEdges,
}: DiagramVersionHistoryProps) {
  const [description, setDescription] = useState("")
  const [selectedVersion, setSelectedVersion] = useState<DiagramVersion | null>(null)

const handleSaveVersion = () => {
    onSaveVersion(description)
    setDescription("")
  }

const handleRestoreVersion = () => {
    if (selectedVersion) {
      onRestoreVersion(selectedVersion)
      setSelectedVersion(null)
    }
  }

return (
    <Card className="w-full">
      <CardHeader className="pb-2">
        <CardTitle className="text-base flex items-center">
          <History className="h-4 w-4 mr-2" />
          Version History
        </CardTitle>
        <CardDescription>Track and restore previous versions of your diagram</CardDescription>
      </CardHeader>
      <CardContent className="p-0">
        <div className="p-4 pb-0">
          <div className="flex gap-2 mb-4">
            <input
              type="text"
              placeholder="Version description"
              className="flex-1 px-3 py-1 text-sm rounded-md border"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
            />
            <Button size="sm" onClick={handleSaveVersion} disabled={!description}>
              Save Version
            </Button>
          </div>
        </div>

<ScrollArea className="h-[300px]">
          <div className="p-4 pt-0 space-y-2">
            {versions.length === 0 ? (
              <div className="text-center py-8 text-muted-foreground text-sm">No saved versions yet</div>
            ) : (
              versions.map((version) => (
                <div
                  key={version.id}
                  className={`p-3 rounded-md border cursor-pointer transition-colors ${
                    selectedVersion?.id === version.id ? "bg-muted border-primary" : "hover:bg-muted/50"
                  }`}
                  onClick={() => setSelectedVersion(version)}
                >
                  <div className="flex justify-between items-start">
                    <div>
                      <div className="font-medium text-sm">{version.description}</div>
                      <div className="text-xs text-muted-foreground flex items-center mt-1">
                        <Clock className="h-3 w-3 mr-1" />
                        {new Date(version.timestamp).toLocaleString()}
                      </div>
                    </div>
                    <div className="flex items-center text-xs">
                      <span className="text-muted-foreground mr-1">{version.nodes.length} nodes</span>
                      <ChevronRight className="h-4 w-4 text-muted-foreground" />
                    </div>
                  </div>
                </div>
              ))
            )}
          </div>
        </ScrollArea>
      </CardContent>
      <CardFooter className="border-t p-4">
        <Button variant="outline" className="w-full" onClick={handleRestoreVersion} disabled={!selectedVersion}>
          {selectedVersion ? (
            <>
              <RotateCcw className="mr-2 h-4 w-4" />
              Restore Selected Version
            </>
          ) : (
            <>
              <Check className="mr-2 h-4 w-4" />
              Using Current Version
            </>
          )}
        </Button>
      </CardFooter>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/node-context-menu.tsx"
"use client"

import { useEffect, useRef } from "react"
import { Copy, Trash2, Edit3, ArrowUpRight, ArrowDownRight, Layers, Palette, Code } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"

interface NodeContextMenuProps {
  nodeId: string
  position: { x: number; y: number }
  onClose: () => void
  onDuplicate: () => void
  onDelete: () => void
  onEdit: () => void
  onConnect: (sourceHandle: string) => void
  onChangeStyle: () => void
  onAddContent: () => void
  onMoveToLayer: () => void
}

export function NodeContextMenu({
  nodeId,
  position,
  onClose,
  onDuplicate,
  onDelete,
  onEdit,
  onConnect,
  onChangeStyle,
  onAddContent,
  onMoveToLayer,
}: NodeContextMenuProps) {
  const menuRef = useRef<HTMLDivElement>(null)

// Close the menu when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        onClose()
      }
    }

document.addEventListener("mousedown", handleClickOutside)
    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [onClose])

return (
    <AnimatePresence>
      <motion.div
        ref={menuRef}
        className="absolute z-50 bg-background border rounded-lg shadow-lg overflow-hidden"
        style={{
          left: position.x,
          top: position.y,
          width: 180,
        }}
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        exit={{ opacity: 0, scale: 0.9 }}
        transition={{ duration: 0.15 }}
      >
        <div className="py-1">
          <button className="w-full text-left px-4 py-2 text-sm hover:bg-muted flex items-center" onClick={onEdit}>
            <Edit3 className="mr-2 h-4 w-4" />
            Edit Node
          </button>

<button className="w-full text-left px-4 py-2 text-sm hover:bg-muted flex items-center" onClick={onDuplicate}>
            <Copy className="mr-2 h-4 w-4" />
            Duplicate
          </button>

<button
            className="w-full text-left px-4 py-2 text-sm hover:bg-muted flex items-center"
            onClick={() => onConnect("right")}
          >
            <ArrowUpRight className="mr-2 h-4 w-4" />
            Connect Right
          </button>

<button
            className="w-full text-left px-4 py-2 text-sm hover:bg-muted flex items-center"
            onClick={() => onConnect("bottom")}
          >
            <ArrowDownRight className="mr-2 h-4 w-4" />
            Connect Bottom
          </button>

<button
            className="w-full text-left px-4 py-2 text-sm hover:bg-muted flex items-center"
            onClick={onChangeStyle}
          >
            <Palette className="mr-2 h-4 w-4" />
            Change Style
          </button>

<button
            className="w-full text-left px-4 py-2 text-sm hover:bg-muted flex items-center"
            onClick={onAddContent}
          >
            <Code className="mr-2 h-4 w-4" />
            Add Content
          </button>

<button
            className="w-full text-left px-4 py-2 text-sm hover:bg-muted flex items-center"
            onClick={onMoveToLayer}
          >
            <Layers className="mr-2 h-4 w-4" />
            Move to Layer
          </button>

<button
            className="w-full text-left px-4 py-2 text-sm text-destructive hover:bg-destructive/10 flex items-center"
            onClick={onDelete}
          >
            <Trash2 className="mr-2 h-4 w-4" />
            Delete
          </button>
        </div>
      </motion.div>
    </AnimatePresence>
  )
}

[V0_FILE]typescriptreact:file="components/connection-line.tsx" isQuickEdit="true"
"use client"
import { type ConnectionLineComponent, getSmoothStepPath } from "reactflow"

export const CustomConnectionLine: ConnectionLineComponent = ({
  fromX,
  fromY,
  fromPosition,
  toX,
  toY,
  toPosition,
  connectionLineStyle,
}) => {
  // Get a smooth path between the points
  const [edgePath] = getSmoothStepPath({
    sourceX: fromX,
    sourceY: fromY,
    sourcePosition: fromPosition,
    targetX: toX,
    targetY: toY,
    targetPosition: toPosition,
    borderRadius: 16,
  })

return (
    <g>
      {/* Background path for better visibility */}
      <path
        d={edgePath}
        fill="none"
        style={{
          ...connectionLineStyle,
          stroke: "var(--primary)",
          strokeWidth: 6,
          strokeOpacity: 0.1,
        }}
      />

{/* Main connection line */}
      <path
        d={edgePath}
        fill="none"
        className="animated-connection-path"
        style={{
          ...connectionLineStyle,
          stroke: "var(--primary)",
          strokeWidth: 2,
          strokeDasharray: "5,5",
          animation: "flow 1s linear infinite",
        }}
      />

{/* Arrow tip */}
      <circle
        cx={toX}
        cy={toY}
        r={3}
        fill="var(--primary)"
        style={{
          filter: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25))",
        }}
      />
    </g>
  )
}

[V0_FILE]typescriptreact:file="components/edge-renderer.tsx" isQuickEdit="true"
"use client"

import { useCallback } from "react"
import { type EdgeProps, getBezierPath, getSmoothStepPath, getMarkerEnd, EdgeLabelRenderer } from "reactflow"

export function CustomEdge({
  id,
  source,
  target,
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  style = {},
  markerEnd,
  data,
  selected,
  animated,
  label,
}: EdgeProps) {
  // Determine the path based on the edge type
  const getPath = useCallback(() => {
    const edgeType = data?.type || "default"

// Common path parameters
    const params = [sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition]

// For bezier curves
    const bezierParams = [
      ...params,
      20, // curvature
    ]

// For smooth step paths
    const smoothStepParams = [
      ...params,
      20, // borderRadius
    ]

switch (edgeType) {
      case "smoothstep":
        return getSmoothStepPath(smoothStepParams as any)
      case "straight":
        return `M ${sourceX},${sourceY} L ${targetX},${targetY}`
      default:
        return getBezierPath(bezierParams as any)
    }
  }, [sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data?.type])

const path = getPath()
  const markerEndId = getMarkerEnd(markerEnd)

// Calculate the center point of the edge for label positioning
  const edgeCenterX = (sourceX + targetX) / 2
  const edgeCenterY = (sourceY + targetY) / 2

// Determine edge color based on style or type
  const getEdgeColor = () => {
    if (style?.stroke) return style.stroke

const edgeStyle = data?.style || "default"
    switch (edgeStyle) {
      case "success":
        return "#10b981"
      case "error":
        return "#ef4444"
      case "conditional":
        return "#f59e0b"
      default:
        return "#94a3b8"
    }
  }

const edgeColor = getEdgeColor()
  const strokeWidth = style?.strokeWidth || 2
  const strokeDasharray = style?.strokeDasharray || (data?.style === "conditional" ? "5,5" : undefined)

return (
    <>
      <g>
        {/* Background path for easier selection */}
        <path id={id} className="react-flow__edge-path-selector" d={path} stroke="transparent" strokeWidth={10} />

{/* Actual visible edge */}
        <path
          id={id}
          className="react-flow__edge-path"
          d={path}
          stroke={edgeColor}
          strokeWidth={strokeWidth}
          strokeDasharray={strokeDasharray}
          markerEnd={markerEndId}
          style={{ transition: "stroke-width 0.2s ease, stroke 0.2s ease" }}
        />

{/* Animated flow effect */}
        {animated && (
          <path
            id={`${id}-animated`}
            className="react-flow__edge-path-animated"
            d={path}
            stroke={edgeColor}
            strokeWidth={strokeWidth}
            strokeDasharray="5,10"
            markerEnd={markerEndId}
            style={{
              animation: "flow 1s linear infinite",
              strokeOpacity: 0.6,
            }}
          />
        )}

{/* Selection indicator */}
        {selected && (
          <path
            id={`${id}-selected`}
            className="react-flow__edge-path-selected"
            d={path}
            stroke={edgeColor}
            strokeWidth={strokeWidth + 4}
            strokeOpacity={0.2}
          />
        )}
      </g>

{/* Edge label */}
      {label && (
        <EdgeLabelRenderer>
          <div
            style={{
              position: "absolute",
              transform: `translate(-50%, -50%) translate(${edgeCenterX}px,${edgeCenterY}px)`,
              pointerEvents: "all",
              zIndex: 10,
            }}
            className="nodrag nopan"
          >
            <div
              className={`
              px-2 py-1 rounded-md text-xs font-medium shadow-sm
              ${selected ? "bg-primary text-primary-foreground" : "bg-background text-foreground"}
              border border-border
            `}
            >
              {label}
            </div>
          </div>
        </EdgeLabelRenderer>
      )}
    </>
  )
}

[V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom styles for the flow diagram */
.react-flow__node {
  transition: all 0.2s ease;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.react-flow__node.selected {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
}

.react-flow__edge.selected .react-flow__edge-path {
  stroke-width: 3;
}

/* Fix the handle styling and add proper animations for connections */
.react-flow__handle {
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 10 !important;
}

.react-flow__node:hover .react-flow__handle,
.react-flow__node.selected .react-flow__handle {
  opacity: 1;
}

.react-flow__handle:hover {
  transform: scale(1.3) !important;
  cursor: crosshair;
}

/* Animation for flowing edges */
@keyframes flow {
  from {
    stroke-dashoffset: 15;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Connection line styling */
.react-flow__connection-path {
  stroke: var(--primary);
  stroke-width: 2;
  stroke-dasharray: 5, 5;
  animation: flow 1s linear infinite;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Marker styling */
.react-flow__arrowhead {
  fill: var(--primary);
  stroke: none;
}

/* Improve edge interaction */
.react-flow__edge {
  cursor: pointer;
  transition: all 0.2s ease;
}

.react-flow__edge:hover .react-flow__edge-path {
  stroke-width: 3;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.react-flow__edge.selected {
  z-index: 1000;
}

.react-flow__edge.selected .react-flow__edge-path {
  stroke-width: 3;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

.presentation-mode {
  background-color: black;
}

.presentation-mode .react-flow__node {
  transform: scale(1.2);
}

.presentation-mode .react-flow__edge-path {
  stroke-width: 2;
}

.presentation-mode .react-flow__edge-text {
  font-size: 14px;
  font-weight: 500;
}

.decision-node {
  position: relative;
  z-index: 1;
}

/* 3D transform styles */
.transform-style-3d {
  transform-style: preserve-3d;
}

.perspective-1000 {
  perspective: 1000px;
}

.react-flow__node-customDecision {
  z-index: 1;
}

/* Enhanced node shadows */
.enhanced-node {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.react-flow__node.selected .enhanced-node {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* Edge label styling */
.react-flow__edge-text {
  font-size: 12px;
  font-weight: 500;
  fill: #64748b;
}

/* Edge path animations */
.react-flow__edge-path {
  transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

/* Controls styling */
.react-flow__controls {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.react-flow__controls-button {
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  background: theme("colors.background") !important;
  color: theme("colors.foreground") !important;
}

.react-flow__controls-button:hover {
  background: theme("colors.muted.DEFAULT") !important;
}

/* Minimap styling */
.react-flow__minimap {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { DialogTrigger } from "@/components/ui/dialog"

import type React from "react"

import { useState, useCallback, useRef, useEffect } from "react"
import ReactFlow, {
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
  type Connection,
  type Edge,
  type Node,
  ReactFlowProvider,
  Panel,
  MarkerType,
} from "reactflow"
import "reactflow/dist/style.css"
import {
  Download,
  Zap,
  Plus,
  Settings,
  Save,
  Trash2,
  Undo,
  Redo,
  Moon,
  Sun,
  Search,
  Layout,
  Copy,
  Presentation,
  HelpCircle,
  FileText,
  Maximize,
  Minimize,
  RotateCcw,
  PanelLeft,
  PanelRight,
  Layers,
  Edit3,
  Camera,
  Palette,
  Lightbulb,
  LayersIcon,
  ImageIcon,
  Wand2,
  BarChart2,
  FileVideo,
  Cpu,
  History,
  Play,
  Mic,
  CuboidIcon as Cube,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { generateDiagramFromPrompt } from "@/lib/ai-service"
import { Toaster } from "@/components/ui/toaster"
import { useToast } from "@/hooks/use-toast"
import { toPng, toSvg, toJpeg } from "html-to-image"
import { DecisionNode, DataNode, SubflowNode, EnhancedDefaultNode } from "@/components/custom-nodes"
import { KeyboardShortcuts } from "@/components/keyboard-shortcuts"
import { NodeStyleEditor } from "@/components/node-style-editor"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Slider } from "@/components/ui/slider"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { DiagramAnnotations } from "@/components/diagram-annotations"
import { DiagramMinimap } from "@/components/diagram-minimap"
import { PresentationControls } from "@/components/presentation-controls"
import { DiagramExportDialog } from "@/components/diagram-export-dialog"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Progress } from "@/components/ui/progress"
import { DiagramSimulation } from "@/components/diagram-simulation"
import { ThreeDViewControls } from "@/components/3d-view-controls"
import { VoiceCommandListener } from "@/components/voice-command-listener"
import { DiagramMetrics } from "@/components/diagram-metrics"
import { DiagramVersionHistory } from "@/components/diagram-version-history"
import { CustomEdge } from "@/components/edge-renderer"
import { CustomConnectionLine } from "@/components/connection-line"
import { NodeContextMenu } from "@/components/node-context-menu"

const initialNodes: Node[] = [
  {
    id: "1",
    type: "input",
    data: { label: "Start", description: "Starting point of the flow" },
    position: { x: 250, y: 5 },
    style: {
      background: "#4f46e5",
      color: "white",
      border: "1px solid #4338ca",
      borderRadius: "8px",
      padding: "10px",
      width: 150,
    },
  },
]

// Define node types
const nodeTypes = {
  customDecision: DecisionNode,
  customData: DataNode,
  customSubflow: SubflowNode,
  default: EnhancedDefaultNode,
  input: EnhancedDefaultNode,
  output: EnhancedDefaultNode,
}

// Define edge types
const edgeTypes = {
  default: CustomEdge,
  step: CustomEdge,
  smoothstep: CustomEdge,
  straight: CustomEdge,
}

// Create a Flow component that will be wrapped with ReactFlowProvider
function Flow() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
  const [edges, setEdges, onEdgesChange] = useEdgesState([])
  const [prompt, setPrompt] = useState("")
  const [isGenerating, setIsGenerating] = useState(false)
  const [exportFormat, setExportFormat] = useState("png")
  const [nodeName, setNodeName] = useState("")
  const [nodeDescription, setNodeDescription] = useState("")
  const [nodeType, setNodeType] = useState("default")
  const [edgeLabel, setEdgeLabel] = useState("")
  const [selectedNode, setSelectedNode] = useState<Node | null>(null)
  const [selectedEdge, setSelectedEdge] = useState<Edge | null>(null)
  const [history, setHistory] = useState<Array<{ nodes: Node[]; edges: Edge[] }>>([])
  const [historyIndex, setHistoryIndex] = useState(-1)
  const [isDarkMode, setIsDarkMode] = useState(false)
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [isPresentationMode, setIsPresentationMode] = useState(false)
  const [showShortcutsDialog, setShowShortcutsDialog] = useState(false)
  const [showMinimap, setShowMinimap] = useState(true)
  const [showControls, setShowControls] = useState(true)
  const [showGrid, setShowGrid] = useState(true)
  const [snapToGrid, setSnapToGrid] = useState(true)
  const [gridSize, setGridSize] = useState(15)
  const [searchTerm, setSearchTerm] = useState("")
  const [searchResults, setSearchResults] = useState<Node[]>([])
  const [currentSearchIndex, setCurrentSearchIndex] = useState(0)
  const [diagramName, setDiagramName] = useState("Untitled Diagram")
  const [diagramDescription, setDiagramDescription] = useState("")
  const [diagramStyle, setDiagramStyle] = useState("default")
  const [savedDiagrams, setSavedDiagrams] = useState<any[]>([])
  const [showSavedDiagramsDialog, setShowSavedDiagramsDialog] = useState(false)
  const [nodeGroups, setNodeGroups] = useState<any[]>([])
  const [selectedGroup, setSelectedGroup] = useState<any>(null)
  const [isEdgeAnimated, setIsEdgeAnimated] = useState(true)
  const [edgeType, setEdgeType] = useState("default")
  const [edgeStyle, setEdgeStyle] = useState("default")
  const [showNodeLabels, setShowNodeLabels] = useState(true)
  const [showEdgeLabels, setShowEdgeLabels] = useState(true)
  const [showExportDialog, setShowExportDialog] = useState(false)
  const [annotations, setAnnotations] = useState<any[]>([])
  const [showAnnotations, setShowAnnotations] = useState(true)
  const [viewMode, setViewMode] = useState<"default" | "presentation" | "edit">("default")
  const [focusedNodeId, setFocusedNodeId] = useState<string | null>(null)
  const [sidebarVisible, setSidebarVisible] = useState(true)
  const [showAiSuggestions, setShowAiSuggestions] = useState(false)
  const [aiSuggestions, setAiSuggestions] = useState<string[]>([])
  const [customThemes, setCustomThemes] = useState<any[]>([])
  const [activeTheme, setActiveTheme] = useState("default")
  const [showThemeEditor, setShowThemeEditor] = useState(false)
  const [nodeLayers, setNodeLayers] = useState<any[]>([{ id: "default", name: "Default Layer", visible: true }])
  const [activeLayer, setActiveLayer] = useState("default")
  const [showLayersPanel, setShowLayersPanel] = useState(false)
  const [smartConnectors, setSmartConnectors] = useState(true)
  const [showNodeContent, setShowNodeContent] = useState(false)
  const [selectedNodeContent, setSelectedNodeContent] = useState<{ type: string; content: string }>({
    type: "",
    content: "",
  })
  const [diagramAnalysisScore, setDiagramAnalysisScore] = useState<{
    clarity: number
    complexity: number
    completeness: number
  }>({
    clarity: 0,
    complexity: 0,
    completeness: 0,
  })

// New state for advanced features
  const [isSimulating, setIsSimulating] = useState(false)
  const [highlightedNodeId, setHighlightedNodeId] = useState<string | null>(null)
  const [highlightedEdgeId, setHighlightedEdgeId] = useState<string | null>(null)
  const [is3DMode, setIs3DMode] = useState(false)
  const [rotation, setRotation] = useState(30)
  const [elevation, setElevation] = useState(30)
  const [depth, setDepth] = useState(1.5)
  const [showShadows, setShowShadows] = useState(true)
  const [autoRotate, setAutoRotate] = useState(false)
  const [isVoiceListening, setIsVoiceListening] = useState(false)
  const [showMetrics, setShowMetrics] = useState(false)
  const [showVersionHistory, setShowVersionHistory] = useState(false)
  const [versionHistory, setVersionHistory] = useState<any[]>([])
  const [activeTab, setActiveTab] = useState("ai")
  const [contextMenu, setContextMenu] = useState<{
    nodeId: string
    position: { x: number; y: number }
  } | null>(null)

const reactFlowWrapper = useRef<HTMLDivElement>(null)
  const { toast } = useToast()
  const reactFlowInstance = useRef(null)
  const isInitialRender = useRef(true)

const getEdgeStyle = (style: string) => {
    switch (style) {
      case "success":
        return { stroke: "#10b981", strokeWidth: 2 }
      case "error":
        return { stroke: "#ef4444", strokeWidth: 2 }
      case "conditional":
        return { stroke: "#f59e0b", strokeWidth: 2, strokeDasharray: "5,5" }
      case "bold":
        return { stroke: "#94a3b8", strokeWidth: 3 }
      default:
        return { stroke: "#94a3b8", strokeWidth: 1.5 }
    }
  }

// Initialize theme based on system preference
  useEffect(() => {
    const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches
    setIsDarkMode(isDark)
    document.documentElement.classList.toggle("dark", isDark)

// Load saved diagrams from localStorage
    const savedDiagramsFromStorage = localStorage.getItem("savedDiagrams")
    if (savedDiagramsFromStorage) {
      setSavedDiagrams(JSON.parse(savedDiagramsFromStorage))
    }

// Load version history from localStorage
    const versionHistoryFromStorage = localStorage.getItem("versionHistory")
    if (versionHistoryFromStorage) {
      setVersionHistory(JSON.parse(versionHistoryFromStorage))
    }
  }, [])

// Save state to history when nodes or edges change
  useEffect(() => {
    // Skip initial render
    if (isInitialRender.current) {
      isInitialRender.current = false
      return
    }

if (nodes.length > 0 || edges.length > 0) {
      // Use setTimeout to defer the state update to the next tick
      // This helps prevent update loops
      const timeoutId = setTimeout(() => {
        if (historyIndex === history.length - 1) {
          setHistory((prev) => [...prev.slice(0, historyIndex + 1), { nodes: [...nodes], edges: [...edges] }])
          setHistoryIndex((prev) => prev + 1)
        }
      }, 0)

return () => clearTimeout(timeoutId)
    }
  }, [nodes, edges, historyIndex, history.length])

// Auto-rotate in 3D mode
  useEffect(() => {
    let rotationInterval: NodeJS.Timeout | null = null

if (is3DMode && autoRotate) {
      rotationInterval = setInterval(() => {
        setRotation((prev) => (prev + 1) % 360)
      }, 100)
    }

return () => {
      if (rotationInterval) clearInterval(rotationInterval)
    }
  }, [is3DMode, autoRotate])

// Handle keyboard shortcuts
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      // Ignore keyboard shortcuts when typing in input fields
      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
        return
      }

// Undo: Ctrl+Z
      if (event.ctrlKey && event.key === "z") {
        event.preventDefault()
        undo()
      }

// Redo: Ctrl+Y
      if (event.ctrlKey && event.key === "y") {
        event.preventDefault()
        redo()
      }

// Delete: Delete key
      if (event.key === "Delete") {
        if (selectedNode) {
          setNodes((nds) => nds.filter((node) => node.id !== selectedNode.id))
          setSelectedNode(null)
        }
        if (selectedEdge) {
          setEdges((eds) => eds.filter((edge) => edge.id !== selectedEdge.id))
          setSelectedEdge(null)
        }
      }

// Save: Ctrl+S
      if (event.ctrlKey && event.key === "s") {
        event.preventDefault()
        saveDiagram()
      }

// Export: Ctrl+E
      if (event.ctrlKey && event.key === "e") {
        event.preventDefault()
        setShowExportDialog(true)
      }

// Search: Ctrl+F
      if (event.ctrlKey && event.key === "f") {
        event.preventDefault()
        document.getElementById("search-input")?.focus()
      }

// Group: Ctrl+G
      if (event.ctrlKey && event.key === "g") {
        event.preventDefault()
        // Group functionality would go here
      }

// Presentation mode: Ctrl+P
      if (event.ctrlKey && event.key === "p") {
        event.preventDefault()
        setViewMode(viewMode === "presentation" ? "default" : "presentation")
      }

// Toggle sidebar: Ctrl+B
      if (event.ctrlKey && event.key === "b") {
        event.preventDefault()
        setSidebarVisible(!sidebarVisible)
      }

// Escape: Exit current mode
      if (event.key === "Escape") {
        if (viewMode === "presentation") {
          setViewMode("default")
        }
        if (isFullscreen) {
          toggleFullscreen()
        }
        if (is3DMode) {
          setIs3DMode(false)
        }
        if (isSimulating) {
          setIsSimulating(false)
        }
      }
    }

window.addEventListener("keydown", handleKeyDown)
    return () => {
      window.removeEventListener("keydown", handleKeyDown)
    }
  }, [selectedNode, selectedEdge, viewMode, isFullscreen, setNodes, setEdges, sidebarVisible, is3DMode, isSimulating])

// Handle search functionality
  useEffect(() => {
    if (searchTerm.trim() === "") {
      setSearchResults([])
      return
    }

const results = nodes.filter(
      (node) =>
        node.data.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
        (node.data.description && node.data.description.toLowerCase().includes(searchTerm.toLowerCase())),
    )

setSearchResults(results)
    setCurrentSearchIndex(0)

if (results.length > 0) {
      // Focus on the first result
      const { x, y } = results[0].position
      const flowInstance = document.querySelector(".react-flow-wrapper")
      if (flowInstance) {
        flowInstance.scrollTo(x, y)
      }
    }
  }, [searchTerm, nodes])

// Focus on node when in presentation mode
  useEffect(() => {
    if (viewMode === "presentation" && focusedNodeId) {
      const node = nodes.find((n) => n.id === focusedNodeId)
      if (node && reactFlowInstance.current) {
        // @ts-ignore
        reactFlowInstance.current.fitView({
          nodes: [node],
          padding: 0.5,
          duration: 800,
        })
      }
    }
  }, [focusedNodeId, viewMode, nodes])

// Fix the onConnect function to ensure proper edge creation
  const onConnect = useCallback(
    (params: Connection | Edge) => {
      // Create a unique ID for the edge
      const edgeId = `e${params.source}-${params.target}-${Date.now()}`

const newEdge = {
        ...params,
        id: edgeId,
        animated: isEdgeAnimated,
        type: edgeType,
        style: getEdgeStyle(edgeStyle),
        label: "Connection",
        markerEnd: {
          type: MarkerType.ArrowClosed,
          width: 20,
          height: 20,
          color: getEdgeStyle(edgeStyle).stroke,
        },
        data: {
          type: edgeType,
          style: edgeStyle,
        },
      }

// Add the edge to the state
      setEdges((eds) => addEdge(newEdge, eds))

// Show success toast
      toast({
        title: "Connection Created",
        description: "Nodes connected successfully",
      })
    },
    [setEdges, isEdgeAnimated, edgeType, edgeStyle, getEdgeStyle, toast],
  )

const handleGenerateDiagram = async () => {
    if (!prompt.trim()) {
      toast({
        title: "Error",
        description: "Please enter a prompt to generate a diagram",
        variant: "destructive",
      })
      return
    }

setIsGenerating(true)
    try {
      const generatedDiagram = await generateDiagramFromPrompt(prompt, diagramStyle)
      setNodes(generatedDiagram.nodes)
      setEdges(generatedDiagram.edges)
      toast({
        title: "Success",
        description: "Diagram generated successfully",
      })
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to generate diagram. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsGenerating(false)
    }
  }

const addNode = () => {
    if (!nodeName.trim()) {
      toast({
        title: "Error",
        description: "Please enter a node name",
        variant: "destructive",
      })
      return
    }

const newNode: Node = {
      id: (nodes.length + 1).toString(),
      data: {
        label: nodeName,
        description: nodeDescription,
        nodeType: nodeType,
      },
      position: {
        x: Math.random() * 400 + 50,
        y: Math.random() * 400 + 50,
      },
      type: nodeType,
      style: getNodeStyle(nodeType),
    }

setNodes((nds) => [...nds, newNode])
    setNodeName("")
    setNodeDescription("")
  }

const getNodeStyle = (type: string) => {
    switch (type) {
      case "input":
        return {
          background: "#4f46e5",
          color: "white",
          border: "1px solid #4338ca",
          borderRadius: "8px",
          padding: "10px",
          width: 150,
        }
      case "output":
        return {
          background: "#10b981",
          color: "white",
          border: "1px solid #059669",
          borderRadius: "8px",
          padding: "10px",
          width: 150,
        }
      case "customDecision":
        return {
          background: "#f59e0b",
          color: "white",
          border: "1px solid #d97706",
          borderRadius: "0",
          padding: "10px",
          width: 150,
        }
      case "customData":
        return {
          background: "#6366f1",
          color: "white",
          border: "1px solid #4f46e5",
          borderRadius: "0 8px 8px 0",
          padding: "10px",
          width: 150,
        }
      case "customSubflow":
        return {
          background: "#8b5cf6",
          color: "white",
          border: "2px dashed #7c3aed",
          borderRadius: "8px",
          padding: "10px",
          width: 180,
        }
      default:
        return {
          background: "#f59e0b",
          color: "white",
          border: "1px solid #d97706",
          borderRadius: "8px",
          padding: "10px",
          width: 150,
        }
    }
  }

const updateEdgeLabel = () => {
    if (selectedEdge) {
      setEdges(edges.map((edge) => (edge.id === selectedEdge.id ? { ...edge, label: edgeLabel } : edge)))
      setSelectedEdge(null)
      setEdgeLabel("")
    }
  }

const onNodeClick = (event: React.MouseEvent, node: Node) => {
    setSelectedNode(node)
    setSelectedEdge(null)

if (viewMode === "presentation") {
      setFocusedNodeId(node.id)
    }
  }

const onEdgeClick = (event: React.MouseEvent, edge: Edge) => {
    setSelectedEdge(edge)
    setSelectedNode(null)
    setEdgeLabel(edge.label || "")
    setIsEdgeAnimated(edge.animated || false)
    setEdgeType(edge.type || "default")
    setEdgeStyle(
      edge.style?.stroke === "#10b981"
        ? "success"
        : edge.style?.stroke === "#ef4444"
          ? "error"
          : edge.style?.strokeDasharray
            ? "conditional"
            : edge.style?.strokeWidth === 3
              ? "bold"
              : "default",
    )
  }

const updateNodeStyle = (style: any) => {
    if (selectedNode) {
      // Use setTimeout to defer the update
      setTimeout(() => {
        setNodes(nodes.map((node) => (node.id === selectedNode.id ? { ...node, style } : node)))
      }, 0)
    }
  }

const updateEdgeStyle = () => {
    if (selectedEdge) {
      const newEdge = {
        ...selectedEdge,
        label: edgeLabel,
        animated: isEdgeAnimated,
        type: edgeType,
        style: getEdgeStyle(edgeStyle),
      }
      // Use setTimeout to defer the update
      setTimeout(() => {
        setEdges(edges.map((edge) => (edge.id === selectedEdge.id ? newEdge : edge)))
      }, 0)
    }
  }

const handleExport = async (format: string, options: any) => {
    if (!reactFlowWrapper.current) return ""

const flowElement = document.querySelector(".react-flow") as HTMLElement
    if (!flowElement) return ""

try {
      if (format === "png" || format === "svg" || format === "jpeg") {
        const exportOptions = {
          backgroundColor: options.includeBackground ? (isDarkMode ? "#1e293b" : "#ffffff") : "transparent",
          quality: options.quality || 1,
          pixelRatio: options.scale || 2,
        }

let dataUrl = ""
        if (format === "png") {
          dataUrl = await toPng(flowElement, exportOptions)
        } else if (format === "svg") {
          dataUrl = await toSvg(flowElement, exportOptions)
        } else if (format === "jpeg") {
          dataUrl = await toJpeg(flowElement, { ...exportOptions, quality: options.quality })
        }

return dataUrl
      } else if (format === "json") {
        const jsonData = {
          name: diagramName,
          description: diagramDescription,
          style: diagramStyle,
          nodes,
          edges,
          groups: nodeGroups,
          annotations: annotations,
          createdAt: new Date().toISOString(),
        }

return options.format === "pretty" ? JSON.stringify(jsonData, null, 2) : JSON.stringify(jsonData)
      }

return ""
    } catch (error) {
      console.error("Export error:", error)
      toast({
        title: "Export Failed",
        description: "There was an error exporting your diagram.",
        variant: "destructive",
      })
      return ""
    }
  }

const saveDiagram = () => {
    const diagramData = {
      id: Date.now().toString(),
      name: diagramName,
      description: diagramDescription,
      style: diagramStyle,
      nodes,
      edges,
      groups: nodeGroups,
      annotations: annotations,
      createdAt: new Date().toISOString(),
    }

const newSavedDiagrams = [...savedDiagrams, diagramData]
    setSavedDiagrams(newSavedDiagrams)

// Save to localStorage
    localStorage.setItem("savedDiagrams", JSON.stringify(newSavedDiagrams))

toast({
      title: "Diagram Saved",
      description: `"${diagramName}" has been saved successfully.`,
    })
  }

const saveVersion = (description: string) => {
    // Create a thumbnail of the current diagram
    const createThumbnail = async () => {
      const flowElement = document.querySelector(".react-flow") as HTMLElement
      if (!flowElement) return null

try {
        const thumbnail = await toPng(flowElement, {
          backgroundColor: isDarkMode ? "#1e293b" : "#ffffff",
          width: 200,
          height: 150,
          pixelRatio: 1,
        })
        return thumbnail
      } catch (error) {
        console.error("Thumbnail creation failed:", error)
        return null
      }
    }

// Save the version
    createThumbnail().then((thumbnail) => {
      const version = {
        id: Date.now().toString(),
        timestamp: new Date().toISOString(),
        description,
        nodes: [...nodes],
        edges: [...edges],
        thumbnail,
      }

const newVersionHistory = [...versionHistory, version]
      setVersionHistory(newVersionHistory)

// Save to localStorage
      localStorage.setItem("versionHistory", JSON.stringify(newVersionHistory))

toast({
        title: "Version Saved",
        description: `Version "${description}" has been saved.`,
      })
    })
  }

const restoreVersion = (version: any) => {
    setNodes(version.nodes)
    setEdges(version.edges)

toast({
      title: "Version Restored",
      description: `Version "${version.description}" has been restored.`,
    })
  }

const loadDiagram = (diagram: any) => {
    setDiagramName(diagram.name)
    setDiagramDescription(diagram.description || "")
    setDiagramStyle(diagram.style || "default")
    setNodes(diagram.nodes)
    setEdges(diagram.edges)
    setNodeGroups(diagram.groups || [])
    setAnnotations(diagram.annotations || [])
    setShowSavedDiagramsDialog(false)

toast({
      title: "Diagram Loaded",
      description: `"${diagram.name}" has been loaded successfully.`,
    })
  }

const deleteSavedDiagram = (id: string) => {
    const newSavedDiagrams = savedDiagrams.filter((diagram) => diagram.id !== id)
    setSavedDiagrams(newSavedDiagrams)

// Save to localStorage
    localStorage.setItem("savedDiagrams", JSON.stringify(newSavedDiagrams))

toast({
      title: "Diagram Deleted",
      description: "The diagram has been deleted successfully.",
    })
  }

const clearDiagram = () => {
    setNodes([])
    setEdges([])
    setNodeGroups([])
    setAnnotations([])
    toast({
      title: "Diagram Cleared",
      description: "All nodes and edges have been removed.",
    })
  }

const undo = () => {
    if (historyIndex > 0) {
      const newIndex = historyIndex - 1
      const { nodes: prevNodes, edges: prevEdges } = history[newIndex]
      setNodes(prevNodes)
      setEdges(prevEdges)
      setHistoryIndex(newIndex)
    }
  }

const redo = () => {
    if (historyIndex < history.length - 1) {
      const newIndex = historyIndex + 1
      const { nodes: nextNodes, edges: nextEdges } = history[newIndex]
      setNodes(nextNodes)
      setEdges(nextEdges)
      setHistoryIndex(newIndex)
    }
  }

const toggleTheme = () => {
    setIsDarkMode(!isDarkMode)
    document.documentElement.classList.toggle("dark")
  }

const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen().catch((err) => {
        console.error(`Error attempting to enable fullscreen: ${err.message}`)
      })
      setIsFullscreen(true)
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen()
        setIsFullscreen(false)
      }
    }
  }

const togglePresentationMode = () => {
    setViewMode(viewMode === "presentation" ? "default" : "presentation")

// If entering presentation mode, focus on the first node
    if (viewMode !== "presentation" && nodes.length > 0) {
      // Try to find an input node first
      const inputNode = nodes.find((node) => node.type === "input")
      setFocusedNodeId(inputNode ? inputNode.id : nodes[0].id)
    }
  }

const navigateToNextSearchResult = () => {
    if (searchResults.length === 0) return

const nextIndex = (currentSearchIndex + 1) % searchResults.length
    setCurrentSearchIndex(nextIndex)

// Focus on the next result
    const { x, y } = searchResults[nextIndex].position
    const flowInstance = document.querySelector(".react-flow-wrapper")
    if (flowInstance) {
      flowInstance.scrollTo(x, y)
    }
  }

const navigateToPrevSearchResult = () => {
    if (searchResults.length === 0) return

const prevIndex = (currentSearchIndex - 1 + searchResults.length) % searchResults.length
    setCurrentSearchIndex(prevIndex)

// Focus on the previous result
    const { x, y } = searchResults[prevIndex].position
    const flowInstance = document.querySelector(".react-flow-wrapper")
    if (flowInstance) {
      flowInstance.scrollTo(x, y)
    }
  }

const autoLayout = () => {
    // Simple auto-layout algorithm
    const startNodes = nodes.filter((node) => node.type === "input")
    const endNodes = nodes.filter((node) => node.type === "output")
    const otherNodes = nodes.filter((node) => node.type !== "input" && node.type !== "output")

// Position start nodes at the top
    startNodes.forEach((node, index) => {
      const updatedNode = {
        ...node,
        position: { x: 250 + index * 200, y: 50 },
      }
      setNodes((nodes) => nodes.map((n) => (n.id === node.id ? updatedNode : n)))
    })

// Position end nodes at the bottom
    endNodes.forEach((node, index) => {
      const updatedNode = {
        ...node,
        position: { x: 250 + index * 200, y: 500 },
      }
      setNodes((nodes) => nodes.map((n) => (n.id === node.id ? updatedNode : n)))
    })

// Position other nodes in the middle
    const rows = Math.ceil(otherNodes.length / 3)
    otherNodes.forEach((node, index) => {
      const row = Math.floor(index / 3)
      const col = index % 3
      const updatedNode = {
        ...node,
        position: { x: 150 + col * 200, y: 150 + row * 100 },
      }
      setNodes((nodes) => nodes.map((n) => (n.id === node.id ? updatedNode : n)))
    })

toast({
      title: "Auto Layout Applied",
      description: "Nodes have been automatically arranged.",
    })
  }

const duplicateNode = () => {
    if (!selectedNode) return

const newNode = {
      ...selectedNode,
      id: (nodes.length + 1).toString(),
      position: {
        x: selectedNode.position.x + 50,
        y: selectedNode.position.y + 50,
      },
    }

setNodes((nodes) => [...nodes, newNode])

toast({
      title: "Node Duplicated",
      description: "Selected node has been duplicated.",
    })
  }

const handleTemplateSelect = (template: any) => {
    setNodes(template.nodes)
    setEdges(template.edges)

toast({
      title: "Template Applied",
      description: `"${template.name}" template has been applied.`,
    })
  }

const handleAddAnnotation = (annotation: any) => {
    setAnnotations([...annotations, annotation])
  }

const handleUpdateAnnotation = (id: string, updates: any) => {
    setAnnotations(annotations.map((annotation) => (annotation.id === id ? { ...annotation, ...updates } : annotation)))
  }

const handleDeleteAnnotation = (id: string) => {
    setAnnotations(annotations.filter((annotation) => annotation.id !== id))
  }

const handleFocusNode = (nodeId: string) => {
    setFocusedNodeId(nodeId)
  }

// Add this function inside the Flow component, after the other handler functions
  const analyzeAndSuggestImprovements = () => {
    setShowAiSuggestions(true)

// Simulate AI analysis with a loading state
    toast({
      title: "Analyzing Diagram",
      description: "AI is analyzing your diagram for potential improvements...",
    })

// Simulate processing time
    setTimeout(() => {
      // Generate analysis scores based on the diagram
      const clarity = Math.min(Math.floor(70 + (nodes.length > 3 ? 20 : 0) + (edges.length > 3 ? 10 : 0)), 100)
      const complexity = Math.min(Math.floor(50 + nodes.length * 5), 100)
      const completeness = Math.min(Math.floor(60 + (edges.length / Math.max(1, nodes.length - 1)) * 40), 100)

setDiagramAnalysisScore({
        clarity,
        complexity,
        completeness,
      })

// Generate suggestions based on the diagram structure
      const suggestions = []

if (nodes.length < 3) {
        suggestions.push("Add more nodes to create a more comprehensive flow")
      }

if (nodes.length > 0 && edges.length < nodes.length - 1) {
        suggestions.push("Add more connections between nodes to improve flow clarity")
      }

if (!nodes.some((node) => node.type === "input")) {
        suggestions.push("Add a start node to clearly indicate the beginning of your flow")
      }

if (!nodes.some((node) => node.type === "output")) {
        suggestions.push("Add an end node to clearly indicate the conclusion of your flow")
      }

if (nodes.some((node) => !node.data.description)) {
        suggestions.push("Add descriptions to all nodes to improve understanding")
      }

if (edges.some((edge) => !edge.label)) {
        suggestions.push("Label all connections to clarify relationships between nodes")
      }

if (nodes.length > 10 && !nodeGroups.length) {
        suggestions.push("Group related nodes together to improve diagram organization")
      }

// Add some general improvement suggestions
      suggestions.push("Consider using different colors for different types of processes")
      suggestions.push("Arrange nodes in a logical top-to-bottom or left-to-right flow")
      suggestions.push("Use consistent styling for nodes with similar functions")

setAiSuggestions(suggestions)

toast({
        title: "Analysis Complete",
        description: "AI has generated suggestions to improve your diagram",
      })
    }, 1500)
  }

const applySmartConnectors = () => {
    if (!smartConnectors) return

// This would be a complex algorithm in a real implementation
    // Here we're just demonstrating the concept with a simple adjustment
    setEdges(
      edges.map((edge) => {
        // Add some curvature to edges that might overlap
        const sourceNode = nodes.find((n) => n.id === edge.source)
        const targetNode = nodes.find((n) => n.id === edge.target)

if (sourceNode && targetNode) {
          const dx = targetNode.position.x - sourceNode.position.x
          const dy = targetNode.position.y - sourceNode.position.y

// If nodes are more horizontal than vertical, add some curvature
          if (Math.abs(dx) > Math.abs(dy)) {
            return {
              ...edge,
              type: "smoothstep",
              style: { ...edge.style, curvature: 0.5 },
            }
          }
        }

return edge
      }),
    )

toast({
      title: "Smart Connectors Applied",
      description: "Connections have been optimized to reduce overlaps",
    })
  }

const handleNodeContentChange = (type: string, content: string) => {
    if (!selectedNode) return

setSelectedNodeContent({ type, content })

// Update the node with the new content
    setNodes(
      nodes.map((node) => {
        if (node.id === selectedNode.id) {
          return {
            ...node,
            data: {
              ...node.data,
              contentType: type,
              content: content,
            },
          }
        }
        return node
      }),
    )
  }

const createCustomTheme = () => {
    const newTheme = {
      id: `theme-${Date.now()}`,
      name: "Custom Theme " + (customThemes.length + 1),
      nodeStyles: {
        input: {
          background: "#8b5cf6", // Purple
          color: "white",
          border: "1px solid #7c3aed",
          borderRadius: "8px",
        },
        default: {
          background: "#ec4899", // Pink
          color: "white",
          border: "1px solid #db2777",
          borderRadius: "8px",
        },
        output: {
          background: "#14b8a6", // Teal
          color: "white",
          border: "1px solid #0d9488",
          borderRadius: "8px",
        },
        customDecision: {
          background: "#f97316", // Orange
          color: "white",
          border: "1px solid #ea580c",
          borderRadius: "0",
        },
      },
      edgeStyles: {
        default: { stroke: "#94a3b8", strokeWidth: 1.5 },
        success: { stroke: "#14b8a6", strokeWidth: 2 },
        error: { stroke: "#ef4444", strokeWidth: 2 },
      },
      backgroundColor: isDarkMode ? "#1e293b" : "#f8fafc",
    }

setCustomThemes([...customThemes, newTheme])
    setActiveTheme(newTheme.id)

toast({
      title: "Custom Theme Created",
      description: `"${newTheme.name}" has been created and applied.`,
    })
  }

const applyTheme = (themeId: string) => {
    setActiveTheme(themeId)

if (themeId === "default") {
      // Reset to default theme
      setNodes(
        nodes.map((node) => ({
          ...node,
          style: getNodeStyle(node.type || "default"),
        })),
      )

setEdges(
        edges.map((edge) => ({
          ...edge,
          style: getEdgeStyle(
            edge.style?.stroke === "#10b981"
              ? "success"
              : edge.style?.stroke === "#ef4444"
                ? "error"
                : edge.style?.strokeDasharray
                  ? "conditional"
                  : edge.style?.strokeWidth === 3
                    ? "bold"
                    : "default",
          ),
        })),
      )

return
    }

const theme = customThemes.find((t) => t.id === themeId)
    if (!theme) return

// Apply theme to nodes
    setNodes(
      nodes.map((node) => {
        const nodeType = node.type || "default"
        const style = theme.nodeStyles[nodeType] || theme.nodeStyles.default

return {
          ...node,
          style: {
            ...node.style,
            ...style,
            width: node.style?.width || 150, // Preserve width
          },
        }
      }),
    )

// Apply theme to edges
    setEdges(
      edges.map((edge) => {
        const edgeType =
          edge.style?.stroke === "#10b981" ? "success" : edge.style?.stroke === "#ef4444" ? "error" : "default"

const style = theme.edgeStyles[edgeType] || theme.edgeStyles.default

return {
          ...edge,
          style: {
            ...edge.style,
            ...style,
          },
        }
      }),
    )

toast({
      title: "Theme Applied",
      description: `"${theme.name}" has been applied to your diagram.`,
    })
  }

const addLayer = () => {
    const newLayer = {
      id: `layer-${Date.now()}`,
      name: `Layer ${nodeLayers.length + 1}`,
      visible: true,
    }

setNodeLayers([...nodeLayers, newLayer])
    setActiveLayer(newLayer.id)

toast({
      title: "New Layer Created",
      description: `"${newLayer.name}" has been added.`,
    })
  }

const toggleLayerVisibility = (layerId: string) => {
    setNodeLayers(
      nodeLayers.map((layer) => {
        if (layer.id === layerId) {
          return { ...layer, visible: !layer.visible }
        }
        return layer
      }),
    )

// Hide/show nodes in this layer
    setNodes(
      nodes.map((node) => {
        if (node.data.layerId === layerId) {
          const layer = nodeLayers.find((l) => l.id === layerId)
          return { ...node, hidden: layer ? !layer.visible : false }
        }
        return node
      }),
    )
  }

const moveNodeToLayer = (nodeId: string, layerId: string) => {
    if (!selectedNode) return

setNodes(
      nodes.map((node) => {
        if (node.id === nodeId) {
          return { ...node, data: { ...node.data, layerId } }
        }
        return node
      }),
    )

toast({
      title: "Node Moved",
      description: "Node has been moved to the selected layer.",
    })
  }

// Handle voice commands
  const handleVoiceCommand = (command: string) => {
    console.log("Voice command received:", command)

// Process the command
    if (command.includes("add") && command.includes("node")) {
      // Set a default node name and open the node creation panel
      setNodeName("New Node")
      setNodeDescription("Created by voice command")
      setNodeType("default")
      setActiveTab("manual")
      setTimeout(() => addNode(), 500)
    } else if (command.includes("delete") && command.includes("node") && selectedNode) {
      setNodes((nds) => nds.filter((node) => node.id !== selectedNode.id))
      setSelectedNode(null)
      toast({
        title: "Node Deleted",
        description: "Selected node has been deleted via voice command",
      })
    } else if (command.includes("undo")) {
      undo()
    } else if (command.includes("redo")) {
      redo()
    } else if (command.includes("save")) {
      saveDiagram()
    } else if (command.includes("export")) {
      setShowExportDialog(true)
    } else if (command.includes("layout")) {
      autoLayout()
    } else if (command.includes("3d") || command.includes("three d")) {
      setIs3DMode(true)
    } else if (command.includes("simulation") || command.includes("simulate")) {
      setIsSimulating(true)
    } else if (command.includes("dark mode") || command.includes("light mode")) {
      toggleTheme()
    } else {
      toast({
        title: "Command Not Recognized",
        description: "Try saying 'Add node', 'Delete node', 'Undo', etc.",
        variant: "destructive",
      })
    }
  }

// Add this component inside the Flow component, before the return statement
  const NodeContentEditor = () => {
    if (!selectedNode) return null

const contentType = selectedNode.data.contentType || ""
    const content = selectedNode.data.content || ""

return (
      <Card className="mt-4">
        <CardHeader>
          <CardTitle>Node Content</CardTitle>
          <CardDescription>Add rich content to this node</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="contentType">Content Type</Label>
            <Select value={contentType} onValueChange={(value) => handleNodeContentChange(value, content)}>
              <SelectTrigger id="contentType">
                <SelectValue placeholder="Select content type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="none">None</SelectItem>
                <SelectItem value="code">Code Snippet</SelectItem>
                <SelectItem value="chart">Chart</SelectItem>
                <SelectItem value="image">Image</SelectItem>
                <SelectItem value="video">Video</SelectItem>
                <SelectItem value="markdown">Rich Text</SelectItem>
              </SelectContent>
            </Select>
          </div>

{contentType && (
            <div className="space-y-2">
              <Label htmlFor="content">
                {contentType === "code" && "Code"}
                {contentType === "chart" && "Chart Data (JSON)"}
                {contentType === "image" && "Image URL"}
                {contentType === "video" && "Video URL"}
                {contentType === "markdown" && "Rich Text"}
              </Label>
              <Textarea
                id="content"
                placeholder={`Enter ${contentType} content...`}
                value={content}
                onChange={(e) => handleNodeContentChange(contentType, e.target.value)}
                rows={4}
              />
            </div>
          )}

{contentType && (
            <div className="border rounded-md p-2 bg-muted/30">
              <div className="text-xs font-medium mb-1">Preview:</div>
              {contentType === "code" && (
                <pre className="text-xs p-2 bg-black text-white rounded overflow-x-auto">
                  {content || "// Your code here"}
                </pre>
              )}
              {contentType === "chart" && (
                <div className="h-20 flex items-center justify-center bg-muted rounded">
                  <BarChart2 className="h-10 w-10 text-muted-foreground" />
                  <span className="ml-2 text-xs text-muted-foreground">Chart Preview</span>
                </div>
              )}
              {contentType === "image" && (
                <div className="h-20 flex items-center justify-center bg-muted rounded">
                  {content ? (
                    <img src={content || "/placeholder.svg"} alt="Preview" className="max-h-full rounded" />
                  ) : (
                    <>
                      <ImageIcon className="h-10 w-10 text-muted-foreground" />
                      <span className="ml-2 text-xs text-muted-foreground">Image Preview</span>
                    </>
                  )}
                </div>
              )}
              {contentType === "video" && (
                <div className="h-20 flex items-center justify-center bg-muted rounded">
                  <FileVideo className="h-10 w-10 text-muted-foreground" />
                  <span className="ml-2 text-xs text-muted-foreground">Video Preview</span>
                </div>
              )}
              {contentType === "markdown" && (
                <div className="text-xs p-2 bg-white dark:bg-slate-800 rounded">
                  {content || "Rich text content will appear here"}
                </div>
              )}
            </div>
          )}
        </CardContent>
      </Card>
    )
  }

// Add this component inside the Flow component, before the return statement
  const DiagramAnalysis = () => {
    return (
      <Card className="mt-4">
        <CardHeader>
          <CardTitle className="flex items-center">
            <Cpu className="mr-2 h-4 w-4" />
            AI Diagram Analysis
          </CardTitle>
          <CardDescription>Insights and suggestions to improve your diagram</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-3">
            <div className="flex justify-between text-sm">
              <span>Clarity</span>
              <span>{diagramAnalysisScore.clarity}%</span>
            </div>
            <Progress value={diagramAnalysisScore.clarity} className="h-2" />

<div className="flex justify-between text-sm">
              <span>Complexity</span>
              <span>{diagramAnalysisScore.complexity}%</span>
            </div>
            <Progress value={diagramAnalysisScore.complexity} className="h-2" />

<div className="flex justify-between text-sm">
              <span>Completeness</span>
              <span>{diagramAnalysisScore.completeness}%</span>
            </div>
            <Progress value={diagramAnalysisScore.completeness} className="h-2" />
          </div>

<Accordion type="single" collapsible className="w-full">
            <AccordionItem value="suggestions">
              <AccordionTrigger className="text-sm">
                <div className="flex items-center">
                  <Lightbulb className="mr-2 h-4 w-4" />
                  Improvement Suggestions ({aiSuggestions.length})
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <ul className="space-y-2 text-sm">
                  {aiSuggestions.map((suggestion, index) => (
                    <li key={index} className="flex items-start">
                      <div className="mr-2 mt-0.5 h-4 w-4 shrink-0 rounded-full bg-primary/20 flex items-center justify-center">
                        <span className="text-[10px] font-bold">{index + 1}</span>
                      </div>
                      {suggestion}
                    </li>
                  ))}
                </ul>
              </AccordionContent>
            </AccordionItem>
          </Accordion>

<Button variant="outline" size="sm" className="w-full" onClick={analyzeAndSuggestImprovements}>
            <Wand2 className="mr-2 h-4 w-4" />
            Analyze Diagram
          </Button>
        </CardContent>
      </Card>
    )
  }

// Add this component inside the Flow component, before the return statement
  const ThemeEditor = () => {
    return (
      <Card className="mt-4">
        <CardHeader>
          <CardTitle className="flex items-center">
            <Palette className="mr-2 h-4 w-4" />
            Theme Manager
          </CardTitle>
          <CardDescription>Create and apply custom visual themes</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>Active Theme</Label>
            <Select value={activeTheme} onValueChange={applyTheme}>
              <SelectTrigger>
                <SelectValue placeholder="Select theme" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="default">Default</SelectItem>
                {customThemes.map((theme) => (
                  <SelectItem key={theme.id} value={theme.id}>
                    {theme.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="grid grid-cols-3 gap-2">
            {["#8b5cf6", "#ec4899", "#14b8a6", "#f97316", "#ef4444", "#3b82f6"].map((color) => (
              <div
                key={color}
                className="h-8 rounded-md cursor-pointer hover:ring-2 ring-primary transition-all"
                style={{ backgroundColor: color }}
                onClick={() => {
                  if (selectedNode) {
                    updateNodeStyle({ ...selectedNode.style, background: color })
                  }
                }}
              />
            ))}
          </div>

<Button variant="outline" size="sm" className="w-full" onClick={createCustomTheme}>
            Create Custom Theme
          </Button>
        </CardContent>
      </Card>
    )
  }

// Add this component inside the Flow component, before the return statement
  const LayersPanel = () => {
    return (
      <Card className="mt-4">
        <CardHeader>
          <CardTitle className="flex items-center">
            <LayersIcon className="mr-2 h-4 w-4" />
            Layers
          </CardTitle>
          <CardDescription>Organize nodes in separate layers</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            {nodeLayers.map((layer) => (
              <div key={layer.id} className="flex items-center justify-between">
                <div
                  className={`flex items-center cursor-pointer ${activeLayer === layer.id ? "text-primary font-medium" : ""}`}
                  onClick={() => setActiveLayer(layer.id)}
                >
                  <div
                    className={`w-3 h-3 rounded-full mr-2 ${layer.visible ? "bg-green-500" : "bg-gray-400"}`}
                    onClick={(e) => {
                      e.stopPropagation()
                      toggleLayerVisibility(layer.id)
                    }}
                  />
                  {layer.name}
                </div>

{selectedNode && (
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-6 px-2"
                    onClick={() => moveNodeToLayer(selectedNode.id, layer.id)}
                  >
                    Move Here
                  </Button>
                )}
              </div>
            ))}
          </div>

<Button variant="outline" size="sm" className="w-full" onClick={addLayer}>
            Add Layer
          </Button>
        </CardContent>
      </Card>
    )
  }

const onNodeContextMenu = useCallback(
    (event: React.MouseEvent, node: Node) => {
      // Prevent default context menu
      event.preventDefault()

// Calculate position relative to the container
      const reactFlowBounds = reactFlowWrapper.current?.getBoundingClientRect()
      const position = reactFlowBounds
        ? {
            x: event.clientX - reactFlowBounds.left,
            y: event.clientY - reactFlowBounds.top,
          }
        : { x: event.clientX, y: event.clientY }

// Set the context menu
      setContextMenu({
        nodeId: node.id,
        position,
      })

// Set the selected node
      setSelectedNode(node)
    },
    [setSelectedNode],
  )

const closeContextMenu = useCallback(() => {
    setContextMenu(null)
  }, [])

const handleConnectFromContextMenu = useCallback(
    (sourceHandle: string) => {
      if (!contextMenu) return

// Start the connection mode
      if (reactFlowInstance.current) {
        // @ts-ignore
        reactFlowInstance.current.connectOnConnect = true
      }

closeContextMenu()
    },
    [contextMenu, closeContextMenu],
  )

return (
    <div className={`flex flex-col h-screen ${isDarkMode ? "dark" : ""}`}>
      <header className={`border-b p-4 bg-background ${viewMode === "presentation" ? "hidden" : ""}`}>
        <div className="container flex justify-between items-center">
          <div className="flex items-center gap-4">
            <h1 className="text-2xl font-bold">Flow Diagram Creator</h1>
            <div className="flex items-center">
              <Input
                value={diagramName}
                onChange={(e) => setDiagramName(e.target.value)}
                className="h-8 w-48 text-sm"
                placeholder="Diagram Name"
              />
            </div>
          </div>
          <div className="flex gap-2">
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="outline" size="icon" onClick={toggleTheme}>
                    {isDarkMode ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>Toggle Theme</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>

<TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="outline" size="icon" onClick={toggleFullscreen}>
                    {isFullscreen ? <Minimize className="h-4 w-4" /> : <Maximize className="h-4 w-4" />}
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>Toggle Fullscreen</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>

<TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="outline" size="icon" onClick={togglePresentationMode}>
                    <Presentation className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>Presentation Mode</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>

<TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="outline" size="icon" onClick={() => setShowExportDialog(true)}>
                    <Download className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>Export Diagram</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>

<Dialog open={showSavedDiagramsDialog} onOpenChange={setShowSavedDiagramsDialog}>
              <DialogTrigger asChild>
                <Button variant="outline">
                  <FileText className="mr-2 h-4 w-4" /> Open
                </Button>
              </DialogTrigger>
              <DialogContent className="sm:max-w-md">
                <DialogHeader>
                  <DialogTitle>Saved Diagrams</DialogTitle>
                  <DialogDescription>Select a diagram to load or manage your saved diagrams.</DialogDescription>
                </DialogHeader>
                <ScrollArea className="h-[400px] pr-4">
                  <div className="grid grid-cols-1 gap-4">
                    {savedDiagrams.length === 0 ? (
                      <div className="text-center py-8 text-muted-foreground">No saved diagrams found.</div>
                    ) : (
                      savedDiagrams.map((diagram) => (
                        <Card key={diagram.id} className="overflow-hidden">
                          <CardHeader className="p-4 pb-2">
                            <CardTitle className="text-base">{diagram.name}</CardTitle>
                            <CardDescription className="text-xs">
                              {new Date(diagram.createdAt).toLocaleString()}
                            </CardDescription>
                          </CardHeader>
                          <CardContent className="p-4 pt-0">
                            <p className="text-sm text-muted-foreground">{diagram.description || "No description"}</p>
                          </CardContent>
                          <CardFooter className="p-4 pt-0 flex justify-between">
                            <Button variant="secondary" size="sm" onClick={() => loadDiagram(diagram)}>
                              Load
                            </Button>
                            <Button variant="destructive" size="sm" onClick={() => deleteSavedDiagram(diagram.id)}>
                              Delete
                            </Button>
                          </CardFooter>
                        </Card>
                      ))
                    )}
                  </div>
                </ScrollArea>
              </DialogContent>
            </Dialog>
          </div>
        </div>
      </header>

<div className={`flex flex-1 overflow-hidden ${viewMode === "presentation" ? "bg-black" : ""}`}>
        <div
          className={`w-80 border-r p-4 overflow-y-auto bg-background ${!sidebarVisible || viewMode === "presentation" ? "hidden" : ""}`}
        >
          <Tabs defaultValue="ai" value={activeTab} onValueChange={setActiveTab}>
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="ai">AI Generate</TabsTrigger>
              <TabsTrigger value="manual">Manual</TabsTrigger>
              <TabsTrigger value="advanced">Advanced</TabsTrigger>
            </TabsList>
            <TabsContent value="ai" className="space-y-4 mt-4">
              <div className="space-y-2">
                <Label htmlFor="diagramStyle">Diagram Style</Label>
                <Select value={diagramStyle} onValueChange={setDiagramStyle}>
                  <SelectTrigger id="diagramStyle">
                    <SelectValue placeholder="Select style" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="default">Default</SelectItem>
                    <SelectItem value="modern">Modern</SelectItem>
                    <SelectItem value="minimal">Minimal</SelectItem>
                    <SelectItem value="colorful">Colorful</SelectItem>
                    <SelectItem value="corporate">Corporate</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="prompt">Describe your diagram</Label>
                <Textarea
                  id="prompt"
                  placeholder="E.g., Create a user authentication flow with login, registration, and password reset"
                  value={prompt}
                  onChange={(e) => setPrompt(e.target.value)}
                  rows={6}
                />
              </div>
              <Button onClick={handleGenerateDiagram} className="w-full" disabled={isGenerating}>
                <Zap className="mr-2 h-4 w-4" />
                {isGenerating ? "Generating..." : "Generate Diagram"}
              </Button>

<div className="text-xs text-muted-foreground mt-2">
                <p>Examples:</p>
                <ul className="list-disc pl-4 space-y-1 mt-1">
                  <li
                    className="cursor-pointer hover:text-primary"
                    onClick={() =>
                      setPrompt(
                        "Create a software development lifecycle diagram with planning, development, testing, deployment, and maintenance phases.",
                      )
                    }
                  >
                    Software Development Lifecycle
                  </li>
                  <li
                    className="cursor-pointer hover:text-primary"
                    onClick={() =>
                      setPrompt(
                        "Create an e-commerce checkout flow with cart, shipping info, payment, and order confirmation.",
                      )
                    }
                  >
                    E-commerce Checkout Flow
                  </li>
                  <li
                    className="cursor-pointer hover:text-primary"
                    onClick={() =>
                      setPrompt(
                        "Create a customer support ticket resolution workflow with submission, triage, assignment, resolution, and feedback.",
                      )
                    }
                  >
                    Customer Support Workflow
                  </li>
                </ul>
              </div>
            </TabsContent>

<TabsContent value="manual" className="space-y-4 mt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Add New Node</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="nodeName">Node Name</Label>
                    <Input
                      id="nodeName"
                      placeholder="Enter node name"
                      value={nodeName}
                      onChange={(e) => setNodeName(e.target.value)}
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="nodeDescription">Description (optional)</Label>
                    <Textarea
                      id="nodeDescription"
                      placeholder="Enter node description"
                      value={nodeDescription}
                      onChange={(e) => setNodeDescription(e.target.value)}
                      rows={2}
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="nodeType">Node Type</Label>
                    <Select value={nodeType} onValueChange={setNodeType}>
                      <SelectTrigger id="nodeType">
                        <SelectValue placeholder="Select type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="input">Start Node</SelectItem>
                        <SelectItem value="default">Process Node</SelectItem>
                        <SelectItem value="output">End Node</SelectItem>
                        <SelectItem value="customDecision">Decision Node</SelectItem>
                        <SelectItem value="customData">Data Node</SelectItem>
                        <SelectItem value="customSubflow">Subflow Node</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

{selectedNode && (
                <Card className="mt-4">
                  <CardHeader>
                    <CardTitle>Edit Node</CardTitle>
                    <CardDescription>Node ID: {selectedNode.id}</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <NodeStyleEditor selectedNode={selectedNode} onStyleChange={updateNodeStyle} />
                  </CardContent>
                </Card>
              )}

{selectedEdge && (
                <Card className="mt-4">
                  <CardHeader>
                    <CardTitle>Edit Edge</CardTitle>
                    <CardDescription>Edge ID: {selectedEdge.id}</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="edgeLabel">Edge Label</Label>
                      <Input
                        id="edgeLabel"
                        placeholder="Enter edge label"
                        value={edgeLabel}
                        onChange={(e) => setEdgeLabel(e.target.value)}
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="edgeType">Edge Type</Label>
                      <Select value={edgeType} onValueChange={setEdgeType}>
                        <SelectTrigger id="edgeType">
                          <SelectValue placeholder="Select type" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="default">Default</SelectItem>
                          <SelectItem value="step">Step</SelectItem>
                          <SelectItem value="smoothstep">Smooth Step</SelectItem>
                          <SelectItem value="straight">Straight</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="edgeStyle">Edge Style</Label>
                      <Select value={edgeStyle} onValueChange={setEdgeStyle}>
                        <SelectTrigger id="edgeStyle">
                          <SelectValue placeholder="Select style" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="default">Default</SelectItem>
                          <SelectItem value="success">Success</SelectItem>
                          <SelectItem value="error">Error</SelectItem>
                          <SelectItem value="conditional">Conditional</SelectItem>
                          <SelectItem value="bold">Bold</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div className="flex items-center space-x-2">
                      <Switch id="animated" checked={isEdgeAnimated} onCheckedChange={setIsEdgeAnimated} />
                      <Label htmlFor="animated">Animated</Label>
                    </div>

<Button onClick={updateEdgeStyle} className="w-full">
                      <Save className="mr-2 h-4 w-4" /> Update Edge
                    </Button>
                  </CardContent>
                </Card>
              )}

{selectedNode && <NodeContentEditor />}
            </TabsContent>

<TabsContent value="advanced" className="space-y-4 mt-4">
              <div className="grid grid-cols-2 gap-2">
                <Button variant="outline" className="flex-1 h-20 flex-col space-y-1" onClick={() => setIs3DMode(true)}>
                  <Cube className="h-5 w-5" />
                  <span className="text-xs">3D View</span>
                </Button>
                <Button
                  variant="outline"
                  className="flex-1 h-20 flex-col space-y-1"
                  onClick={() => setIsSimulating(true)}
                >
                  <Play className="h-5 w-5" />
                  <span className="text-xs">Simulation</span>
                </Button>
                <Button
                  variant="outline"
                  className="flex-1 h-20 flex-col space-y-1"
                  onClick={() => setIsVoiceListening(true)}
                >
                  <Mic className="h-5 w-5" />
                  <span className="text-xs">Voice Commands</span>
                </Button>
                <Button
                  variant="outline"
                  className="flex-1 h-20 flex-col space-y-1"
                  onClick={() => setShowMetrics(!showMetrics)}
                >
                  <BarChart2 className="h-5 w-5" />
                  <span className="text-xs">Metrics</span>
                </Button>
                <Button
                  variant="outline"
                  className="flex-1 h-20 flex-col space-y-1"
                  onClick={() => setShowVersionHistory(!showVersionHistory)}
                >
                  <History className="h-5 w-5" />
                  <span className="text-xs">Version History</span>
                </Button>
                <Button
                  variant="outline"
                  className="flex-1 h-20 flex-col space-y-1"
                  onClick={() => setShowThemeEditor(!showThemeEditor)}
                >
                  <Palette className="h-5 w-5" />
                  <span className="text-xs">Themes</span>
                </Button>
              </div>

{showMetrics && <DiagramMetrics nodes={nodes} edges={edges} />}

{showVersionHistory && (
                <DiagramVersionHistory
                  versions={versionHistory}
                  onRestoreVersion={restoreVersion}
                  onSaveVersion={saveVersion}
                  currentNodes={nodes}
                  currentEdges={edges}
                />
              )}

{showThemeEditor && <ThemeEditor />}

{showAiSuggestions && <DiagramAnalysis />}

{showLayersPanel && <LayersPanel />}
            </TabsContent>
          </Tabs>

<div className="mt-6 space-y-4">
            <div className="flex space-x-2">
              <Button variant="outline" onClick={undo} disabled={historyIndex <= 0} className="flex-1">
                <Undo className="mr-2 h-4 w-4" /> Undo
              </Button>
              <Button variant="outline" onClick={redo} disabled={historyIndex >= history.length - 1} className="flex-1">
                <Redo className="mr-2 h-4 w-4" /> Redo
              </Button>
            </div>

<div className="flex space-x-2">
              <Button variant="outline" onClick={autoLayout} className="flex-1">
                <Layout className="mr-2 h-4 w-4" /> Auto Layout
              </Button>
              <Button variant="outline" onClick={duplicateNode} disabled={!selectedNode} className="flex-1">
                <Copy className="mr-2 h-4 w-4" /> Duplicate
              </Button>
            </div>

<div className="flex space-x-2">
              <Button variant="outline" onClick={() => setShowAnnotations(!showAnnotations)} className="flex-1">
                <Layers className="mr-2 h-4 w-4" /> {showAnnotations ? "Hide" : "Show"} Annotations
              </Button>
              <Button variant="outline" onClick={() => setViewMode("edit")} className="flex-1">
                <Edit3 className="mr-2 h-4 w-4" /> Edit Mode
              </Button>
            </div>

<Dialog>
              <DialogTrigger asChild>
                <Button variant="destructive" className="w-full">
                  <Trash2 className="mr-2 h-4 w-4" /> Clear Diagram
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Clear Diagram</DialogTitle>
                  <DialogDescription>
                    Are you sure you want to clear the entire diagram? This action cannot be undone.
                  </DialogDescription>
                </DialogHeader>
                <div className="flex justify-end space-x-2 mt-4">
                  <Button variant="outline">Cancel</Button>
                  <Button variant="destructive" onClick={clearDiagram}>
                    Clear
                  </Button>
                </div>
              </DialogContent>
            </Dialog>

<Button variant="outline" onClick={() => setShowShortcutsDialog(true)} className="w-full">
              <HelpCircle className="mr-2 h-4 w-4" /> Keyboard Shortcuts
            </Button>
          </div>
        </div>

<div className="flex-1 relative" ref={reactFlowWrapper}>
          <ReactFlow
            nodes={nodes}
            edges={edges}
            onNodesChange={onNodesChange}
            onEdgesChange={onEdgesChange}
            onConnect={onConnect}
            onNodeClick={onNodeClick}
            onEdgeClick={onEdgeClick}
            onNodeContextMenu={onNodeContextMenu}
            nodeTypes={nodeTypes}
            edgeTypes={edgeTypes}
            fitView
            snapToGrid={snapToGrid}
            snapGrid={[gridSize, gridSize]}
            nodesDraggable={viewMode !== "presentation"}
            nodesConnectable={viewMode !== "presentation"}
            elementsSelectable={viewMode !== "presentation"}
            minZoom={0.1}
            maxZoom={4}
            defaultZoom={1}
            onInit={(instance) => {
              reactFlowInstance.current = instance
            }}
            className={`
              ${viewMode === "presentation" ? "presentation-mode" : ""}
              ${is3DMode ? "transform-style-3d perspective-1000" : ""}
            `}
            connectionLineComponent={CustomConnectionLine}
            defaultMarkerColor="var(--primary)"
            connectionMode="loose"
            deleteKeyCode={["Backspace", "Delete"]}
          >
            {showControls && viewMode !== "presentation" && <Controls />}
            {showMinimap && viewMode !== "presentation" && <MiniMap />}
            {showGrid && <Background variant="dots" gap={gridSize} size={1} />}

{viewMode !== "presentation" && (
              <Panel position="top-right" className="flex gap-2">
                <div className="flex items-center bg-background border rounded-md p-1">
                  <Input
                    id="search-input"
                    placeholder="Search nodes..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="h-8 w-40 text-sm border-0"
                  />
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={navigateToPrevSearchResult}
                    disabled={searchResults.length === 0}
                  >
                    <RotateCcw className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={navigateToNextSearchResult}
                    disabled={searchResults.length === 0}
                  >
                    <Search className="h-4 w-4" />
                  </Button>
                  {searchResults.length > 0 && (
                    <Badge variant="secondary" className="ml-1">
                      {currentSearchIndex + 1}/{searchResults.length}
                    </Badge>
                  )}
                </div>

<Button variant="outline" size="icon" onClick={() => setSidebarVisible(!sidebarVisible)}>
                  {sidebarVisible ? <PanelLeft className="h-4 w-4" /> : <PanelRight className="h-4 w-4" />}
                </Button>

<Popover>
                  <PopoverTrigger asChild>
                    <Button variant="outline" size="icon">
                      <Settings className="h-4 w-4" />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-80">
                    <div className="space-y-4">
                      <h4 className="font-medium">Display Settings</h4>
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <Label htmlFor="showMinimap">Show Minimap</Label>
                          <Switch id="showMinimap" checked={showMinimap} onCheckedChange={setShowMinimap} />
                        </div>

<div className="flex items-center justify-between">
                          <Label htmlFor="showControls">Show Controls</Label>
                          <Switch id="showControls" checked={showControls} onCheckedChange={setShowControls} />
                        </div>

<div className="flex items-center justify-between">
                          <Label htmlFor="showNodeLabels">Show Node Labels</Label>
                          <Switch id="showNodeLabels" checked={showNodeLabels} onCheckedChange={setShowNodeLabels} />
                        </div>

<div className="flex items-center justify-between">
                          <Label htmlFor="showEdgeLabels">Show Edge Labels</Label>
                          <Switch id="showEdgeLabels" checked={showEdgeLabels} onCheckedChange={setShowEdgeLabels} />
                        </div>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="gridSize">Grid Size: {gridSize}px</Label>
                        <Slider
                          id="gridSize"
                          min={5}
                          max={50}
                          step={5}
                          value={[gridSize]}
                          onValueChange={(value) => setGridSize(value[0])}
                        />
                      </div>
                    </div>
                  </PopoverContent>
                </Popover>
              </Panel>
            )}

{viewMode === "presentation" && (
              <PresentationControls
                nodes={nodes}
                edges={edges}
                onFocusNode={handleFocusNode}
                onExitPresentation={() => setViewMode("default")}
                isFullscreen={isFullscreen}
                onToggleFullscreen={toggleFullscreen}
              />
            )}

{viewMode === "edit" && showAnnotations && (
              <DiagramAnnotations
                annotations={annotations}
                onAddAnnotation={handleAddAnnotation}
                onUpdateAnnotation={handleUpdateAnnotation}
                onDeleteAnnotation={handleDeleteAnnotation}
              />
            )}
          </ReactFlow>
          {contextMenu && (
            <NodeContextMenu
              nodeId={contextMenu.nodeId}
              position={contextMenu.position}
              onClose={closeContextMenu}
              onDuplicate={duplicateNode}
              onDelete={() => {
                setNodes((nds) => nds.filter((node) => node.id !== contextMenu.nodeId))
                closeContextMenu()
              }}
              onEdit={() => {
                setActiveTab("manual")
                closeContextMenu()
              }}
              onConnect={handleConnectFromContextMenu}
              onChangeStyle={() => {
                setShowThemeEditor(true)
                closeContextMenu()
              }}
              onAddContent={() => {
                setShowNodeContent(true)
                closeContextMenu()
              }}
              onMoveToLayer={() => {
                setShowLayersPanel(true)
                closeContextMenu()
              }}
            />
          )}
        </div>

{viewMode !== "presentation" && (
          <div className="w-64 border-l p-4 bg-background hidden lg:block">
            <div className="space-y-4">
              <h3 className="font-medium">Diagram Overview</h3>
              <DiagramMinimap
                nodes={nodes}
                edges={edges}
                width={220}
                height={150}
                onClick={(x, y) => {
                  if (reactFlowInstance.current) {
                    // @ts-ignore
                    reactFlowInstance.current.setCenter(x, y, { zoom: 1.5, duration: 800 })
                  }
                }}
              />

<div className="space-y-2">
                <h4 className="text-sm font-medium">Statistics</h4>
                <div className="grid grid-cols-2 gap-2 text-sm">
                  <div>Nodes:</div>
                  <div className="text-right">{nodes.length}</div>
                  <div>Connections:</div>
                  <div className="text-right">{edges.length}</div>
                  <div>Annotations:</div>
                  <div className="text-right">{annotations.length}</div>
                </div>
              </div>

<div className="space-y-2">
                <h4 className="text-sm font-medium">Quick Actions</h4>
                <div className="grid grid-cols-2 gap-2">
                  <Button variant="outline" size="sm" onClick={() => setShowExportDialog(true)}>
                    <Camera className="mr-1 h-3 w-3" /> Screenshot
                  </Button>
                  <Button variant="outline" size="sm" onClick={togglePresentationMode}>
                    <Presentation className="mr-1 h-3 w-3" /> Present
                  </Button>
                  <Button variant="outline" size="sm" onClick={autoLayout}>
                    <Layout className="mr-1 h-3 w-3" /> Layout
                  </Button>
                  <Button variant="outline" size="sm" onClick={() => setViewMode("edit")}>
                    <Edit3 className="mr-1 h-3 w-3" /> Annotate
                  </Button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
      <KeyboardShortcuts open={showShortcutsDialog} onOpenChange={setShowShortcutsDialog} />
      <DiagramExportDialog
        open={showExportDialog}
        onOpenChange={setShowExportDialog}
        onExport={handleExport}
        diagramName={diagramName}
        nodes={nodes}
        edges={edges}
        isDarkMode={isDarkMode}
      />

{/* Advanced feature components */}
      <DiagramSimulation
        nodes={nodes}
        edges={edges}
        onHighlightNode={setHighlightedNodeId}
        onHighlightEdge={setHighlightedEdgeId}
        isSimulating={isSimulating}
        setIsSimulating={setIsSimulating}
      />

<Toaster />
    </div>
  )
}

// Main component that wraps the Flow component with ReactFlowProvider
export default function Home() {
  return (
    <ReactFlowProvider>
      <Flow />
    </ReactFlowProvider>
  )
}

[V0_FILE]typescriptreact:file="components/custom-nodes.tsx" isQuickEdit="true"
"use client"

import React, { memo, useState } from "react"
import { Handle, Position, type NodeProps } from "reactflow"
import {
  Maximize2,
  Minimize2,
  Info,
  BarChart2,
  FileVideo,
  Code,
  ImageIcon,
  FileText,
  ChevronRight,
  ChevronDown,
} from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Badge } from "@/components/ui/badge"
import { motion } from "framer-motion"

// Fix the handle positioning and visibility in the BaseNode component
const BaseNode = memo(
  ({
    children,
    data,
    selected,
    type = "default",
    handles = { top: true, right: true, bottom: true, left: true },
    className = "",
    style = {},
  }: {
    children: React.ReactNode
    data: any
    selected?: boolean
    type?: string
    handles?: { top?: boolean; right?: boolean; bottom?: boolean; left?: boolean }
    className?: string
    style?: React.CSSProperties
  }) => {
    return (
      <motion.div
        className={`group relative ${className}`}
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.2 }}
        style={style}
      >
        <div
          className={`
          absolute -inset-2 rounded-xl bg-primary/5 opacity-0 
          transition-opacity duration-200 
          ${selected ? "opacity-100" : "group-hover:opacity-70"}
        `}
        />

{children}

{/* Improved handles with better positioning and visibility */}
        {handles.top && (
          <Handle
            type="target"
            position={Position.Top}
            className="!w-3 !h-3 !rounded-full !bg-primary !border-2 !border-background !top-0 !transform !-translate-y-1.5 opacity-0 group-hover:opacity-100"
            style={{ opacity: selected ? 1 : 0, transition: "opacity 0.2s ease" }}
          />
        )}

{handles.right && (
          <Handle
            type="source"
            position={Position.Right}
            id="right"
            className="!w-3 !h-3 !rounded-full !bg-green-500 !border-2 !border-background !right-0 !transform !translate-x-1.5 opacity-0 group-hover:opacity-100"
            style={{ opacity: selected ? 1 : 0, transition: "opacity 0.2s ease" }}
          />
        )}

{handles.bottom && (
          <Handle
            type="source"
            position={Position.Bottom}
            id="bottom"
            className="!w-3 !h-3 !rounded-full !bg-primary !border-2 !border-background !bottom-0 !transform !translate-y-1.5 opacity-0 group-hover:opacity-100"
            style={{ opacity: selected ? 1 : 0, transition: "opacity 0.2s ease" }}
          />
        )}

{handles.left && (
          <Handle
            type="target"
            position={Position.Left}
            id="left"
            className="!w-3 !h-3 !rounded-full !bg-orange-500 !border-2 !border-background !left-0 !transform !-translate-x-1.5 opacity-0 group-hover:opacity-100"
            style={{ opacity: selected ? 1 : 0, transition: "opacity 0.2s ease" }}
          />
        )}
      </motion.div>
    )
  },
)
BaseNode.displayName = "BaseNode"

// Fix the DecisionNode component to ensure proper handle positioning
export const DecisionNode = memo(({ data, isConnectable, selected }: NodeProps) => {
  return (
    <BaseNode
      data={data}
      selected={selected}
      className="decision-node"
      style={{
        width: "120px",
        height: "120px",
      }}
      handles={{
        top: true,
        right: true,
        bottom: true,
        left: true,
      }}
    >
      <div
        className="absolute inset-0 flex items-center justify-center p-2 text-center transform rotate-45 shadow-md"
        style={{
          background: data.style?.background || "#f59e0b",
          border: `2px solid ${data.style?.borderColor || "#d97706"}`,
          borderRadius: "8px",
          transition: "all 0.2s ease",
        }}
      >
        <div className="transform -rotate-45 w-full">
          <div className="font-medium text-sm truncate px-2">{data.label}</div>
          {data.description && (
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Info className="h-4 w-4 inline-block ml-1 cursor-help opacity-70" />
                </TooltipTrigger>
                <TooltipContent>
                  <p className="max-w-xs text-xs">{data.description}</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          )}
        </div>
      </div>
    </BaseNode>
  )
})
DecisionNode.displayName = "DecisionNode"

// Fix the DataNode component to ensure proper handle positioning
export const DataNode = memo(({ data, isConnectable, selected }: NodeProps) => {
  return (
    <BaseNode
      data={data}
      selected={selected}
      handles={{ top: true, right: true, bottom: true, left: true }}
      style={{
        width: "150px",
        minHeight: "80px",
      }}
    >
      <div
        className="flex flex-col items-center justify-center p-2 text-center shadow-md relative"
        style={{
          background: data.style?.background || "#6366f1",
          border: `2px solid ${data.style?.borderColor || "#4f46e5"}`,
          borderRadius: "0 8px 8px 0",
          minHeight: "80px",
          width: "100%",
          transition: "all 0.2s ease",
        }}
      >
        <div
          className="absolute top-0 left-0 w-full h-[15px] border-b-2 rounded-tr-lg"
          style={{ borderColor: data.style?.borderColor || "#4f46e5" }}
        ></div>
        <div
          className="absolute bottom-0 left-0 w-full h-[15px] border-t-2 rounded-br-lg"
          style={{ borderColor: data.style?.borderColor || "#4f46e5" }}
        ></div>
        <div className="font-medium text-sm mt-4 mb-2">{data.label}</div>
        {data.description && (
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Info className="h-4 w-4 inline-block ml-1 cursor-help opacity-70" />
              </TooltipTrigger>
              <TooltipContent>
                <p className="max-w-xs text-xs">{data.description}</p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        )}
      </div>
    </BaseNode>
  )
})
DataNode.displayName = "DataNode"

// Subflow node (group of nodes)
export const SubflowNode = memo(({ data, isConnectable, selected }: NodeProps) => {
  const [expanded, setExpanded] = React.useState(false)

return (
    <BaseNode
      data={data}
      selected={selected}
      style={{
        width: expanded ? "250px" : "180px",
        minHeight: expanded ? "150px" : "80px",
      }}
    >
      <div
        className="flex flex-col p-3 text-center shadow-md"
        style={{
          background: data.style?.background || "#8b5cf6",
          border: `2px dashed ${data.style?.borderColor || "#7c3aed"}`,
          borderRadius: "8px",
          width: "100%",
          height: "100%",
          transition: "all 0.3s ease",
        }}
      >
        <div className="flex justify-between items-center mb-2">
          <div className="font-medium text-sm">{data.label}</div>
          <button
            onClick={() => setExpanded(!expanded)}
            className="p-1 rounded-full hover:bg-white/20 transition-colors"
            aria-label={expanded ? "Collapse" : "Expand"}
          >
            {expanded ? <Minimize2 className="h-3 w-3" /> : <Maximize2 className="h-3 w-3" />}
          </button>
        </div>

{expanded && data.description && (
          <div className="text-xs text-left mt-2 bg-black/20 p-2 rounded">{data.description}</div>
        )}

{expanded && data.subNodes && (
          <div className="flex flex-wrap gap-2 mt-2 justify-center">
            {data.subNodes.map((subNode: any, index: number) => (
              <div
                key={index}
                className="text-xs p-1 rounded"
                style={{
                  background: subNode.style?.backgroundColor || "#7c3aed",
                  border: `1px solid ${subNode.style?.borderColor || "#6d28d9"}`,
                }}
              >
                {subNode.label}
              </div>
            ))}
          </div>
        )}
      </div>
    </BaseNode>
  )
})
SubflowNode.displayName = "SubflowNode"

// Enhanced default node with description tooltip and content
export const EnhancedDefaultNode = memo(({ data, isConnectable, type, selected }: NodeProps) => {
  const [expanded, setExpanded] = useState(false)
  const [hovered, setHovered] = useState(false)
  const contentType = data.contentType || ""
  const content = data.content || ""

// Determine node type styling
  const getNodeTypeStyles = () => {
    switch (type) {
      case "input":
        return {
          background: data.style?.background || "#4f46e5",
          border: `2px solid ${data.style?.borderColor || "#4338ca"}`,
          icon: <ChevronRight className="h-3 w-3 mr-1" />,
          badge: "Start",
        }
      case "output":
        return {
          background: data.style?.background || "#10b981",
          border: `2px solid ${data.style?.borderColor || "#059669"}`,
          icon: <ChevronDown className="h-3 w-3 mr-1" />,
          badge: "End",
        }
      default:
        return {
          background: data.style?.background || "#f59e0b",
          border: `2px solid ${data.style?.borderColor || "#d97706"}`,
          icon: null,
          badge: null,
        }
    }
  }

const nodeStyles = getNodeTypeStyles()

// Get content type icon
  const getContentIcon = () => {
    switch (contentType) {
      case "code":
        return <Code className="h-3 w-3" />
      case "chart":
        return <BarChart2 className="h-3 w-3" />
      case "image":
        return <ImageIcon className="h-3 w-3" />
      case "video":
        return <FileVideo className="h-3 w-3" />
      case "markdown":
        return <FileText className="h-3 w-3" />
      default:
        return null
    }
  }

const contentIcon = getContentIcon()

return (
    <BaseNode
      data={data}
      selected={selected}
      type={type}
      style={{
        width: data.style?.width || "180px",
        minHeight: contentType && expanded ? "auto" : "auto",
      }}
    >
      <motion.div
        className="enhanced-node flex flex-col items-center justify-center p-3 text-center shadow-md"
        style={{
          background: nodeStyles.background,
          border: nodeStyles.border,
          borderRadius: "8px",
          width: "100%",
          minHeight: "50px",
          transition: "all 0.2s ease",
        }}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        layout
      >
        <div className="font-medium text-sm w-full flex items-center justify-between">
          <div className="flex items-center">
            {nodeStyles.icon}
            <span className="truncate">{data.label}</span>

{nodeStyles.badge && (
              <Badge variant="outline" className="ml-2 text-[10px] h-4 px-1 border-white/30 text-white/80">
                {nodeStyles.badge}
              </Badge>
            )}
          </div>

<div className="flex items-center">
            {contentIcon && <span className="mr-1 opacity-70">{contentIcon}</span>}

{data.description && (
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Info className="h-4 w-4 inline-block ml-1 cursor-help opacity-70" />
                  </TooltipTrigger>
                  <TooltipContent>
                    <p className="max-w-xs text-xs">{data.description}</p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            )}

{contentType && (
              <button
                onClick={() => setExpanded(!expanded)}
                className="ml-2 p-1 rounded-full hover:bg-white/20 transition-colors"
                aria-label={expanded ? "Collapse" : "Expand"}
              >
                {expanded ? <Minimize2 className="h-3 w-3" /> : <Maximize2 className="h-3 w-3" />}
              </button>
            )}
          </div>
        </div>

{contentType && expanded && (
          <motion.div
            className="mt-2 w-full bg-black/20 p-2 rounded text-left overflow-hidden"
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            transition={{ duration: 0.2 }}
          >
            {contentType === "code" && (
              <pre className="text-xs whitespace-pre-wrap overflow-x-auto">{content || "// Code snippet"}</pre>
            )}
            {contentType === "chart" && (
              <div className="h-20 flex items-center justify-center">
                <BarChart2 className="h-10 w-10 opacity-70" />
                <span className="ml-2 text-xs opacity-70">Chart Visualization</span>
              </div>
            )}
            {contentType === "image" && content && (
              <img src={content || "/placeholder.svg"} alt="Node content" className="max-h-32 mx-auto rounded" />
            )}
            {contentType === "video" && (
              <div className="h-20 flex items-center justify-center">
                <FileVideo className="h-10 w-10 opacity-70" />
                <span className="ml-2 text-xs opacity-70">Video Content</span>
              </div>
            )}
            {contentType === "markdown" && <div className="text-xs">{content || "Rich text content"}</div>}
          </motion.div>
        )}
      </motion.div>
    </BaseNode>
  )
})
EnhancedDefaultNode.displayName = "EnhancedDefaultNode"
</article></body></html>