import { useMemo } from 'react'
/**
* Pull the most likely runnable code out of an artifact: the largest fenced code block if the agent
* wrapped its answer in markdown, otherwise the whole text.
*/
export function extractCode(artifact: string): string {
const blocks = [...artifact.matchAll(/```(?:tsx|jsx|ts|js|javascript|typescript)?\s*\n([\s\S]*?)```/g)].map((m) => m[1])
if (blocks.length === 0) return artifact.trim()
return blocks.sort((a, b) => b.length - a.length)[0].trim()
}
/** Builds a self-contained HTML document that transpiles the component (Babel) and renders it with
* React + Tailwind from CDN. The agent's code must define a component named `App`. */
function harness(code: string): string {
const json = JSON.stringify(code)
return `
`
}
/** Runs an agent's React component artifact live, in a sandboxed iframe. */
export function LivePreview({ artifact, className }: { artifact: string; className?: string }) {
const srcDoc = useMemo(() => harness(extractCode(artifact)), [artifact])
return (
)
}