discord-html-transcripts-fix 2.1.0 → 2.3.0

package/README.md

@@ -14,38 +14,20 @@ Forked from [discord-html-transcripts](https://github.com/ItzDerock/discord-html
 - **discord.js v14 or v15** — required peer dependency.
 - **[`sharp`](https://sharp.pixelplumbing.com/)** — *optional* peer dependency, only needed if you use `.withCompression()` to compress / convert transcript images to WebP.
 
+The **generated HTML** additionally reaches out to third-party CDNs when it is *opened*
+— jsDelivr for the `<discord-*>` component runtime and the gg sans font, cdnjs for
+Twemoji SVGs. Set [`inlineAssets: true`](#self-contained-transcripts) to embed them and
+get a file that renders offline.
+
 ## Install
 
 ```bash
 npm install discord-html-transcripts-fix
 ```
 
-`discord.js` is the only **required** peer dependency — React, Lit SSR, the markdown parser, etc. are installed automatically. `sharp` is an optional peer (image compression only).
-
-<details>
-<summary>Silencing the <code>node-domexception</code> deprecation warning on install</summary>
-
-Lit SSR depends on `node-fetch`, which still pulls in the deprecated
-`fetch-blob → node-domexception` chain, so `npm install` prints:
+`discord.js` is the only **required** peer dependency — React, the markdown parser, etc. are installed automatically. `sharp` is an optional peer (image compression only).
 
-```
-npm warn deprecated node-domexception@1.0.0: Use your platform's native DOMException instead
-```
-
-It is cosmetic — install-time only, never at runtime, and `npm audit` reports nothing
-for it. If you want it gone, swap `node-fetch` for a dependency-free drop-in in **your
-own** `package.json` (npm only honours `overrides` in the root project, so this cannot
-be shipped from here):
-
-```json
-{
-  "overrides": {
-    "node-fetch": "npm:node-fetch-native@^1.6.7"
-  }
-}
-```
-
-</details>
+The install is clean: no deprecation warnings and no `npm audit` findings.
 
 ## Quick start
 
@@ -85,9 +67,11 @@ const stream = await createTranscript(channel, {
 | `filter` | `(m) => boolean` | `() => true` | Predicate to filter messages. |
 | `returnType` | `'attachment'` \| `'buffer'` \| `'string'` \| `'stream'` | `'attachment'` | Return value shape. In TypeScript pass the `ExportReturnType` enum. `'stream'` returns a Node `Readable` and is best for 5k+ message exports. |
 | `filename` | `string` | `transcript-{channel-id}.html` | Output filename when returning as attachment. |
-| `saveImages` | `boolean` | `false` | Download images and inline them as base64 data URLs. |
+| `saveImages` | `boolean` | `false` | Download image **attachments** and inline them as base64 data URLs. Avatars, embed images and custom emoji keep loading from Discord. |
 | `favicon` | `'guild'` \| `string` | `'guild'` | Page favicon — `'guild'` uses the server icon, or pass a URL. |
-| `hydrate` | `boolean` | `false` | Server-side hydrate via `@lit-labs/ssr` (slower; usually leave off). |
+| `hydrate` | `boolean` | `false` | Enables the client-side spoiler-reveal script. |
+| `inlineAssets` | `boolean` | `false` | Embed the component runtime, the gg sans font and the emoji so the file renders without third-party CDNs. See below. |
+| `inlineAssetsTimeout` | `number` | `30000` | Timeout in ms for each of those downloads, connection setup included. |
 | `dateFormat` | `'dd/mm/yyyy'` \| `'mm/dd/yyyy'` | `'dd/mm/yyyy'` | Date order for message timestamps older than yesterday. |
 | `timeFormat` | `'24h'` \| `'12h'` | `'24h'` | Clock format for message timestamps — `07:16` vs `07:16 AM`. |
 | `language` | `'en'` \| `'de'` | `'en'` | UI language for participant labels, filter strings, etc. |
@@ -97,6 +81,58 @@ const stream = await createTranscript(channel, {
 | `poweredBy` | `boolean` | `false` | Show the original "Powered by discord-html-transcripts" credit link. Only renders when `statsFooter` is disabled. |
 | `callbacks` | `{ resolveUser, resolveRole, resolveChannel, resolveImageSrc }` | — | Custom resolvers for mentions / image URLs. |
 
+### Self-contained transcripts
+
+By default the rendered file is not standalone: opening it fetches the `<discord-*>`
+component runtime and the gg sans font from jsDelivr and the emoji SVGs from cdnjs.
+Offline, on a network that blocks those CDNs, or after a CDN outage the transcript
+renders unstyled — and every viewer's IP reaches both CDNs, which can matter for
+archived tickets.
+
+```js
+await createTranscript(channel, {
+    inlineAssets: true,
+    saveImages: true, // also embeds image attachments
+});
+```
+
+`inlineAssets` embeds the component runtime, all ten gg sans font files and every emoji
+the transcript shows, so opening the file makes **no request to a third-party CDN**.
+Verified in a browser: it renders like the CDN version — reactions included — loads the
+runtime from about 35 `blob:` modules, and the only remaining network request goes to
+Discord's own CDN for avatars.
+
+| | Default | `inlineAssets: true` |
+| --- | --- | --- |
+| File size | ~72 kB | ~960 kB |
+| Hosts contacted on open | jsDelivr, cdnjs, Discord CDN | Discord CDN only (`cdn.discordapp.com`, `media.discordapp.net`) |
+| Without network | unstyled | styled; avatars, and attachments unless `saveImages` is set, are missing |
+
+What stays on Discord's CDN: avatars always; attachment images unless `saveImages` is
+set; embed images, stickers, custom emoji and Components V2 media. Emoji typed as URLs
+in messages are never rewritten — only the images the renderer itself emits are
+embedded.
+
+The downloads happen once per process and are cached, and concurrent exports share
+them, so the first transcript pays about a second and later ones are unaffected. If an
+asset cannot be fetched the CDN reference is kept and a warning naming the cause is
+logged — the export never fails over this:
+
+- A CDN that is unreachable or answers 5xx is given up on after the first failed wave
+  instead of waiting out the timeout for every file, and retried a minute later.
+- A response that is not the expected file (a captive portal or error page answering
+  `200`) is never embedded and never cached.
+- Emoji newer than Twemoji 14.0.2 do not exist on the CDN at all; they are reported once
+  per process instead of on every export.
+- A bug in the inliner itself goes to `console.error` with its stack rather than being
+  reported as a CDN problem.
+
+`inlineAssetsTimeout` (default `30000` ms) caps each download, connection setup
+included; numeric strings from environment variables are accepted. Per-file details are
+available with `DEBUG=discord-html-transcripts:selfContained`. With a stream return type
+the document is buffered before it is streamed, so `stream` saves no memory in
+combination with `inlineAssets`.
+
 ### Message timestamps
 
 Timestamps are worded the way Discord words them, relative to when the transcript was
@@ -193,11 +229,11 @@ In addition to plain text, replies, embeds, and attachments, the viewer supports
 - **Action rows** — buttons with proper spacing and Discord-style colors (`primary`, `secondary`, `success`, `destructive`)
 - **Stickers** — PNG, APNG, GIF, Lottie placeholder
 - **Polls** — question, answer bars with vote counts and percentages, expiry
-- **Forwarded messages** (`messageSnapshots`) — quoted-block style with original author, recursive nesting
+- **Forwarded messages** (`messageSnapshots`) — quoted-block style with their text, attachments, embeds and components, naming the source channel (same server only, and never the original author, which Discord hides), recursive nesting; a forward whose snapshot is missing is marked as unavailable
 - **Voice messages** — `🎤` indicator, inline SVG waveform from `attachment.waveform`, duration
 - **Pinned messages** — Discord-style amber left rail (no extra icon clutter)
 - **Slash command interactions** — `{user} used /cmd` header + clickable pill that reveals parameters
-- **System messages** — `ChannelPinnedMessage`, `ChannelNameChange`, `ChannelIconChange`, `ThreadCreated`, `ChatInputCommand`, `ContextMenuCommand`, `Call`, `ChannelFollowAdd`, `RecipientRemove`, `RoleSubscriptionPurchase`, guild incident reports, poll result, AutoMod actions
+- **System messages** — `ChannelPinnedMessage`, `ChannelNameChange`, `ChannelIconChange`, `ThreadCreated`, `ChatInputCommand`, `ContextMenuCommand`, `Call`, `ChannelFollowAdd`, `RecipientRemove`, `RoleSubscriptionPurchase`, guild incident reports, poll result, AutoMod actions, and any other type as a neutral "System message" line
 - **Cross-guild replies** — show a "Message from another server" pill
 - **Burst / super-reactions** flagged
 - **Thread state badges** — `Archived`, `Locked`
@@ -217,16 +253,33 @@ In addition to plain text, replies, embeds, and attachments, the viewer supports
 - **Critical fix** markdown links with `javascript:`, `data:`, `vbscript:` and other 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)
+- **Hardened** URLs that components render without checking them: image sources (embed author icons, thumbnails, images and footer icons, Components V2 thumbnails and media galleries) only pass as web URLs, inline images or `attachment://`; links (link buttons, Components V2 file links) only as web, `mailto:`, `discord:` or `attachment://` links. A `javascript:` file link in a Components V2 message used to stay clickable
 - **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
+- **Fix** a failed image download with `saveImages` — or a custom `resolveImageSrc` that throws — no longer fails the whole export: the image keeps its link and a warning names it
 - **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** `statsFooter` (custom template / `false`) is now forwarded end-to-end — it used to be silently ignored by `createTranscript`/`generateFromMessages`
+- **Fix** `dateFormat`, `timeFormat`, `inlineAssets` and `inlineAssetsTimeout` are forwarded by `createTranscript`/`generateFromMessages` — 2.1.0 and 2.2.0 silently ignored them, the same way `statsFooter` once was. A test derived from the typings now fails whenever a declared option does not reach the renderer
+- **Fix** `hydrate` combined with `returnType: 'stream'` / `stream: true` returns a `Readable` again instead of a string
+- **Fix** `inlineAssets` hardened now that it actually runs: reaction emoji render as images instead of base64 text, user-typed URLs are never rewritten, the timeout also bounds connection setup, a CDN outage is not waited out per file, error pages are never embedded or cached, and a bug in the inliner is no longer reported as a CDN problem
+- **Fix** `inlineAssets` + stream yields Buffer chunks like every other stream (a single string chunk broke `Buffer.concat`)
+- **Fix** invalid `dateFormat` / `timeFormat` / `inlineAssetsTimeout` values are reported instead of silently replaced; case and numeric strings are tolerated
+- **Fix** forwarded messages show their content — discord.js hands over `messageSnapshots` as a Collection, and an array check left every forward empty ("Message could not be loaded."). A forward is no longer mistaken for a reply or a cross-server message (on discord.js before 14.16 too), its header names the source channel when that channel is on the same server, and a forward whose snapshot is missing says so. The original author is never shown, as in Discord, even though discord.js hands it over when the bot has the original message cached
+- **Fix** forwarded messages show their embeds and Components V2 content in full instead of a "1 embed" count, and forwarded images go through `saveImages` / `resolveImageSrc` like any other instead of staying on Discord's expiring CDN links. They also count in the stats footer and for the image, attachment and embed filters
+- **Fix** link previews, GIFs (`gifv`) and video embeds get their own layout — discord.js keeps the embed type only in `embed.data`, so every embed rendered as `rich` and an image preview showed up as an empty card with a small thumbnail
+- **Fix** super reactions and voice-message durations show — the renderer read the raw API names (`count_details`, `burst_colors`, `duration_secs`), which discord.js renames
+- **Fix** reply authors get their role color, and embed footer icons and audio file sizes show — the values were passed as camelCase attributes, which HTML lowercases, so the components never received them. Members without a colored role are no longer painted black
+- **Fix** reaction counts of 1,000 and more showed `NaN` — the abbreviated "1.5K" went to a component that only reads numbers; the full count is shown now
+- **Fix** system messages of types without their own wording — Server Discovery notices, invite reminders, premium upsells, purchase notifications, and any type Discord adds later — were silently dropped from the transcript. They appear as a neutral "System message" line with Discord's text now (new i18n key `systemMessage`)
+- **Fix** the stats footer counts one of something in the singular — "1 message · 1 participant · 1 image" instead of "1 messages", in German too (new i18n keys `statsMessage`, `statsParticipant`, `statsImage`)
+- **Fix** select menu options show their emoji instead of its URL as text, and AutoMod alerts name the channel instead of printing `<#id>` (its id remains when the server does not know it)
+- **Fix** profile cards no longer depend on the order users appear in: someone first seen without member data, as the user of a slash command for example, now gets their nickname, roles and color from their own messages. One malformed user or message in plain-object input no longer drops every profile of the transcript, and a guild member that cannot be read falls back to the user's own name and avatar
 - **Fix** embed fields render through a proper async component (was an inline `async` arrow inside `.map()`)
 - **Fix** `JoinMessage` text is 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
@@ -253,7 +306,8 @@ In addition to plain text, replies, embeds, and attachments, the viewer supports
 - **`sharp` declared as an optional peer dependency** — needed only for `.withCompression()`, no longer a hidden requirement
 - **Discord-style message timestamps** — today shows the bare time (`07:16`), yesterday reads `Yesterday at 07:16`, anything older gets `11/08/2026 07:16`. Configurable via `dateFormat` and `timeFormat`. Previously the raw ISO string (`2026-08-14T07:16:07.422Z`) was rendered, because the web component only formats real `Date` objects and an HTML attribute always arrives as a string
 - **`hydrate: true` actually works** — the markup was handed to Lit as a plain string, which Lit HTML-escapes, so the option emitted a page of visible `&lt;!DOCTYPE html&gt;…` source text instead of a transcript
-- **`lit` added as an explicit dependency** — it was previously only reachable as a transitive dependency of `@lit-labs/ssr`, which does not resolve under pnpm's strict layout
+- **`@lit-labs/ssr` and `lit` removed entirely** — the `hydrate` path pushed the finished markup through Lit SSR, which was measured to contribute exactly four inert `<!--lit-part-->` comments and nothing else, since the page never loads a Lit hydration client. Two dependencies and the deprecated `node-fetch → fetch-blob → node-domexception` chain for four comments. `hydrate: true` keeps its real effect (the spoiler-reveal script), and the install is now warning-free
+- **`inlineAssets` option** — embeds the component runtime, the gg sans font and the emoji so a transcript opens without any third-party CDN
 - **TypeScript declarations match runtime** — `ExportReturnType.Stream`, `language`, `i18n`, `stream`, and `withConcurrency()` are now exposed in the types
 - `discord.js` remains the only **required** peer dependency
 
@@ -267,6 +321,18 @@ In addition to plain text, replies, embeds, and attachments, the viewer supports
 | `TranscriptImageDownloader` | Builder for a custom image-saving callback (`withMaxSize`, `withConcurrency`, `withCompression`, `build`). |
 | `DiscordMessages` | The underlying React component, for advanced/custom rendering. |
 
+## Development
+
+```bash
+npm test
+npm run test:update
+```
+
+`npm test` runs the unit tests and the golden transcripts: every scenario in
+`tests/fixtures/scenarios.js` is rendered from real discord.js objects and compared with
+`tests/golden/`. After an intended change to the output, `npm run test:update` rewrites
+the snapshots — review the diff before committing it.
+
 ## License
 
 [Apache-2.0](./LICENSE) — same as the original package.

package/dist/generator/index.js

@@ -20,25 +20,15 @@ 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 stream_1 = require("stream");
 const path_1 = __importDefault(require("path"));
+const selfContained_1 = require("../utils/selfContained");
 const transcript_1 = __importDefault(require("./transcript"));
 const utils_1 = require("../utils/utils");
 const styles_1 = require("./renderers/components/styles");
 const DiscordImage_1 = require("./renderers/components/DiscordImage");
 const DiscordHighlightedCode_1 = require("./renderers/components/DiscordHighlightedCode");
 
-// Warn at most once per process when hydration is requested without @lit-labs/ssr.
-let warnedMissingLitSsr = false;
-
-// Moves <!DOCTYPE html> back to the very front of the document. Lit SSR emits
-// <!--lit-part--> markers around its result, and a comment before the doctype
-// makes browsers fall back to quirks mode.
-function hoistDoctype(markup) {
-    const match = markup.match(/<!DOCTYPE\s+html[^>]*>/i);
-    if (!match || markup.startsWith(match[0])) return markup;
-    return match[0] + markup.slice(0, match.index) + markup.slice(match.index + match[0].length);
-}
-
 // Lock to an exact resolved version — semver ranges in src= aren't cacheable by CDNs.
 let discordComponentsVersion = '4.0.2';
 try {
@@ -49,16 +39,26 @@ try {
     if (/^\d+\.\d+\.\d+/.test(cleaned)) discordComponentsVersion = cleaned;
 } catch (_b) { /* ignore */ }
 
+// Images of a message, including those it forwards — they are part of the transcript too.
+function countImages(m, depth = 0) {
+    let n = 0;
+    if (m?.attachments && typeof m.attachments.forEach === 'function') {
+        m.attachments.forEach((a) => {
+            if (typeof a?.contentType === 'string' && a.contentType.startsWith('image/')) n++;
+        });
+    }
+    if (depth < 5 && m?.messageSnapshots && typeof m.messageSnapshots.forEach === 'function') {
+        m.messageSnapshots.forEach((snap) => { n += countImages(snap?.message || snap, depth + 1); });
+    }
+    return n;
+}
+
 function computeStats(messages) {
     let images = 0;
     let humans = new Set();
     let firstTs = null, lastTs = null;
     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++;
-            });
-        }
+        images += countImages(m);
         if (m.author && !m.author.bot) humans.add(m.author.id);
         const ts = m.createdAt instanceof Date ? m.createdAt.getTime() : (snowflakeToDate(m.id)?.getTime() || null);
         if (ts) {
@@ -114,7 +114,7 @@ async function render(_a) {
 
     // 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);
+        console.warn('[discord-html-transcripts-fix] buildAllContext failed:', e);
         return { profiles: {}, users: {}, roles: {}, channels: {} };
     });
 
@@ -192,44 +192,27 @@ async function render(_a) {
 
     const { prelude } = await (0, static_1.prerenderToNodeStream)(docTree);
 
-    if (options.hydrate) {
-        const markup = await (0, utils_1.streamToString)(prelude);
-        // @lit-labs/ssr and lit are regular dependencies, so this normally always
-        // resolves. The guard only covers a broken or partial install: instead of
-        // failing the whole export we fall back to the non-SSR'd markup, which is
-        // still a fully working transcript because the <discord-*> definitions are
-        // loaded from the CDN module tag above regardless of this branch.
-        try {
-            const { render: renderLit } = await import('@lit-labs/ssr');
-            const { html: litHtml } = await import('lit');
-            const { unsafeHTML } = await import('lit/directives/unsafe-html.js');
-            const { collectResult } = await import('@lit-labs/ssr/lib/render-result.js');
-            // `markup` must go through unsafeHTML: handing lit a bare string makes
-            // it a text value, which lit HTML-escapes — that turned the whole
-            // transcript into visible &lt;!DOCTYPE html&gt;… source text.
-            const result = renderLit(litHtml`${unsafeHTML(markup)}`);
-            const rendered = await collectResult(result);
-            // lit wraps its output in <!--lit-part--> markers. Any comment ahead of
-            // the doctype pushes browsers into quirks mode and wrecks the layout,
-            // so the doctype has to lead the document again.
-            return hoistDoctype(rendered);
-        }
-        catch (err) {
-            // Only a missing module triggers the fallback — a genuine render
-            // failure must still surface instead of being silently swallowed.
-            const code = err && err.code;
-            if (code !== 'ERR_MODULE_NOT_FOUND' && code !== 'MODULE_NOT_FOUND') throw err;
-            if (!warnedMissingLitSsr) {
-                warnedMissingLitSsr = true;
-                console.warn('[discord-html-transcripts-fix] `hydrate: true` could not load @lit-labs/ssr / lit, ' +
-                    'although both ship as dependencies of this package. Returning non-hydrated markup — the ' +
-                    'transcript still renders correctly. Reinstalling your dependencies should fix this.');
-            }
-            return markup;
-        }
+    // `hydrate` needs no branch of its own here. It used to push the finished
+    // markup through @lit-labs/ssr, which contributed only four inert
+    // <!--lit-part--> comments and was removed; its remaining effect, the
+    // spoiler-reveal script, is already part of the tree above. A leftover
+    // `if (options.hydrate) return string` kept overriding the stream contract,
+    // so hydrate + stream handed callers a string where they expect a Readable.
+    const wantsStream = options.returnType === 'stream' || options.stream;
+
+    if (options.inlineAssets) {
+        // Inlining rewrites the finished document, so it cannot be streamed as it
+        // is produced. The stream contract is still honoured — the buffered result
+        // is handed back as a Readable.
+        const markup = await (0, selfContained_1.inlineExternalAssets)(await (0, utils_1.streamToString)(prelude), {
+            timeout: options.inlineAssetsTimeout,
+        });
+        // Same chunk type as the plain stream: Buffers, not one object-mode string
+        // (consumers that Buffer.concat() the chunks would otherwise throw).
+        return wantsStream ? stream_1.Readable.from([Buffer.from(markup, 'utf8')], { objectMode: false }) : markup;
     }
 
-    if (options.returnType === 'stream' || options.stream) {
+    if (wantsStream) {
         // Return the underlying Node stream — caller is responsible for piping.
         return prelude;
     }
@@ -281,10 +264,13 @@ function renderStatsFooter(stats, lang, i18n, opts) {
     }
 
     const dict = (i18n && i18n[lang]) || (i18n && i18n.en) || {};
+    // "1 message", not "1 messages".
+    const count = (n, one, many, fallbackOne, fallbackMany) =>
+        (n === 1 ? (dict[one] || fallbackOne) : (dict[many] || fallbackMany)).replace('{n}', String(n));
     const parts = [
-        (dict.statsMessages || '{n} messages').replace('{n}', values.messages),
-        (dict.statsParticipants || '{n} participants').replace('{n}', values.participants),
-        (dict.statsImages || '{n} images').replace('{n}', values.images),
+        count(stats.messageCount, 'statsMessage', 'statsMessages', '{n} message', '{n} messages'),
+        count(stats.participantCount, 'statsParticipant', 'statsParticipants', '{n} participant', '{n} participants'),
+        count(stats.imageCount, 'statsImage', 'statsImages', '{n} image', '{n} images'),
     ];
     if (values.from && values.to) parts.push(values.from + ' → ' + values.to);
     if (values.span) parts.push(values.span);
@@ -329,6 +315,7 @@ discord-action-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin
 .dht-forwarded-icon{margin-right:4px}
 .dht-forwarded-body{color:#dbdee1}
 .dht-forwarded-attachments{margin-top:4px;font-size:11px;color:#949ba4}
+.dht-forwarded-media{margin-top:4px}
 .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}

package/dist/generator/renderers/attachment.js

@@ -23,7 +23,17 @@ async function Attachment({ attachment, context, message }) {
 
     switch (attachmentType) {
         case types_1.AttachmentTypes.Image: {
-            const downloaded = await context.callbacks.resolveImageSrc(attachment.toJSON(), message.toJSON());
+            let downloaded;
+            try {
+                downloaded = await context.callbacks.resolveImageSrc(attachment.toJSON(), message.toJSON());
+            }
+            catch (err) {
+                // Rendering runs in async components outside the per-message boundary: a
+                // failed download (saveImages, a custom resolver) used to reject the whole
+                // export. The image keeps its link instead.
+                console.warn('[discord-html-transcripts-fix] could not save image', attachment.id, (0, utils_1.describeError)(err));
+                downloaded = undefined;
+            }
             if (downloaded !== null) {
                 url = downloaded ?? url;
             }
@@ -37,8 +47,10 @@ async function Attachment({ attachment, context, message }) {
             return (0, jsx_runtime_1.jsx)("discord-video-attachment", { slot: "attachments", href: url }, attachment.id);
         }
         case types_1.AttachmentTypes.Audio: {
-            // Voice messages have waveform + duration_secs — message.js renders the indicator
-            return (0, jsx_runtime_1.jsx)("discord-audio-attachment", { slot: "attachments", href: url, bytes: bytes, bytesUnit: bytesUnit, name: attachment.name, title: attachment.description || undefined }, attachment.id);
+            // Voice messages have waveform + duration_secs — message.js renders the indicator.
+            // "bytes-unit", like the file attachment below: HTML lowercases attribute
+            // names, and `bytesUnit` arrived as `bytesunit`, which is not observed.
+            return (0, jsx_runtime_1.jsx)("discord-audio-attachment", { slot: "attachments", href: url, bytes: bytes, "bytes-unit": bytesUnit, name: attachment.name, title: attachment.description || undefined }, attachment.id);
         }
         case types_1.AttachmentTypes.File: {
             return (0, jsx_runtime_1.jsx)("discord-file-attachment", { slot: "attachments", href: url, bytes: bytes, "bytes-unit": bytesUnit, name: attachment.name, title: attachment.description || undefined }, attachment.id);

package/dist/generator/renderers/components/Media Gallery.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("./utils");
+const utils_2 = require("../../../utils/utils");
 function DiscordMediaGallery({ component }) {
     if (!component.items || component.items.length === 0) {
         return null;
@@ -10,7 +11,7 @@ function DiscordMediaGallery({ component }) {
     const imagesToShow = component.items.slice(0, 10);
     const hasMore = component.items.length > 10;
     return ((0, jsx_runtime_1.jsx)("div", { style: (0, utils_1.getGalleryLayout)(count), children: imagesToShow.map((media, idx) => {
-        const url = media.media.url;
+        const url = (0, utils_2.safeImageSrc)(media.media?.url);
         const isVideo = typeof url === 'string' && /\.(mp4|webm|mov)(\?|$)/i.test(url);
         const img = isVideo
             ? (0, jsx_runtime_1.jsx)("video", { src: url, autoPlay: true, loop: true, muted: true, playsInline: true, style: { width: '100%', height: '100%', objectFit: 'cover' } })

package/dist/generator/renderers/components/Select Menu.js

@@ -19,13 +19,19 @@ function DiscordSelectMenu({ component, }) {
                     border: '1px solid #1e1f22',
                     maxHeight: '320px',
                     overflowY: 'auto',
-                }, children: component.options.map((option, idx) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: component.options.map((option, idx) => {
+                    // parseDiscordEmoji returns an image URL — empty when the emoji has
+                    // neither id nor name. As plain children it showed up as raw URL text
+                    // in the opened menu instead of the emoji.
+                    const emojiSrc = option.emoji ? (0, utils_1.parseDiscordEmoji)(option.emoji) : '';
+                    return ((0, jsx_runtime_1.jsxs)("div", { style: {
                         padding: '8px 12px',
                         cursor: 'pointer',
                         display: 'flex',
                         alignItems: 'center',
                         borderBottom: idx < component.options.length - 1 ? '1px solid #1e1f22' : 'none',
-                    }, children: [option.emoji && (0, jsx_runtime_1.jsx)("span", { style: { marginRight: '8px' }, children: (0, utils_1.parseDiscordEmoji)(option.emoji) }), (0, jsx_runtime_1.jsx)("span", { children: option.label })] }, idx))) }))] }));
+                    }, children: [emojiSrc && (0, jsx_runtime_1.jsx)("span", { style: { marginRight: '8px', display: 'flex', alignItems: 'center' }, children: (0, jsx_runtime_1.jsx)("img", { src: emojiSrc, alt: option.emoji.name || 'emoji', style: { width: '16px', height: '16px' } }) }), (0, jsx_runtime_1.jsx)("span", { children: option.label })] }, idx));
+                }) }))] }));
 }
 exports.default = DiscordSelectMenu;
 //# sourceMappingURL=Select%20Menu.js.map

package/dist/generator/renderers/components.js

@@ -30,7 +30,10 @@ function ComponentRow({ component, id, context, }) {
             return ((0, jsx_runtime_1.jsx)(Container_1.default, { accentColor: accentColor, spoiler: spoiler, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: component.components.map((nestedComponent, id) => ((0, jsx_runtime_1.jsx)(ComponentRow, { component: nestedComponent, id: id, context: context }, id))) }) }, id));
         }
         case discord_js_1.ComponentType.File: {
-            const attachmentComponent = (0, jsx_runtime_1.jsx)("discord-file-attachment", { href: component.file.url });
+            // <discord-file-attachment> turns href into a link without checking it.
+            const fileHref = (0, utils_1.safeLinkHref)(component.file?.url);
+            // A rejected link gets no href at all: "#" would open the transcript itself.
+            const attachmentComponent = (0, jsx_runtime_1.jsx)("discord-file-attachment", { href: fileHref === '#' ? undefined : fileHref });
             if (component.spoiler) {
                 return ((0, jsx_runtime_1.jsx)("discord-spoiler", { slot: "attachment", children: attachmentComponent }, component.id));
             }
@@ -54,7 +57,7 @@ function Component({ component, id, }) {
     var _a;
     switch (component.type) {
         case discord_js_1.ComponentType.Button:
-            return ((0, jsx_runtime_1.jsx)(Button_1.default, { type: styles_1.ButtonStyleMapping[component.style], url: (_a = component.url) !== null && _a !== void 0 ? _a : undefined, emoji: component.emoji ? (0, utils_1.parseDiscordEmoji)(component.emoji) : undefined, children: component.label }, id));
+            return ((0, jsx_runtime_1.jsx)(Button_1.default, { type: styles_1.ButtonStyleMapping[component.style], url: (_a = component.url) !== null && _a !== void 0 ? (0, utils_1.safeLinkHref)(_a) : undefined, emoji: component.emoji ? (0, utils_1.parseDiscordEmoji)(component.emoji) : undefined, children: component.label }, id));
         case discord_js_1.ComponentType.StringSelect:
         case discord_js_1.ComponentType.UserSelect:
         case discord_js_1.ComponentType.RoleSelect:
@@ -62,7 +65,7 @@ function Component({ component, id, }) {
         case discord_js_1.ComponentType.ChannelSelect:
             return (0, jsx_runtime_1.jsx)(Select_Menu_1.default, { component: component }, id);
         case discord_js_1.ComponentType.Thumbnail:
-            return (0, jsx_runtime_1.jsx)(Thumbnail_1.default, { url: component.media.url }, id);
+            return (0, jsx_runtime_1.jsx)(Thumbnail_1.default, { url: (0, utils_1.safeImageSrc)(component.media?.url) }, id);
         default:
             return undefined;
     }

package/dist/generator/renderers/content.js

@@ -136,7 +136,7 @@ async function MessageSingleASTNode({ node, context }) {
     try {
         return await renderASTNode(node, context);
     } catch (err) {
-        console.warn('[discord-html-transcripts-fix] AST node render failed:', err && err.message ? err.message : err);
+        console.warn('[discord-html-transcripts-fix] AST node render failed:', err);
         try {
             if (typeof node.content === 'string') return node.content;
             if (Array.isArray(node.content)) return (0, jsx_runtime_1.jsx)(MessageASTNodes, { nodes: node.content, context });

package/dist/generator/renderers/embed.js

@@ -16,17 +16,28 @@ function t(context, key, fallback) {
 }
 
 async function DiscordEmbed({ embed, context }) {
-    const type = embed.type || 'rich';
+    // discord.js' Embed class has no `type` getter; the type only lives on the raw
+    // payload in `embed.data`. Reading `embed.type` alone made every embed 'rich'
+    // in production, so link previews, GIFs and videos never got their own layout.
+    // Plain-object embeds without `data` keep working through the fallback.
+    const type = embed.data?.type ?? embed.type ?? 'rich';
     const url = embed.url ? (0, utils_1.safeHref)(embed.url) : undefined;
-    const imageUrl = embed.image?.proxyURL ?? embed.image?.url;
+    // Image previews, GIFs and videos carry their picture in `thumbnail`; only rich
+    // embeds use `image` for it.
+    const preview = type === 'image' || type === 'gifv' || type === 'video' ? embed.thumbnail : null;
+    const ownImageUrl = embed.image?.proxyURL ?? embed.image?.url;
+    const imageUrl = ownImageUrl ?? preview?.proxyURL ?? preview?.url;
     const videoUrl = embed.video?.proxyURL ?? embed.video?.url;
     const provider = embed.provider?.name;
     const safeVid = videoUrl ? (0, utils_1.safeHref)(videoUrl) : null;
-    const safeImg = imageUrl ? (0, utils_1.safeHref)(imageUrl) : null;
+    const safeImg = (0, utils_1.safeImageSrc)(imageUrl) ?? null;
+    // The rich card already shows `thumbnail` itself, so a preview that falls
+    // through to it (a GIF without a video, say) must not appear twice.
+    const safeOwnImg = (0, utils_1.safeImageSrc)(ownImageUrl) ?? null;
 
     // Image-only embeds (link previews): render the image alone with optional caption
     if (type === 'image' && safeImg) {
-        return (0, jsx_runtime_1.jsx)("div", { className: "dht-embed dht-embed--image", children: (0, jsx_runtime_1.jsx)("a", { href: url || safeImg, target: "_blank", rel: "noreferrer", children: (0, jsx_runtime_1.jsx)("img", { src: safeImg, alt: embed.title || '', className: "dht-embed-image", loading: "lazy" }) }) });
+        return (0, jsx_runtime_1.jsx)("div", { className: "dht-embed dht-embed--image", children: (0, jsx_runtime_1.jsx)("a", { href: url || (0, utils_1.safeHref)(imageUrl), target: "_blank", rel: "noreferrer", children: (0, jsx_runtime_1.jsx)("img", { src: safeImg, alt: embed.title || '', className: "dht-embed-image", loading: "lazy" }) }) });
     }
     // GIFV — auto-play loop video
     if (type === 'gifv' && safeVid) {
@@ -35,7 +46,7 @@ async function DiscordEmbed({ embed, context }) {
     // Video embed (YouTube/Vimeo/etc.) — show thumbnail with a play overlay linking to original
     if (type === 'video' && (safeVid || safeImg)) {
         return (0, jsx_runtime_1.jsxs)("div", { className: "dht-embed dht-embed--video", children: [
-            (0, jsx_runtime_1.jsxs)("a", { href: url || safeVid || safeImg, target: "_blank", rel: "noreferrer", className: "dht-embed-video-wrap", children: [
+            (0, jsx_runtime_1.jsxs)("a", { href: url || safeVid || (0, utils_1.safeHref)(imageUrl), target: "_blank", rel: "noreferrer", className: "dht-embed-video-wrap", children: [
                 safeImg && (0, jsx_runtime_1.jsx)("img", { src: safeImg, alt: embed.title || '', className: "dht-embed-video-thumb", loading: "lazy" }),
                 (0, jsx_runtime_1.jsx)("div", { className: "dht-embed-video-play", children: '▶' })
             ] }),
@@ -46,11 +57,12 @@ async function DiscordEmbed({ embed, context }) {
 
     // Default rich embed
     const title = embed.title ?? undefined;
-    const authorImage = embed.author?.proxyIconURL ?? embed.author?.iconURL;
+    // The component renders these unchecked; only web and inline image URLs pass.
+    const authorImage = (0, utils_1.safeImageSrc)(embed.author?.proxyIconURL ?? embed.author?.iconURL);
     const authorName = embed.author?.name;
     const authorUrl = embed.author?.url ? (0, utils_1.safeHref)(embed.author.url) : undefined;
     const color = embed.hexColor ? (0, utils_1.safeColor)(embed.hexColor, undefined) : undefined;
-    const thumb = embed.thumbnail?.proxyURL ?? embed.thumbnail?.url;
+    const thumb = (0, utils_1.safeImageSrc)(embed.thumbnail?.proxyURL ?? embed.thumbnail?.url);
 
     return ((0, jsx_runtime_1.jsxs)("discord-embed", {
         "embed-title": title,
@@ -59,7 +71,7 @@ async function DiscordEmbed({ embed, context }) {
         "author-name": authorName,
         "author-url": authorUrl,
         color: color,
-        image: safeImg,
+        image: safeOwnImg,
         thumbnail: thumb,
         url: url,
         children: [
@@ -75,7 +87,10 @@ async function DiscordEmbed({ embed, context }) {
             safeVid && ((0, jsx_runtime_1.jsx)("div", { className: "dht-embed-video", children: (0, jsx_runtime_1.jsxs)("a", { href: safeVid, target: "_blank", rel: "noreferrer", children: ['▶ Open video', provider ? ` (${provider})` : ''] }) })),
             embed.footer && ((0, jsx_runtime_1.jsx)("discord-embed-footer", {
                 slot: "footer",
-                footerImage: embed.footer.proxyIconURL ?? embed.footer.iconURL,
+                // Attribute names are lowercased by HTML; `footerImage` arrived as
+                // `footerimage`, which the component does not observe, so footer
+                // icons never showed.
+                "footer-image": (0, utils_1.safeImageSrc)(embed.footer.proxyIconURL ?? embed.footer.iconURL),
                 timestamp: (0, utils_1.formatMessageTimestamp)(embed.timestamp, context?.timestampFormat, t(context, 'yesterdayAt', 'Yesterday at {time}')),
                 children: embed.footer.text
             }))