dify/web/app/components/explore/try-app/preview/flow-app-preview.tsx

'use client'
import type { JsonObject2 } from '@dify/contracts/api/console/trial-apps/types.gen'
import type { FC } from 'react'
import type { Edge, Node } from '@/app/components/workflow/types'
import { cn } from '@langgenius/dify-ui/cn'
import * as React from 'react'
import Loading from '@/app/components/base/loading'
import { BlockEnum } from '@/app/components/workflow/types'
import WorkflowPreview from '@/app/components/workflow/workflow-preview'
import { useGetTryAppFlowPreview } from '@/service/use-try-app'

type Props = {
  readonly appId: string
  readonly className?: string
}

const blockTypeMap: Record<string, BlockEnum> = {
  agent: BlockEnum.Agent,
  'agent-v2': BlockEnum.AgentV2,
  answer: BlockEnum.Answer,
  assigner: BlockEnum.Assigner,
  code: BlockEnum.Code,
  datasource: BlockEnum.DataSource,
  'datasource-empty': BlockEnum.DataSourceEmpty,
  'document-extractor': BlockEnum.DocExtractor,
  end: BlockEnum.End,
  'http-request': BlockEnum.HttpRequest,
  'human-input': BlockEnum.HumanInput,
  'if-else': BlockEnum.IfElse,
  iteration: BlockEnum.Iteration,
  'iteration-start': BlockEnum.IterationStart,
  'knowledge-index': BlockEnum.KnowledgeBase,
  'knowledge-retrieval': BlockEnum.KnowledgeRetrieval,
  'list-operator': BlockEnum.ListFilter,
  llm: BlockEnum.LLM,
  loop: BlockEnum.Loop,
  'loop-end': BlockEnum.LoopEnd,
  'loop-start': BlockEnum.LoopStart,
  'parameter-extractor': BlockEnum.ParameterExtractor,
  'question-classifier': BlockEnum.QuestionClassifier,
  start: BlockEnum.Start,
  'start-placeholder': BlockEnum.StartPlaceholder,
  'template-transform': BlockEnum.TemplateTransform,
  tool: BlockEnum.Tool,
  'trigger-plugin': BlockEnum.TriggerPlugin,
  'trigger-schedule': BlockEnum.TriggerSchedule,
  'trigger-webhook': BlockEnum.TriggerWebhook,
  'variable-aggregator': BlockEnum.VariableAggregator,
  'variable-assigner': BlockEnum.VariableAssigner,
}

const isRecord = (value: unknown): value is Record<string, unknown> => {
  return typeof value === 'object' && value !== null && !Array.isArray(value)
}

const getString = (value: unknown) => {
  return typeof value === 'string' ? value : undefined
}

const getPosition = (value: unknown) => {
  if (!isRecord(value) || typeof value.x !== 'number' || typeof value.y !== 'number')
    return { x: 0, y: 0 }

  return {
    x: value.x,
    y: value.y,
  }
}

const getViewport = (value: unknown) => {
  if (
    !isRecord(value) ||
    typeof value.x !== 'number' ||
    typeof value.y !== 'number' ||
    typeof value.zoom !== 'number'
  ) {
    return { x: 0, y: 0, zoom: 1 }
  }

  return {
    x: value.x,
    y: value.y,
    zoom: value.zoom,
  }
}

const getBlockType = (value: unknown) => {
  if (typeof value !== 'string') return null

  return blockTypeMap[value] || null
}

const normalizeWorkflowPreviewGraph = (graph: JsonObject2) => {
  const nodesData = Array.isArray(graph.nodes) ? graph.nodes : []
  const edgesData = Array.isArray(graph.edges) ? graph.edges : []

  const nodes: Node[] = nodesData.flatMap((node) => {
    if (!isRecord(node)) return []

    const id = getString(node.id)
    if (!id) return []

    const data = isRecord(node.data) ? node.data : {}
    const type = getBlockType(data.type) || BlockEnum.Start
    const title = getString(data.title) || ''

    return [
      {
        id,
        position: getPosition(node.position),
        ...(getString(node.type) ? { type: getString(node.type) } : {}),
        data: {
          ...data,
          desc: getString(data.desc) || '',
          title,
          type,
        },
      },
    ]
  })
  const edges: Edge[] = edgesData.flatMap((edge) => {
    if (!isRecord(edge)) return []

    const id = getString(edge.id)
    if (!id) return []

    const data = isRecord(edge.data) ? edge.data : {}
    const sourceType = getBlockType(data.sourceType) || BlockEnum.Start
    const targetType = getBlockType(data.targetType) || BlockEnum.Start

    return [
      {
        id,
        source: getString(edge.source) || '',
        target: getString(edge.target) || '',
        ...(getString(edge.type) ? { type: getString(edge.type) } : {}),
        ...(getString(edge.sourceHandle) ? { sourceHandle: getString(edge.sourceHandle) } : {}),
        ...(getString(edge.targetHandle) ? { targetHandle: getString(edge.targetHandle) } : {}),
        data: {
          ...data,
          sourceType,
          targetType,
        },
      },
    ]
  })

  return {
    nodes,
    edges,
    viewport: getViewport(graph.viewport),
  }
}

const FlowAppPreview: FC<Props> = ({ appId, className }) => {
  const { data, isLoading } = useGetTryAppFlowPreview(appId)

  if (isLoading) {
    return (
      <div className="flex h-full items-center justify-center">
        <Loading type="area" />
      </div>
    )
  }
  if (!data) return null
  const previewGraph = normalizeWorkflowPreviewGraph(data.graph)
  return (
    <div className="size-full">
      <WorkflowPreview {...previewGraph} className={cn(className)} miniMapToRight />
    </div>
  )
}
export default React.memo(FlowAppPreview)