hudi-service/service-web/client/src/pages/ai/flow/node/AmisNode.tsx

import {DeleteFilled, EditFilled} from '@ant-design/icons'
import {Handle, type HandleProps, type NodeProps, Position, useNodeConnections} from '@xyflow/react'
import type {Schema} from 'amis'
import {Card, Dropdown} from 'antd'
import {isEmpty, isEqual, isNil} from 'licia'
import {type JSX} from 'react'
import {horizontalFormOptions} from '../../../../util/amis.tsx'

export type AmisNodeType = 'normal' | 'start' | 'end'

export function inputsFormColumns(required: boolean = false, preload?: any): Schema[] {
  return [
    {
      type: 'input-kvs',
      name: 'inputs',
      label: '输入变量',
      value: preload,
      addButtonText: '新增输入',
      draggable: false,
      keyItem: {
        ...horizontalFormOptions(),
        label: '参数名称',
      },
      required: required,
      valueItems: [
        {
          ...horizontalFormOptions(),
          type: 'select',
          name: 'type',
          label: '变量',
          required: true,
          options: [],
        },
      ],
    },
  ]
}

export function outputsFormColumns(editable: boolean = false, required: boolean = false, preload?: any): Schema[] {
  return [
    {
      disabled: !editable,
      type: 'input-kvs',
      name: 'outputs',
      label: '输出变量',
      value: preload,
      addButtonText: '新增输出',
      draggable: false,
      keyItem: {
        ...horizontalFormOptions(),
        label: '参数名称',
      },
      required: required,
      valueItems: [
        {
          ...horizontalFormOptions(),
          type: 'select',
          name: 'type',
          label: '参数',
          required: true,
          selectFirst: true,
          options: [
            {
              label: '文本',
              value: 'string',
            },
            {
              label: '数字',
              value: 'number',
            },
            {
              label: '文本数组',
              value: 'array-string',
            },
            {
              label: '对象数组',
              value: 'array-object',
            },
          ],
        },
      ],
    },
  ]
}

export const LimitHandler = (props: HandleProps & { limit: number }) => {
  const connections = useNodeConnections({
    handleType: props.type,
  })
  return (
    <Handle
      {...props}
      isConnectable={connections.length < props.limit}
    />
  )
}

type AmisNodeProps = {
  nodeProps: NodeProps
  type: AmisNodeType
  defaultNodeName: String
  defaultNodeDescription?: String
  extraNodeDescription?: (nodeData: any) => JSX.Element
  handlers?: (nodeData: any) => JSX.Element
  columnSchema?: Schema[]
}

const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
  nodeProps,
  type,
  defaultNodeName,
  defaultNodeDescription,
  extraNodeDescription,
  handlers,
  columnSchema,
}) => {
  const {id, data} = nodeProps
  const {getDataById, removeNode, editNode} = data
  // @ts-ignore
  const nodeData = getDataById(id)
  const nodeName = isEmpty(nodeData?.node?.name) ? defaultNodeName : nodeData.node.name
  const nodeDescription = isEmpty(nodeData?.node?.description) ? defaultNodeDescription : nodeData.node?.description
  return (
    <div className="w-64">
      <Dropdown
        className="card-container"
        trigger={['contextMenu']}
        menu={{
          items: [
            {
              key: 'edit',
              label: '编辑',
              icon: <EditFilled className="text-gray-600 hover:text-blue-500"/>,
            },
            {
              key: 'remove',
              label: '删除',
              icon: <DeleteFilled className="text-red-500 hover:text-red-500"/>,
            },
          ],
          onClick: menu => {
            switch (menu.key) {
              case 'edit':
                // @ts-ignore
                editNode(
                  id,
                  [
                    {
                      type: 'input-text',
                      name: 'node.name',
                      label: '节点名称',
                      placeholder: nodeName,
                    },
                    {
                      type: 'textarea',
                      name: 'node.description',
                      label: '节点描述',
                      placeholder: nodeDescription,
                    },
                    {
                      type: 'divider',
                    },
                    ...(columnSchema ?? []),
                  ],
                )
                break
              case 'remove':
                // @ts-ignore
                removeNode(id)
                break
            }
          },
        }}
      >
        <Card
          className="node-card"
          title={nodeName}
          extra={<span className="text-gray-300 text-xs">{id}</span>}
          size="small"
        >
          <div className="card-description p-2 text-secondary text-sm">
            {nodeDescription}
            {extraNodeDescription?.(nodeData)}
          </div>
        </Card>
      </Dropdown>
      {isNil(handlers)
        ? <>
          {isEqual(type, 'start') || isEqual(type, 'normal')
            ? <Handle type="source" position={Position.Right}/> : undefined}
          {isEqual(type, 'end') || isEqual(type, 'normal')
            ? <Handle type="target" position={Position.Left}/> : undefined}
        </>
        : handlers?.(nodeData)}
    </div>
  )
}

export default AmisNode