discord-html-transcripts-fix 1.4.0 → 1.7.0

package/dist/generator/index.js

@@ -134,7 +134,6 @@ async function render(_a) {
             (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.searchBarStyles } }),
             (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.lightboxStyles } }),
             (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.tocStyles } }),
-            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.i18nStyles } }),
             (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.dateSeparatorStyles } }),
             (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.markdownStyles } }),
             (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.filterPanelStyles } }),
@@ -155,16 +154,13 @@ async function render(_a) {
         ] }),
         (0, jsx_runtime_1.jsxs)("body", { style: { margin: 0, minHeight: '100vh' }, children: [
             (0, jsx_runtime_1.jsx)(transcript_1.default, Object.assign({ messages, channel, callbacks }, options, renderContext)),
-            (0, jsx_runtime_1.jsx)(StatsFooter, { stats, lang, i18n }),
+            renderStatsFooter(stats, lang, i18n, options.statsFooter),
             (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.mentionPopup } }),
-            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.backToTop } }),
             (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.searchBar } }),
             (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.lightbox } }),
             (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.toc } }),
-            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.i18nSwitcher } }),
             (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.filterPanel } }),
             (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.codeCopyButton } }),
-            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.permalinkButton } }),
             options.hydrate && (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.revealSpoiler } }),
         ] })
     ] });
@@ -200,27 +196,63 @@ function formatSpan(ms, lang) {
     if (mins > 0) return `${mins}m`;
     return '<1m';
 }
-function StatsFooter({ stats, lang, i18n }) {
-    const dict = (i18n && i18n[lang]) || (i18n && i18n.en) || {};
+// Renders the bottom stats footer. Caller-controlled via options.statsFooter:
+//   false                            → no footer
+//   { enabled: false }               → no footer
+//   { template: '{messages} ...' }   → render with custom template
+//                                      Placeholders: {messages} {participants}
+//                                      {images} {from} {to} {span}
+// Default: en template "X messages · Y participants · Z images · from → to · span"
+function renderStatsFooter(stats, lang, i18n, opts) {
+    if (opts === false) return null;
+    const config = (opts && typeof opts === 'object') ? opts : {};
+    if (config.enabled === false) return null;
+
     const locale = lang === 'de' ? 'de-DE' : 'en-US';
-    const fmtDate = (ms) => new Date(ms).toLocaleString(locale, { dateStyle: 'medium', timeStyle: 'short' });
-    return (0, jsx_runtime_1.jsxs)("footer", { className: "dht-stats", children: [
-        (0, jsx_runtime_1.jsx)("span", { children: (dict.statsMessages || '{n} messages').replace('{n}', stats.messageCount) }),
-        ' · ',
-        (0, jsx_runtime_1.jsx)("span", { children: (dict.statsParticipants || '{n} participants').replace('{n}', stats.participantCount) }),
-        ' · ',
-        (0, jsx_runtime_1.jsx)("span", { children: (dict.statsImages || '{n} images').replace('{n}', stats.imageCount) }),
-        stats.firstTs && stats.lastTs && (0, jsx_runtime_1.jsxs)("span", { children: [' · ', fmtDate(stats.firstTs), ' → ', fmtDate(stats.lastTs)] }),
-        stats.spanMs && (0, jsx_runtime_1.jsxs)("span", { children: [' · ', formatSpan(stats.spanMs)] }),
-    ] });
+    const fmtDate = (ms) => ms ? new Date(ms).toLocaleString(locale, { dateStyle: 'medium', timeStyle: 'short' }) : '';
+    const span = stats.spanMs ? formatSpan(stats.spanMs) : '';
+
+    const values = {
+        messages: String(stats.messageCount),
+        participants: String(stats.participantCount),
+        images: String(stats.imageCount),
+        from: fmtDate(stats.firstTs),
+        to: fmtDate(stats.lastTs),
+        span,
+    };
+
+    if (typeof config.template === 'string' && config.template.length > 0) {
+        const rendered = config.template.replace(/\{(messages|participants|images|from|to|span)\}/g, (_, k) => values[k] || '');
+        return (0, jsx_runtime_1.jsx)("footer", { className: "dht-stats", children: rendered });
+    }
+
+    const dict = (i18n && i18n[lang]) || (i18n && i18n.en) || {};
+    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),
+    ];
+    if (values.from && values.to) parts.push(values.from + ' → ' + values.to);
+    if (values.span) parts.push(values.span);
+    return (0, jsx_runtime_1.jsx)("footer", { className: "dht-stats", children: parts.join(' · ') });
 }
 
 const extraStyles = `
 /* Ensure the host establishes a positioning context for the absolute pin indicator,
    and clamp it inside the message box on narrow viewports. */
+/* Action-row buttons — Discord-like horizontal spacing */
+discord-action-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
+.dht-v2-container discord-action-row,.dht-section-content discord-action-row{margin:6px 0}
+/* V2 container — Discord-like spacing inside block flow */
+.dht-v2-container .dht-heading,.dht-section-content .dht-heading{margin:8px 0 4px}
+.dht-v2-container .dht-heading:first-child,.dht-section-content .dht-heading:first-child{margin-top:0}
+.dht-v2-container .dht-v2-separator,.dht-section-content .dht-v2-separator{margin:8px 0}
+.dht-v2-container strong,.dht-section-content strong{display:inline;font-weight:700;color:#fff}
+.dht-v2-container .dht-mention,.dht-section-content .dht-mention{display:inline-block;vertical-align:baseline}
+/* System-message author — clickable like a user mention */
+.dht-sys-author{cursor:pointer;font-style:normal;font-weight:500}
+.dht-sys-author:hover{text-decoration:underline}
 .dht-msg-pinned{position:relative}
-.dht-pinned-indicator{position:absolute;top:4px;left:4px;font-size:12px;opacity:.75;pointer-events:none}
-@media (max-width:640px){.dht-pinned-indicator{position:static;display:inline-block;margin-right:4px}}
 .dht-app-badge,.dht-popup-badge{background:#5865F2;color:#fff;font-size:10px;padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:middle;font-weight:600}
 .dht-edit-marker{color:#949ba4;font-size:11px;margin-left:4px;cursor:help}
 .dht-suppressed{color:#6e727a;font-size:11px;font-style:italic}

package/dist/generator/renderers/components/Container.js

@@ -19,12 +19,17 @@ function DiscordContainer({ children, accentColor, spoiler }) {
     // string can't smuggle CSS into the inline borderLeft.
     const raw = colorToHex(accentColor);
     const hex = raw ? (0, utils_1.safeColor)(raw, null) : null;
+    // FIX: previous layout was display:flex;flex-direction:column;gap:8px which
+    // forced every direct child — including inline <strong>, <br>, mention
+    // <span> and text nodes — to become its own vertical flex item. That broke
+    // sentences across multiple lines and made role mentions fill the entire
+    // row. Use normal block flow instead so inline content lays out the way
+    // Discord renders it.
     const style = {
-        display: 'flex',
+        display: 'block',
         width: '100%',
         maxWidth: '500px',
         minWidth: 0,
-        flexDirection: 'column',
         backgroundColor: '#3f4248',
         padding: '16px',
         borderLeft: hex ? `4px solid ${hex}` : '1px solid #4f5359',
@@ -34,10 +39,13 @@ function DiscordContainer({ children, accentColor, spoiler }) {
         marginTop: '2px',
         marginBottom: '2px',
         borderRadius: '10px',
-        gap: '8px',
         boxSizing: 'border-box',
+        lineHeight: 1.4,
+        color: '#dbdee1',
+        wordBreak: 'break-word',
+        overflowWrap: 'anywhere',
     };
-    const node = (0, jsx_runtime_1.jsx)("div", { style, children });
+    const node = (0, jsx_runtime_1.jsx)("div", { className: "dht-v2-container", style, children });
     if (spoiler) {
         return (0, jsx_runtime_1.jsx)("span", { className: "discord-spoiler", children: node });
     }

package/dist/generator/renderers/components/section/SectionContent.js

@@ -3,12 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 function SectionContent({ children }) {
     return ((0, jsx_runtime_1.jsx)("div", {
+        className: "dht-section-content",
         style: {
-            display: 'flex',
-            flexDirection: 'column',
+            // Block flow so inline content (mentions, strong, br, text) flows
+            // naturally inside the section instead of becoming flex rows.
+            display: 'block',
             flex: 1,
-            minWidth: 0, // allow text to shrink/wrap inside flex parent
+            minWidth: 0,
             overflowWrap: 'anywhere',
+            wordBreak: 'break-word',
+            lineHeight: 1.4,
         },
         children
     }));

package/dist/generator/renderers/message.js

@@ -80,9 +80,11 @@ async function DiscordMessage({ message, context }) {
         const authorName = (message.member?.nickname || message.author?.displayName || message.author?.username || '').toLowerCase();
         const ts = message.createdAt instanceof Date ? message.createdAt.getTime() : 0;
         const lowerText = (message.content || '').toLowerCase().slice(0, 4096);
-        const hasImage = message.attachments && Array.from(message.attachments.values()).some(a => typeof a.contentType === 'string' && a.contentType.startsWith('image/'));
-        const hasEmbed = message.embeds && message.embeds.length > 0;
-        const hasAttachment = message.attachments && message.attachments.size > 0;
+        const mediaFlags = detectMediaFlags(message);
+        const hasImage = mediaFlags.hasImage;
+        const hasEmbed = mediaFlags.hasEmbed;
+        const hasAttachment = mediaFlags.hasAttachment;
+        const hasComponentV2 = mediaFlags.hasComponentV2;
         const stickers = message.stickers && message.stickers.size > 0
             ? Array.from(message.stickers.values()).map((s) => ({
                 id: s.id,
@@ -107,11 +109,8 @@ async function DiscordMessage({ message, context }) {
         // Forwarded message snapshots (messageSnapshots) — render before the empty body
         const snapshots = Array.isArray(message.messageSnapshots) ? message.messageSnapshots : [];
 
-        const isApp = !!(message.author?.bot && message.applicationId);
-
         const editedAtIso = message.editedAt instanceof Date ? message.editedAt.toISOString() : null;
         const pinned = !!message.pinned;
-        const verifiedBot = !!message.author?.flags?.has?.(discord_js_1.UserFlags.VerifiedBot);
 
         // Forum applied tags — only on the first message of a forum thread (the post itself)
         let appliedTagPills = null;
@@ -134,8 +133,10 @@ async function DiscordMessage({ message, context }) {
             }
         }
 
-        // Build a comma-separated badge list for additional flag rendering
-        const slashCmdLine = renderSlashCommandLine(message, context);
+        // Slash command interaction data is attached to <discord-command> as
+        // data attributes so the popup can show parameters Discord-style. We
+        // no longer render a separate "/cmd opt:val by user" line.
+        const slashData = buildSlashCommandData(message);
 
         return ((0, jsx_runtime_1.jsxs)("discord-message", {
             id: `m-${message.id}`,
@@ -154,13 +155,20 @@ async function DiscordMessage({ message, context }) {
             "data-has-image": hasImage ? 'true' : undefined,
             "data-has-embed": hasEmbed ? 'true' : undefined,
             "data-has-attachment": hasAttachment ? 'true' : undefined,
+            "data-has-component-v2": hasComponentV2 ? 'true' : undefined,
             children: [
-                pinned && (0, jsx_runtime_1.jsx)("div", { className: "dht-pinned-indicator", title: "Pinned message", children: "📌" }),
                 appliedTagPills,
                 (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 })),
-                slashCmdLine,
-                isApp && (0, jsx_runtime_1.jsxs)("span", { className: "dht-app-badge", "data-i18n": "appBadge", children: [t(context, 'appBadge', 'APP'), verifiedBot && (0, jsx_runtime_1.jsx)("span", { className: "dht-verified-check", title: "Verified Bot", children: '✓' })] }),
+                message.interaction && ((0, jsx_runtime_1.jsx)("discord-command", {
+                    slot: "reply",
+                    profile: message.interaction.user.id,
+                    command: (slashData && slashData.cmd) || ('/' + message.interaction.commandName),
+                    className: "dht-slash-clickable",
+                    "data-slash-cmd": slashData ? slashData.cmd : ('/' + message.interaction.commandName),
+                    "data-slash-by": slashData ? slashData.by : '',
+                    "data-slash-by-id": slashData ? slashData.byId : message.interaction.user.id,
+                    "data-slash-options": JSON.stringify((slashData && slashData.opts) || []),
+                })),
                 isCrossposted && (0, jsx_runtime_1.jsx)("span", { className: "dht-badge dht-badge-crosspost", title: "Published from announcement channel", children: '📣 Published' }),
                 isCrosspost && (0, jsx_runtime_1.jsx)("span", { className: "dht-badge dht-badge-crosspost", title: "Follows another channel", children: '📡 Follow' }),
                 isSilent && (0, jsx_runtime_1.jsx)("span", { className: "dht-badge dht-badge-silent", title: "Silent message (no notification)", children: '🔕 Silent' }),
@@ -377,40 +385,108 @@ function renderSnapshots(snapshots, context, depth = 0) {
     });
 }
 
-function renderSlashCommandLine(message, context) {
+const COMPONENT_TYPE_ACTION_ROW = 1;
+const COMPONENT_TYPE_SECTION = 9;
+const COMPONENT_TYPE_THUMBNAIL = 11;
+const COMPONENT_TYPE_MEDIA_GALLERY = 12;
+const COMPONENT_TYPE_FILE = 13;
+const COMPONENT_TYPE_CONTAINER = 17;
+const FLAG_IS_COMPONENTS_V2 = 1 << 15;
+
+// Walks message.embeds and message.components to determine whether the message
+// carries media or V2 containers — used to drive the filter checkboxes
+// (data-has-image, data-has-attachment, data-has-embed, data-has-component-v2).
+function detectMediaFlags(message) {
+    const out = { hasImage: false, hasAttachment: false, hasEmbed: false, hasComponentV2: false };
+
+    // Direct attachments
+    if (message.attachments && typeof message.attachments.values === 'function') {
+        for (const a of message.attachments.values()) {
+            out.hasAttachment = true;
+            const ct = typeof a.contentType === 'string' ? a.contentType : '';
+            if (ct.startsWith('image/') || ct.startsWith('video/')) out.hasImage = true;
+        }
+    }
+
+    // Classic embeds
+    if (Array.isArray(message.embeds)) {
+        for (const e of message.embeds) {
+            if (!e) continue;
+            out.hasEmbed = true;
+            if (e.image || e.thumbnail) out.hasImage = true;
+            if (e.video && (e.video.url || e.video.proxyURL || e.video.proxy_url)) out.hasImage = true;
+        }
+    }
+
+    // Components V2 — message-level flag and recursive walk
+    const flags = (typeof message.flags?.bitfield === 'number') ? message.flags.bitfield : 0;
+    if (flags & FLAG_IS_COMPONENTS_V2) out.hasComponentV2 = true;
+
+    const walk = (comp) => {
+        if (!comp || typeof comp.type !== 'number') return;
+        switch (comp.type) {
+            case COMPONENT_TYPE_CONTAINER:
+                out.hasComponentV2 = true;
+                if (Array.isArray(comp.components)) for (const c of comp.components) walk(c);
+                break;
+            case COMPONENT_TYPE_SECTION:
+                if (Array.isArray(comp.components)) for (const c of comp.components) walk(c);
+                if (comp.accessory) walk(comp.accessory);
+                break;
+            case COMPONENT_TYPE_ACTION_ROW:
+                if (Array.isArray(comp.components)) for (const c of comp.components) walk(c);
+                break;
+            case COMPONENT_TYPE_MEDIA_GALLERY:
+                if (Array.isArray(comp.items) && comp.items.length > 0) out.hasImage = true;
+                break;
+            case COMPONENT_TYPE_THUMBNAIL:
+                if (comp.media && (comp.media.url || comp.media.proxy_url || comp.media.proxyURL)) out.hasImage = true;
+                break;
+            case COMPONENT_TYPE_FILE:
+                out.hasAttachment = true;
+                if (comp.file && typeof comp.file.url === 'string' && /\.(png|jpe?g|gif|webp|bmp|svg|mp4|webm|mov)(\?|$)/i.test(comp.file.url)) out.hasImage = true;
+                break;
+            default:
+                if (Array.isArray(comp.components)) for (const c of comp.components) walk(c);
+                break;
+        }
+    };
+    if (Array.isArray(message.components)) for (const c of message.components) walk(c);
+
+    return out;
+}
+
+function buildSlashCommandData(message) {
     const interaction = message?.interaction;
     const metadata = message?.interactionMetadata;
     const optsRaw = message?.interactionOptions || interaction?.options;
-    // Build command path: /cmd group? subcommand? plus key:value options
-    if (!optsRaw && !metadata) return null;
+    if (!interaction && !metadata) return null;
 
-    const opts = Array.isArray(optsRaw) ? optsRaw : [];
-    let cmdParts = [interaction?.commandName || '?'];
-    let valueOpts = opts;
+    let cmdParts = [interaction?.commandName || metadata?.name || '?'];
+    let valueOpts = Array.isArray(optsRaw) ? optsRaw : [];
 
-    // Detect subcommand groups: nested option structure { type:2/1 (group/subcommand), name, options }
+    // Walk subcommand-group → subcommand nesting.
     for (let i = 0; i < 2; i++) {
         if (valueOpts.length === 1 && valueOpts[0] && (valueOpts[0].type === 1 || valueOpts[0].type === 2)) {
             cmdParts.push(valueOpts[0].name);
             valueOpts = Array.isArray(valueOpts[0].options) ? valueOpts[0].options : [];
         }
     }
-    // Filter out autocomplete-only `focused` options
     valueOpts = valueOpts.filter((o) => o && !o.focused);
 
-    if (!valueOpts.length && cmdParts.length === 1 && !metadata) return null;
-
-    const triggeredBy = metadata?.user || interaction?.user;
+    const triggeredBy = metadata?.user || interaction?.user || null;
+    const opts = valueOpts.map((o) => ({
+        name: String(o.name ?? ''),
+        value: o.value == null ? '' : String(o.value),
+        type: typeof o.type === 'number' ? o.type : null,
+    }));
 
-    return (0, jsx_runtime_1.jsxs)("div", { className: "dht-slash-options", children: [
-        (0, jsx_runtime_1.jsx)("span", { className: "dht-slash-cmd-name", children: '/' + cmdParts.filter(Boolean).join(' ') }),
-        valueOpts.map((o, i) => (0, jsx_runtime_1.jsxs)("span", { className: "dht-slash-opt", children: [
-            (0, jsx_runtime_1.jsxs)("span", { className: "dht-slash-opt-name", children: [String(o.name), ':'] }),
-            ' ',
-            (0, jsx_runtime_1.jsx)("span", { className: "dht-slash-opt-val", children: String(o.value ?? '') })
-        ] }, i)),
-        triggeredBy && (0, jsx_runtime_1.jsxs)("span", { className: "dht-slash-opt", children: ['by ', (0, jsx_runtime_1.jsx)("strong", { children: triggeredBy.displayName || triggeredBy.username || triggeredBy.id })] })
-    ] });
+    return {
+        cmd: '/' + cmdParts.filter(Boolean).join(' '),
+        opts,
+        by: triggeredBy ? (triggeredBy.displayName || triggeredBy.username || triggeredBy.id || '') : '',
+        byId: triggeredBy ? (triggeredBy.id || '') : '',
+    };
 }
 
 function renderEditHistory(history, context) {

package/dist/generator/renderers/systemMessage.js

@@ -16,6 +16,7 @@ async function SystemMessage({ message, context }) {
     const author = message.author;
     const authorName = author?.displayName ?? author?.username ?? 'Unknown';
     const color = message.member?.roles?.color?.hexColor;
+    const authorId = author?.id;
     const ctx = context || {};
 
     switch (message.type) {
@@ -25,12 +26,31 @@ async function SystemMessage({ message, context }) {
 
         case discord_js_1.MessageType.ChannelPinnedMessage: {
             const refId = message.reference?.messageId;
-            return ((0, jsx_runtime_1.jsxs)("discord-system-message", { id: `m-${message.id}`, type: "pin", children: [
-                (0, jsx_runtime_1.jsx)(Highlight, { color, children: authorName }),
-                ' ',
-                (0, jsx_runtime_1.jsx)("span", { "data-i18n": "pinned", children: t(ctx, 'pinned', 'pinned a message to this channel.') }),
-                refId ? (0, jsx_runtime_1.jsx)("i", { "data-goto": refId, className: "dht-jump", role: "button", tabIndex: 0, children: " (jump)" }) : null,
-            ] }, message.id));
+            // Discord renders this as: "{user} pinned {a message} to this channel."
+            // where "a message" is the clickable jump link. The i18n key `pinned`
+            // accepts a `{message}` placeholder; if absent (legacy dict), we fall
+            // back to flat text + a trailing " (jump)".
+            const template = t(ctx, 'pinned', 'pinned {message} to this channel.');
+            const linkLabel = t(ctx, 'pinnedLink', 'a message');
+            const linkEl = refId
+                ? (0, jsx_runtime_1.jsx)("i", { "data-goto": refId, className: "dht-jump", role: "button", tabIndex: 0, children: linkLabel })
+                : (0, jsx_runtime_1.jsx)("strong", { children: linkLabel });
+            const parts = template.includes('{message}') ? template.split('{message}') : null;
+            return ((0, jsx_runtime_1.jsxs)("discord-system-message", { id: `m-${message.id}`, type: "pin", children: parts
+                ? [
+                    (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
+                    ' ',
+                    parts[0],
+                    linkEl,
+                    parts[1],
+                ]
+                : [
+                    (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
+                    ' ',
+                    (0, jsx_runtime_1.jsx)("span", { "data-i18n": "pinned", children: template }),
+                    refId ? (0, jsx_runtime_1.jsx)("i", { "data-goto": refId, className: "dht-jump", role: "button", tabIndex: 0, children: " (jump)" }) : null,
+                ]
+            }, message.id));
         }
 
         case discord_js_1.MessageType.GuildBoost:
@@ -38,7 +58,7 @@ async function SystemMessage({ message, context }) {
         case discord_js_1.MessageType.GuildBoostTier2:
         case discord_js_1.MessageType.GuildBoostTier3:
             return ((0, jsx_runtime_1.jsxs)("discord-system-message", { id: `m-${message.id}`, type: "boost", children: [
-                (0, jsx_runtime_1.jsx)(Highlight, { color, children: authorName }),
+                (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' ',
                 (0, jsx_runtime_1.jsx)("span", { "data-i18n": "boosted", children: t(ctx, 'boosted', 'boosted the server!') }),
             ] }, message.id));
@@ -48,7 +68,7 @@ async function SystemMessage({ message, context }) {
             const refId = message.reference?.messageId;
             const label = message.content || 'New thread';
             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 }),
+                (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' ',
                 (0, jsx_runtime_1.jsx)("span", { "data-i18n": "threadStarted", children: t(ctx, 'threadStarted', 'started a thread:') }),
                 ' ',
@@ -60,7 +80,7 @@ async function SystemMessage({ message, context }) {
 
         case discord_js_1.MessageType.ChannelNameChange:
             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 }),
+                (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' ',
                 (0, jsx_runtime_1.jsx)("span", { "data-i18n": "changedChannelName", children: t(ctx, 'changedChannelName', 'changed the channel name:') }),
                 ' ',
@@ -69,7 +89,7 @@ async function SystemMessage({ message, context }) {
 
         case discord_js_1.MessageType.ChannelIconChange:
             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 }),
+                (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' ',
                 (0, jsx_runtime_1.jsx)("span", { "data-i18n": "changedChannelIcon", children: t(ctx, 'changedChannelIcon', 'changed the channel icon.') }),
             ] }, message.id));
@@ -78,7 +98,7 @@ async function SystemMessage({ message, context }) {
         case discord_js_1.MessageType.ContextMenuCommand: {
             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 }),
+                (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' ',
                 (0, jsx_runtime_1.jsx)("span", { "data-i18n": "usedCommand", children: t(ctx, 'usedCommand', 'used') }),
                 ' ',
@@ -88,7 +108,7 @@ async function SystemMessage({ message, context }) {
 
         case discord_js_1.MessageType.Call:
             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 }),
+                (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' ',
                 (0, jsx_runtime_1.jsx)("span", { "data-i18n": "startedCall", children: t(ctx, 'startedCall', 'started a call.') }),
             ] }, message.id));
@@ -97,7 +117,7 @@ async function SystemMessage({ message, context }) {
             const followText = t(ctx, 'addedFollow', 'added {target} to follow this channel.');
             const parts = followText.split('{target}');
             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 }),
+                (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' ',
                 parts[0],
                 (0, jsx_runtime_1.jsxs)("span", { className: "dht-mention dht-mention--channel", children: ['#', message.content || 'channel'] }),
@@ -107,7 +127,7 @@ async function SystemMessage({ message, context }) {
 
         case discord_js_1.MessageType.RecipientRemove:
             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 }),
+                (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' ',
                 (0, jsx_runtime_1.jsx)("span", { "data-i18n": "left", children: t(ctx, 'left', 'left.') }),
             ] }, message.id));
@@ -132,34 +152,34 @@ async function SystemMessage({ message, context }) {
         }
         case discord_js_1.MessageType.StageStart:
             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 }),
+                (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' started a stage: ',
                 (0, jsx_runtime_1.jsx)("strong", { children: message.content || '' })
             ] }, message.id));
         case discord_js_1.MessageType.StageEnd:
             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 }),
+                (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' ended the stage.'
             ] }, message.id));
         case discord_js_1.MessageType.StageSpeaker:
             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 }),
+                (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' is now a speaker.'
             ] }, message.id));
         case discord_js_1.MessageType.StageRaiseHand:
             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 }),
+                (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' requested to speak.'
             ] }, message.id));
         case discord_js_1.MessageType.StageTopic:
             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 }),
+                (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' changed the stage topic: ',
                 (0, jsx_runtime_1.jsx)("strong", { children: message.content || '' })
             ] }, message.id));
         case discord_js_1.MessageType.GuildApplicationPremiumSubscription:
             return ((0, jsx_runtime_1.jsxs)("discord-system-message", { id: `m-${message.id}`, type: "boost", children: [
-                (0, jsx_runtime_1.jsx)(Highlight, { color, children: authorName }),
+                (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' subscribed ',
                 (0, jsx_runtime_1.jsx)("strong", { children: message.applicationId ? `app ${message.applicationId}` : 'an app' }),
                 ' to this server.'
@@ -168,7 +188,7 @@ async function SystemMessage({ message, context }) {
         case discord_js_1.MessageType.RoleSubscriptionPurchase: {
             const roleName = message.roleSubscriptionData?.tierName || message.content || 'a role';
             return ((0, jsx_runtime_1.jsxs)("discord-system-message", { id: `m-${message.id}`, type: "boost", children: [
-                (0, jsx_runtime_1.jsx)(Highlight, { color, children: authorName }),
+                (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' ',
                 t(ctx, 'roleSubPurchased', 'subscribed to {role}!').replace('{role}', roleName),
             ] }, message.id));
@@ -193,9 +213,16 @@ async function SystemMessage({ message, context }) {
     }
 }
 
-function Highlight({ children, color }) {
+function Highlight({ children, color, userId }) {
     const safe = typeof color === 'string' && /^#[0-9a-fA-F]{3,8}$/.test(color) ? color : 'white';
-    return (0, jsx_runtime_1.jsx)("i", { style: { color: safe }, children: children });
+    const props = { style: { color: safe } };
+    // Wire up the user popup the same way mentions and message authors do.
+    if (typeof userId === 'string' && userId) {
+        props.className = 'dht-sys-author';
+        props['data-mention-type'] = 'user';
+        props['data-mention-id'] = userId;
+    }
+    return (0, jsx_runtime_1.jsx)("i", Object.assign({}, props, { children }));
 }
 
 const allJoinMessages = [
@@ -252,11 +279,12 @@ function pickJoinMessage(seed) {
 
 function JoinMessage({ member, fallbackUser, seed, context }) {
     const template = pickJoinMessage(seed);
+    const uid = member?.id || fallbackUser?.id;
     return template
         .split('{user}')
         .flatMap((item, i) => [
             item,
-            (0, jsx_runtime_1.jsx)(Highlight, { color: member?.roles?.color?.hexColor, children: member?.nickname ?? fallbackUser.displayName ?? fallbackUser.username }, i),
+            (0, jsx_runtime_1.jsx)(Highlight, { color: member?.roles?.color?.hexColor, userId: uid, children: member?.nickname ?? fallbackUser.displayName ?? fallbackUser.username }, i),
         ])
         .slice(0, -1);
 }

package/dist/generator/transcript.js

@@ -48,15 +48,35 @@ async function DiscordMessages(_a) {
             dateSeps[idx] && (0, jsx_runtime_1.jsx)("div", { className: "dht-date-sep", children: dateSeps[idx] }, `sep-${idx}`),
             (0, jsx_runtime_1.jsx)(message_1.default, { message: message, context: Object.assign({ messages, channel, callbacks }, options) }, message.id)
         ]),
-        (0, jsx_runtime_1.jsxs)("div", { style: { textAlign: 'center', width: '100%' }, children: [
-            options.footerText
-                ? options.footerText.replaceAll('{number}', messages.length.toString()).replaceAll('{s}', messages.length > 1 ? 's' : '')
-                : `Exported ${messages.length} message${messages.length > 1 ? 's' : ''}.`,
-            ' ',
-            options.poweredBy
-                ? (0, jsx_runtime_1.jsxs)("span", { style: { textAlign: 'center' }, children: ["Powered by ", (0, jsx_runtime_1.jsx)("a", { href: "https://github.com/ItzDerock/discord-html-transcripts", style: { color: 'lightblue' }, children: "discord-html-transcripts" }), "."] })
-                : null
-        ] })
+        renderLegacyFooter(messages, options),
     ] }));
 }
+
+// Legacy "Exported X message(s). Powered by …" line. The new stats footer
+// (see renderStatsFooter in generator/index.js) already shows the message
+// count, so this line is suppressed by default and only renders when:
+//   - options.statsFooter === false (caller opted out of the new footer), or
+//   - options.footerText is explicitly set to a string, or
+//   - options.poweredBy === true (caller wants the credit link).
+function renderLegacyFooter(messages, options) {
+    const statsDisabled = options.statsFooter === false ||
+        (options.statsFooter && options.statsFooter.enabled === false);
+    const customText = (typeof options.footerText === 'string' && options.footerText.length > 0)
+        ? options.footerText.replaceAll('{number}', messages.length.toString()).replaceAll('{s}', messages.length > 1 ? 's' : '')
+        : null;
+    const wantsPowered = !!options.poweredBy;
+    // Default render only if stats footer is off AND no custom text was set.
+    const defaultText = statsDisabled && !customText
+        ? `Exported ${messages.length} message${messages.length > 1 ? 's' : ''}.`
+        : null;
+    const shown = customText || defaultText;
+    if (!shown && !wantsPowered) return null;
+    return (0, jsx_runtime_1.jsxs)("div", { style: { textAlign: 'center', width: '100%' }, children: [
+        shown,
+        shown && wantsPowered ? ' ' : null,
+        wantsPowered
+            ? (0, jsx_runtime_1.jsxs)("span", { style: { textAlign: 'center' }, children: ["Powered by ", (0, jsx_runtime_1.jsx)("a", { href: "https://github.com/ItzDerock/discord-html-transcripts", style: { color: 'lightblue' }, children: "discord-html-transcripts" }), "."] })
+            : null
+    ] });
+}
 //# sourceMappingURL=transcript.js.map