discord-html-transcripts-fix 1.0.0 → 1.2.0

package/README.md

@@ -1,92 +1,113 @@
-# `discord-html-transcripts` (Bugfix Fork)
+# `discord-html-transcripts-fix`
 
-This is a fork of [discord-html-transcripts](https://github.com/ItzDerock/discord-html-transcripts) with bug fixes for compatibility with the latest discord.js version and Components v2.
+A nicely formatted HTML transcript generator for discord.js with full **Components V2** support, an **interactive viewer** (search, lightbox, mention popups, i18n) and **hardened security**.
+
+Forked from [discord-html-transcripts](https://github.com/ItzDerock/discord-html-transcripts).
 
 ## Changes compared to the original
 
-- Fixed compatibility with the latest discord.js version
-- Added support for Discord Components v2
+### Security
+- **Critical fix**: `</script>` breakout via inlined JSON is prevented (`<`, `>`, `&`, U+2028/2029 are escaped)
+- **Critical fix**: markdown links with `javascript:`, `data:`, `vbscript:` and similar dangerous URI schemes are rewritten to `#`
+- **Hardened**: inline `style="color:…"` sinks in the mention popup are hex-validated to block CSS injection
+- **Hardened**: `data:` URI MIME types from the image downloader are restricted to image types only (no `text/html` smuggling)
+- **Fixed**: `process.exit(1)` on discord.js version mismatch removed — library no longer kills the host bot
+
+### Robustness
+- **Fix**: invalid Discord timestamp markers (`<t:abc:F>`, oversized values) no longer abort the transcript with `RangeError`
+- **Fix**: per-AST-node error boundary in `MessageSingleASTNode` and per-message error boundary in `DiscordMessage` — one broken message can never kill the whole render any more
+- **Fix**: `parseDiscordEmoji` no longer throws on deleted reactions with `emoji.name === null`
+- **Fix**: `formatBytes(null/undefined/NaN)` no longer returns `NaN undefined`
+- **Fix**: `createTranscript` slice uses the resolved limit instead of the raw `limit`
+- **Fix**: embed fields are rendered through a proper async component (was an inline `async` arrow inside `.map()` — undefined React behaviour)
+- **Fix**: `JoinMessage` text is now deterministic per message ID — re-rendering the same channel always yields the same join line
+- **Fix**: random `console.log` calls in production paths replaced by the `debug` namespace
+
+### New: interactive viewer
+- **Clickable mentions** — clicking a user / role / channel mention opens a Discord-style popup with avatar, display name, username, all roles (colored pills), server-since, account-since, color, member count, channel topic, etc.
+- **Search bar** — Ctrl+F is intercepted, live highlighting with "x of n matches", prev / next, Enter / Shift+Enter to navigate, Escape to close
+- **Image lightbox** — click any image to open fullscreen, arrow keys to nav, Escape to close
+- **Participant sidebar (TOC)** — toggle button (top-left), sorted list of every participant, click to jump to their first message
+- **Back-to-top** floating button fades in after scrolling
+- **Date separators** between messages — `— Tuesday, May 13 2026 —` style, automatically inserted on day boundaries
+- **Stats footer** — `324 messages · 12 participants · 5 images` (auto-computed)
+- **Language switcher** (i18n) — built-in English and German dictionaries, switch live in the viewer. Pass your own via `options.i18n: { de: { … } }` to extend
+
+### New: more Discord content rendered
+- **Stickers** — image, name, alt
+- **Polls** — question, answer bars with vote counts and percentages, expiry
+- **Forwarded messages (`messageSnapshots`)** — quoted-block style with original author
+- **Voice messages** — `🎤` indicator, inline SVG waveform from `attachment.waveform`, duration
+- **Edit timestamp tooltip** on `(edited)` marker
+- **Optional edit history** — pass `message.editHistory = [{content, editedAt}, …]` and the viewer shows a collapsible `<details>` block
+- **Pinned indicator** (`📌` badge on pinned messages)
+- **App badge** for application/bot messages with `applicationId`
+- **Suppressed embeds flag** is honored — when set, embeds aren't rendered (and a small `(embeds hidden)` note is shown instead)
+- **Cross-guild replies** are no longer silently dropped — they show a "Message from another server" pill
+- **Burst / super-reactions** are flagged
+- **Thread state badges** — `Archived`, `Locked`
+- **GIFV / animated GIFs** are rendered with `<video autoplay loop muted>` like in Discord
+- **Attachment description (alt text)** is used as `alt`/`title`
+- **`<id:guide>`, `<id:browse>`, `<id:customize>`** etc. pseudo-channels show as styled pills with proper labels
+- **`</cmd:id>` slash command mentions** render as blue pills
+- **Embed video** link and **embed provider** ("YouTube" etc.) are shown
+- **`RoleSubscriptionPurchase`** system message renders properly
+- **`AutoModerationAction`** shows the matched rule name and blocked content excerpt
+- **Container component** with `accent_color` (left border) and `spoiler` support
+- **Media gallery** per-item spoiler support
+- Many additional system message types (`ChannelNameChange`, `ChannelIconChange`, `ThreadCreated`, `ChatInputCommand`, `ContextMenuCommand`, `Call`, `ChannelFollowAdd`, `RecipientRemove`, guild incident reports, poll result)
+
+### Performance
+- **Single-pass profile collector** — `buildAllContext` builds profiles + extended dicts in one walk over the message list
+- **Image downloader is concurrent** — bounded pool (default 6, configurable via `withConcurrency`) instead of sequential
+- **`@skyra/discord-components-core` version is pinned** to an exact resolved version → CDN cacheable
+- **Inline JSON** is shipped via `<script type="application/json">` so it doesn't block HTML parse
+- **Emoji URL resolution** is memoized
+- **`returnType: 'stream'`** option streams the rendered HTML out instead of buffering — usable for 5,000+ message tickets
+
+### DX
+- **`react`, `react-dom`, `debug` moved into regular dependencies** so users don't install them manually (`debug` was actually a missing runtime dep in the original — `images.js` requires it)
+- TypeScript build target unchanged; only `discord.js` remains a peer dependency
 
 ## Requirements
 
-This package requires `react` and `react-dom` as peer dependencies. Install them before using this package:
+Only `discord.js` as a peer dependency. Everything else is auto-installed:
 
 ```bash
-npm install react@^19.2.3 react-dom@^19.2.3
+npm install discord-html-transcripts-fix
 ```
 
 ## Usage
 
-### Example usage using the built in message fetcher.
-
 ```js
-const discordTranscripts = require('discord-html-transcripts');
-// or (if using typescript) import * as discordTranscripts from 'discord-html-transcripts';
-
-const channel = message.channel; // or however you get your TextChannel
-
-// Must be awaited
-const attachment = await discordTranscripts.createTranscript(channel);
-
-channel.send({
-  files: [attachment],
+const { createTranscript } = require('discord-html-transcripts-fix');
+
+const attachment = await createTranscript(channel, {
+    // existing options
+    limit: -1,
+    saveImages: false,
+    poweredBy: true,
+    // new options
+    language: 'de',                 // 'en' (default) or 'de' — also exposed live in the viewer
+    i18n: { de: { joined: 'kam an' } }, // optional overrides per language
+    returnType: 'stream',           // 'buffer' | 'string' | 'attachment' (default) | 'stream'
 });
-```
-
-### Or if you prefer, you can pass in your own messages.
-
-```js
-const discordTranscripts = require('discord-html-transcripts');
-// or (if using typescript) import * as discordTranscripts from 'discord-html-transcripts';
 
-const messages = someWayToGetMessages(); // Must be Collection<string, Message> or Message[]
-const channel = someWayToGetChannel(); // Used for ticket name, guild icon, and guild name
-
-// Must be awaited
-const attachment = await discordTranscripts.generateFromMessages(messages, channel);
-
-channel.send({
-  files: [attachment],
-});
+channel.send({ files: [attachment] });
 ```
 
-## Configuration
+### Hooking edit history (optional)
 
-Both methods of generating a transcript allow for an option object as the last parameter.
-**All configuration options are optional!**
-
-### Built in Message Fetcher
+If your bot tracks message edits, attach the history to the message before passing it to the renderer:
 
 ```js
-const attachment = await discordTranscripts.createTranscript(channel, {
-    limit: -1, // Max amount of messages to fetch. `-1` recursively fetches.
-    returnType: 'attachment', // Valid options: 'buffer' | 'string' | 'attachment' Default: 'attachment' OR use the enum ExportReturnType
-    filename: 'transcript.html', // Only valid with returnType is 'attachment'. Name of attachment.
-    saveImages: false, // Download all images and include the image data in the HTML (allows viewing the image even after it has been deleted) (! WILL INCREASE FILE SIZE !)
-    footerText: "Exported {number} message{s}", // Change text at footer, don't forget to put {number} to show how much messages got exported, and {s} for plural
-    callbacks: {
-      // register custom callbacks for the following:
-      resolveChannel: (channelId: string) => Awaitable<Channel | null>,
-      resolveUser: (userId: string) => Awaitable<User | null>,
-      resolveRole: (roleId: string) => Awaitable<Role | null>,
-      resolveImageSrc: (
-        attachment: APIAttachment,
-        message: APIMessage
-      ) => Awaitable<string | null | undefined>
-    },
-    poweredBy: true, // Whether to include the "Powered by discord-html-transcripts" footer
-    hydrate: true, // Whether to hydrate the html server-side
-    filter: (message) => true // Filter messages, e.g. (message) => !message.author.bot
-});
+message.editHistory = [
+    { content: 'first version', editedAt: new Date('2025-05-13T11:02Z') },
+    { content: 'corrected version', editedAt: new Date('2025-05-13T11:05Z') },
+];
 ```
 
-### Providing your own messages
-
-```js
-const attachment = await discordTranscripts.generateFromMessages(messages, channel, {
-  // Same as createTranscript, except no limit or filter
-});
-```
+The viewer will then render a collapsible `<details>` block next to the `(edited)` marker.
 
 ## Credits
 

package/dist/downloader/images.js

@@ -1,36 +1,7 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
 var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
+    var ownKeys = function(o){ownKeys = Object.getOwnPropertyNames || function (o){var ar=[];for (var k in o) if (Object.prototype.hasOwnProperty.call(o,k)) ar[ar.length]=k;return ar;};return ownKeys(o);};
+    return function (mod){if (mod && mod.__esModule) return mod;var result={};if (mod != null) for (var k=ownKeys(mod), i=0; i<k.length; i++) if (k[i] !== "default") Object.defineProperty(result,k[i],{get:function(){return mod[k[i]];}});Object.defineProperty(result,"default",{value:mod,enumerable:true});return result;};
 })();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -39,76 +10,80 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TranscriptImageDownloader = void 0;
 const undici_1 = require("undici");
 const debug_1 = __importDefault(require("debug"));
-/**
- * Builder to build a image saving callback.
- */
+const utils_1 = require("../utils/utils");
+
+// Small inline concurrency limiter — no extra dep
+function createLimiter(max) {
+    let active = 0;
+    const queue = [];
+    const next = () => {
+        if (active >= max || queue.length === 0) return;
+        active++;
+        const { fn, resolve, reject } = queue.shift();
+        fn().then((v) => { active--; resolve(v); next(); }, (e) => { active--; reject(e); next(); });
+    };
+    return (fn) => new Promise((resolve, reject) => { queue.push({ fn, resolve, reject }); next(); });
+}
+
 class TranscriptImageDownloader {
     constructor() {
         this.log = TranscriptImageDownloader.log;
+        this.maxConcurrent = 6;
+        this._sharpModule = null;
+        this._limit = null;
     }
-    /**
-     * Sets the maximum file size for *each* individual image.
-     * @param size The maximum file size in kilobytes
-     */
     withMaxSize(size) {
         this.maxFileSize = size;
         return this;
     }
-    /**
-     * Sets the compression quality for each image. This requires `sharp` to be installed.
-     * Optionally, images can be converted to WebP format which is smaller in size.
-     * @param quality The quality of the image (1 lowest - 100 highest). Lower quality means smaller file size.
-     * @param convertToWebP Whether to convert the image to WebP format
-     */
+    withConcurrency(n) {
+        this.maxConcurrent = Math.max(1, Number(n) || 1);
+        return this;
+    }
     withCompression(quality = 80, convertToWebP = false, options = {}) {
-        if (quality < 1 || quality > 100)
-            throw new Error('Quality must be between 1 and 100');
-        // try and import sharp
-        Promise.resolve().then(() => __importStar(require('sharp'))).catch((err) => {
-            console.error(err);
-            console.error(`[discord-html-transcripts] Failed to import 'sharp'. Image compression requires the 'sharp' package to be installed. Either install sharp or remove the compression options.`);
-        });
+        if (quality < 1 || quality > 100) throw new Error('Quality must be between 1 and 100');
+        // Hoist the sharp import so we don't pay it per image
+        Promise.resolve()
+            .then(() => __importStar(require('sharp')))
+            .then((s) => { this._sharpModule = s; })
+            .catch((err) => {
+                this.log('sharp import failed: %s', err && err.message ? err.message : err);
+            });
         this.compression = { quality, convertToWebP, options };
         return this;
     }
-    /**
-     * Builds the image saving callback.
-     */
     build() {
+        if (!this._limit) this._limit = createLimiter(this.maxConcurrent);
         return async (attachment) => {
-            // if the attachment is not an image, return null
-            if (!attachment.width || !attachment.height)
-                return undefined;
-            // if the max file size is set, check if the file size is within the limit
-            if (this.maxFileSize && attachment.size > this.maxFileSize * 1024)
-                return undefined;
-            // fetch the image
-            this.log(`Fetching attachment ${attachment.id}: ${attachment.url}`);
-            const response = await (0, undici_1.request)(attachment.url).catch((err) => {
-                console.error(`[discord-html-transcripts] Failed to download image for transcript: `, err);
-                return null;
-            });
-            if (!response)
-                return undefined;
-            const mimetype = response.headers['content-type'];
-            const buffer = await response.body.arrayBuffer().then((res) => Buffer.from(res));
-            this.log(`Finished fetching ${attachment.id} (${buffer.length} bytes)`);
-            // if the compression options are set, compress the image
-            if (this.compression) {
-                const sharp = await Promise.resolve().then(() => __importStar(require('sharp')));
-                this.log(`Compressing ${attachment.id} with 'sharp'`);
-                const sharpbuf = await sharp
-                    .default(buffer)
-                    .webp(Object.assign({ quality: this.compression.quality, force: this.compression.convertToWebP, effort: 2 }, this.compression.options))
-                    .toBuffer({ resolveWithObject: true });
-                this.log(`Finished compressing ${attachment.id} (${sharpbuf.info.size} bytes)`);
-                return `data:image/${sharpbuf.info.format};base64,${sharpbuf.data.toString('base64')}`;
-            }
-            // return the base64 string
-            return `data:${mimetype};base64,${buffer.toString('base64')}`;
+            if (!attachment.width || !attachment.height) return undefined;
+            if (this.maxFileSize && attachment.size > this.maxFileSize * 1024) return undefined;
+            return this._limit(() => this._fetchOne(attachment));
         };
     }
+    async _fetchOne(attachment) {
+        this.log('fetch %s %s', attachment.id, attachment.url);
+        const response = await (0, undici_1.request)(attachment.url).catch((err) => {
+            this.log('download failed for %s: %s', attachment.id, err && err.message ? err.message : err);
+            return null;
+        });
+        if (!response) return undefined;
+        const rawMime = response.headers['content-type'];
+        const mime = (0, utils_1.safeImageMime)(typeof rawMime === 'string' ? rawMime : '', 'image/png');
+        const arr = await response.body.arrayBuffer();
+        const buffer = Buffer.from(arr);
+        this.log('fetched %s (%d bytes, mime=%s)', attachment.id, buffer.length, mime);
+        if (this.compression) {
+            const sharp = this._sharpModule || (this._sharpModule = await __importStar(require('sharp')));
+            this.log('compressing %s with sharp', attachment.id);
+            const sharpbuf = await sharp
+                .default(buffer)
+                .webp(Object.assign({ quality: this.compression.quality, force: this.compression.convertToWebP, effort: 2 }, this.compression.options))
+                .toBuffer({ resolveWithObject: true });
+            return `data:image/${sharpbuf.info.format};base64,${sharpbuf.data.toString('base64')}`;
+        }
+        return `data:${mime};base64,${buffer.toString('base64')}`;
+    }
 }
 exports.TranscriptImageDownloader = TranscriptImageDownloader;
 TranscriptImageDownloader.log = (0, debug_1.default)('discord-html-transcripts:TranscriptImageDownloader');
-//# sourceMappingURL=images.js.map
+//# sourceMappingURL=images.js.map

package/dist/generator/index.js

@@ -1,66 +1,227 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
         for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = render;
+exports.renderToStream = renderToStream;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const static_1 = require("react-dom/static");
 const buildProfiles_1 = require("../utils/buildProfiles");
 const client_1 = require("../static/client");
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
-//const ssr_1 = require("@lit-labs/ssr");
 const transcript_1 = __importDefault(require("./transcript"));
 const utils_1 = require("../utils/utils");
-//const render_result_1 = require("@lit-labs/ssr/lib/render-result");
 const styles_1 = require("./renderers/components/styles");
 const DiscordImage_1 = require("./renderers/components/DiscordImage");
 const DiscordHighlightedCode_1 = require("./renderers/components/DiscordHighlightedCode");
-// read the package.json file and get the @derockdev/discord-components-core version
-let discordComponentsVersion = '^4.0.2';
+
+// Lock to an exact resolved version — semver ranges in src= aren't cacheable by CDNs.
+let discordComponentsVersion = '4.0.2';
 try {
     const packagePath = path_1.default.join(__dirname, '..', '..', 'package.json');
     const packageJSON = JSON.parse((0, fs_1.readFileSync)(packagePath, 'utf8'));
-    discordComponentsVersion = (_a = packageJSON.dependencies['@skyra/discord-components-core']) !== null && _a !== void 0 ? _a : discordComponentsVersion;
-    // eslint-disable-next-line no-empty
+    const v = (_a = packageJSON.dependencies['@skyra/discord-components-core']) !== null && _a !== void 0 ? _a : discordComponentsVersion;
+    const cleaned = String(v).replace(/^[\^~]/, '');
+    if (/^\d+\.\d+\.\d+/.test(cleaned)) discordComponentsVersion = cleaned;
+} catch (_b) { /* ignore */ }
+
+function computeStats(messages) {
+    let images = 0;
+    let humans = new Set();
+    for (const m of messages) {
+        if (m.attachments && m.attachments.forEach) {
+            m.attachments.forEach((a) => {
+                if (typeof a.contentType === 'string' && a.contentType.startsWith('image/')) images++;
+            });
+        }
+        if (m.author && !m.author.bot) humans.add(m.author.id);
+    }
+    return { messageCount: messages.length, participantCount: humans.size, imageCount: images };
+}
+
+function snowflakeToDate(id) {
+    try {
+        const DISCORD_EPOCH = 1420070400000n;
+        const ms = (BigInt(id) >> 22n) + DISCORD_EPOCH;
+        return new Date(Number(ms));
+    } catch (_e) { return null; }
+}
+
+function buildDateSeparators(messages, lang) {
+    // Returns an array same length as messages, each entry: separator string or null
+    const seps = new Array(messages.length).fill(null);
+    let lastYmd = null;
+    const fmt = new Intl.DateTimeFormat(lang === 'de' ? 'de-DE' : 'en-US', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' });
+    for (let i = 0; i < messages.length; i++) {
+        const m = messages[i];
+        const d = m.createdAt instanceof Date ? m.createdAt : snowflakeToDate(m.id);
+        if (!d) continue;
+        const ymd = `${d.getUTCFullYear()}-${d.getUTCMonth()}-${d.getUTCDate()}`;
+        if (ymd !== lastYmd) {
+            seps[i] = fmt.format(d);
+            lastYmd = ymd;
+        }
+    }
+    return seps;
 }
-catch (_b) { } // ignore errors
+
 async function render(_a) {
     var _b;
     var { messages, channel, callbacks } = _a, options = __rest(_a, ["messages", "channel", "callbacks"]);
-    const profiles = (0, buildProfiles_1.buildProfiles)(messages);
-    const { prelude } = await (0, static_1.prerenderToNodeStream)((0, jsx_runtime_1.jsxs)("html", { children: [(0, jsx_runtime_1.jsxs)("head", { children: [(0, jsx_runtime_1.jsx)("meta", { charSet: "utf-8" }), (0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), (0, jsx_runtime_1.jsx)("link", { rel: "preconnect", href: "https://cdn.jsdelivr.net/" }), (0, jsx_runtime_1.jsx)("link", { rel: "preconnect", href: "https://cdn.discordapp.com" }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.ggSansFont } }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: styles_1.globalStyles } }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: DiscordImage_1.DiscordAttachmentStyles } }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: DiscordHighlightedCode_1.DiscordHighlightStyles } }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/png", href: options.favicon === 'guild'
-                            ? channel.isDMBased()
-                                ? undefined
-                                : ((_b = channel.guild.iconURL({ size: 16, extension: 'png' })) !== null && _b !== void 0 ? _b : undefined)
-                            : options.favicon }), (0, jsx_runtime_1.jsx)("title", { children: channel.isDMBased() ? 'Direct Messages' : channel.name }), (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: {
-                            __html: client_1.scrollToMessage,
-                        } }), !options.hydrate && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: {
-                                    __html: `globalThis.$discordMessage={profiles:${JSON.stringify(await profiles)}}`,
-                                } }), (0, jsx_runtime_1.jsx)("script", { type: "module", src: `https://cdn.jsdelivr.net/npm/@skyra/discord-components-core@${discordComponentsVersion}/+esm` })] }))] }), (0, jsx_runtime_1.jsx)("body", { style: {
-                    margin: 0,
-                    minHeight: '100vh',
-                }, children: (0, jsx_runtime_1.jsx)(transcript_1.default, Object.assign({ messages: messages, channel: channel, callbacks: callbacks }, options)) }), options.hydrate && (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.revealSpoiler } })] }));
-    const markup = await (0, utils_1.streamToString)(prelude);
-          if (options.hydrate) {
-    const { render: renderLit } = await import('@lit-labs/ssr');
-    const result = renderLit(markup);
-    const { collectResult } = await import('@lit-labs/ssr/lib/render-result.js');
-    return await collectResult(result);
-  }
-    return markup;
+
+    const lang = options.language && client_1.defaultDicts[options.language] ? options.language : 'en';
+    const i18n = options.i18n
+        ? Object.fromEntries(Object.keys(client_1.defaultDicts).map((k) => [k, Object.assign({}, client_1.defaultDicts[k], options.i18n[k] || {})]))
+        : client_1.defaultDicts;
+
+    // Single-pass collector (profiles + extended in one walk)
+    const allCtx = await (0, buildProfiles_1.buildAllContext)(messages, channel).catch((e) => {
+        console.warn('[discord-html-transcripts-fix] buildAllContext failed:', e?.message || e);
+        return { profiles: {}, users: {}, roles: {}, channels: {} };
+    });
+
+    const stats = computeStats(messages);
+    const dateSeps = buildDateSeparators(messages, lang);
+
+    const globalData = {
+        profiles: allCtx.profiles,
+        users: allCtx.users,
+        roles: allCtx.roles,
+        channels: allCtx.channels,
+        lang,
+        i18n,
+        stats,
+    };
+
+    const renderContext = Object.assign({ lang, i18n, dateSeps, stats }, callbacks ? { callbacks } : {});
+
+    const docTree = (0, jsx_runtime_1.jsxs)("html", { lang, children: [
+        (0, jsx_runtime_1.jsxs)("head", { children: [
+            (0, jsx_runtime_1.jsx)("meta", { charSet: "utf-8" }),
+            (0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
+            (0, jsx_runtime_1.jsx)("link", { rel: "preconnect", href: "https://cdn.jsdelivr.net/" }),
+            (0, jsx_runtime_1.jsx)("link", { rel: "preconnect", href: "https://cdn.discordapp.com" }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.ggSansFont } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: styles_1.globalStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.mentionPopupStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.transcriptUtils } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.searchBarStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.lightboxStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.tocStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.i18nStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.dateSeparatorStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: DiscordImage_1.DiscordAttachmentStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: DiscordHighlightedCode_1.DiscordHighlightStyles } }),
+            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: extraStyles } }),
+            (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/png", href: options.favicon === 'guild'
+                    ? channel.isDMBased()
+                        ? undefined
+                        : ((_b = channel.guild.iconURL({ size: 16, extension: 'png' })) !== null && _b !== void 0 ? _b : undefined)
+                    : options.favicon }),
+            (0, jsx_runtime_1.jsx)("title", { children: channel.isDMBased() ? 'Direct Messages' : channel.name }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.scrollToMessage } }),
+            // Non-blocking inline JSON: type="application/json" so the parser doesn't pause
+            (0, jsx_runtime_1.jsx)("script", { id: "dht-data", type: "application/json", dangerouslySetInnerHTML: { __html: (0, utils_1.safeJsonForScript)(globalData) } }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: 'try{globalThis.$discordMessage=JSON.parse(document.getElementById("dht-data").textContent);}catch(e){globalThis.$discordMessage={};}' } }),
+            !options.hydrate && (0, jsx_runtime_1.jsx)("script", { type: "module", src: `https://cdn.jsdelivr.net/npm/@skyra/discord-components-core@${discordComponentsVersion}/+esm`, crossOrigin: "anonymous" }),
+        ] }),
+        (0, jsx_runtime_1.jsxs)("body", { style: { margin: 0, minHeight: '100vh' }, children: [
+            (0, jsx_runtime_1.jsx)(transcript_1.default, Object.assign({ messages, channel, callbacks }, options, renderContext)),
+            (0, jsx_runtime_1.jsx)(StatsFooter, { stats, lang, i18n }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.mentionPopup } }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.backToTop } }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.searchBar } }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.lightbox } }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.toc } }),
+            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.i18nSwitcher } }),
+            options.hydrate && (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.revealSpoiler } }),
+        ] })
+    ] });
+
+    const { prelude } = await (0, static_1.prerenderToNodeStream)(docTree);
+
+    if (options.hydrate) {
+        const markup = await (0, utils_1.streamToString)(prelude);
+        const { render: renderLit } = await import('@lit-labs/ssr');
+        const result = renderLit(markup);
+        const { collectResult } = await import('@lit-labs/ssr/lib/render-result.js');
+        return await collectResult(result);
+    }
+
+    if (options.returnType === 'stream' || options.stream) {
+        // Return the underlying Node stream — caller is responsible for piping.
+        return prelude;
+    }
+    return await (0, utils_1.streamToString)(prelude);
+}
+
+async function renderToStream(args) {
+    return render(Object.assign({}, args, { returnType: 'stream' }));
+}
+
+function StatsFooter({ stats, lang, i18n }) {
+    const dict = (i18n && i18n[lang]) || (i18n && i18n.en) || {};
+    return (0, jsx_runtime_1.jsxs)("footer", { className: "dht-stats", children: [
+        (0, jsx_runtime_1.jsx)("span", { "data-i18n": "statsMessages", "data-i18n-params": JSON.stringify({ n: stats.messageCount }), children: (dict.statsMessages || '{n} messages').replace('{n}', stats.messageCount) }),
+        ' · ',
+        (0, jsx_runtime_1.jsx)("span", { "data-i18n": "statsParticipants", "data-i18n-params": JSON.stringify({ n: stats.participantCount }), children: (dict.statsParticipants || '{n} participants').replace('{n}', stats.participantCount) }),
+        ' · ',
+        (0, jsx_runtime_1.jsx)("span", { "data-i18n": "statsImages", "data-i18n-params": JSON.stringify({ n: stats.imageCount }), children: (dict.statsImages || '{n} images').replace('{n}', stats.imageCount) }),
+    ] });
 }
-//# sourceMappingURL=index.js.map
+
+const extraStyles = `
+.dht-pinned-indicator{position:absolute;top:6px;right:8px;font-size:12px;opacity:.6}
+.dht-app-badge,.dht-popup-badge{background:#5865F2;color:#fff;font-size:10px;padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:middle;font-weight:600}
+.dht-edit-marker{color:#949ba4;font-size:11px;margin-left:4px;cursor:help}
+.dht-suppressed{color:#6e727a;font-size:11px;font-style:italic}
+.dht-stickers{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
+.dht-sticker{width:160px;height:160px;border-radius:8px;object-fit:contain;background:rgba(255,255,255,.02)}
+.dht-poll{border:1px solid #2b2d31;background:#1e1f22;border-radius:8px;padding:12px 14px;margin-top:6px;max-width:480px}
+.dht-poll-q{font-weight:700;margin-bottom:8px;font-size:15px}
+.dht-poll-answers{display:flex;flex-direction:column;gap:6px}
+.dht-poll-a{background:#2b2d31;border-radius:6px;padding:6px 10px;position:relative;overflow:hidden}
+.dht-poll-bar{position:absolute;top:0;left:0;height:100%;background:rgba(88,101,242,.25);z-index:0}
+.dht-poll-line{position:relative;z-index:1;display:flex;justify-content:space-between;gap:8px}
+.dht-poll-pct{color:#b5bac1;font-size:12px;white-space:nowrap}
+.dht-poll-foot{margin-top:8px;font-size:11px;color:#949ba4}
+.dht-voice{display:inline-flex;align-items:center;gap:8px;background:#2b2d31;padding:6px 12px;border-radius:8px;color:#dbdee1;font-size:13px;margin:4px 0}
+.dht-voice-wave svg{display:block}
+.dht-voice-dur{color:#b5bac1;font-size:11px}
+.dht-forwarded-wrap{margin:4px 0}
+.dht-forwarded{border-left:3px solid #5865F2;background:rgba(88,101,242,.06);padding:6px 10px;border-radius:0 6px 6px 0;margin-bottom:4px}
+.dht-forwarded-head{font-size:12px;color:#949ba4;margin-bottom:2px}
+.dht-forwarded-icon{margin-right:4px}
+.dht-forwarded-body{color:#dbdee1}
+.dht-forwarded-attachments{margin-top:4px;font-size:11px;color:#949ba4}
+.dht-edit-history{font-size:12px;color:#b5bac1;margin-top:4px}
+.dht-edit-history summary{cursor:pointer;color:#949ba4}
+.dht-edit-history li{margin-top:4px}
+.dht-edit-history time{display:block;color:#6e727a;font-size:10px;margin-bottom:2px}
+.dht-thread-badge{display:inline-block;background:#3f4248;color:#dbdee1;font-size:10px;padding:1px 6px;border-radius:4px;margin-left:6px}
+.dht-thread-badge--locked{background:#dc3545}
+.dht-thread-badge--archived{background:#6c757d}
+.dht-gifv{max-width:400px;max-height:300px;border-radius:6px}
+.dht-stats{margin:24px auto;padding:12px;text-align:center;color:#b5bac1;font-size:13px;font-family:"gg sans",sans-serif;border-top:1px solid #2b2d31;max-width:800px}
+.dht-mention--cmd{background:rgba(88,101,242,.22)!important}
+.dht-embed-provider{color:#949ba4;font-size:11px;margin-bottom:2px}
+.dht-embed-video{margin-top:6px;font-size:13px}
+.dht-embed-video a{color:#8ab4ff;text-decoration:none}
+.dht-embed-video a:hover{text-decoration:underline}
+.dht-automod-rule{font-size:11px;color:#949ba4}
+.dht-automod-content{margin:4px 0 0 12px;color:#dbdee1;border-left:3px solid #f23f42;padding-left:8px;font-size:13px}
+.dht-reaction--burst{box-shadow:inset 0 0 0 1px gold}
+`;
+//# sourceMappingURL=index.js.map