discord-message-transcript-base 1.0.0

package/dist/renderers/html/css.min.js

@@ -0,0 +1 @@
+export const MINIFIED_CSS = `body{background-color:#3a3c43;color:#dbdee1;font-family:"Whitney","Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:0;width:100%}header{height:fit-content;border-bottom:2px solid black;margin-top:2rem;padding-left:2rem;padding-bottom:1rem;display:flex;flex-direction:column;display:flex;flex-direction:row}a{text-decoration:none;color:#1E90FF}p{margin:0}h1{margin:.5rem 0}h2{margin:.3rem 0}h3{margin:.15rem}h4{margin:0}code{border:1px solid #202225;border-radius:.25rem}blockquote{margin:.5rem 0;border-left:.25rem solid #4f545c;padding:.4rem .6rem;border-radius:.25rem;color:#9f9fa6}.c1{display:flex;align-items:baseline;gap:.5rem}.c2{background-color:#5865f2;color:white;font-weight:600;font-size:80%;padding:.1rem .35rem;border-radius:.25rem;letter-spacing:.03rem;height:fit-content;width:fit-content;align-self:flex-start}.c3{background-color:#747F8D50;color:white;font-weight:600;font-size:70%;padding:.1rem .35rem;border-radius:.25rem;letter-spacing:.03rem;height:fit-content;width:fit-content;align-self:center}.c4{background-color:#5664fa41;padding:.2rem;border-radius:.25rem;transition:background-color .2s ease}.c4:hover{background-color:#5664fa7e}.c5{width:7rem;height:7rem;border-radius:50%;background-color:#4f545c;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:600}.c6{display:flex;flex-direction:column;gap:.2rem;padding:.5rem;border-radius:1rem}.c6.highlight,.c6:hover{background-color:#40434b;transition:background-color .3s ease-in-out}.c7{display:flex;flex-direction:row;gap:1rem;padding:.5rem;border-radius:.25rem}.c8{width:3.5rem;height:3.5rem;border-radius:50%}.c9{display:flex;flex-direction:column;gap:.25rem}.c10{display:flex;flex-direction:row;gap:.75rem}.c11{margin:0}.c12{color:#999;font-size:77.5%;align-self:center}.c13{line-height:1.5}.c14{white-space:pre-wrap}.c15{font-size:85%;color:#808080}.c16{display:inline-block;background-color:#202225;color:#202225;padding:0 .2rem;border-radius:.2rem;cursor:pointer;transition:background-color .1s ease-in-out,color .1s ease-in-out}.c16.revealed{background-color:transparent;color:inherit}.c17{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:#b5bac1;cursor:pointer;margin-left:2rem}.c18{flex-shrink:0;width:2.25rem;height:2.25rem;color:#b5bac1}.c19{width:1.75rem;height:1.75rem;border-radius:50%;flex-shrink:0}.c20{font-weight:600;color:#dbdee1;margin-right:.3rem}.c21{background-color:#5865f2;color:white;font-weight:600;font-size:70%;padding:.1rem .3rem;border-radius:.25rem;letter-spacing:.03rem;height:fit-content;align-self:center;flex-shrink:0}.c22{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#b5bac1;font-size:.75rem}.c23{background-color:#2b2d31;border:.15rem solid #2b2d31;border-left:.25rem solid;border-radius:.25rem;padding:.5rem .75rem;margin-top:.5rem;display:flex;flex-direction:column;gap:.5rem;max-width:40rem;min-width:30rem}.c23 a{color:#00aff4;text-decoration:none}.c23 a:hover{text-decoration:underline}.c24{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}.c25{display:flex;flex-direction:column;gap:.25rem}.c26{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:#fff;margin-bottom:.5rem}.c27{width:1.5rem;height:1.5rem;border-radius:50%}.c28{color:#fff;font-weight:500}.c29{font-size:1rem;font-weight:700;color:#fff;margin-bottom:.75rem}.c30{max-width:80px;max-height:80px;object-fit:contain;border-radius:.25rem;flex-shrink:0}.c31{font-size:.875rem;color:#dcddde}.c32{display:flex;flex-wrap:wrap;gap:.5rem}.c33{flex:1;min-width:150px}.c34{font-size:.75rem;font-weight:700;color:#fff;margin-bottom:.25rem}.c35{font-size:.875rem;color:#dcddde}.c36{margin-top:.5rem;max-width:100%;height:auto}.c36 img{max-width:100%;max-height:300px;object-fit:contain;border-radius:.25rem}.c37{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:#999;margin-top:.5rem}.c38{width:1.25rem;height:1.25rem;border-radius:50%}.c39{color:#999}.c40,.c41{max-width:400px;height:auto;border-radius:.25rem;margin-top:.5rem}.c42{width:300px;margin-top:.5rem}.c43{background-color:#2b2d31;border:1px solid #202225;border-radius:.75rem;padding:.75rem;display:flex;align-items:center;gap:.75rem;max-width:400px;margin-top:.5rem;width:fit-content}.c44{width:2.5rem;height:2.5rem;fill:#b9bbbe;flex-shrink:0}.c45{display:flex;flex-direction:column;gap:.1rem;overflow:hidden;flex-grow:1}.c46{color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c47{font-size:.75rem;color:#72767d}.c48{display:block;flex-shrink:0}.c49{width:1.5rem;height:1.5rem;fill:#b9bbbe;transition:fill .2s ease}.c48:hover .c49{fill:#fff}.c50{position:relative;display:inline-block;border-radius:.5rem;overflow:hidden;cursor:pointer}.c50 .c51{filter:blur(64px);pointer-events:none;transition:filter .2s ease;width:100%;height:100%}.c50 .c52{position:absolute;inset:0;background:rgba(32,34,37,.85);color:#fff;font-weight:600;letter-spacing:.05em;display:flex;align-items:center;justify-content:center;z-index:2;user-select:none}.c50.revealed .c51{filter:none;pointer-events:auto}.c50.revealed .c52{display:none}.c53{display:flex;gap:.5rem;margin-top:.5rem}.c54{display:flex;align-items:center;gap:.5rem;padding:0 .8rem;height:2.5rem;border-radius:.6rem;color:white;font-weight:600;cursor:pointer;transition:filter .2s ease}.c54:hover{filter:brightness(1.1)}.c55{font-size:1.25rem}.c56{font-size:.875rem}.c57{display:flex;align-items:center;gap:.5rem;color:white;font-weight:600}.c58{width:1.25rem;height:1.25rem}.c59{width:100%;position:relative}.c60{background-color:#2b2d31;border:1px solid #202225;border-radius:.75rem;padding:.75rem;min-width:17.5rem;cursor:pointer;user-select:none}.c61{color:#808080}.c62{display:none;position:absolute;top:100%;left:0;width:100%;background-color:#2b2d31;border:1px solid #202225;border-radius:1rem;margin-top:.25rem;padding:.5rem;z-index:10;box-sizing:border-box}.c59.active .c62{display:block}.c63{display:flex;align-items:center;gap:.5rem;padding:.75rem;border-radius:.75rem;cursor:pointer;transition:background-color .2s ease}.c63:hover{background-color:#4f545c}.c64{font-size:1.25rem}.c65{display:flex;flex-direction:column}.c66{font-weight:500}.c67{font-size:.75rem;color:#808080}.c68{display:flex;flex-wrap:wrap;gap:.25rem;width:100%;max-width:40rem;aspect-ratio:1/1;border:1px solid #202225;padding:.35rem;overflow:hidden}.c69{flex-grow:1;flex-basis:0;min-width:30%;display:flex}.c70{width:100%;height:100%;object-fit:cover;display:block;border-radius:1rem}.c71{background-color:#2b2d31;border-radius:.5rem;padding:1rem;max-width:40rem;min-width:30rem;border-left:.25rem solid}.c72{display:flex;flex-direction:row;justify-content:space-between;padding:.5rem 0}.c73{margin-right:.5rem;margin-left:1rem}.c74{width:5rem;height:5rem;border-radius:.5rem}.c75{padding:.5rem 0}.c76{border:1px solid #808080}.c77{background-color:#2b2d31;border-radius:.5rem;padding:1rem;margin-top:.5rem;max-width:40rem;min-width:25rem}.c78{font-size:1.1rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.c79{display:flex;flex-direction:column;gap:.5rem}.c80{background-color:#3a3c42;border-radius:.3rem;padding:.75rem;cursor:pointer;border:1px solid transparent;transition:border-color .2s ease;position:relative;overflow:hidden}.c80:hover{border-color:#4d515a}.c81{position:absolute;top:0;left:0;height:100%;background-color:#5664fa7a;border-radius:.2rem;z-index:1}.c82{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}.c83{display:flex;align-items:center;gap:.5rem}.c84{font-size:1.25rem}.c85{font-weight:500}.c86{font-size:.8rem;color:#b5bac1;font-weight:700}.c87{margin-top:1rem;font-size:.75rem;color:#949ba4}.c88{background-color:#2b2d31;border-radius:.5rem;padding:1rem;margin-top:.5rem;border:1px solid #3a3c42;min-width:20rem;max-width:40rem;display:flex;flex-direction:row;justify-content:space-between}.c89{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:600;margin-bottom:.4rem}.c90{color:#57f287;font-size:1.1em}.c91{font-size:.9rem;color:#b5bac1}.c92{margin-right:.5rem;margin-left:1rem;align-self:center}.c93{background-color:black;color:white;padding:.5rem 1rem;border-radius:.3rem;text-decoration:none;font-weight:500;transition:background-color .2s ease;cursor:pointer}.c93:hover{filter:brightness(1.1)}.c94{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.c95{align-items:center;background-color:#2b2d31;border:1px solid #3a3c42;border-radius:1rem;padding:.25rem .6rem;font-size:1rem;color:#dcddde;font-weight:700;cursor:pointer}.c95:hover{filter:brightness(1.1)}`;

package/dist/renderers/html/html.d.ts

@@ -0,0 +1,20 @@
+import { JsonData } from "../../types/types.js";
+export declare class Html {
+    data: JsonData;
+    dateFormat: Intl.DateTimeFormat;
+    constructor(data: JsonData);
+    private getIcon;
+    private headerBuilder;
+    private messagesBuilder;
+    toHTML(): string;
+    private pollBuilder;
+    private pollResultEmbedBuilder;
+    private embedBuilder;
+    private attachmentBuilder;
+    private componentBuilder;
+    private buttonBuilder;
+    private selectorBuilder;
+    private reactionsBuilder;
+    private spoilerAttachmentBuilder;
+    private svgBuilder;
+}

package/dist/renderers/html/html.js

@@ -0,0 +1,441 @@
+import { CustomError } from "../../core/error.js";
+import { markdownToHTML } from "../../core/markdown.js";
+import { JsonButtonStyle, JsonComponentType } from "../../types/types.js";
+import { ACTIONROW_CSS, ATTACHMENT_CSS, BUTTON_CSS, COMPONENTS_CSS, COMPONENTSV2_CSS, DEFAULT_CSS, EMBED_CSS, MESSAGE_CSS, POLL_CSS, POLL_RESULT_EMBED_CSS, REACTIONS_CSS } from "./css.js";
+import { script } from "./js.js";
+import packageJson from "./../../../package.json" with { type: 'json' };
+const COUNT_UNIT = ["KB", "MB", "GB", "TB"];
+const BUTTON_COLOR = ["black", "#5865f2", "#323538", "#32c05f", "#be3638", "#323538", "#5865f2"];
+export class Html {
+    data;
+    dateFormat;
+    constructor(data) {
+        this.data = data;
+        try {
+            this.dateFormat = new Intl.DateTimeFormat(data.options.localDate, {
+                timeZone: data.options.timeZone,
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+            });
+        }
+        catch (error) {
+            throw new CustomError("[discord-message-transcript] Invalid LocalDate and/or TimeZone.");
+        }
+    }
+    getIcon() {
+        const { guild, channel } = this.data;
+        if (guild) {
+            if (guild.icon) {
+                return `<img src="${guild.icon}" style="width: 7rem; height: 7rem; border-radius: 50%;">`;
+            }
+            else {
+                return `<div class="guildInitialsIcon">${initials(guild.name)}</div>`;
+            }
+        }
+        else {
+            return `<img src="${channel.img}" style="width: 7rem; height: 7rem; border-radius: 50%;">`;
+        }
+        function initials(name) {
+            const words = name.split(' ').filter(word => word.length > 0);
+            if (words.length >= 1) {
+                return words.map(word => word[0]).join('').substring(0, 3).toUpperCase();
+            }
+            return name.substring(0, 1).toUpperCase();
+        }
+    }
+    headerBuilder() {
+        const { channel, guild } = this.data;
+        return `
+        <div style="display: flex;  gap: 1.5rem; align-items: center; width 100vw">
+            ${this.getIcon()}
+            <div style="display: flex; flex-direction: column; justify-content: center; gap: 1.25rem;">
+                ${guild ? `<div id="guild" class="line">
+                    <h4>Guild: </h4>
+                    <h4 style="font-weight: normal;">${guild.name}</h4>
+                </div>` : ""}
+                ${channel.parent ? `<div id="category" class="line">
+                    <h4>Category: </h4>
+                    <h4 style="font-weight: normal;">${channel.parent.name}</h4>
+                </div>` : ""}
+                <div id="channel" class="line">
+                    <h4>Channel: </h4>
+                    <h4 style="font-weight: normal;">${channel.name}</h4>
+                </div>
+                ${channel.topic ? `<div id="topic" class="line">
+                    <h4>Topic: </h4>
+                    <h4 style="font-weight: normal;">${channel.topic}</h4>
+                </div>` : ""}
+            </div>
+        </div>
+        `;
+    }
+    messagesBuilder() {
+        return this.data.messages.map(message => {
+            const date = new Date(message.createdTimestamp);
+            return `
+<div class="messageDiv" id="${message.id}" data-author-id="${message.authorId}">
+    ${message.references && message.references.messageId ?
+                `<div class="messageReply" data-id="${message.references.messageId}">
+        <svg class="messageReplySvg"><use href="#reply-icon"></use></svg>
+        <img class="messageReplyImg" src="">
+        <div class="replyBadges"></div>
+        <div class="messageReplyText"></div>
+    </div>` : ""}
+    <div class="messageBotton">
+        <img src="" class="messageImg">
+        <div class="messageDivRight">
+            <div class="messageUser">
+                <h3 class="messageUsername"></h3>
+                <div class="badges"></div>
+                <p class="messageTimeStamp">${this.dateFormat.format(date)}</p>
+            </div>
+            <div class="messageContent">${markdownToHTML(message.content, this.data.mentions, message.mentions, this.dateFormat)}</div>
+            ${message.poll ? this.pollBuilder(message.poll) : ""}
+            ${message.embeds.length > 0 ? this.embedBuilder(message, message.embeds) : ""}
+            ${message.attachments.length > 0 ? this.attachmentBuilder(message.attachments) : ""}
+            ${message.components.length > 0 ? this.componentBuilder(message, message.components) : ""}
+            ${message.reactions.length > 0 ? this.reactionsBuilder(message.reactions) : ""}
+        </div>
+    </div>
+</div>
+        `;
+        }).join("");
+    }
+    toHTML() {
+        const { options } = this.data;
+        const cssContent = `
+            ${DEFAULT_CSS}
+            ${MESSAGE_CSS}
+            ${options.includePolls ? POLL_CSS + POLL_RESULT_EMBED_CSS : ""}
+            ${options.includeEmbeds ? EMBED_CSS : ""}
+            ${options.includeButtons || options.includeComponents ? ACTIONROW_CSS : ""}
+            ${options.includeAttachments || options.includeV2Components ? ATTACHMENT_CSS : ""}
+            ${options.includeButtons || options.includeV2Components ? BUTTON_CSS : ""}
+            ${options.includeComponents ? COMPONENTS_CSS : ""}
+            ${options.includeV2Components ? COMPONENTSV2_CSS : ""}
+            ${options.includeReactions ? REACTIONS_CSS : ""}
+        `;
+        const jsContent = script(options.includeComponents, options.includePolls);
+        return `
+<!DOCTYPE html>
+<html lang="${options.localDate}">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${options.fileName}</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/atom-one-dark.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js"></script>
+    ${options.selfContained ? `<style>${cssContent}</style>` : `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/discord-message-transcript-base@${packageJson.version}/dist/assets/style.css">`}
+</head>
+<body>
+    ${this.svgBuilder()}
+    <header>
+        ${this.headerBuilder()}
+    </header>
+    <main style="display: flex; flex-direction: column; padding: 2.25%;">
+       ${this.messagesBuilder()}
+    </main>
+    ${options.watermark ? `<footer>
+        <br>
+        <div style="padding: 1rem 0; font-weight: 700; text-align: center; font-size: 1.5rem; background-color: #2b2d31;">Transcript generated by <a href="https://github.com/HenriqueMairesse/discord-message-transcript">discord-message-transcript</a></div>
+    </footer> ` : ""}
+    <script id="authorData" type="application/json">
+        ${JSON.stringify({ authors: this.data.authors })}
+    </script>
+    ${options.selfContained ? `<script>${jsContent}</script>` : `<script src="https://cdn.jsdelivr.net/npm/discord-message-transcript-base@${packageJson.version}/dist/assets/script.js"></script>`}
+</body>
+</html>
+        `;
+    }
+    pollBuilder(poll) {
+        const totalVotes = poll.answers.reduce((acc, answer) => acc + answer.count, 0);
+        let footerText = `${totalVotes} votes`;
+        if (poll.isFinalized) {
+            footerText += ` • Poll closed`;
+        }
+        else if (poll.expiry) {
+            footerText += ` • ${poll.expiry}`;
+        }
+        return `
+        <div class="pollDiv">
+            <div class="pollQuestion">${poll.question}</div>
+            <div class="pollAnswers">
+                ${poll.answers.map(answer => {
+            const voteCount = answer.count;
+            const percentage = totalVotes > 0 ? (voteCount / totalVotes) * 100 : 0;
+            return `
+                    <div class="pollAnswer">
+                        <div class="pollAnswerBar" style="width: ${percentage}%;"></div>
+                        <div class="pollAnswerContent">
+                            <div class="pollAnswerDetails">
+                                ${answer.emoji ? `<div class="pollAnswerEmoji">${answer.emoji.name}</div>` : ''}
+                                <div class="pollAnswerText">${answer.text}</div>
+                            </div>
+                            <div class="pollAnswerVotes">${voteCount}</div>
+                        </div>
+                    </div>
+                    `;
+        }).join('')}
+            </div>
+            <div class="pollFooter">${footerText}</div>
+        </div>
+        `;
+    }
+    pollResultEmbedBuilder(embed, message) {
+        const getField = (name) => embed.fields?.find(f => f.name === name)?.value;
+        const winnerText = getField("victor_answer_text");
+        const emojiText = getField("victor_answer_emoji_name");
+        const winnerVotes = parseInt(getField("victor_answer_votes") ?? "0");
+        const totalVotes = parseInt(getField("total_votes") ?? "0");
+        const winnerPercentage = totalVotes > 0 ? (winnerVotes / totalVotes) * 100 : 0;
+        if (!winnerText && winnerVotes != 0)
+            return '';
+        return `
+        <div class="pollResultEmbed">
+            <div>
+                <div class="pollResultEmbedWinner">
+                    ${emojiText ? emojiText : ""}
+                    ${winnerText ?? "There was no winner"}
+                    ${winnerVotes != 0 ? `<span class="pollResultEmbedCheckmark">✔</span>` : ""}
+                </div>
+                <div class="pollResultEmbedSubtitle">${totalVotes} votes (${winnerPercentage.toFixed(1)}%)</div>
+            </div>
+            <div class="pollResultEmbedButtonDiv">
+                <div data-id="${message.references?.messageId ?? ""}" class="pollResultEmbedButton">View Poll</div>
+            </div>
+        </div>
+        `;
+    }
+    embedBuilder(message, embeds) {
+        return embeds.map(embed => {
+            if (embed.type === 'poll_result')
+                return this.pollResultEmbedBuilder(embed, message);
+            if (!this.data.options.includeEmbeds)
+                return "";
+            const embedAuthor = embed.author ? (embed.author.url ? `<a class="embedHeaderLefttAuthorName" href="${embed.author.url}" target="_blank">${embed.author.name}</a>` : `<p class="embedHeaderLeftAuthorName">${embed.author.name}</p>`) : "";
+            const embedTitle = embed.title ? (embed.url ? `<a class="embedHeaderLeftTitle" href="${embed.url}" target="_blank">${embed.title}</a>` : `<p class="embedHeaderLeftTitle">${embed.title}</p>`) : "";
+            return `
+                <div class="embed" style="${embed.hexColor ? `border-left-color: ${embed.hexColor}` : ''}">
+                    ${embed.author || embed.title || embed.thumbnail || embed.description ? `
+                    <div class="embedHeader">
+                        <div class="embedHeaderLeft">
+                            ${embed.author ? `
+                            <div class="embedHeaderLeftAuthor">
+                                ${embed.author.iconURL ? `<img class="embedHeaderLeftAuthorImg" src="${embed.author.iconURL}">` : ""}
+                                ${embedAuthor}
+                            </div>` : ""}
+                            ${embedTitle}
+                            ${embed.description ? `<div class="embedDescription">${markdownToHTML(embed.description, this.data.mentions, message.mentions, this.dateFormat)}</div>` : ""}
+                        </div>
+                        ${embed.thumbnail ? `<img class="embedHeaderThumbnail" src="${embed.thumbnail.url}">` : ""}
+                    </div>` : ""}
+                    ${embed.fields && embed.fields.length > 0 ? `
+                    <div class="embedFields">
+                        ${embed.fields.map(field => `
+                        <div class="embedFieldsField" style="${field.inline ? 'display: inline-block;' : ''}">
+                            <p class="embedFieldsFieldTitle">${field.name}</p>
+                            <p class="embedFieldsFieldValue">${markdownToHTML(field.value, this.data.mentions, message.mentions, this.dateFormat)}</p>
+                        </div>`).join("")}
+                    </div>` : ""}
+                    ${embed.image ? `
+                    <div class="embedImage">
+                        <img src="${embed.image.url}">
+                    </div>` : ""}
+                    ${embed.footer || embed.timestamp ? `
+                    <div class="embedFooter">
+                        ${embed.footer?.iconURL ? `<img class="embedFooterImg" src="${embed.footer.iconURL}">` : ""}
+                        ${embed.footer?.text || embed.timestamp ? `<p class="embedFooterText">${embed.footer?.text ?? ''}${embed.footer?.text && embed.timestamp ? ' | ' : ''}${embed.timestamp ? this.dateFormat.format(new Date(embed.timestamp)) : ''}</p>` : ""}
+                    </div>` : ""}
+                </div>
+            `;
+        }).join("");
+    }
+    attachmentBuilder(attachments) {
+        return attachments.map(attachment => {
+            let html = "";
+            if (attachment.contentType?.startsWith('image/')) {
+                html = `<img class="attachmentImage" src="${attachment.url}">`;
+            }
+            else if (attachment.contentType?.startsWith('video/')) {
+                html = `<video class="attachmentVideo" controls src="${attachment.url}"></video>`;
+            }
+            else if (attachment.contentType?.startsWith('audio/')) {
+                html = `<audio class="attachmentAudio" controls src="${attachment.url}"></audio>`;
+            }
+            else {
+                let fileSize = attachment.size / 1024;
+                let count = 0;
+                while (fileSize > 512 && count < COUNT_UNIT.length - 1) {
+                    fileSize = fileSize / 1024;
+                    count++;
+                }
+                html = `
+                    <div class="attachmentFile">
+                        <div class="attachmentFileInfo">
+                            <p class="attachmentFileName">${attachment.name ?? 'attachment'}</p>
+                            <div class="attachmentFileSize">${fileSize.toFixed(2)} ${COUNT_UNIT[count]}</div>
+                        </div>
+                        <a class="attachmentDownload" href="${attachment.url}" target="_blank">
+                            <svg class="attachmentDownloadIcon"><use href="#download-icon"></use></svg>
+                        </a>
+                    </div>
+                `;
+            }
+            return this.spoilerAttachmentBuilder(attachment.spoiler, html);
+        }).join("");
+    }
+    componentBuilder(message, components) {
+        return components.map(component => {
+            switch (component.type) {
+                case JsonComponentType.ActionRow: {
+                    if (!component.components[0])
+                        return "";
+                    return `
+                    <div class="actionRow">
+                        ${component.components[0].type == JsonComponentType.Button ? component.components.map(button => {
+                        return button.type == JsonComponentType.Button ? this.buttonBuilder(button) : "";
+                    }).join("") : this.selectorBuilder(component.components[0])}
+                    </div>
+                    `;
+                }
+                case JsonComponentType.Container: {
+                    const html = `
+                    <div class="container" style="${component.hexAccentColor ? `border-left-color: ${component.hexAccentColor}` : ''}">
+                        ${this.componentBuilder(message, component.components)}
+                    </div>
+                    `;
+                    return this.spoilerAttachmentBuilder(component.spoiler, html);
+                }
+                case JsonComponentType.File: {
+                    let fileSize = (component.size ?? 0) / 1024;
+                    let count = 0;
+                    while (fileSize > 512 && count < COUNT_UNIT.length - 1) {
+                        fileSize = fileSize / 1024;
+                        count++;
+                    }
+                    const html = `
+                        <div class="attachmentFile">
+                            <div class="attachmentFileInfo">
+                                <p class="attachmentFileName">${component.fileName ?? 'file'}</p>
+                                <div class="attachmentFileSize">${fileSize.toFixed(2)} ${COUNT_UNIT[count]}</div>
+                            </div>
+                            <a class="attachmentDownload" href="${component.url ?? ''}" target="_blank">
+                                <svg class="attachmentDownloadIcon"><use href="#download-icon"></use></svg>
+                            </a>
+                        </div>
+                    `;
+                    return this.spoilerAttachmentBuilder(component.spoiler, html);
+                }
+                case JsonComponentType.MediaGallery: {
+                    return `
+                    <div class="mediaGallery"> 
+                        ${component.items.map(image => {
+                        return `
+                            <div class="mediaGalleryItem"> 
+                                ${this.spoilerAttachmentBuilder(image.spoiler, `<img class="mediaGalleryImg" src="${image.media.url}">`)}
+                            </div>
+                            `;
+                    }).join("")}
+                    </div>
+                    `;
+                }
+                case JsonComponentType.Section: {
+                    return `
+                    <div class="section">
+                        <div class="sectionLeft">
+                            ${this.componentBuilder(message, component.components)}
+                        </div>
+                        <div class="sectionRight">
+                            ${component.accessory.type == JsonComponentType.Button ? this.buttonBuilder(component.accessory)
+                        : component.accessory.type == JsonComponentType.Thumbnail ? this.spoilerAttachmentBuilder(component.accessory.spoiler, `
+                            <img class="sectionThumbnail" src="${component.accessory.media.url}">
+                            `) : ""}
+                        </div>
+                    </div> 
+                    `;
+                }
+                case JsonComponentType.Separator: {
+                    return `<hr class="separator" style="${component.divider ? "" : "visibility: hidden;"} ${component.spacing == 1 ? "margin: 0.15rem 0;" : "margin: 0.3rem 0;"}">`;
+                }
+                case JsonComponentType.TextDisplay: {
+                    return `<div class="textDisplay">${markdownToHTML(component.content, this.data.mentions, message.mentions, this.dateFormat)}</div>`;
+                }
+                default:
+                    return ``;
+            }
+        }).join("");
+    }
+    buttonBuilder(button) {
+        return `
+        <div class="button" style="background-color: ${BUTTON_COLOR[button.style]}">
+            ${button.style == JsonButtonStyle.Link && button.url ? `
+            <a class="buttonLink" href="${button.url}" target="_blank">
+                ${button.emoji ? `<p class="buttonEmoji">${button.emoji}</p>` : ""}
+                ${button.label ? `<p class="buttonLabel">${button.label}</p>` : ""}
+                <svg class="buttonLinkIcon"><use href="#link-icon"></use></svg>
+            </a>` : `
+                ${button.emoji ? `<p class="buttonEmoji">${button.emoji}</p>` : ""}
+                ${button.label ? `<p class="buttonLabel">${button.label}</p>` : ""}
+            `}
+        </div>
+        `;
+    }
+    selectorBuilder(selector) {
+        return `
+        <div class="selector">
+            <div class="selectorInput">
+                <p class="selectorInputText">${selector.placeholder}</p>
+            </div>
+            <div class="selectorOptionMenu">
+                ${selector.type == JsonComponentType.StringSelect ? selector.options.map(option => {
+            return `
+                    <div class="selectorOption">
+                        ${option.emoji ? `<p class="selectorOptionEmoji">${option.emoji}</p>` : ""}
+                        <div class="selectorOptionRight">
+                            <p class="selectorOptionTitle">${option.label}</p>
+                            ${option.description ? `<p class="selectorOptionDesc">${option.description}</p>` : ""}
+                        </div>
+                    </div>
+                    `;
+        }).join("") : ""}
+            </div>
+        </div>
+        `;
+    }
+    reactionsBuilder(reactions) {
+        return `
+            <div class="reactionsDiv">
+                ${reactions.map(reaction => `
+                    <div class="reaction"><p>${reaction.count} ${reaction.emoji}</p></div>
+                `).join('')}
+            </div>
+        `;
+    }
+    spoilerAttachmentBuilder(spoiler, html) {
+        return spoiler ? `<div class="spoilerAttachment"><div class="spoilerAttachmentOverlay">SPOILER</div><div class="spoilerAttachmentContent">${html}</div></div>` : html;
+    }
+    svgBuilder() {
+        const { options } = this.data;
+        return `
+    <svg style="display: none;">
+        <defs>
+            <symbol id="reply-icon" viewBox="0 0 16 16" fill="none">
+                <g transform="rotate(90 8 8)">
+                    <path d="M6 2V9C6 11.5 8.5 14 11 14H14" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                </g>
+            </symbol>
+            ${options.includeAttachments ? `<symbol id="download-icon" viewBox="0 -960 960 960">
+                <path d="m720-120 160-160-56-56-64 64v-167h-80v167l-64-64-56 56 160 160ZM560 0v-80h320V0H560ZM240-160q-33 0-56.5-23.5T160-240v-560q0-33 23.5-56.5T240-880h280l240 240v121h-80v-81H480v-200H240v560h240v80H240Zm0-80v-560 560Z"/>
+            </symbol> ` : ""}
+            ${options.includeButtons ? `<symbol id="link-icon" viewBox="0 -960 960 960" fill="#e3e3e3">
+                <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/>
+            </symbol>` : ""}
+        </defs>
+    </svg>
+    `;
+    }
+}

package/dist/renderers/html/js.d.ts

@@ -0,0 +1,3 @@
+export declare function script(includeComponents: boolean, includePolls: boolean): string;
+export declare const POLL_JS = "\nconst pollDiv = event.target.closest('.pollResultEmbedButton');\nif (pollDiv) {\n    event.preventDefault();\n    const messageId = pollDiv.dataset.id;\n    if (!messageId || messageId == \"\") return;\n    const message = document.getElementById(messageId);\n\n    if (message) {\n        message.scrollIntoView({ behavior: 'smooth', block: 'center' });\n        message.classList.add('highlight');\n        setTimeout(() => {\n            message.classList.remove('highlight');\n        }, 1500);\n    }\n}\n";
+export declare const SELECTOR_JS = "\nconst selectorInput = event.target.closest('.selectorInput');\ndocument.querySelectorAll('.selector').forEach(selector => {\n    if (!selector.contains(event.target)) {\n        selector.classList.remove('active');\n    }\n});\n\nif (selectorInput) {\n    const selector = selectorInput.closest('.selector');\n    if (selector) {\n        selector.classList.toggle('active');\n    }\n}\n";

package/dist/renderers/html/js.js

@@ -0,0 +1,174 @@
+export function script(includeComponents, includePolls) {
+    return `
+document.addEventListener('DOMContentLoaded', () => {
+    const transcriptDataElement = document.getElementById('authorData');
+    if (!transcriptDataElement) {
+        console.error('Missing author data element.');
+        return;
+    }
+
+    const data = JSON.parse(transcriptDataElement.textContent);
+    const authorMap = new Map((data.authors || []).map(author => [author.id, author]));
+
+    document.querySelectorAll('.messageDiv[data-author-id]').forEach(messageDiv => {
+        const authorId = messageDiv.dataset.authorId;
+        const author = authorMap.get(authorId);
+
+        if (!author) return;
+
+        const avatarImg = messageDiv.querySelector('.messageImg');
+        if (avatarImg) avatarImg.src = author.avatarURL;
+
+        const username = messageDiv.querySelector('.messageUsername');
+        if (username) {
+            username.textContent = author.member?.displayName ?? author.displayName;
+            username.style.color = author.member?.displayHexColor ?? '#dbdee1';
+        }
+
+        const badgesDiv = messageDiv.querySelector('.badges');
+        if (badgesDiv) {
+            badgesDiv.innerHTML = '';
+            if (author.bot) {
+                const badge = document.createElement('p');
+                badge.className = 'badge';
+                badge.textContent = 'APP';
+                badgesDiv.appendChild(badge);
+            }
+            if (author.system) {
+                const badge = document.createElement('p');
+                badge.className = 'badge';
+                badge.textContent = 'SYSTEM';
+                badgesDiv.appendChild(badge);
+            }
+            if (author.guildTag) {
+                const badge = document.createElement('p');
+                badge.className = 'badgeTag';
+                badge.textContent = author.guildTag;
+                badgesDiv.appendChild(badge);
+            }
+        }
+    });
+
+    document.querySelectorAll('.messageReply[data-id]').forEach(replyDiv => {
+        const repliedToId = replyDiv.dataset.id;
+        if (!repliedToId) return;
+
+        const repliedToMessageDiv = document.getElementById(repliedToId);
+        if (!repliedToMessageDiv) return; 
+
+        const repliedToAuthorId = repliedToMessageDiv.dataset.authorId;
+        const repliedToAuthor = authorMap.get(repliedToAuthorId);
+
+        if (repliedToAuthor) {
+            const replyImg = replyDiv.querySelector('.messageReplyImg');
+            if (replyImg) replyImg.src = repliedToAuthor.avatarURL;
+            
+            const replyBadgesDiv = replyDiv.querySelector('.replyBadges');
+            if (replyBadgesDiv) {
+                replyBadgesDiv.innerHTML = '';
+                if (repliedToAuthor.bot) {
+                    const badge = document.createElement('p');
+                    badge.className = 'badge';
+                    badge.textContent = 'APP';
+                    replyBadgesDiv.appendChild(badge);
+                }
+                if (repliedToAuthor.system) {
+                    const badge = document.createElement('p');
+                    badge.className = 'badge';
+                    badge.textContent = 'SYSTEM';
+                    replyBadgesDiv.appendChild(badge);
+                }
+                if (repliedToAuthor.guildTag) {
+                    const badge = document.createElement('p');
+                    badge.className = 'badgeTag';
+                    badge.textContent = repliedToAuthor.guildTag;
+                    replyBadgesDiv.appendChild(badge);
+                }
+            }
+        }
+
+        const replyTextDiv = replyDiv.querySelector('.messageReplyText');
+        if (replyTextDiv) {
+            const originalContent = repliedToMessageDiv.querySelector('.messageContent');
+            if (originalContent) {
+                let content = originalContent.textContent || '';
+                if (content.length > 100) {
+                    content = content.substring(0, 100).trim() + '...';
+                }
+                
+                const authorName = repliedToAuthor?.member?.displayName ?? repliedToAuthor?.displayName ?? 'Unknown';
+                const authorColor = repliedToAuthor?.member?.displayHexColor ?? 'inherit';
+                
+                const authorNameSpan = \`<span style="color: \${authorColor};">\${authorName}</span>\`;
+                replyTextDiv.innerHTML = authorNameSpan + " " + content;
+            }
+        }
+    });
+
+    document.addEventListener('click', function (event) {
+        const spoiler = event.target.closest('.spoilerMsg, .spoilerAttachment');
+        if (spoiler && !spoiler.classList.contains('revealed')) {
+            event.preventDefault();
+            event.stopPropagation();
+            spoiler.classList.add('revealed');
+        }
+
+        const replyDiv = event.target.closest('.messageReply');
+        if (replyDiv) {
+            event.preventDefault();
+            const messageId = replyDiv.dataset.id;
+            if (!messageId) return;
+
+            const message = document.getElementById(messageId);
+            if (message) {
+                message.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                message.classList.add('highlight');
+                setTimeout(() => {
+                    message.classList.remove('highlight');
+                }, 1500);
+            }
+        }
+
+        ${includeComponents ? SELECTOR_JS : ""}
+
+        ${includePolls ? POLL_JS : ""}
+    });
+    
+    if (window.hljs) {
+        hljs.highlightAll();
+    }
+});
+`;
+}
+export const POLL_JS = `
+const pollDiv = event.target.closest('.pollResultEmbedButton');
+if (pollDiv) {
+    event.preventDefault();
+    const messageId = pollDiv.dataset.id;
+    if (!messageId || messageId == "") return;
+    const message = document.getElementById(messageId);
+
+    if (message) {
+        message.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        message.classList.add('highlight');
+        setTimeout(() => {
+            message.classList.remove('highlight');
+        }, 1500);
+    }
+}
+`;
+export const SELECTOR_JS = `
+const selectorInput = event.target.closest('.selectorInput');
+document.querySelectorAll('.selector').forEach(selector => {
+    if (!selector.contains(event.target)) {
+        selector.classList.remove('active');
+    }
+});
+
+if (selectorInput) {
+    const selector = selectorInput.closest('.selector');
+    if (selector) {
+        selector.classList.toggle('active');
+    }
+}
+`;