"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import { X, Code2, Eye, Download, Save, History, ExternalLink } from "lucide-react"; import useSWR from "swr"; import { api, fetcher } from "@/lib/client/fetcher"; import type { ArtifactDTO } from "@/lib/client/types"; import { cn, CopyButton, IconButton, Tabs, toast } from "../ui"; import { Markdown } from "./markdown"; export interface ArtifactView { id?: string; title: string; type: string; language?: string | null; content: string; conversationId?: string | null; projectId?: string | null } const LANG_TO_TYPE: Record = { html: "html", svg: "svg", mermaid: "mermaid", jsx: "react", tsx: "react", react: "react", python: "python", py: "python", typescript: "typescript", ts: "typescript", markdown: "markdown", md: "markdown" }; export const typeFromLang = (l: string) => LANG_TO_TYPE[l] ?? "code"; /** Hardened preview: sandboxed iframe (no same-origin, no top-navigation), srcdoc only, no access to cookies/session. */ function HtmlPreview({ html }: { html: string }) { return