Workflow

"use client"

import * as React from "react"
import { IconDownload, IconUpload } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

import { Workflow, parseWorkflow, serializeWorkflow, type WorkflowGraph } from "@/components/blocks/workflow/workflow"

export function WorkflowEditor({ id, initial }: { id: string; initial: WorkflowGraph }) {
  const [graph, setGraph] = React.useState(initial)
  const fileRef = React.useRef<HTMLInputElement>(null)
  const saved = React.useRef(serializeWorkflow(initial))

  React.useEffect(() => {
    const json = serializeWorkflow(graph)
    if (json === saved.current) return
    const timer = setTimeout(async () => {
      const response = await fetch(`/api/workflows/${id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: json,
      })
      if (response.ok) saved.current = json
      else toast.error("Couldn’t save the workflow")
    }, 800)
    return () => clearTimeout(timer)
  }, [graph, id])

  const download = () => {
    const blob = new Blob([serializeWorkflow(graph, { name: id })], { type: "application/json" })
    const link = document.createElement("a")
    link.href = URL.createObjectURL(blob)
    link.download = `${id}.workflow.json`
    link.click()
    URL.revokeObjectURL(link.href)
  }

  const upload = async (file: File) => {
    try {
      setGraph(parseWorkflow(await file.text()))
    } catch (error) {
      toast.error("Couldn’t open that file", { description: (error as Error).message })
    }
  }

  return (
    <div className="flex h-dvh flex-col">
      <div className="flex justify-end gap-2 border-b p-2">
        <Button variant="outline" size="sm" onClick={() => fileRef.current?.click()}>
          <IconUpload data-icon="inline-start" />
          Import
        </Button>
        <Button variant="outline" size="sm" onClick={download}>
          <IconDownload data-icon="inline-start" />
          Export
        </Button>
        <input
          ref={fileRef}
          type="file"
          accept="application/json,.json"
          hidden
          onChange={(event) => {
            const file = event.target.files?.[0]
            if (file) void upload(file)
            event.target.value = ""
          }}
        />
      </div>
      <Workflow name="Support triage" nodes={graph.nodes} edges={graph.edges} onChange={setGraph} />
    </div>
  )
}

"use client"

import { Workflow, readRunEvents, type WorkflowGraph, type WorkflowRunHandler } from "@/components/blocks/workflow/workflow"

const run: WorkflowRunHandler = async function* ({ runId, graph, input, from, signal }) {
  const response = await fetch("/api/workflows/run", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ runId, graph, input, from: from && { nodeId: from.nodeId, runId: from.run.id } }),
    signal,
  })
  yield* readRunEvents(response)
}

async function approve({ runId, nodeId, approved }: { runId: string; nodeId: string; approved: boolean }) {
  const response = await fetch(`/api/workflows/runs/${runId}/approvals`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ nodeId, approved }),
  })
  if (!response.ok) throw new Error(await response.text())
}

export function LiveWorkflow({ graph }: { graph: WorkflowGraph }) {
  return (
    <Workflow
      name="Support triage"
      nodes={graph.nodes}
      edges={graph.edges}
      onRun={run}
      onApprove={approve}
      defaultInput="My calendar stopped syncing this morning."
    />
  )
}

import { Workflow, type WorkflowGraph, type WorkflowRun } from "@/components/blocks/workflow/workflow"

export function WorkflowPreview({ graph, run }: { graph: WorkflowGraph; run?: WorkflowRun }) {
  return (
    <div className="h-96 overflow-hidden rounded-xl border">
      <Workflow readOnly nodes={graph.nodes} edges={graph.edges} run={run} defaultView="canvas" />
    </div>
  )
}