init

web/app/(commonLayout)/workflow/page.tsx

+'use client'
+
+import type { FC } from 'react'
+import { memo } from 'react'
+import Workflow from '@/app/components/workflow'
+
+const Page: FC = () => {
+  return (
+    <div className='min-w-[720px] w-full h-full overflow-x-auto'>
+      <Workflow />
+    </div>
+  )
+}
+export default memo(Page)

web/app/components/workflow/custom-edge.tsx

+import type { EdgeProps } from 'reactflow'
+import {
+  BaseEdge,
+  getBezierPath,
+} from 'reactflow'
+
+const CustomEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+}: EdgeProps) => {
+  const [edgePath] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+  })
+  console.log('edgePath', edgePath)
+
+  return (
+    <>
+      <BaseEdge id={id} path={edgePath} />
+    </>
+  )
+}
+
+export default CustomEdge

web/app/components/workflow/header.tsx

+const Header = () => {
+  return (
+    <div
+      className='absolute top-0 left-0 w-full h-14 z-10'
+      style={{
+        background: 'linear-gradient(180deg, #F9FAFB 0%, rgba(249, 250, 251, 0.00) 100%)',
+      }}
+    >
+
+    </div>
+  )
+}
+
+export default Header

web/app/components/workflow/hooks.ts

+import {
+  useCallback,
+  useState,
+} from 'react'
+
+export const useWorkflow = () => {
+  const [selectedNodeId, setSelectedNodeId] = useState('')
+
+  const handleSelectedNodeId = useCallback((nodeId: string) => setSelectedNodeId(nodeId), [])
+
+  return {
+    selectedNodeId,
+    handleSelectedNodeId,
+  }
+}

web/app/components/workflow/index.tsx

+import ReactFlow, {
+  Background,
+} from 'reactflow'
+import 'reactflow/dist/style.css'
+import Header from './header'
+import CustomNode from './nodes'
+import CustomEdge from './custom-edge'
+
+const nodeTypes = {
+  custom: CustomNode,
+}
+const edgeTypes = {
+  custom: CustomEdge,
+}
+
+const Workflow = () => {
+  return (
+    <div className='relative w-full h-full'>
+      <Header />
+      <ReactFlow
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        nodes={[
+          {
+            id: 'start',
+            type: 'custom',
+            position: { x: 330, y: 30 },
+            data: { list: [] },
+          },
+          {
+            id: '1',
+            type: 'custom',
+            position: { x: 400, y: 250 },
+            data: { list: [] },
+          },
+          {
+            id: '2',
+            type: 'custom',
+            position: { x: 100, y: 250 },
+            data: { list: [] },
+          },
+        ]}
+        edges={[
+          {
+            id: 'e1-2',
+            source: 'start',
+            target: '1',
+            type: 'custom',
+          },
+          {
+            id: 'e1-3',
+            source: 'start',
+            target: '2',
+            type: 'custom',
+          },
+        ]}
+      >
+        <Background
+          gap={[14, 14]}
+          size={1}
+        />
+      </ReactFlow>
+    </div>
+  )
+}
+
+export default Workflow

web/app/components/workflow/nodes/_base/node.tsx

+import type {
+  FC,
+  ReactNode,
+} from 'react'
+import { memo } from 'react'
+import { Plus } from '@/app/components/base/icons/src/vender/line/general'
+
+type BaseNodeProps = {
+  children: ReactNode
+}
+
+const BaseNode: FC<BaseNodeProps> = ({
+  children,
+}) => {
+  return (
+    <div
+      className={`
+        group relative pb-2 w-[296px] bg-[#fcfdff] border border-white rounded-2xl shadow-xs
+        hover:shadow-lg
+      `}
+    >
+      <div className='flex items-center px-3 pt-3 pb-2'>
+        <div className='mr-2'></div>
+        <div className='text-[13px] font-semibold text-gray-700'>START</div>
+      </div>
+      {children}
+      <div className='px-3 pt-1 pb-1 text-xs text-gray-500'>
+        Define the initial parameters for launching a workflow
+      </div>
+      <div
+        className={`
+          hidden absolute -bottom-2 left-1/2 -translate-x-1/2 group-hover:flex items-center justify-center 
+          w-4 h-4 rounded-full bg-primary-600 cursor-pointer z-10
+        `}
+      >
+        <Plus className='w-2.5 h-2.5 text-white' />
+      </div>
+    </div>
+  )
+}
+
+export default memo(BaseNode)

web/app/components/workflow/nodes/_base/panel.tsx

+import type {
+  FC,
+  ReactNode,
+} from 'react'
+
+type BasePanelProps = {
+  defaultElement?: ReactNode
+  inputsElement?: ReactNode
+  ouputsElement?: ReactNode
+}
+
+const BasePanel: FC<BasePanelProps> = ({
+  defaultElement,
+  inputsElement,
+  ouputsElement,
+}) => {
+  return (
+    <div className='absolute top-2 right-2 bottom-2 w-[420px] shadow-lg border-[0.5px] border-gray-200 rounded-2xl'>
+      <div className='flex items-center px-4 pt-3'>
+        <div className='mr-2 w-6 h-6'></div>
+        <div className='py-1 text-base text-gray-900 font-semibold '>LLM</div>
+      </div>
+      <div className='p-2'>
+        <div className='py-[5px] pl-1.5 pr-2 text-xs text-gray-400'>
+          Add description...
+        </div>
+      </div>
+      <div className='flex items-center px-4 h-[42px]'>
+        inputs
+      </div>
+      <div className='py-2 border-t-[0.5px] border-b-[0.5px] border-black/5'>
+        {defaultElement}
+        {inputsElement}
+        {ouputsElement}
+      </div>
+      <div className='p-4'></div>
+    </div>
+  )
+}
+
+export default BasePanel

web/app/components/workflow/nodes/index.tsx

+import {
+  Handle,
+  Position,
+} from 'reactflow'
+import StartNode from './start/node'
+
+const NodeMap = {
+  'start-node': StartNode,
+}
+
+const CustomNode = () => {
+  return (
+    <>
+      <Handle
+        type='target'
+        position={Position.Top}
+        className='!-top-0.5 !w-2 !h-0.5 !bg-primary-500 !rounded-none !border-none !min-h-[2px]'
+      />
+      <StartNode />
+      <Handle
+        type='source'
+        position={Position.Bottom}
+        className='!-bottom-0.5 !w-2 !h-0.5 !bg-primary-500 !rounded-none !border-none !min-h-[2px]'
+      />
+    </>
+  )
+}
+
+export default CustomNode

web/app/components/workflow/nodes/start/node.tsx

+import BaseNode from '../_base/node'
+
+const Node = () => {
+  return (
+    <BaseNode>
+      start node
+    </BaseNode>
+  )
+}
+
+export default Node

web/app/components/workflow/nodes/start/panel.tsx

+import BasePanel from '../_base/panel'
+
+const Panel = () => {
+  return (
+    <BasePanel
+      inputsElement={<div>start panel</div>}
+    />
+  )
+}
+
+export default Panel

web/package.json

@@ -68,6 +68,7 @@
     "react-tooltip": "5.8.3",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
+    "reactflow": "^11.10.3",
     "recordrtc": "^5.6.2",
     "rehype-katex": "^6.0.2",
     "remark-breaks": "^3.0.2",