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

'use client';

import React, { useEffect, useMemo } from 'react'
import Agent from './NodeType/Agent';
import Form from './NodeType/Form';
import Unsupport from './NodeType/Unsupport';
import * as R from 'ramda'
import { curNodeAtom, curStepAtom, arrowStateAtom, cardInstantAtomFamily, cardInstantAtomsAtom, instantDataAtom, stepsNodesAtom } from '../store';
import { useAtom, useAtomValue } from 'jotai';
import { exportFlowToDocx } from '../export';

const NodeRender = () => {
  const [curStep, setCurStep] = useAtom(curStepAtom)
  const node = useAtomValue(curNodeAtom)
  const arrowState = useAtomValue(arrowStateAtom)
  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, node?.id])
  const nodeName = useMemo(() => {
    return R.cond([
      [R.propEq('form_card', 'type'), R.always('表单填写')],
      [R.propEq('UserTask', 'type'), R.pathOr('Unknown Agent', ['properties', 'item', 'assistantName'])],
      [R.T, R.always('Unknown')],
    ])(node)
  }, [node, node?.id])

  // 动态注册当前节点的Atom，并将其放进一个atom集合的atom，方便后续格式化所有节点实例
  const cardInstantAtom = cardInstantAtomFamily(node)
  const [, dispatchCardInstantAtoms] = useAtom(cardInstantAtomsAtom)
  useEffect(() => {
    if (node?.id) {
      dispatchCardInstantAtoms({ [node.id]: cardInstantAtom })
    }
  }, [cardInstantAtom])

  const onNextStep = () => {
    setCurStep(prev => prev + 1)
  }

  const onPrevStep = () => {
    setCurStep(prev => prev - 1)
  }

  const instantData = useAtomValue(instantDataAtom)
  const stepsNodes = useAtomValue(stepsNodesAtom)

  const onExport = () => {
    const stepsInstantData = stepsNodes.map(node => instantData[node.id])
    exportFlowToDocx(stepsInstantData)
  }

  return (
    <div className="card card-compact shadow-xl flex-1 overflow-hidden">
      <div className="card-body overflow-hidden">
        <div className="card-title rounded-box bg-slate-100 p-2">
          <h2 className="flex-1">
            {curStep + 1}: {nodeName}
          </h2>
          {arrowState.prev &&
            <button className='btn btn-sm' onClick={onPrevStep}>上一步</button>
          }
          {arrowState.next
            ? <button className='btn btn-sm' onClick={onNextStep}>下一步</button>
            : <button className='btn btn-sm btn-neutral' onClick={onExport}>导出</button>
          }
        </div>
        <div className="flex-1 flex flex-col items-stretch overflow-auto">
          <Comp key={node?.id} node={node} cardInstantAtom={cardInstantAtom}></Comp>
        </div>
      </div>
    </div>
  )
}

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