discord-html-transcripts-fix 2.2.0 → 2.3.0

package/README.md

@@ -15,9 +15,9 @@ Forked from [discord-html-transcripts](https://github.com/ItzDerock/discord-html
 - **[`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 cdnjs for Twemoji SVGs. Set
-[`inlineAssets: true`](#self-contained-transcripts) to embed them and get a file that
-renders offline.
+— 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
 
@@ -67,11 +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` | Enables the client-side spoiler-reveal script. |
-| `inlineAssets` | `boolean` | `false` | Embed the component runtime and emoji so the file renders offline. See below. |
-| `inlineAssetsTimeout` | `number` | `30000` | Per-request timeout in ms while downloading those assets. |
+| `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. |
@@ -84,32 +84,54 @@ const stream = await createTranscript(channel, {
 ### Self-contained transcripts
 
 By default the rendered file is not standalone: opening it fetches the `<discord-*>`
-component runtime 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.
+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 inlines Discord's avatars/attachments
+    saveImages: true, // also embeds image attachments
 });
 ```
 
-`inlineAssets` embeds the component runtime and every emoji used, so the file opens
-with **zero external requests**. Verified in a browser: the inlined transcript renders
-identically to the CDN version (same layout, same shadow DOM), loading 35 modules from
-`blob:` URLs and nothing from the network.
+`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 | ~620 kB |
-| External hosts on open | jsDelivr, cdnjs, Discord CDN | Discord CDN only (none with `saveImages`) |
-| Works offline | no | yes |
-
-The download happens once per process and is cached, 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 is logged — the export never fails over this. Use
-`inlineAssetsTimeout` (default `30000` ms) to bound the downloads.
+| 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
 
@@ -207,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`
@@ -231,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
@@ -268,7 +307,7 @@ In addition to plain text, replies, embeds, and attachments, the viewer supports
 - **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-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 and emoji so a transcript renders with zero external requests
+- **`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
 
@@ -282,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

@@ -39,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) {
@@ -104,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: {} };
     });
 
@@ -182,14 +192,12 @@ async function render(_a) {
 
     const { prelude } = await (0, static_1.prerenderToNodeStream)(docTree);
 
-    // `hydrate` used to additionally push the finished markup through
-    // @lit-labs/ssr. That round-trip was measured to contribute exactly four
-    // inert <!--lit-part--> comments and nothing else — the page never loads a
-    // lit hydration client, and the <discord-*> elements hydrate themselves once
-    // their definitions are registered. Two dependencies (and the deprecated
-    // node-fetch → fetch-blob → node-domexception chain they dragged along) for
-    // four comments was a bad trade, so the round-trip is gone. The option keeps
-    // its real effect: it enables the spoiler-reveal script emitted above.
+    // `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) {
@@ -199,11 +207,9 @@ async function render(_a) {
         const markup = await (0, selfContained_1.inlineExternalAssets)(await (0, utils_1.streamToString)(prelude), {
             timeout: options.inlineAssetsTimeout,
         });
-        return wantsStream ? stream_1.Readable.from([markup]) : markup;
-    }
-
-    if (options.hydrate) {
-        return await (0, utils_1.streamToString)(prelude);
+        // 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 (wantsStream) {
@@ -258,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);
@@ -306,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
             }))