Realtime Flow

1'use client'
2 
3import {
4  ReactFlow,
5  ReactFlowProvider,
6  Background,
7  Controls,
8  type Node,
9  type Edge,
10  type NodeTypes,
11  type EdgeTypes,
12} from '@xyflow/react'
13import '@xyflow/react/dist/style.css'
14import type { SupabasePersistenceOptions } from '@supabase-labs/y-supabase'
15 
16import { RealtimeFlowOverlay } from './realtime-flow-overlay'
17import { useRealtimeFlow } from '../hooks/use-realtime-flow'
18 
19type RealtimeFlowProps = {
20  channel: string
21  className?: string
22  style?: React.CSSProperties
23  persistence?: boolean | SupabasePersistenceOptions
24  initialNodes?: Node[]
25  initialEdges?: Edge[]
26  nodeTypes?: NodeTypes
27  edgeTypes?: EdgeTypes
28  height?: string | number
29}
30 
31const DEFAULT_HEIGHT = 550
32 
33const RealtimeFlowContent = ({
34  channel,
35  className,
36  style,
37  persistence,
38  initialNodes,
39  initialEdges,
40  nodeTypes,
41  edgeTypes,
42  height = DEFAULT_HEIGHT,
43}: RealtimeFlowProps) => {
44  const { nodes, edges, synced, syncError, onNodesChange, onEdgesChange, onConnect } =
45    useRealtimeFlow({
46      channel,
47      persistence,
48      initialNodes,
49      initialEdges,
50    })
51 
52  return (
53    <div style={{ height, position: 'relative', ...style }} className={className}>
54      <ReactFlow
55        nodes={synced ? nodes : []}
56        edges={synced ? edges : []}
57        onNodesChange={synced ? onNodesChange : undefined}
58        onEdgesChange={synced ? onEdgesChange : undefined}
59        onConnect={synced ? onConnect : undefined}
60        nodeTypes={nodeTypes}
61        edgeTypes={edgeTypes}
62        fitView
63      >
64        <Background />
65        <Controls />
66      </ReactFlow>
67      {!synced && !syncError && <RealtimeFlowOverlay status="syncing" />}
68      {!synced && syncError && <RealtimeFlowOverlay status="error" message={syncError} />}
69    </div>
70  )
71}
72 
73const RealtimeFlow = (props: RealtimeFlowProps) => (
74  <ReactFlowProvider>
75    <RealtimeFlowContent {...props} />
76  </ReactFlowProvider>
77)
78 
79export { RealtimeFlow }