Agent screen

"use client"

import * as React from "react"
import type { AgentIdentity } from "@/lib/candor/chat"
import { AgentScreen, type AgentScreenRecording, type AgentScreenRun } from "@/components/candor/agent-screen"

const agent: AgentIdentity = { id: "a-web", name: "Browser agent", role: "dev" }

// A drawn stand-in for the screenshot your server sends after each action.
const frame = (field: number) =>
  "data:image/svg+xml," +
  encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400"><rect width="640" height="400" fill="#f6f6f4"/><rect width="640" height="36" fill="#e4e4e0"/><circle cx="20" cy="18" r="6" fill="#c9c9c4"/><circle cx="40" cy="18" r="6" fill="#c9c9c4"/><rect x="70" y="9" width="420" height="18" rx="9" fill="#fff"/><text x="40" y="82" font-family="sans-serif" font-size="20" fill="#333">New invoice</text>${[0, 1, 2]
      .map((i) => `<rect x="40" y="${110 + i * 60}" width="360" height="36" rx="4" fill="#fff" stroke="${i === field ? "#3b6fd8" : "#ccc"}" stroke-width="${i === field ? 2 : 1}"/>`)
      .join("")}<rect x="40" y="300" width="120" height="36" rx="4" fill="#3b6fd8"/><text x="70" y="324" font-family="sans-serif" font-size="15" fill="#fff">Submit</text></svg>`
  )

const actions = ["Typing the customer's name", "Typing the billing address", "Choosing the due date"]

export default function Example() {
  const [step, setStep] = React.useState(0)
  const [frameAt, setFrameAt] = React.useState(() => new Date().toISOString())
  const [control, setControl] = React.useState<"agent" | "person">("agent")
  const [run, setRun] = React.useState<AgentScreenRun>("running")
  const [recording, setRecording] = React.useState<AgentScreenRecording>("off")
  const [recordingSince, setRecordingSince] = React.useState<string>()

  // A new frame every four seconds while the agent works. Paused, stopped or taken over, none arrives, and after 15
  // seconds the frame is stamped as not new.
  React.useEffect(() => {
    if (run !== "running" || control !== "agent") return
    const id = setInterval(() => {
      setStep((s) => (s + 1) % actions.length)
      setFrameAt(new Date().toISOString())
    }, 4000)
    return () => clearInterval(id)
  }, [run, control])

  return (
    <div className="flex max-w-3xl flex-col gap-6">
      <AgentScreen
        agent={agent}
        connection="live"
        source={{ kind: "image", src: frame(step) }}
        frameAt={frameAt}
        action={run === "stopped" ? undefined : actions[step]}
        control={control}
        onTakeOver={() => setControl("person")}
        onHandBack={() => setControl("agent")}
        run={run}
        onPause={() => setRun("paused")}
        onResume={() => setRun("running")}
        onStop={() => setRun("stopped")}
        pauseNote="It finishes typing into the field it's in, then waits. Nothing is submitted."
        stopNote="It stops now. The form stays open with what's been typed; nothing is submitted."
        recording={recording}
        recordingSince={recordingSince}
        recordingNote="The screen is recorded, not your microphone. Recordings are kept for 30 days and your team can watch them."
        onRecord={() => {
          // Your app says "starting" until the first recorded frame, then "on".
          setRecording("starting")
          setTimeout(() => {
            setRecording("on")
            setRecordingSince(new Date().toISOString())
          }, 1200)
        }}
        onStopRecording={() => setRecording("off")}
      />
      {/* Collapsed in a side panel, before the first frame: it says it's connecting and draws no picture. */}
      <AgentScreen className="max-w-sm" agent={{ id: "a-research", name: "Research agent", role: "analyst" }} connection="connecting" defaultView="collapsed" action="Opening the supplier's site" />
    </div>
  )
}