feat: drag drop node

Author: hi02102002

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "always",
+        "source.organizeImports": "always"
+    }
+}

client/package-lock.json

@@ -48,6 +48,7 @@
     "@tanstack/react-router": "^1.16.6",
     "@tanstack/react-table": "^8.12.0",
     "@tanstack/router-devtools": "^1.16.6",
+    "@xyflow/react": "^12.0.0-next.11",
     "axios": "^1.6.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

client/package.json

@@ -0,0 +1,83 @@
+import { Button } from '@/components/ui'
+import { cn } from '@/lib/utils'
+import { EActionTypes } from '@/types/flow'
+import { X } from 'lucide-react'
+import { DragEvent, useCallback, useLayoutEffect, useRef } from 'react'
+import { useFlowCtx } from '.'
+import { ACTIONS, MAP_ACTION_TO_LABEL } from './constant'
+
+export const Actions = () => {
+  const { openActions, toggleActions } = useFlowCtx()
+  const actionsRef = useRef<HTMLDivElement>(null)
+
+  const handleDragStart = useCallback(
+    (e: DragEvent<HTMLDivElement>, type: EActionTypes) => {
+      console.log('drag start')
+      e.dataTransfer.setData('application/reactflow', type)
+      e.dataTransfer.effectAllowed = 'move'
+    },
+    [],
+  )
+
+  useLayoutEffect(() => {
+    const toolbar = document.querySelector('#flow-toolbar')
+
+    if (!toolbar || !actionsRef.current) return
+
+    const toolbarRect = toolbar.getBoundingClientRect()
+
+    actionsRef.current.style.top = `${toolbarRect.bottom + 16}px`
+  }, [])
+
+  return (
+    <div
+      className={cn(
+        'fixed right-4 z-10 rounded-md bg-card shadow w-80 transition-transform duration-300 bottom-4 p-4 flex flex-col gap-4',
+        {
+          'translate-x-[110%]': !openActions,
+        },
+      )}
+      ref={actionsRef}
+    >
+      <div>
+        <div className='flex items-center justify-between'>
+          <span className='text-lg font-semibold leading-none tracking-tight'>
+            Actions
+          </span>
+          <Button
+            className='w-4 h-4 p-0 hover:bg-transparent'
+            variant='ghost'
+            onClick={toggleActions}
+          >
+            <X className='w-4 h-4' />
+          </Button>
+        </div>
+        <p className='text-sm text-muted-foreground'>
+          Drag and drop actions to create your node
+        </p>
+      </div>
+      <div className='grid gap-2'>
+        <div
+          onDragStart={(e) => handleDragStart(e, EActionTypes.CHECK_VARIABLES)}
+        >
+          hi
+        </div>
+        {ACTIONS.map((action) => {
+          return (
+            <div
+              key={action.type}
+              className='flex items-center gap-2 relative  rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground  cursor-grab'
+              onDragStart={(e) => handleDragStart(e, action.type)}
+              draggable
+            >
+              {action.Icon()}
+              <span>{MAP_ACTION_TO_LABEL[action.type]}</span>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default Actions

client/src/components/pages/chatbot-detail/flow-provider.tsx

@@ -0,0 +1,42 @@
+import { EActionTypes } from '@/types/flow'
+import {
+  GitPullRequest,
+  HelpCircle,
+  MessageSquareMore,
+  Variable,
+} from 'lucide-react'
+
+type TAction = {
+  type: EActionTypes
+  Icon: () => JSX.Element
+}
+
+export const ACTIONS: TAction[] = [
+  {
+    type: EActionTypes.MESSAGE,
+    Icon: () => <MessageSquareMore className='w-5 h-5' />,
+  },
+  {
+    type: EActionTypes.PROMPT_AND_COLLECT,
+    Icon: () => <HelpCircle className='w-5 h-5' />,
+  },
+  {
+    type: EActionTypes.CHECK_VARIABLES,
+    Icon: () => <Variable className='w-5 h-5' />,
+  },
+  {
+    type: EActionTypes.HTTP_REQUEST,
+    Icon: () => <GitPullRequest className='w-5 h-5' />,
+  },
+]
+
+export const MAP_ACTION_TO_LABEL: Record<EActionTypes, string> = {
+  [EActionTypes.MESSAGE]: 'Message',
+  [EActionTypes.PROMPT_AND_COLLECT]: 'Prompt & Collect',
+  [EActionTypes.CHECK_VARIABLES]: 'Check Variables',
+  [EActionTypes.HTTP_REQUEST]: 'HTTP Request',
+  [EActionTypes.FALLBACK]: 'Fallback',
+  [EActionTypes.START]: 'Start',
+  [EActionTypes.SUB_FLOW]: 'Sub Flow',
+  [EActionTypes.SEND_MAIL]: 'Send Mail',
+}

client/src/components/pages/flow-detail/actions.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@/components/ui'
 import { Maximize, Minus, Plus } from 'lucide-react'
 import { useLayoutEffect } from 'react'
-import { Panel, useViewport, useReactFlow } from 'reactflow'
+import { Panel, useReactFlow, useViewport } from 'reactflow'
 
 const MAX_ZOOM = 2
 const MIN_ZOOM = 0.5
@@ -38,7 +38,7 @@ export const Controls = () => {
 
   useLayoutEffect(() => {
     setViewport({
-      zoom: 1.5,
+      zoom: 1.25,
       x: 0,
       y: 0,
     })

client/src/components/pages/flow-detail/constant.tsx

@@ -14,7 +14,12 @@ export const Edge = ({
   targetPosition,
   style = {},
   markerEnd,
-}: EdgeProps) => {
+  data = {
+    deletable: true,
+  },
+}: EdgeProps<{
+  deletable?: boolean
+}>) => {
   const { setEdges } = useReactFlow()
   const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
@@ -25,7 +30,9 @@ export const Edge = ({
     targetPosition,
   })
 
-  const onEdgeClick = () => {
+  const handleDelete = () => {
+    if (!data?.deletable) return
+
     setEdges((edges) => edges.filter((edge) => edge.id !== id))
   }
 
@@ -39,23 +46,25 @@ export const Edge = ({
         d={edgePath}
         markerEnd={markerEnd}
       />
-      <foreignObject
-        width={foreignObjectSize}
-        height={foreignObjectSize}
-        x={labelX - foreignObjectSize / 2}
-        y={labelY - foreignObjectSize / 2}
-        className='edgebutton flex items-center justify-center  '
-        requiredExtensions='http://www.w3.org/1999/xhtml'
-      >
-        <Button
-          size='icon'
-          className='w-4 h-4 opacity-0 scale-50 invisible btn'
-          variant='destructive'
-          onClick={onEdgeClick}
+      {data?.deletable && (
+        <foreignObject
+          width={foreignObjectSize}
+          height={foreignObjectSize}
+          x={labelX - foreignObjectSize / 2}
+          y={labelY - foreignObjectSize / 2}
+          className='edgebutton flex items-center justify-center  '
+          requiredExtensions='http://www.w3.org/1999/xhtml'
         >
-          <X className='w-2 h-2' />
-        </Button>
-      </foreignObject>
+          <Button
+            size='icon'
+            className='w-4 h-4 opacity-0 scale-50 invisible btn'
+            variant='destructive'
+            onClick={handleDelete}
+          >
+            <X className='w-2 h-2' />
+          </Button>
+        </foreignObject>
+      )}
     </>
   )
 }