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

'use client';
import React, { useCallback } from 'react'
import { curStepAtom, stepsNodesAtom, viewedStepAtom } from '../store';
import { useAtomValue } from 'jotai';
import { twMerge } from 'tailwind-merge';
import * as R from 'ramda'


const Flow = () => {
  const stepsNodes = useAtomValue(stepsNodesAtom)
  const curStep = useAtomValue(curStepAtom)
  const viewedStep = useAtomValue(viewedStepAtom)

  const getNodeName = useCallback((node) => {
    return R.cond([
      // Form Node
      [R.propEq('form_card', 'type'), R.always('表单卡片')],
      // Agent Node
      [R.propEq('UserTask', 'type'), R.path(['properties', 'item', 'assistantName'])],
      [R.T, R.prop('type')]
    ])(node)
  }, [])
  return (
    <div className="flex justify-center items-center shadow-xl rounded-box min-h-[150px] p-2">
      <ul className="steps">
        {stepsNodes.map((stepNode, i) => (
          <li
            key={i}
            className={twMerge(
              "step",
              i <= curStep ? "step-primary" : '',
            )}

            {...(i === curStep ? { 'data-content': '★' } : {})}
          >
            {getNodeName(stepNode)}
          </li>
        ))}
        {/* <li className="step step-primary">Register</li>
        <li className="step step-primary">Choose plan</li>
        <li className="step">Purchase</li>
        <li className="step">Receive Product</li> */}
      </ul>
    </div>
  )
}
export default React.memo(React.forwardRef(Flow))