Spaces:

automindy
/

fokemal

Sleeping

fokemal / client /src /lib /artifacts.ts

Sync to upstream v0.13.7, keep HF Space adaptations

dcedb25 21 days ago

3.56 kB

// Artifacts: runnable code a reply carries, shown in a side panel with a live
// preview next to the source — the pattern Claude's Artifacts panel made
// familiar (a sandboxed iframe for the preview, tabs for code and preview,
// copy and download in the header). This module is the pure half: finding the
// artifacts in a Markdown reply and building the document the iframe runs.

export type ArtifactKind = 'html' | 'svg'

export interface Artifact {
  /** Stable within a message: `${messageIndex}:${blockIndex}`. */
  id: string
  kind: ArtifactKind
  /** Fence language as written, lowercased ('' when the fence had none). */
  language: string
  code: string
  /** <title> / <svg title> when present, else a kind label chosen by the caller. */
  title: string | null
  filename: string
}

const FENCE = /^([ \t]{0,3})(`{3,}|~{3,})[ \t]*([^\s`]*)[^\n]*\n([\s\S]*?)\n[ \t]{0,3}\2[ \t]*$/gm

/** Is this fenced block something a browser can run on its own? */
export function artifactKindOf(language: string, code: string): ArtifactKind | null {
  const lang = language.toLowerCase()
  const head = code.slice(0, 400).trimStart().toLowerCase()
  if (lang === 'svg' || (head.startsWith('<svg') && (lang === '' || lang === 'xml' || lang === 'html'))) return 'svg'
  if (lang === 'html' || lang === 'htm' || lang === 'xhtml') return 'html'
  if ((lang === '' || lang === 'xml' || lang === 'markup') && (head.startsWith('<!doctype html') || head.startsWith('<html'))) return 'html'
  return null
}

function titleOf(kind: ArtifactKind, code: string): string | null {
  const m = kind === 'html'
    ? /<title[^>]*>([^<]{1,120})<\/title>/i.exec(code)
    : /<title[^>]*>([^<]{1,120})<\/title>/i.exec(code)
  const t = m?.[1]?.trim()
  return t ? t : null
}

/** Every runnable fenced block in a Markdown reply, in document order.
 *  A fence still open (streaming) is not matched, so a card only appears
 *  once the block has closed. */
export function extractArtifacts(markdown: string, messageIndex = 0): Artifact[] {
  const out: Artifact[] = []
  let block = 0
  for (const m of markdown.matchAll(FENCE)) {
    const language = (m[3] ?? '').toLowerCase()
    const code = m[4] ?? ''
    block += 1
    const kind = artifactKindOf(language, code)
    if (!kind) continue
    out.push({
      id: `${messageIndex}:${block}`,
      kind,
      language,
      code,
      title: titleOf(kind, code),
      filename: kind === 'svg' ? `artifact-${block}.svg` : `artifact-${block}.html`,
    })
  }
  return out
}

/** The document the sandboxed iframe runs. HTML is passed through as the
 *  model wrote it; an SVG is centred on a neutral page so it is visible at
 *  its natural size. */
export function artifactSrcDoc(artifact: Artifact): string {
  if (artifact.kind === 'html') return artifact.code
  return `<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;background:#fff}body{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}svg{max-width:100%;max-height:100%}</style></head><body>${artifact.code}</body></html>`
}

/** Sandbox flags for the preview: scripts may run (a page without JS is not
 *  much of a preview) but the frame is a separate origin with no access to
 *  the dashboard, its storage or its session. Never add allow-same-origin. */
export const ARTIFACT_SANDBOX = 'allow-scripts allow-forms allow-modals allow-popups allow-pointer-lock'

export function artifactMimeType(kind: ArtifactKind): string {
  return kind === 'svg' ? 'image/svg+xml' : 'text/html'
}

	// Artifacts: runnable code a reply carries, shown in a side panel with a live
	// preview next to the source — the pattern Claude's Artifacts panel made
	// familiar (a sandboxed iframe for the preview, tabs for code and preview,
	// copy and download in the header). This module is the pure half: finding the
	// artifacts in a Markdown reply and building the document the iframe runs.

	export type ArtifactKind = 'html' \| 'svg'

	export interface Artifact {
	/** Stable within a message: `${messageIndex}:${blockIndex}`. */
	id: string
	kind: ArtifactKind
	/** Fence language as written, lowercased ('' when the fence had none). */
	language: string
	code: string
	/** <title> / <svg title> when present, else a kind label chosen by the caller. */
	title: string \| null
	filename: string
	}

	const FENCE = /^([ \t]{0,3})(`{3,}\|~{3,})[ \t]([^\s`])[^\n]\n([\s\S]?)\n[ \t]{0,3}\2[ \t]*$/gm

	/** Is this fenced block something a browser can run on its own? */
	export function artifactKindOf(language: string, code: string): ArtifactKind \| null {
	const lang = language.toLowerCase()
	const head = code.slice(0, 400).trimStart().toLowerCase()
	if (lang === 'svg' \|\| (head.startsWith('<svg') && (lang === '' \|\| lang === 'xml' \|\| lang === 'html'))) return 'svg'
	if (lang === 'html' \|\| lang === 'htm' \|\| lang === 'xhtml') return 'html'
	if ((lang === '' \|\| lang === 'xml' \|\| lang === 'markup') && (head.startsWith('<!doctype html') \|\| head.startsWith('<html'))) return 'html'
	return null
	}

	function titleOf(kind: ArtifactKind, code: string): string \| null {
	const m = kind === 'html'
	? /<title[^>]*>([^<]{1,120})<\/title>/i.exec(code)
	: /<title[^>]*>([^<]{1,120})<\/title>/i.exec(code)
	const t = m?.[1]?.trim()
	return t ? t : null
	}

	/** Every runnable fenced block in a Markdown reply, in document order.
	* A fence still open (streaming) is not matched, so a card only appears
	* once the block has closed. */
	export function extractArtifacts(markdown: string, messageIndex = 0): Artifact[] {
	const out: Artifact[] = []
	let block = 0
	for (const m of markdown.matchAll(FENCE)) {
	const language = (m[3] ?? '').toLowerCase()
	const code = m[4] ?? ''
	block += 1
	const kind = artifactKindOf(language, code)
	if (!kind) continue
	out.push({
	id: `${messageIndex}:${block}`,
	kind,
	language,
	code,
	title: titleOf(kind, code),
	filename: kind === 'svg' ? `artifact-${block}.svg` : `artifact-${block}.html`,
	})
	}
	return out
	}

	/** The document the sandboxed iframe runs. HTML is passed through as the
	* model wrote it; an SVG is centred on a neutral page so it is visible at
	* its natural size. */
	export function artifactSrcDoc(artifact: Artifact): string {
	if (artifact.kind === 'html') return artifact.code
	return `<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;background:#fff}body{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}svg{max-width:100%;max-height:100%}</style></head><body>${artifact.code}</body></html>`
	}

	/** Sandbox flags for the preview: scripts may run (a page without JS is not
	* much of a preview) but the frame is a separate origin with no access to
	* the dashboard, its storage or its session. Never add allow-same-origin. */
	export const ARTIFACT_SANDBOX = 'allow-scripts allow-forms allow-modals allow-popups allow-pointer-lock'

	export function artifactMimeType(kind: ArtifactKind): string {
	return kind === 'svg' ? 'image/svg+xml' : 'text/html'
	}