soroush.asadi
e26f304675
Adds LivePreview — a sandboxed iframe that transpiles an agent's component with Babel and renders it live with React + Tailwind from CDN (no build step), so a generated page runs inside TeamUp. A "Preview" button on any task with an artifact opens a full-screen live view. Pairs with steering the engineer agent to output a single self-contained App component. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
51 lines
2.9 KiB
TypeScript
51 lines
2.9 KiB
TypeScript
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 `<!doctype html><html><head><meta charset="utf-8"/>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
|
|
<script type="importmap">{"imports":{"react":"https://esm.sh/react@18.3.1","react-dom":"https://esm.sh/react-dom@18.3.1","react-dom/client":"https://esm.sh/react-dom@18.3.1/client","react/jsx-runtime":"https://esm.sh/react@18.3.1/jsx-runtime","react/jsx-dev-runtime":"https://esm.sh/react@18.3.1/jsx-dev-runtime"}}</script>
|
|
<style>body{margin:0;font-family:system-ui,sans-serif}.__err{padding:18px;font:12px/1.6 ui-monospace,monospace;color:#b91c1c;white-space:pre-wrap}</style>
|
|
</head><body>
|
|
<div id="root"></div>
|
|
<script>
|
|
var CODE = ${json};
|
|
function esc(s){return String(s).replace(/[<&]/g,function(c){return c==='<'?'<':'&'})}
|
|
function showErr(m){var r=document.getElementById('root');if(r)r.innerHTML='<div class="__err">Preview error:\\n'+esc(m)+'</div>'}
|
|
window.addEventListener('error',function(e){showErr(e.message||e)});
|
|
window.addEventListener('unhandledrejection',function(e){showErr((e.reason&&e.reason.message)||e.reason||'Error')});
|
|
try{
|
|
var t = Babel.transform(CODE,{presets:[['react',{runtime:'automatic'}],'typescript'],filename:'App.tsx'}).code;
|
|
var boot = t + "\\nimport React from 'react';\\nimport { createRoot } from 'react-dom/client';\\nvar __C = (typeof App!=='undefined') ? App : null;\\nif(!__C){ throw new Error('No component named App. Output a component, e.g. export default function App(){ return <div/> }'); }\\ncreateRoot(document.getElementById('root')).render(React.createElement(__C));";
|
|
var s=document.createElement('script');s.type='module';s.textContent=boot;document.body.appendChild(s);
|
|
}catch(e){showErr(e.message)}
|
|
</script>
|
|
</body></html>`
|
|
}
|
|
|
|
/** 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 (
|
|
<iframe
|
|
title="Live preview"
|
|
srcDoc={srcDoc}
|
|
sandbox="allow-scripts allow-same-origin"
|
|
className={className ?? 'h-[70vh] w-full rounded-lg border bg-white'}
|
|
/>
|
|
)
|
|
}
|