TypeScript 97.4%
SQL 1%
JavaScript 0.9%
CSS 0.6%
1/**2 * Self-contained, print-optimized HTML document for a conversation export ("PDF (print)").3 * No external assets: inline CSS, inline SVG brand mark, system fonts. Works offline and in `window.print()`.4 */5import { escapeHtml, markdownToHtml } from "./markdown-html";67export interface ExportDocMessage {8 role: string;9 content: string;10 modelKey: string | null;11 createdAt: string | null;12 reasoning?: string | null;13 tools?: { name: string; argumentsText?: string; isError?: boolean }[];14 attachments?: { name: string; mimeType: string; sizeBytes: number }[];15 citations?: { url?: string; title?: string }[];16 usage?: { inputTokens?: number; outputTokens?: number; totalTokens?: number } | null;17 costUsd?: number | null;18 latencyMs?: number | null;19}2021export interface ExportDocInput {22 title: string;23 createdAt: string;24 exportedAt: string;25 systemPrompt?: string | null;26 messages: ExportDocMessage[];27 totals?: { costUsd?: number; inputTokens?: number; outputTokens?: number };28 appUrl: string;29 /** Auto-open the print dialog on load (used by "PDF (print)"). */30 autoPrint?: boolean;31}3233const BRAND_MARK = `<svg width="28" height="28" viewBox="0 0 32 32" fill="none" aria-hidden="true"><defs><linearGradient id="g" x1="3" y1="3" x2="29" y2="29" gradientUnits="userSpaceOnUse"><stop stop-color="#6366f1"/><stop offset="0.52" stop-color="#8b5cf6"/><stop offset="1" stop-color="#f472b6"/></linearGradient></defs><rect x="1" y="1" width="30" height="30" rx="9" fill="url(#g)"/><g fill="#fff"><rect x="7.5" y="7" width="5" height="18" rx="2.5"/><path fill-rule="evenodd" d="M12 7h5.4a5.6 5.6 0 0 1 0 11.2H12V7Zm0 3.4v4.4h5.3a2.2 2.2 0 0 0 0-4.4H12Z"/><rect x="24.6" y="9.1" width="3.2" height="2.3" rx="1.15" opacity="0.95"/><rect x="24.6" y="12.55" width="3.2" height="2.3" rx="1.15" opacity="0.62"/><rect x="24.6" y="16" width="3.2" height="2.3" rx="1.15" opacity="0.34"/></g></svg>`;3435const CSS = `36:root{--fg:#14151a;--muted:#5c6070;--subtle:#8b8f9d;--border:#e3e3df;--bg:#fff;--soft:#f4f4f2;--accent:#5457d6}37*{box-sizing:border-box}38html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}39.page{max-width:760px;margin:0 auto;padding:32px 24px 64px}40.brand{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}41.brand .name{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;font-size:17px}42.brand .name span b{font-weight:500;color:var(--muted)}43.brand .sub{font-size:12px;color:var(--subtle)}44.toolbar{display:flex;gap:8px}45.toolbar button{font:inherit;font-size:13px;padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg);cursor:pointer}46.toolbar button.primary{background:var(--fg);color:#fff;border-color:var(--fg)}47h1.title{font-size:26px;line-height:1.2;letter-spacing:-.02em;margin:28px 0 8px;text-wrap:balance}48.meta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font-size:13px;margin-bottom:8px}49.meta .chips{display:flex;flex-wrap:wrap;gap:6px}50.chip{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:1px 9px;font-size:12px;color:var(--muted);background:var(--soft)}51.system{margin:18px 0 0;padding:12px 14px;border-left:3px solid var(--border);background:var(--soft);border-radius:0 10px 10px 0;font-size:13.5px;color:var(--muted);white-space:pre-wrap}52.system b{color:var(--fg)}53.messages{margin-top:28px;display:flex;flex-direction:column;gap:22px}54.msg{break-inside:avoid;page-break-inside:avoid}55.msg header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:12.5px;color:var(--muted)}56.msg header .who{font-weight:600;color:var(--fg)}57.msg header .who small{font-weight:400;color:var(--subtle);margin-left:6px}58.msg header time{font-variant-numeric:tabular-nums;color:var(--subtle)}59.msg.user .body{background:var(--soft);border-radius:14px;padding:12px 16px}60.msg.assistant .body{padding:0 0 0 14px;border-left:2px solid var(--border)}61.body>*+*{margin-top:.75em}62.body p{margin:0}63.body h1,.body h2,.body h3,.body h4{line-height:1.3;margin:1.1em 0 .3em;letter-spacing:-.01em}64.body h1{font-size:1.3em}.body h2{font-size:1.18em}.body h3{font-size:1.06em}.body h4{font-size:1em}65.body ul,.body ol{padding-left:1.4em;margin:0}66.body li+li{margin-top:.2em}67.body blockquote{margin:0;padding-left:.9em;border-left:3px solid var(--border);color:var(--muted)}68.body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;background:var(--soft);border:1px solid var(--border);border-radius:5px;padding:.1em .38em}69.body pre{margin:0;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--soft);overflow-x:auto;white-space:pre-wrap;word-break:break-word}70.body pre code{background:none;border:0;padding:0;font-size:12.5px;line-height:1.55}71.body pre[data-lang]::before{content:attr(data-lang);display:block;font-size:10.5px;color:var(--subtle);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}72.body table{border-collapse:collapse;width:100%;font-size:.92em}73.body th,.body td{border:1px solid var(--border);padding:.4em .7em;text-align:left;vertical-align:top}74.body th{background:var(--soft)}75.body a{color:var(--accent)}76.body img{max-width:100%;border-radius:8px}77.body hr{border:0;border-top:1px solid var(--border);margin:1.2em 0}78details.reasoning{margin:0 0 8px;font-size:13px;color:var(--muted)}79details.reasoning summary{cursor:pointer;font-weight:500}80details.reasoning .body{margin-top:6px;border-left:2px dashed var(--border);padding-left:12px}81.tools{margin:0 0 8px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}82.tools li{font-size:12.5px;border:1px solid var(--border);border-radius:8px;padding:6px 10px;background:var(--soft)}83.tools li code{font-size:12px}84.tools li.error{border-color:#f3b3b8}85.attachments{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}86.attachments li{font-size:12px;border:1px dashed var(--border);border-radius:999px;padding:2px 10px;color:var(--muted)}87.citations{margin:10px 0 0;padding-left:1.2em;font-size:12.5px;color:var(--muted)}88.citations a{color:var(--accent);word-break:break-all}89.stats{margin-top:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--subtle);font-variant-numeric:tabular-nums}90footer.doc{margin-top:40px;padding-top:14px;border-top:1px solid var(--border);font-size:12px;color:var(--subtle);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}91@page{margin:16mm 14mm}92@media print{.no-print{display:none!important}.page{padding:0;max-width:none}body{font-size:12.5px}.brand{padding-bottom:10px}h1.title{font-size:22px;margin-top:18px}.messages{gap:16px}.body pre{white-space:pre-wrap}details.reasoning{display:none}a{text-decoration:none;color:inherit}.body a{color:var(--accent)}}93@media (max-width:480px){.page{padding:20px 16px 48px}h1.title{font-size:22px}.msg header{flex-direction:column;gap:2px}}94`;9596function fmtDate(iso: string | null | undefined): string {97 if (!iso) return "";98 const d = new Date(iso);99 if (Number.isNaN(d.getTime())) return "";100 return d.toLocaleString("en-US", { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit" });101}102103function fmtTokens(n: number | undefined): string | null {104 if (n === undefined || n === null) return null;105 if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(2).replace(/\.?0+$/, "")}M tokens`;106 if (n >= 10_000) return `${(n / 1_000).toFixed(1).replace(/\.?0+$/, "")}K tokens`;107 return `${n.toLocaleString("en-US")} tokens`;108}109110function fmtUsd(n: number | null | undefined): string | null {111 if (n === null || n === undefined || Number.isNaN(n)) return null;112 if (n === 0) return "$0.00";113 return n < 0.01 ? `$${n.toFixed(n < 0.001 ? 5 : 4)}` : `$${n.toFixed(2)}`;114}115116function modelLabel(key: string | null): { provider: string | null; model: string } {117 if (!key) return { provider: null, model: "Assistant" };118 const [p, ...rest] = key.split("/");119 return { provider: rest.length ? p : null, model: rest.length ? rest.join("/") : key };120}121122function renderMessage(m: ExportDocMessage): string {123 const isUser = m.role === "user";124 const { provider, model } = modelLabel(m.modelKey);125 const who = isUser ? "You" : m.role === "system" ? "System" : `${escapeHtml(model)}${provider ? `<small>${escapeHtml(provider)}</small>` : ""}`;126 const parts: string[] = [];127 if (!isUser && m.reasoning && m.reasoning.trim()) parts.push(`<details class="reasoning"><summary>Reasoning</summary><div class="body">${markdownToHtml(m.reasoning)}</div></details>`);128 if (m.tools?.length) {129 parts.push(`<ul class="tools">${m.tools.map((t) => `<li${t.isError ? ' class="error"' : ""}><code>${escapeHtml(t.name)}</code>${t.argumentsText ? ` <span>${escapeHtml(t.argumentsText.slice(0, 400))}${t.argumentsText.length > 400 ? "…" : ""}</span>` : ""}</li>`).join("")}</ul>`);130 }131 parts.push(`<div class="body">${m.content.trim() ? markdownToHtml(m.content) : '<p><em style="color:var(--subtle)">No text in this message.</em></p>'}</div>`);132 if (m.attachments?.length) parts.push(`<ul class="attachments">${m.attachments.map((a) => `<li>${escapeHtml(a.name)} · ${escapeHtml(a.mimeType)} · ${Math.max(1, Math.round(a.sizeBytes / 1024))} KB</li>`).join("")}</ul>`);133 const cits = (m.citations ?? []).filter((c) => c.url);134 if (cits.length) parts.push(`<ol class="citations">${cits.map((c) => `<li><a href="${escapeHtml(c.url!)}" rel="noopener noreferrer nofollow">${escapeHtml(c.title || c.url!)}</a></li>`).join("")}</ol>`);135 const stats = [fmtTokens(m.usage?.totalTokens ?? ((m.usage?.inputTokens ?? 0) + (m.usage?.outputTokens ?? 0) || undefined)), fmtUsd(m.costUsd), m.latencyMs ? `${m.latencyMs < 1000 ? `${Math.round(m.latencyMs)} ms` : `${(m.latencyMs / 1000).toFixed(1)} s`}` : null].filter(Boolean);136 if (!isUser && stats.length) parts.push(`<div class="stats">${stats.join(" · ")}</div>`);137 return `<article class="msg ${escapeHtml(m.role)}"><header><span class="who">${who}</span>${m.createdAt ? `<time datetime="${escapeHtml(m.createdAt)}">${fmtDate(m.createdAt)}</time>` : ""}</header>${parts.join("")}</article>`;138}139140export function buildExportHtml(input: ExportDocInput): string {141 const models = Array.from(new Set(input.messages.map((m) => m.modelKey).filter((k): k is string => Boolean(k))));142 const totals = [fmtUsd(input.totals?.costUsd), input.totals?.inputTokens !== undefined || input.totals?.outputTokens !== undefined ? `${fmtTokens((input.totals?.inputTokens ?? 0) + (input.totals?.outputTokens ?? 0))}` : null].filter(Boolean);143 const title = escapeHtml(input.title || "Conversation");144 return `<!doctype html>145<html lang="en">146<head>147<meta charset="utf-8" />148<meta name="viewport" content="width=device-width, initial-scale=1" />149<meta name="robots" content="noindex, nofollow" />150<title>${title} · PolyLLM</title>151<style>${CSS}</style>152</head>153<body>154<div class="page">155 <div class="brand">156 <a class="name" href="${escapeHtml(input.appUrl)}" style="color:inherit;text-decoration:none">${BRAND_MARK}<span>Poly<b>LLM</b></span></a>157 <div class="toolbar no-print">158 <button type="button" class="primary" onclick="window.print()">Print / Save as PDF</button>159 <button type="button" onclick="window.close()">Close</button>160 </div>161 </div>162 <h1 class="title">${title}</h1>163 <div class="meta">164 <span>${fmtDate(input.createdAt)}</span>165 <span>${input.messages.length} message${input.messages.length === 1 ? "" : "s"}</span>166 ${totals.length ? `<span>${totals.join(" · ")}</span>` : ""}167 ${models.length ? `<span class="chips">${models.map((k) => `<span class="chip">${escapeHtml(modelLabel(k).model)}</span>`).join("")}</span>` : ""}168 </div>169 ${input.systemPrompt ? `<div class="system"><b>System prompt</b>\n${escapeHtml(input.systemPrompt)}</div>` : ""}170 <div class="messages">171 ${input.messages.map(renderMessage).join("\n")}172 </div>173 <footer class="doc">174 <span>Exported from PolyLLM on ${fmtDate(input.exportedAt)}</span>175 <span>Model output can be wrong. ${escapeHtml(input.appUrl.replace(/^https?:\/\//, ""))}</span>176 </footer>177</div>178${input.autoPrint ? `<script>window.addEventListener("load",function(){setTimeout(function(){window.print()},250)});</script>` : ""}179</body>180</html>`;181}182