coco-app-platform/app/run-agent-flow/components/NodeRender.tsx

'use client';

import React, { useMemo } from 'react'
import { BsArrowLeft, BsArrowRight } from "react-icons/bs";
import Agent from './NodeType/Agent';
import Form from './NodeType/Form';
import Unsupport from './NodeType/Unsupport';
import * as R from 'ramda'

const NodeRender = ({ node }) => {
  const Comp = useMemo(() => {
    return R.cond([
      [R.propEq('form_card', 'type'), R.always(Form)],
      [R.propEq('UserTask', 'type'), R.always(Agent)],
      [R.T, R.always(Unsupport)],
    ])(node)
  }, [node?.id])
  return (
    // <div className="flex-1 shadow-xl rounded-box p-2">node render</div>
    <div className="card card-compact shadow-xl flex-1">
      <div className="card-body">
        <div className="card-title rounded-box bg-slate-200 p-2">
          <h2 className="flex-1">
            Card title!
          </h2>
          <button className='btn btn-circle btn-sm'><BsArrowLeft /></button>
          <button className='btn btn-circle btn-sm'><BsArrowRight /></button>
        </div>
        <Comp node={node}></Comp>
        {/* TODO */}

        {/* <div className="card-actions justify-end">
          <button className="btn btn-primary">确认，下一步</button>
        </div> */}
      </div>
    </div>
  )
}

export default React.memo(React.forwardRef(NodeRender))