discord-html-transcripts-fix 1.0.0 → 1.1.0

package/README.md

@@ -6,13 +6,26 @@ This is a fork of [discord-html-transcripts](https://github.com/ItzDerock/discor
 
 - Fixed compatibility with the latest discord.js version
 - Added support for Discord Components v2
+- **Bug fix**: defensive timestamp parsing — invalid `<t:...>` markers in messages no longer throw `RangeError: Invalid time value` and abort the whole transcript
+- **Bug fix**: removed `process.exit(1)` on discord.js version mismatch — the library now only warns, so the host bot keeps running
+- **Bug fix**: render error boundaries at AST-node and message level — a single broken message can no longer kill the entire transcript; it falls back to a "[message failed to render]" placeholder
+- **Bug fix**: `parseDiscordEmoji` no longer crashes on deleted / unknown reactions where `emoji.name` is `null`
+- **New**: clickable user / role / channel mentions — clicking opens a Discord-style popup with avatar, display name, username, roles (as colored pills), join date, account creation date, role color/position/member count, channel topic, IDs, etc.
+- **New**: `buildExtendedContext` collects full user / role / channel details and ships them in `window.$discordMessage` for the popups (also includes mentioned-but-silent users)
+- **New**: stickers in messages are rendered (image, name)
+- **New**: polls are rendered with answer bars, vote counts, percentages, expiry time
+- **New**: more reliable reaction rendering — handles missing emoji name / unknown custom emojis gracefully
+- **New**: many system message types that were previously stubbed (`undefined`) are now rendered — channel name change, channel icon change, thread created, slash-command used, context-menu command, call started, channel-follow added, recipient left, AutoMod block, guild incident reports, poll result
+- **New**: floating "back-to-top" button that fades in after scrolling
+- **New**: `dht-mention` hover effect on all clickable mentions
+- **DX**: `react`, `react-dom` and `debug` moved into regular `dependencies`, so users no longer have to install them manually (`debug` was actually a missing runtime dependency in the original — `images.js` requires it)
 
 ## Requirements
 
-This package requires `react` and `react-dom` as peer dependencies. Install them before using this package:
+Only [`discord.js`](https://discord.js.org/) is required as a peer dependency (you already have it in your bot). `react`, `react-dom`, and `debug` are installed automatically. Just run:
 
 ```bash
-npm install react@^19.2.3 react-dom@^19.2.3
+npm install discord-html-transcripts-fix
 ```
 
 ## Usage

package/dist/generator/index.js

@@ -41,19 +41,29 @@ 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'
+    const profiles = await (0, buildProfiles_1.buildProfiles)(messages);
+    const extended = await (0, buildProfiles_1.buildExtendedContext)(messages, channel).catch((e) => {
+        console.warn('[discord-html-transcripts-fix] buildExtendedContext failed:', e && e.message ? e.message : e);
+        return { users: {}, roles: {}, channels: {} };
+    });
+    const globalData = {
+        profiles,
+        users: extended.users,
+        roles: extended.roles,
+        channels: extended.channels,
+    };
+    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: client_1.mentionPopupStyles } }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.transcriptUtils } }), (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)}}`,
+                                    __html: `globalThis.$discordMessage=${JSON.stringify(globalData)}`,
                                 } }), (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 } })] }));
+                }, children: (0, jsx_runtime_1.jsx)(transcript_1.default, Object.assign({ messages: messages, channel: channel, callbacks: callbacks }, options)) }), (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.mentionPopup } }), (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.backToTop } }), 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');

package/dist/generator/renderers/content.js

@@ -56,6 +56,21 @@ async function MessageSingleASTNode({ node, context }) {
     var _a, _b;
     if (!node)
         return null;
+    try {
+        return await renderASTNode(node, context);
+    }
+    catch (err) {
+        console.warn('[discord-html-transcripts-fix] Failed to render AST node, falling back to raw:', err && err.message ? err.message : err);
+        // Fallback: render as plain text from node.content if possible
+        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: context });
+        } catch (_e) { /* ignore */ }
+        return null;
+    }
+}
+async function renderASTNode(node, context) {
+    var _a, _b;
     const type = node.type;
     switch (type) {
         case 'text':
@@ -78,17 +93,17 @@ async function MessageSingleASTNode({ node, context }) {
         case 'channel': {
             const id = node.id;
             const channel = await context.callbacks.resolveChannel(id);
-            return ((0, jsx_runtime_1.jsx)("discord-mention", { type: channel ? (channel.isDMBased() ? 'channel' : getChannelType(channel.type)) : 'channel', children: channel ? (channel.isDMBased() ? 'DM Channel' : channel.name) : `<#${id}>` }));
+            return ((0, jsx_runtime_1.jsx)("discord-mention", { type: channel ? (channel.isDMBased() ? 'channel' : getChannelType(channel.type)) : 'channel', "data-mention-type": "channel", "data-mention-id": id, className: "dht-mention", children: channel ? (channel.isDMBased() ? 'DM Channel' : channel.name) : `<#${id}>` }));
         }
         case 'role': {
             const id = node.id;
             const role = await context.callbacks.resolveRole(id);
-            return ((0, jsx_runtime_1.jsx)("discord-mention", { type: "role", color: context.type === RenderType.REPLY ? undefined : role === null || role === void 0 ? void 0 : role.hexColor, children: role ? role.name : `<@&${id}>` }));
+            return ((0, jsx_runtime_1.jsx)("discord-mention", { type: "role", color: context.type === RenderType.REPLY ? undefined : role === null || role === void 0 ? void 0 : role.hexColor, "data-mention-type": "role", "data-mention-id": id, className: "dht-mention", children: role ? role.name : `<@&${id}>` }));
         }
         case 'user': {
             const id = node.id;
             const user = await context.callbacks.resolveUser(id);
-            return (0, jsx_runtime_1.jsx)("discord-mention", { type: "user", children: user ? ((_a = user.displayName) !== null && _a !== void 0 ? _a : user.username) : `<@${id}>` });
+            return (0, jsx_runtime_1.jsx)("discord-mention", { type: "user", "data-mention-type": "user", "data-mention-id": id, className: "dht-mention", children: user ? ((_a = user.displayName) !== null && _a !== void 0 ? _a : user.username) : `<@${id}>` });
         }
         case 'here':
         case 'everyone':
@@ -115,10 +130,24 @@ async function MessageSingleASTNode({ node, context }) {
         case 'emoji':
         case 'twemoji':
             return ((0, jsx_runtime_1.jsx)("discord-custom-emoji", { name: node.name, url: (0, utils_1.parseDiscordEmoji)(node), embedEmoji: context.type === RenderType.EMBED, jumbo: (_b = context._internal) === null || _b === void 0 ? void 0 : _b.largeEmojis }));
-        case 'timestamp':
+        case 'timestamp': {
             // TODO: Make this reactive
             // https://github.com/ItzDerock/discord-components/blob/main/packages/core/src/components/discord-time/discord-time.tsx
-            return (0, jsx_runtime_1.jsx)("discord-time", { children: new Date(node.timestamp).toISOString() });
+            // Defensive parsing: Discord timestamps are Unix seconds (string oder number),
+            // ungültige Werte (z.B. <t:abc:F> oder absurd große Zahlen) sollen kein RangeError werfen.
+            var raw = node.timestamp;
+            var dateMs = NaN;
+            if (typeof raw === 'number') {
+                dateMs = raw < 1e12 ? raw * 1000 : raw;
+            } else if (typeof raw === 'string') {
+                var n = parseInt(raw, 10);
+                if (Number.isFinite(n)) dateMs = n < 1e12 ? n * 1000 : n;
+            }
+            var dt = new Date(dateMs);
+            var iso = '';
+            try { iso = Number.isFinite(dt.getTime()) ? dt.toISOString() : ''; } catch (_e) { iso = ''; }
+            return (0, jsx_runtime_1.jsx)("discord-time", { children: iso });
+        }
         // return <DiscordTime timestamp={parseInt(node.timestamp) * 1000} format={node.format} />;
         default: {
           //  console.log(`[discord-html-transcripts] Unknown node type: ${type}`, node);

package/dist/generator/renderers/message.js

@@ -47,13 +47,89 @@ const reply_1 = __importDefault(require("./reply"));
 const systemMessage_1 = __importDefault(require("./systemMessage"));
 async function DiscordMessage({ message, context, }) {
     var _a;
-    if (message.system)
-        return (0, jsx_runtime_1.jsx)(systemMessage_1.default, { message: message });
-    const isCrosspost = message.reference && message.reference.guildId !== ((_a = message.guild) === null || _a === void 0 ? void 0 : _a.id);
-    return ((0, jsx_runtime_1.jsxs)("discord-message", { id: `m-${message.id}`, timestamp: message.createdAt, edited: message.editedAt !== null, server: isCrosspost !== null && isCrosspost !== void 0 ? isCrosspost : undefined, highlight: message.mentions.everyone, profile: message.author.id, children: [(0, jsx_runtime_1.jsx)(reply_1.default, { message: message, context: context }), message.interaction && ((0, jsx_runtime_1.jsx)("discord-command", { slot: "reply", profile: message.interaction.user.id, command: '/' + message.interaction.commandName })), message.content && ((0, jsx_runtime_1.jsx)(content_1.default, { content: message.content, context: Object.assign(Object.assign({}, context), { type: message.webhookId ? content_1.RenderType.WEBHOOK : content_1.RenderType.NORMAL }) })), (0, jsx_runtime_1.jsx)(attachment_1.Attachments, { message: message, context: context }), message.embeds.map((embed, id) => ((0, jsx_runtime_1.jsx)(embed_1.DiscordEmbed, { embed: embed, context: Object.assign(Object.assign({}, context), { index: id, message }) }, id))), message.components.length > 0 && ((0, jsx_runtime_1.jsx)("discord-attachments", { slot: "components", children: message.components.map((component, id) => ((0, jsx_runtime_1.jsx)(components_1.default, { id: id, component: component, context: context }, id))) })), message.reactions.cache.size > 0 && ((0, jsx_runtime_1.jsx)("discord-reactions", { slot: "reactions", children: message.reactions.cache.map((reaction, id) => ((0, jsx_runtime_1.jsx)("discord-reaction", { name: reaction.emoji.name, emoji: (0, utils_1.parseDiscordEmoji)(reaction.emoji), count: reaction.count }, `${message.id}r${id}`))) })), message.hasThread && message.thread && ((0, jsx_runtime_1.jsx)("discord-thread", { slot: "thread", name: message.thread.name, cta: message.thread.messageCount
-                    ? `${message.thread.messageCount} Message${message.thread.messageCount > 1 ? 's' : ''}`
-                    : 'View Thread', children: message.thread.lastMessage ? ((0, jsx_runtime_1.jsx)("discord-thread-message", { profile: message.thread.lastMessage.author.id, children: (0, jsx_runtime_1.jsx)(content_1.default, { content: message.thread.lastMessage.content.length > 128
-                            ? message.thread.lastMessage.content.substring(0, 125) + '...'
-                            : message.thread.lastMessage.content, context: Object.assign(Object.assign({}, context), { type: content_1.RenderType.REPLY }) }) })) : (`Thread messages not saved.`) }))] }, message.id));
+    try {
+        if (message.system)
+            return (0, jsx_runtime_1.jsx)(systemMessage_1.default, { message: message });
+        const isCrosspost = message.reference && message.reference.guildId !== ((_a = message.guild) === null || _a === void 0 ? void 0 : _a.id);
+        const stickers = message.stickers && message.stickers.size > 0
+            ? Array.from(message.stickers.values()).map((s) => ({
+                id: s.id,
+                name: s.name,
+                url: s.url || `https://media.discordapp.net/stickers/${s.id}.png`,
+                format: s.format,
+            }))
+            : [];
+        const poll = (message.poll && (message.poll.question || (message.poll.answers && message.poll.answers.size))) ? message.poll : null;
+        return ((0, jsx_runtime_1.jsxs)("discord-message", { id: `m-${message.id}`, timestamp: message.createdAt, edited: message.editedAt !== null, server: isCrosspost !== null && isCrosspost !== void 0 ? isCrosspost : undefined, highlight: message.mentions.everyone, profile: message.author.id, children: [(0, jsx_runtime_1.jsx)(reply_1.default, { message: message, context: context }), message.interaction && ((0, jsx_runtime_1.jsx)("discord-command", { slot: "reply", profile: message.interaction.user.id, command: '/' + message.interaction.commandName })), message.content && ((0, jsx_runtime_1.jsx)(content_1.default, { content: message.content, context: Object.assign(Object.assign({}, context), { type: message.webhookId ? content_1.RenderType.WEBHOOK : content_1.RenderType.NORMAL }) })), (0, jsx_runtime_1.jsx)(attachment_1.Attachments, { message: message, context: context }), stickers.length > 0 && renderStickers(stickers), poll && renderPoll(poll), message.embeds.map((embed, id) => ((0, jsx_runtime_1.jsx)(embed_1.DiscordEmbed, { embed: embed, context: Object.assign(Object.assign({}, context), { index: id, message }) }, id))), message.components.length > 0 && ((0, jsx_runtime_1.jsx)("discord-attachments", { slot: "components", children: message.components.map((component, id) => ((0, jsx_runtime_1.jsx)(components_1.default, { id: id, component: component, context: context }, id))) })), message.reactions.cache.size > 0 && ((0, jsx_runtime_1.jsx)("discord-reactions", { slot: "reactions", children: Array.from(message.reactions.cache.values()).map((reaction, id) => {
+                                    var _a, _b;
+                                    return ((0, jsx_runtime_1.jsx)("discord-reaction", { name: ((_a = reaction.emoji) === null || _a === void 0 ? void 0 : _a.name) || ':unknown:', emoji: (0, utils_1.parseDiscordEmoji)(reaction.emoji) || undefined, count: (_b = reaction.count) !== null && _b !== void 0 ? _b : 0 }, `${message.id}r${id}`));
+                                }) })), message.hasThread && message.thread && ((0, jsx_runtime_1.jsx)("discord-thread", { slot: "thread", name: message.thread.name, cta: message.thread.messageCount
+                        ? `${message.thread.messageCount} Message${message.thread.messageCount > 1 ? 's' : ''}`
+                        : 'View Thread', children: message.thread.lastMessage ? ((0, jsx_runtime_1.jsx)("discord-thread-message", { profile: message.thread.lastMessage.author.id, children: (0, jsx_runtime_1.jsx)(content_1.default, { content: message.thread.lastMessage.content.length > 128
+                                ? message.thread.lastMessage.content.substring(0, 125) + '...'
+                                : message.thread.lastMessage.content, context: Object.assign(Object.assign({}, context), { type: content_1.RenderType.REPLY }) }) })) : (`Thread messages not saved.`) }))] }, message.id));
+    }
+    catch (err) {
+        console.warn('[discord-html-transcripts-fix] Failed to render message', message && message.id, err && err.message ? err.message : err);
+        const safeAuthor = (message && message.author && (message.author.displayName || message.author.username)) || 'Unknown';
+        return ((0, jsx_runtime_1.jsxs)("discord-message", { id: `m-${message && message.id}`, children: [(0, jsx_runtime_1.jsx)("span", { style: { opacity: 0.6 }, children: `[Nachricht von ${safeAuthor} konnte nicht gerendert werden]` })] }, message && message.id));
+    }
+}
+
+function renderStickers(stickers) {
+    return (0, jsx_runtime_1.jsx)("div", {
+        className: "dht-stickers",
+        style: { display: 'flex', gap: '8px', flexWrap: 'wrap', marginTop: '4px' },
+        children: stickers.map((s) => (0, jsx_runtime_1.jsx)("img", {
+            src: s.url,
+            alt: s.name || 'sticker',
+            title: s.name || '',
+            style: { width: '160px', height: '160px', borderRadius: '8px', objectFit: 'contain', background: 'rgba(255,255,255,0.02)' }
+        }, s.id))
+    });
+}
+
+function renderPoll(poll) {
+    let totalVotes = 0;
+    const answers = poll.answers ? Array.from(poll.answers.values()) : [];
+    for (const a of answers) totalVotes += a.voteCount || 0;
+    const expires = poll.expiresAt instanceof Date ? poll.expiresAt.toLocaleString('de-DE') : '';
+
+    return (0, jsx_runtime_1.jsxs)("div", {
+        className: "dht-poll",
+        style: {
+            border: '1px solid #2b2d31', background: '#1e1f22', borderRadius: '8px',
+            padding: '12px 14px', marginTop: '6px', maxWidth: '480px'
+        },
+        children: [
+            (0, jsx_runtime_1.jsxs)("div", { style: { fontWeight: 700, marginBottom: '8px', fontSize: '15px' }, children: ['📊 ', poll.question && poll.question.text ? poll.question.text : 'Poll'] }),
+            (0, jsx_runtime_1.jsx)("div", {
+                style: { display: 'flex', flexDirection: 'column', gap: '6px' },
+                children: answers.map((a, i) => {
+                    const text = (a.text || a.poll_media?.text || a.media?.text || a.answer_id || `Option ${i + 1}`);
+                    const votes = a.voteCount || 0;
+                    const pct = totalVotes > 0 ? Math.round((votes / totalVotes) * 100) : 0;
+                    return (0, jsx_runtime_1.jsxs)("div", {
+                        style: { background: '#2b2d31', borderRadius: '6px', padding: '6px 10px', position: 'relative', overflow: 'hidden' },
+                        children: [
+                            (0, jsx_runtime_1.jsx)("div", { style: {
+                                position: 'absolute', top: 0, left: 0, height: '100%',
+                                width: pct + '%', background: 'rgba(88,101,242,0.25)', zIndex: 0
+                            }}),
+                            (0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', zIndex: 1, display: 'flex', justifyContent: 'space-between', gap: '8px' },
+                                children: [
+                                    (0, jsx_runtime_1.jsx)("span", { children: String(text) }),
+                                    (0, jsx_runtime_1.jsxs)("span", { style: { color: '#b5bac1', fontSize: '12px', whiteSpace: 'nowrap' }, children: [votes, ' (', pct, '%)'] })
+                                ]
+                            })
+                        ]
+                    }, i);
+                })
+            }),
+            (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: '8px', fontSize: '11px', color: '#949ba4' },
+                children: [totalVotes, ' Stimme', totalVotes !== 1 ? 'n' : '', expires ? ' · endet ' + expires : '']
+            })
+        ]
+    });
 }
 //# sourceMappingURL=message.js.map

package/dist/generator/renderers/systemMessage.js

@@ -21,23 +21,62 @@ async function SystemMessage({ message }) {
             return ((0, jsx_runtime_1.jsxs)("discord-system-message", { id: `m-${message.id}`, type: "boost", children: [(0, jsx_runtime_1.jsx)(Highlight, { color: (_f = (_e = message.member) === null || _e === void 0 ? void 0 : _e.roles.color) === null || _f === void 0 ? void 0 : _f.hexColor, children: (_g = message.author.displayName) !== null && _g !== void 0 ? _g : message.author.username }), ' ', "boosted the server!"] }, message.id));
         case discord_js_1.MessageType.ThreadStarterMessage:
             return ((0, jsx_runtime_1.jsxs)("discord-system-message", { id: `ms-${message.id}`, type: "thread", children: [(0, jsx_runtime_1.jsx)(Highlight, { color: (_j = (_h = message.member) === null || _h === void 0 ? void 0 : _h.roles.color) === null || _j === void 0 ? void 0 : _j.hexColor, children: (_k = message.author.displayName) !== null && _k !== void 0 ? _k : message.author.username }), ' ', "started a thread: ", (0, jsx_runtime_1.jsx)("i", { "data-goto": (_l = message.reference) === null || _l === void 0 ? void 0 : _l.messageId, children: message.content })] }, message.id));
-        // TODO: implement support for these:
+        case discord_js_1.MessageType.ChannelNameChange: {
+            const authorName = message.author.displayName || message.author.username;
+            const color = message.member?.roles?.color?.hexColor;
+            return ((0, jsx_runtime_1.jsxs)("discord-system-message", { id: `m-${message.id}`, type: "edit", children: [(0, jsx_runtime_1.jsx)(Highlight, { color, children: authorName }), ' ', 'changed the channel name: ', (0, jsx_runtime_1.jsx)("strong", { children: message.content })] }, message.id));
+        }
+        case discord_js_1.MessageType.ChannelIconChange: {
+            const authorName = message.author.displayName || message.author.username;
+            const color = message.member?.roles?.color?.hexColor;
+            return ((0, jsx_runtime_1.jsxs)("discord-system-message", { id: `m-${message.id}`, type: "edit", children: [(0, jsx_runtime_1.jsx)(Highlight, { color, children: authorName }), ' ', 'changed the channel icon.'] }, message.id));
+        }
+        case discord_js_1.MessageType.ThreadCreated: {
+            const authorName = message.author.displayName || message.author.username;
+            const color = message.member?.roles?.color?.hexColor;
+            return ((0, jsx_runtime_1.jsxs)("discord-system-message", { id: `m-${message.id}`, type: "thread", children: [(0, jsx_runtime_1.jsx)(Highlight, { color, children: authorName }), ' ', 'started a thread: ', (0, jsx_runtime_1.jsx)("i", { "data-goto": message.reference?.messageId, children: message.content || 'New thread' })] }, message.id));
+        }
+        case discord_js_1.MessageType.ChatInputCommand:
+        case discord_js_1.MessageType.ContextMenuCommand: {
+            const authorName = message.author.displayName || message.author.username;
+            const color = message.member?.roles?.color?.hexColor;
+            const cmd = message.interaction?.commandName ? '/' + message.interaction.commandName : 'a command';
+            return ((0, jsx_runtime_1.jsxs)("discord-system-message", { id: `m-${message.id}`, type: "call", children: [(0, jsx_runtime_1.jsx)(Highlight, { color, children: authorName }), ' ', 'used ', (0, jsx_runtime_1.jsx)("strong", { children: cmd })] }, message.id));
+        }
+        case discord_js_1.MessageType.Call: {
+            const authorName = message.author.displayName || message.author.username;
+            const color = message.member?.roles?.color?.hexColor;
+            return ((0, jsx_runtime_1.jsxs)("discord-system-message", { id: `m-${message.id}`, type: "call", children: [(0, jsx_runtime_1.jsx)(Highlight, { color, children: authorName }), ' ', 'started a call.'] }, message.id));
+        }
+        case discord_js_1.MessageType.ChannelFollowAdd: {
+            const authorName = message.author.displayName || message.author.username;
+            const color = message.member?.roles?.color?.hexColor;
+            return ((0, jsx_runtime_1.jsxs)("discord-system-message", { id: `m-${message.id}`, type: "edit", children: [(0, jsx_runtime_1.jsx)(Highlight, { color, children: authorName }), ' ', 'added ', (0, jsx_runtime_1.jsx)("strong", { children: message.content }), ' to follow this channel.'] }, message.id));
+        }
+        case discord_js_1.MessageType.RecipientRemove: {
+            const authorName = message.author.displayName || message.author.username;
+            const color = message.member?.roles?.color?.hexColor;
+            return ((0, jsx_runtime_1.jsxs)("discord-system-message", { id: `m-${message.id}`, type: "leave", children: [(0, jsx_runtime_1.jsx)(Highlight, { color, children: authorName }), ' ', 'left.'] }, message.id));
+        }
+        case discord_js_1.MessageType.AutoModerationAction:
+            return ((0, jsx_runtime_1.jsx)("discord-system-message", { id: `m-${message.id}`, type: "boost", children: 'AutoMod blocked a message.' }, message.id));
+        case discord_js_1.MessageType.GuildIncidentReportRaid:
+        case discord_js_1.MessageType.GuildIncidentReportFalseAlarm:
+        case discord_js_1.MessageType.GuildIncidentAlertModeEnabled:
+        case discord_js_1.MessageType.GuildIncidentAlertModeDisabled:
+            return ((0, jsx_runtime_1.jsx)("discord-system-message", { id: `m-${message.id}`, type: "boost", children: 'Server safety alert.' }, message.id));
+        case discord_js_1.MessageType.PollResult:
+            return ((0, jsx_runtime_1.jsx)("discord-system-message", { id: `m-${message.id}`, type: "edit", children: 'A poll ended.' }, message.id));
+        // These types are rendered through the normal message pipeline (DiscordMessage)
         case discord_js_1.MessageType.Default:
-        case discord_js_1.MessageType.RecipientRemove:
-        case discord_js_1.MessageType.Call:
-        case discord_js_1.MessageType.ChannelNameChange:
-        case discord_js_1.MessageType.ChannelIconChange:
-        case discord_js_1.MessageType.ChannelFollowAdd:
+        case discord_js_1.MessageType.Reply:
+            return undefined;
+        // Less common / niche types: rendered nothing (Discord client also de-emphasizes these)
         case discord_js_1.MessageType.GuildDiscoveryDisqualified:
         case discord_js_1.MessageType.GuildDiscoveryRequalified:
         case discord_js_1.MessageType.GuildDiscoveryGracePeriodInitialWarning:
         case discord_js_1.MessageType.GuildDiscoveryGracePeriodFinalWarning:
-        case discord_js_1.MessageType.ThreadCreated:
-        case discord_js_1.MessageType.Reply:
-        case discord_js_1.MessageType.ChatInputCommand:
         case discord_js_1.MessageType.GuildInviteReminder:
-        case discord_js_1.MessageType.ContextMenuCommand:
-        case discord_js_1.MessageType.AutoModerationAction:
         case discord_js_1.MessageType.RoleSubscriptionPurchase:
         case discord_js_1.MessageType.InteractionPremiumUpsell:
         case discord_js_1.MessageType.StageStart:
@@ -46,12 +85,7 @@ async function SystemMessage({ message }) {
         case discord_js_1.MessageType.StageRaiseHand:
         case discord_js_1.MessageType.StageTopic:
         case discord_js_1.MessageType.GuildApplicationPremiumSubscription:
-        case discord_js_1.MessageType.GuildIncidentAlertModeEnabled:
-        case discord_js_1.MessageType.GuildIncidentAlertModeDisabled:
-        case discord_js_1.MessageType.GuildIncidentReportRaid:
-        case discord_js_1.MessageType.GuildIncidentReportFalseAlarm:
         case discord_js_1.MessageType.PurchaseNotification:
-        case discord_js_1.MessageType.PollResult:
             return undefined;
         default:
             return undefined;

package/dist/index.js

@@ -30,12 +30,10 @@ var transcript_1 = require("./generator/transcript");
 Object.defineProperty(exports, "DiscordMessages", { enumerable: true, get: function () { return __importDefault(transcript_1).default; } });
 var images_2 = require("./downloader/images");
 Object.defineProperty(exports, "TranscriptImageDownloader", { enumerable: true, get: function () { return images_2.TranscriptImageDownloader; } });
-// version check
+// version check (warn only — never kill the host process from a library)
 const versionPrefix = discord_js_1.version.split('.')[0];
 if (versionPrefix !== '14' && versionPrefix !== '15') {
-    console.error(`[discord-html-transcripts] Versions v3.x.x of discord-html-transcripts are only compatible with discord.js v14.x.x and v15.x.x, and you are using v${discord_js_1.version}.` +
-        `    For v13.x.x support, please install discord-html-transcripts v2.x.x using "npm install discord-html-transcripts@^2".`);
-    process.exit(1);
+    console.warn(`[discord-html-transcripts-fix] Compatible with discord.js v14.x and v15.x, you are using v${discord_js_1.version}. Continuing — transcripts may render incorrectly.`);
 }
 /**
  *

package/dist/static/client.js

@@ -1,31 +1,224 @@
 "use strict";
-// TODO: create some sort of build system to compile this file
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ggSansFont = exports.revealSpoiler = exports.scrollToMessage = void 0;
+exports.ggSansFont = exports.revealSpoiler = exports.scrollToMessage = exports.mentionPopup = exports.mentionPopupStyles = exports.backToTop = exports.transcriptUtils = void 0;
+
 /*
-// whenever user clicks on element with data-goto attribute, scroll to that message
+// === scrollToMessage source ===
+// Whenever the user clicks on element with data-goto attribute, scroll to that message
 document.addEventListener('click', (e) => {
   const target = e.target;
   if(!target) return;
-
   const goto = target?.getAttribute('data-goto');
-
   if (goto) {
-    const message = document.getElementById(`m-\${goto}`);
+    const message = document.getElementById(`m-${goto}`);
     if (message) {
       message.scrollIntoView({ behavior: 'smooth', block: 'center' });
       message.style.backgroundColor = 'rgba(148, 156, 247, 0.1)';
       message.style.transition = 'background-color 0.5s ease';
-      setTimeout(() => {
-        message.style.backgroundColor = 'transparent';
-      }, 1000);
+      setTimeout(() => { message.style.backgroundColor = 'transparent'; }, 1000);
     } else {
-      console.warn(`Message \${goto} not found.`);
+      console.warn(`Message ${goto} not found.`);
     }
   }
 });
 */
 exports.scrollToMessage = 'document.addEventListener("click",t=>{let e=t.target;if(!e)return;let o=e?.getAttribute("data-goto");if(o){let r=document.getElementById(`m-${o}`);r?(r.scrollIntoView({behavior:"smooth",block:"center"}),r.style.backgroundColor="rgba(148, 156, 247, 0.1)",r.style.transition="background-color 0.5s ease",setTimeout(()=>{r.style.backgroundColor="transparent"},1e3)):console.warn("Message ${goto} not found.")}});';
+
 exports.revealSpoiler = 'const s=document.querySelectorAll(".discord-spoiler");s.forEach(s=>s.addEventListener("click",()=>{if(s.classList.contains("discord-spoiler")){s.classList.remove("discord-spoiler");s.classList.add("discord-spoiler--revealed");}}));';
+
+// ============================================================================
+// Mention popup: click on a user/role/channel mention to see detailed info
+// Reads from globalThis.$discordMessage.{users,roles,channels,profiles}.
+// ============================================================================
+exports.mentionPopup = `(function(){
+  var DATA = function(){ return (typeof globalThis !== 'undefined' && globalThis.$discordMessage) || {}; };
+  function esc(s){ return String(s==null?'':s).replace(/[&<>"']/g, function(c){ return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c]; }); }
+  function fmt(iso){ if(!iso) return ''; try { var d = new Date(iso); return isNaN(d.getTime()) ? '' : d.toLocaleString('de-DE',{dateStyle:'medium', timeStyle:'short'}); } catch(_){ return ''; } }
+
+  var popup = null;
+  function ensure(){
+    if (popup) return popup;
+    popup = document.createElement('div');
+    popup.className = 'dht-popup';
+    popup.innerHTML = '<div class="dht-popup-body"></div><button type="button" class="dht-popup-close" aria-label="Schliessen">&times;</button>';
+    document.body.appendChild(popup);
+    popup.querySelector('.dht-popup-close').addEventListener('click', hide);
+    document.addEventListener('click', function(e){
+      if (!popup || popup.style.display !== 'block') return;
+      if (popup.contains(e.target)) return;
+      if (e.target.closest && e.target.closest('[data-mention-id]')) return;
+      hide();
+    });
+    document.addEventListener('keydown', function(e){ if (e.key === 'Escape') hide(); });
+    window.addEventListener('resize', hide);
+    return popup;
+  }
+  function hide(){ if (popup) popup.style.display = 'none'; }
+  function showAt(el, html){
+    var p = ensure();
+    p.querySelector('.dht-popup-body').innerHTML = html;
+    p.style.display = 'block';
+    var r = el.getBoundingClientRect();
+    var pr = p.getBoundingClientRect();
+    var pad = 8;
+    var top = r.bottom + 6;
+    var left = r.left;
+    if (top + pr.height > window.innerHeight - pad) top = Math.max(pad, r.top - pr.height - 6);
+    if (left + pr.width > window.innerWidth - pad) left = Math.max(pad, window.innerWidth - pr.width - pad);
+    if (left < pad) left = pad;
+    p.style.top = top + 'px';
+    p.style.left = left + 'px';
+  }
+  function rolePill(role){
+    var c = role && role.color ? role.color : '#5865F2';
+    return '<span class="dht-role-pill" style="--dht-role:' + esc(c) + ';">' + esc(role && role.name ? role.name : '@role') + '</span>';
+  }
+  function userHtml(id){
+    var d = DATA();
+    var u = (d.users && d.users[id]) || null;
+    var p = (d.profiles && d.profiles[id]) || null;
+    if (!u && !p) return '<i>Unbekannter User</i><div class="dht-popup-id">ID: <code>' + esc(id) + '</code></div>';
+    var name = (u && (u.displayName || u.username)) || (p && p.author) || 'Unknown';
+    var username = u && u.username ? '@' + u.username : '';
+    var avatar = (u && u.avatar) || (p && p.avatar) || '';
+    var color = (u && u.bannerColor) || (p && p.roleColor) || '#dbdee1';
+    var bot = (u && u.bot) || (p && p.bot);
+    var roles = u && Array.isArray(u.roles) && u.roles.length ? u.roles.map(rolePill).join('') : '';
+    var joinedAt = u && u.joinedAt ? fmt(u.joinedAt) : '';
+    var createdAt = u && u.createdAt ? fmt(u.createdAt) : '';
+    return ''
+      + '<div class="dht-popup-head">'
+      +   (avatar ? '<img class="dht-popup-avatar" src="' + esc(avatar) + '" alt="">' : '<div class="dht-popup-avatar dht-popup-avatar--ph"></div>')
+      +   '<div class="dht-popup-headtext">'
+      +     '<div class="dht-popup-name" style="color:' + esc(color) + ';">' + esc(name) + (bot ? '<span class="dht-popup-badge">BOT</span>' : '') + '</div>'
+      +     (username ? '<div class="dht-popup-sub">' + esc(username) + '</div>' : '')
+      +   '</div>'
+      + '</div>'
+      + (roles ? '<div class="dht-popup-section"><div class="dht-popup-label">Rollen</div><div class="dht-popup-roles">' + roles + '</div></div>' : '')
+      + (joinedAt ? '<div class="dht-popup-row"><span class="dht-popup-label">Server seit</span><span>' + esc(joinedAt) + '</span></div>' : '')
+      + (createdAt ? '<div class="dht-popup-row"><span class="dht-popup-label">Account seit</span><span>' + esc(createdAt) + '</span></div>' : '')
+      + '<div class="dht-popup-id">ID: <code>' + esc(id) + '</code></div>';
+  }
+  function roleHtml(id){
+    var r = (DATA().roles || {})[id];
+    if (!r) return '<i>Unbekannte Rolle</i><div class="dht-popup-id">ID: <code>' + esc(id) + '</code></div>';
+    var color = r.color || '#dbdee1';
+    return ''
+      + '<div class="dht-popup-head">'
+      +   '<div class="dht-popup-rolemark" style="background:' + esc(color) + ';"></div>'
+      +   '<div class="dht-popup-headtext">'
+      +     '<div class="dht-popup-name" style="color:' + esc(color) + ';">@' + esc(r.name) + '</div>'
+      +     (r.color ? '<div class="dht-popup-sub"><code>' + esc(r.color) + '</code></div>' : '')
+      +   '</div>'
+      + '</div>'
+      + (r.memberCount != null ? '<div class="dht-popup-row"><span class="dht-popup-label">Mitglieder</span><span>' + esc(r.memberCount) + '</span></div>' : '')
+      + (r.position != null ? '<div class="dht-popup-row"><span class="dht-popup-label">Position</span><span>' + esc(r.position) + '</span></div>' : '')
+      + (r.hoist ? '<div class="dht-popup-row"><span class="dht-popup-label">Hoisted</span><span>Ja</span></div>' : '')
+      + (r.mentionable ? '<div class="dht-popup-row"><span class="dht-popup-label">Erwähnbar</span><span>Ja</span></div>' : '')
+      + (r.managed ? '<div class="dht-popup-row"><span class="dht-popup-label">Verwaltet</span><span>Bot/Integration</span></div>' : '')
+      + '<div class="dht-popup-id">ID: <code>' + esc(id) + '</code></div>';
+  }
+  function channelHtml(id){
+    var c = (DATA().channels || {})[id];
+    if (!c) return '<i>Channel</i><div class="dht-popup-id">ID: <code>' + esc(id) + '</code></div>';
+    return ''
+      + '<div class="dht-popup-head">'
+      +   '<div class="dht-popup-rolemark" style="background:#5865F2;">#</div>'
+      +   '<div class="dht-popup-headtext">'
+      +     '<div class="dht-popup-name">#' + esc(c.name) + '</div>'
+      +     (c.parent ? '<div class="dht-popup-sub">in ' + esc(c.parent) + '</div>' : '')
+      +   '</div>'
+      + '</div>'
+      + (c.topic ? '<div class="dht-popup-section"><div class="dht-popup-label">Topic</div><div>' + esc(c.topic) + '</div></div>' : '')
+      + (c.nsfw ? '<div class="dht-popup-row"><span class="dht-popup-label">NSFW</span><span>Ja</span></div>' : '')
+      + '<div class="dht-popup-id">ID: <code>' + esc(id) + '</code></div>';
+  }
+  document.addEventListener('click', function(e){
+    var el = e.target && e.target.closest ? e.target.closest('[data-mention-id]') : null;
+    if (!el) return;
+    var t = el.getAttribute('data-mention-type');
+    var id = el.getAttribute('data-mention-id');
+    if (!t || !id) return;
+    e.preventDefault();
+    e.stopPropagation();
+    var html = '';
+    if (t === 'user') html = userHtml(id);
+    else if (t === 'role') html = roleHtml(id);
+    else if (t === 'channel') html = channelHtml(id);
+    else return;
+    showAt(el, html);
+  });
+})();`;
+
+// ============================================================================
+// Mention popup styles
+// ============================================================================
+exports.mentionPopupStyles = `
+  .dht-mention { cursor: pointer; }
+  .dht-mention:hover { filter: brightness(1.15); }
+  .dht-popup {
+    position: fixed; display: none; max-width: 340px; min-width: 240px;
+    background: #1e1f22; color: #dbdee1; border: 1px solid #2b2d31;
+    border-radius: 10px; padding: 14px 16px 12px;
+    box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
+    font-family: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px; line-height: 1.4; z-index: 99999;
+  }
+  .dht-popup-close {
+    position: absolute; top: 6px; right: 8px; background: none; border: none;
+    color: #949ba4; cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 8px;
+    border-radius: 4px;
+  }
+  .dht-popup-close:hover { background: rgba(255,255,255,0.06); color: #dbdee1; }
+  .dht-popup-head { display: flex; align-items: center; gap: 10px; margin-right: 18px; }
+  .dht-popup-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
+  .dht-popup-avatar--ph { background: #313338; }
+  .dht-popup-rolemark { width: 32px; height: 32px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; }
+  .dht-popup-headtext { min-width: 0; }
+  .dht-popup-name { font-weight: 600; font-size: 16px; word-break: break-word; }
+  .dht-popup-sub { font-size: 12px; color: #949ba4; word-break: break-all; }
+  .dht-popup-badge { background: #5865F2; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
+  .dht-popup-section { margin-top: 10px; }
+  .dht-popup-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 13px; }
+  .dht-popup-label { color: #949ba4; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
+  .dht-popup-roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
+  .dht-role-pill {
+    display: inline-flex; align-items: center;
+    background: color-mix(in srgb, var(--dht-role) 18%, transparent);
+    color: var(--dht-role); border: 1px solid color-mix(in srgb, var(--dht-role) 40%, transparent);
+    padding: 1px 8px; border-radius: 999px; font-size: 11px; line-height: 1.5;
+  }
+  .dht-popup-id { margin-top: 10px; padding-top: 8px; border-top: 1px solid #2b2d31; font-size: 11px; color: #6e727a; }
+  .dht-popup-id code { background: rgba(255,255,255,0.05); padding: 1px 4px; border-radius: 3px; }
+`;
+
+// ============================================================================
+// Back-to-top floating button
+// ============================================================================
+exports.backToTop = `(function(){
+  var btn = document.createElement('button');
+  btn.className = 'dht-back-top';
+  btn.type = 'button';
+  btn.title = 'Nach oben scrollen';
+  btn.setAttribute('aria-label','Nach oben scrollen');
+  btn.innerHTML = '&#x25B2;';
+  document.body.appendChild(btn);
+  btn.addEventListener('click', function(){ window.scrollTo({ top: 0, behavior: 'smooth' }); });
+  function toggle(){ btn.style.opacity = window.scrollY > 400 ? '1' : '0'; btn.style.pointerEvents = window.scrollY > 400 ? 'auto' : 'none'; }
+  window.addEventListener('scroll', toggle, { passive: true });
+  toggle();
+})();`;
+
+exports.transcriptUtils = `
+  .dht-back-top {
+    position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px;
+    border-radius: 50%; border: none; background: #5865F2; color: #fff;
+    font-size: 16px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.45);
+    opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
+    z-index: 9999;
+  }
+  .dht-back-top:hover { transform: translateY(-2px); }
+`;
+
 exports.ggSansFont = '@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-normal-400.woff2);font-family:"gg sans";font-weight:400;font-style:normal}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-normal-500.woff2);font-family:"gg sans";font-weight:500;font-style:normal}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-normal-600.woff2);font-family:"gg sans";font-weight:600;font-style:normal}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-normal-700.woff2);font-family:"gg sans";font-weight:700;font-style:normal}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-normal-800.woff2);font-family:"gg sans";font-weight:800;font-style:normal}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-italic-400.woff2);font-family:"gg sans";font-weight:400;font-style:italic}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-italic-500.woff2);font-family:"gg sans";font-weight:500;font-style:italic}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-italic-600.woff2);font-family:"gg sans";font-weight:600;font-style:italic}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-italic-700.woff2);font-family:"gg sans";font-weight:700;font-style:italic}@font-face{src:url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-italic-800.woff2);font-family:"gg sans";font-weight:800;font-style:italic}';
-//# sourceMappingURL=client.js.map
+//# sourceMappingURL=client.js.map

package/dist/utils/buildProfiles.js

@@ -1,32 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildProfiles = buildProfiles;
+exports.buildExtendedContext = buildExtendedContext;
 const discord_js_1 = require("discord.js");
+
+/**
+ * Original profile builder — kept for backwards compatibility with
+ * <discord-mention> web component lookups via window.$discordMessage.profiles.
+ */
 async function buildProfiles(messages) {
     const profiles = {};
-    // loop through messages
     for (const message of messages) {
-        // add all users
         const author = message.author;
-        if (!profiles[author.id]) {
-            // add profile
+        if (author && !profiles[author.id]) {
             profiles[author.id] = buildProfile(message.member, author);
         }
-        // add interaction users
         if (message.interaction) {
             const user = message.interaction.user;
-            if (!profiles[user.id]) {
+            if (user && !profiles[user.id]) {
                 profiles[user.id] = buildProfile(null, user);
             }
         }
-        // threads
-        if (message.thread && message.thread.lastMessage) {
+        if (message.thread && message.thread.lastMessage && message.thread.lastMessage.author) {
             profiles[message.thread.lastMessage.author.id] = buildProfile(message.thread.lastMessage.member, message.thread.lastMessage.author);
         }
+        // Also include users mentioned in messages — so popups work even if they never spoke
+        if (message.mentions && message.mentions.users) {
+            for (const [uid, u] of message.mentions.users) {
+                if (!profiles[uid]) {
+                    const member = message.mentions.members && message.mentions.members.get
+                        ? message.mentions.members.get(uid)
+                        : null;
+                    profiles[uid] = buildProfile(member, u);
+                }
+            }
+        }
     }
-    // return as a JSON
     return profiles;
 }
+
 function buildProfile(member, author) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     return {
@@ -39,4 +51,112 @@ function buildProfile(member, author) {
         verified: (_h = author.flags) === null || _h === void 0 ? void 0 : _h.has(discord_js_1.UserFlags.VerifiedBot),
     };
 }
-//# sourceMappingURL=buildProfiles.js.map
+
+/**
+ * Extended dictionaries used by the mention-popup client script.
+ * Contains:
+ *   users:    full user/member details (avatar, banner color, all roles, joinedAt, createdAt, flags)
+ *   roles:    all roles referenced by any rendered user OR mentioned in messages
+ *   channels: channel info (name, parent category, topic, type)
+ */
+async function buildExtendedContext(messages, channel) {
+    const users = {};
+    const roles = {};
+    const channels = {};
+    const guild = channel && !channel.isDMBased && !channel.isDMBased() ? channel.guild : null;
+
+    const seenUserIds = new Set();
+    const seenRoleIds = new Set();
+    const seenChannelIds = new Set();
+
+    const includeRoleFromGuild = (roleId) => {
+        if (!guild || seenRoleIds.has(roleId)) return;
+        const role = guild.roles.cache.get(roleId);
+        if (!role) return;
+        seenRoleIds.add(roleId);
+        roles[roleId] = {
+            id: role.id,
+            name: role.name,
+            color: role.hexColor && role.hexColor !== '#000000' ? role.hexColor : null,
+            position: role.position,
+            hoist: role.hoist,
+            mentionable: role.mentionable,
+            memberCount: typeof role.members?.size === 'number' ? role.members.size : null,
+            managed: role.managed,
+        };
+    };
+
+    const includeChannelFromGuild = (channelId) => {
+        if (!guild || seenChannelIds.has(channelId)) return;
+        const ch = guild.channels.cache.get(channelId);
+        if (!ch) return;
+        seenChannelIds.add(channelId);
+        channels[channelId] = {
+            id: ch.id,
+            name: ch.name,
+            type: ch.type,
+            parent: ch.parent ? ch.parent.name : null,
+            topic: 'topic' in ch && typeof ch.topic === 'string' ? ch.topic : null,
+            nsfw: 'nsfw' in ch ? !!ch.nsfw : false,
+        };
+    };
+
+    const includeUser = (member, author) => {
+        if (!author || seenUserIds.has(author.id)) return;
+        seenUserIds.add(author.id);
+        const memberRoles = member && member.roles && member.roles.cache
+            ? Array.from(member.roles.cache.values()).filter((r) => r.id !== guild?.id)
+                .sort((a, b) => b.position - a.position)
+            : [];
+        // include role records as well
+        for (const r of memberRoles) includeRoleFromGuild(r.id);
+        users[author.id] = {
+            id: author.id,
+            username: author.username,
+            displayName: member?.nickname || author.displayName || author.username,
+            globalName: author.globalName || null,
+            avatar: member?.displayAvatarURL?.({ size: 128 }) || author.displayAvatarURL?.({ size: 128 }) || null,
+            bannerColor: member?.displayHexColor && member.displayHexColor !== '#000000' ? member.displayHexColor : null,
+            bot: !!author.bot,
+            system: !!author.system,
+            joinedAt: member?.joinedAt ? member.joinedAt.toISOString() : null,
+            createdAt: author.createdAt ? author.createdAt.toISOString() : null,
+            roles: memberRoles.map((r) => ({
+                id: r.id,
+                name: r.name,
+                color: r.hexColor && r.hexColor !== '#000000' ? r.hexColor : null,
+                position: r.position,
+            })),
+            highestRole: memberRoles[0]
+                ? { name: memberRoles[0].name, color: memberRoles[0].hexColor }
+                : null,
+        };
+    };
+
+    for (const message of messages) {
+        if (message.author) includeUser(message.member, message.author);
+        if (message.interaction?.user) includeUser(null, message.interaction.user);
+        if (message.thread?.lastMessage?.author) {
+            includeUser(message.thread.lastMessage.member, message.thread.lastMessage.author);
+        }
+        if (message.mentions) {
+            if (message.mentions.users) {
+                for (const [uid, u] of message.mentions.users) {
+                    const member = message.mentions.members && message.mentions.members.get
+                        ? message.mentions.members.get(uid)
+                        : null;
+                    includeUser(member, u);
+                }
+            }
+            if (message.mentions.roles) {
+                for (const [rid] of message.mentions.roles) includeRoleFromGuild(rid);
+            }
+            if (message.mentions.channels) {
+                for (const [cid] of message.mentions.channels) includeChannelFromGuild(cid);
+            }
+        }
+    }
+
+    return { users, roles, channels };
+}
+//# sourceMappingURL=buildProfiles.js.map

package/dist/utils/utils.js

@@ -27,13 +27,21 @@ function formatBytes(bytes, decimals = 2) {
     return [parseFloat((bytes / Math.pow(k, i)).toFixed(dm)), sizes[i]];
 }
 function parseDiscordEmoji(emoji) {
+    if (!emoji) return '';
     if (emoji.id) {
         return `https://cdn.discordapp.com/emojis/${emoji.id}.${emoji.animated ? 'gif' : 'png'}`;
     }
-    const codepoints = twemoji_1.default.convert
-        .toCodePoint(emoji.name.indexOf(String.fromCharCode(0x200d)) < 0 ? emoji.name.replace(/\uFE0F/g, '') : emoji.name)
-        .toLowerCase();
-    return `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${codepoints}.svg`;
+    // Defensive: emoji.name may be null for deleted/unknown reactions
+    if (typeof emoji.name !== 'string' || !emoji.name) return '';
+    try {
+        const codepoints = twemoji_1.default.convert
+            .toCodePoint(emoji.name.indexOf(String.fromCharCode(0x200d)) < 0 ? emoji.name.replace(/\uFE0F/g, '') : emoji.name)
+            .toLowerCase();
+        return `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${codepoints}.svg`;
+    }
+    catch (_e) {
+        return '';
+    }
 }
 /**
  * Converts a stream to a string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "discord-html-transcripts-fix",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A nicely formatted html transcript generator for discord.js. Bugfix fork with support for the latest discord.js and Components v2.",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
@@ -19,7 +19,6 @@
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.50.0",
     "@typescript-eslint/parser": "^8.50.0",
-    "debug": "^4.4.3",
     "discord.js": "^14.25.1",
     "dotenv": "^17.2.3",
     "eslint": "^9.39.2",
@@ -34,16 +33,17 @@
   "dependencies": {
     "@lit-labs/ssr": "^3.3.1",
     "@skyra/discord-components-core": "^4.0.2",
+    "debug": "^4.4.3",
     "discord-markdown-parser": "~1.3.0",
     "highlight.js": "^11.11.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "simple-markdown": "^0.7.3",
     "twemoji": "^14.0.2",
     "undici": "^7.16.0"
   },
   "peerDependencies": {
-    "discord.js": "^14.0.0 || ^15.0.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3"
+    "discord.js": "^14.0.0 || ^15.0.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",