transcriptify 1.0.0

package/dist/src/web/discord-components/Message.js

@@ -0,0 +1,543 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Message;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const AudioPlayer_1 = __importDefault(require("./AudioPlayer"));
+const VideoPlayer_1 = __importDefault(require("./VideoPlayer"));
+const ChannelPinnedMessage_1 = __importDefault(require("./ChannelPinnedMessage"));
+const Embed_1 = __importDefault(require("./Embed"));
+const ForwardedMessage_1 = __importDefault(require("./ForwardedMessage"));
+const ChevronDownIcon_1 = __importDefault(require("./icons/ChevronDownIcon"));
+const ExternalLinkIcon_1 = __importDefault(require("./icons/ExternalLinkIcon"));
+const VerifiedIcon_1 = __importDefault(require("./icons/VerifiedIcon"));
+const FileAudioIcon_1 = __importDefault(require("./icons/FileAudioIcon"));
+const FileCodeIcon_1 = __importDefault(require("./icons/FileCodeIcon"));
+const FileDocumentIcon_1 = __importDefault(require("./icons/FileDocumentIcon"));
+const Reply_1 = __importDefault(require("./Reply"));
+const StickerPreview_1 = __importDefault(require("./StickerPreview"));
+const UserJoinMessage_1 = __importDefault(require("./UserJoinMessage"));
+const date_1 = require("./utils/date");
+const markdown_1 = require("./utils/markdown");
+const avatarHelpers_1 = require("../helpers/avatarHelpers");
+const cdnHelpers_1 = require("../helpers/cdnHelpers");
+const messageHelpers_1 = require("./messageHelpers");
+function renderCommandLine(interaction, author, resolvedUsers, defaultAvatar) {
+    if (!interaction?.name || !interaction?.user?.username)
+        return null;
+    const username = interaction.user.username;
+    const userId = interaction.user.id;
+    const displayName = userId && resolvedUsers?.[userId]?.displayName;
+    const commandName = interaction.name;
+    let userAvatar = defaultAvatar;
+    if (userId && resolvedUsers?.[userId]?.avatar) {
+        const avatarHash = resolvedUsers[userId].avatar;
+        userAvatar = /^https?:\/\//i.test(avatarHash) ? avatarHash : (0, avatarHelpers_1.buildAvatarUrl)(String(userId), avatarHash);
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center text-sm mb-1 relative", style: { marginLeft: "-56px", paddingLeft: "56px" }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [userAvatar && (0, jsx_runtime_1.jsx)("img", { src: userAvatar, alt: "", className: "w-4 h-4 rounded-full" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#b5bac1] font-medium", children: username }), displayName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", className: "text-[#b5bac1]", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M2.06 7.61c-.25.95.31 1.92 1.26 2.18l4.3 1.15c.94.25 1.91-.31 2.17-1.26l1.15-4.3c.25-.94-.31-1.91-1.26-2.17l-4.3-1.15c-.94-.25-1.91.31-2.17 1.26l-1.15 4.3ZM12.98 7.87a2 2 0 0 0 1.75 2.95H20a2 2 0 0 0 1.76-2.95l-2.63-4.83a2 2 0 0 0-3.51 0l-2.63 4.83ZM5.86 13.27a.89.89 0 0 1 1.28 0l.75.77a.9.9 0 0 0 .54.26l1.06.12c.5.06.85.52.8 1.02l-.13 1.08c-.02.2.03.42.14.6l.56.92c.27.43.14 1-.28 1.26l-.9.58a.92.92 0 0 0-.37.48l-.36 1.02a.9.9 0 0 1-1.15.57l-1-.36a.89.89 0 0 0-.6 0l-1 .36a.9.9 0 0 1-1.15-.57l-.36-1.02a.92.92 0 0 0-.37-.48l-.9-.58a.93.93 0 0 1-.28-1.26l.56-.93c.11-.17.16-.38.14-.59l-.12-1.08c-.06-.5.3-.96.8-1.02l1.05-.12a.9.9 0 0 0 .54-.26l.75-.77ZM18.52 13.71a1.1 1.1 0 0 0-2.04 0l-.46 1.24c-.19.5-.57.88-1.07 1.07l-1.24.46a1.1 1.1 0 0 0 0 2.04l1.24.46c.5.19.88.57 1.07 1.07l.46 1.24c.35.95 1.7.95 2.04 0l.46-1.24c.19-.5.57-.88 1.07-1.07l1.24-.46a1.1 1.1 0 0 0 0-2.04l-1.24-.46a1.8 1.8 0 0 1-1.07-1.07l-.46-1.24Z" }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-white font-semibold", children: displayName })] })), (0, jsx_runtime_1.jsx)("span", { className: "text-[#b5bac1]", children: "used" }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-[#141437] text-[#6896f1] font-medium px-1.5 py-0.5 rounded inline-flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", className: "text-[#6896f1]", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M2.06 7.61c-.25.95.31 1.92 1.26 2.18l4.3 1.15c.94.25 1.91-.31 2.17-1.26l1.15-4.3c.25-.94-.31-1.91-1.26-2.17l-4.3-1.15c-.94-.25-1.91.31-2.17 1.26l-1.15 4.3ZM12.98 7.87a2 2 0 0 0 1.75 2.95H20a2 2 0 0 0 1.76-2.95l-2.63-4.83a2 2 0 0 0-3.51 0l-2.63 4.83ZM5.86 13.27a.89.89 0 0 1 1.28 0l.75.77a.9.9 0 0 0 .54.26l1.06.12c.5.06.85.52.8 1.02l-.13 1.08c-.02.2.03.42.14.6l.56.92c.27.43.14 1-.28 1.26l-.9.58a.92.92 0 0 0-.37.48l-.36 1.02a.9.9 0 0 1-1.15.57l-1-.36a.89.89 0 0 0-.6 0l-1 .36a.9.9 0 0 1-1.15-.57l-.36-1.02a.92.92 0 0 0-.37-.48l-.9-.58a.93.93 0 0 1-.28-1.26l.56-.93c.11-.17.16-.38.14-.59l-.12-1.08c-.06-.5.3-.96.8-1.02l1.05-.12a.9.9 0 0 0 .54-.26l.75-.77ZM18.52 13.71a1.1 1.1 0 0 0-2.04 0l-.46 1.24c-.19.5-.57.88-1.07 1.07l-1.24.46a1.1 1.1 0 0 0 0 2.04l1.24.46c.5.19.88.57 1.07 1.07l.46 1.24c.35.95 1.7.95 2.04 0l.46-1.24c.19-.5.57-.88 1.07-1.07l1.24-.46a1.1 1.1 0 0 0 0-2.04l-1.24-.46a1.8 1.8 0 0 1-1.07-1.07l-.46-1.24Z" }) }), commandName] })] }) }));
+}
+function Message(props) {
+    const { id, author, timestamp, editedAt, content, attachments, embeds, selects, replyTo, poll, forwardedFrom, forwardedMessage, reactions, compact = false, resolvedUsers, resolvedRoles, resolvedChannels, channelGuildId, emojiUrls, stickers, interaction, messageType, pinned, onPinIconClick, referencedMessage } = props;
+    const [brokenImages, setBrokenImages] = react_1.default.useState(new Set());
+    const handleImageError = (url) => {
+        setBrokenImages((prev) => new Set([...prev, url]));
+    };
+    const handleReplyClick = (ev) => {
+        ev.preventDefault();
+        let targetId = replyTo?.id || replyTo?.messageId || replyTo?.messageIdString || replyTo?.reference;
+        if (!targetId)
+            return;
+        targetId = String(targetId);
+        let el = document.getElementById(targetId);
+        if (!el)
+            el = document.querySelector(`[data-message-id="${targetId}"]`);
+        if (el) {
+            document.querySelectorAll(".message-highlight").forEach((e) => e.classList.remove("message-highlight"));
+            el.classList.add("message-highlight");
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
+            setTimeout(() => {
+                el?.classList.remove("message-highlight");
+            }, 2000);
+        }
+    };
+    const handleForwardClick = (ev) => {
+        ev.preventDefault();
+        let targetId = forwardedMessage?.id ||
+            forwardedMessage?.messageId ||
+            forwardedMessage?.originalId ||
+            forwardedMessage?.reference;
+        if (!targetId)
+            return;
+        targetId = String(targetId);
+        let el = document.getElementById(targetId);
+        if (!el)
+            el = document.querySelector(`[data-message-id="${targetId}"]`);
+        if (el)
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
+    };
+    const dateObj = timestamp ? new Date(timestamp) : null;
+    let tagDate = dateObj ? (0, date_1.formatDate)(dateObj) : "";
+    let shortTime = dateObj ? (0, date_1.formatTime)(dateObj) : "";
+    tagDate = tagDate.replace(/\s+(AM|PM)$/, "\u00A0$1");
+    shortTime = shortTime.replace(/\s+(AM|PM)$/, "\u00A0$1");
+    const timeAgoDisplay = dateObj
+        ? (() => {
+            const diff = Math.floor((Date.now() - dateObj.getTime()) / 1000);
+            if (Math.abs(diff) < 60)
+                return `${Math.abs(diff)}s ago`;
+            if (Math.abs(diff) < 3600)
+                return `${Math.round(Math.abs(diff) / 60)}m ago`;
+            if (Math.abs(diff) < 86400)
+                return `${Math.round(Math.abs(diff) / 3600)}h ago`;
+            return (0, date_1.formatDate)(dateObj);
+        })()
+        : "";
+    const relativeTimestamp = dateObj ? (0, messageHelpers_1.timeAgo)(dateObj) : "";
+    const BOT_AVATAR = "/profile/bot.png";
+    const ensureKeys = (node, prefix) => {
+        if (node === null || node === undefined)
+            return node;
+        const arr = react_1.default.Children.toArray(node);
+        return arr.map((child, i) => {
+            if (react_1.default.isValidElement(child)) {
+                const childChildren = child.props && child.props.children;
+                const newChildren = ensureKeys(childChildren, `${prefix}-${i}`);
+                const key = child.key != null ? child.key : `${prefix}-${i}`;
+                try {
+                    return react_1.default.cloneElement(child, { key }, newChildren);
+                }
+                catch (e) {
+                    return react_1.default.cloneElement(child, {}, newChildren);
+                }
+            }
+            return child;
+        });
+    };
+    const urlsToHide = new Set();
+    if (attachments) {
+        attachments.forEach((a) => {
+            if (a?.url)
+                urlsToHide.add(a.url);
+            if (a?.embedUrl)
+                urlsToHide.add(a.embedUrl);
+        });
+    }
+    const filteredEmbeds = embeds
+        ? embeds.filter((e) => {
+            const imgUrl = e?.image?.url || e?.thumbnail?.url;
+            const isEmojiEmbed = imgUrl && /cdn\.discordapp\.com\/emojis\//.test(imgUrl) && !e?.title && !e?.description && !e?.author;
+            return !isEmojiEmbed;
+        })
+        : [];
+    if (filteredEmbeds) {
+        filteredEmbeds.forEach((e) => {
+            if (e?.url)
+                urlsToHide.add(e.url);
+            if (e?.image?.url)
+                urlsToHide.add(e.image.url);
+            if (e?.thumbnail?.url)
+                urlsToHide.add(e.thumbnail.url);
+        });
+    }
+    function stripDuplicateLinks(s, extra) {
+        let out = s;
+        const all = new Set(urlsToHide);
+        if (extra)
+            extra.forEach((u) => all.add(u));
+        all.forEach((u) => {
+            out = out.split(u).join("");
+        });
+        return out;
+    }
+    const [hover, setHover] = react_1.default.useState(false);
+    function StickerRenderer({ st }) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "mb-2", style: { width: 160, height: 160 }, children: (0, jsx_runtime_1.jsx)(StickerPreview_1.default, { st: st, size: 160, className: "w-[160px] h-[160px]" }) }));
+    }
+    const getAttachmentIcon = (kind) => {
+        switch (kind) {
+            case "audio":
+                return FileAudioIcon_1.default;
+            case "code":
+                return FileCodeIcon_1.default;
+            default:
+                return FileDocumentIcon_1.default;
+        }
+    };
+    const renderContent = (c) => {
+        if (typeof c === "string") {
+            const localHide = new Set();
+            const emojiTokenRegex = /<(a)?:([^:>]+):(\d+)>/g;
+            let em;
+            while ((em = emojiTokenRegex.exec(c)) !== null) {
+                const animated = !!em[1];
+                const id = em[3];
+                const token = em[0];
+                const src = emojiUrls && emojiUrls[token] ? emojiUrls[token] : (0, cdnHelpers_1.buildEmojiCdnUrl)(id, animated, 96) || "";
+                if (src)
+                    localHide.add(src);
+            }
+            const text = (0, messageHelpers_1.sanitizeMarkdownString)(stripDuplicateLinks(c, localHide));
+            return (0, markdown_1.parseMarkdown)(text, resolvedUsers, resolvedRoles, resolvedChannels, channelGuildId);
+        }
+        const rendered = (0, markdown_1.parseMarkdown)(c, resolvedUsers, resolvedRoles, resolvedChannels, channelGuildId);
+        try {
+            const problems = [];
+            const walk = (node, path) => {
+                if (node === null || node === undefined)
+                    return;
+                if (Array.isArray(node)) {
+                    node.forEach((n, i) => {
+                        if (react_1.default.isValidElement(n) && n.key == null) {
+                            problems.push({ path: [...path, `[${i}]`].join("/"), type: "element-no-key", el: n.type });
+                        }
+                        walk(n, [...path, `[${i}]`]);
+                    });
+                    return;
+                }
+                if (react_1.default.isValidElement(node)) {
+                    const key = node.key;
+                    if (key == null) {
+                        problems.push({ path: path.join("/"), type: "element-no-key", el: node.type });
+                    }
+                    const children = node.props && node.props.children;
+                    if (children)
+                        walk(children, [...path, String(node.type || "el")]);
+                    return;
+                }
+                if (typeof node === "object") {
+                    react_1.default.Children.forEach(node, (child, i) => {
+                        walk(child, [...path, `child(${i})`]);
+                    });
+                }
+            };
+            const ensureKeys = (node, prefix) => {
+                if (node === null || node === undefined)
+                    return node;
+                const arr = react_1.default.Children.toArray(node);
+                return arr.map((child, i) => {
+                    if (react_1.default.isValidElement(child)) {
+                        const childChildren = child.props && child.props.children;
+                        const newChildren = ensureKeys(childChildren, `${prefix}-${i}`);
+                        if (child.key == null) {
+                            return react_1.default.cloneElement(child, { key: `${prefix}-${i}` }, newChildren);
+                        }
+                        return react_1.default.cloneElement(child, {}, newChildren);
+                    }
+                    return child;
+                });
+            };
+            const fixed = ensureKeys(rendered, `message-${id}`);
+            walk(fixed, [`message-${id}`]);
+            if (problems.length > 0) {
+                console.warn("[renderContent] missing-key problems for message:", id, problems.slice(0, 20));
+            }
+        }
+        catch (e) {
+            console.warn("[renderContent] key-check failed", e);
+        }
+        return rendered;
+    };
+    function renderSegmentWithEmojis(text) {
+        const out = [];
+        const emojiRegex = /<(a)?:([^:>]+):(\d+)>/g;
+        let last = 0;
+        let m;
+        let tsCallIndex = 0;
+        while ((m = emojiRegex.exec(text)) !== null) {
+            if (m.index > last) {
+                const part = text.substring(last, m.index);
+                out.push(...renderTextWithTimestamps(part, tsCallIndex++));
+            }
+            if (m.index > 0 && text[m.index - 1] === "\\") {
+                out.push(m[0].replace(/\\/g, ""));
+            }
+            else {
+                const animated = !!m[1];
+                const name = m[2];
+                const id = m[3];
+                const token = m[0];
+                const src = emojiUrls && emojiUrls[token] ? emojiUrls[token] : (0, cdnHelpers_1.buildEmojiCdnUrl)(id, animated, 96) || "";
+                if (src) {
+                    out.push((0, jsx_runtime_1.jsx)("img", { src: src, alt: name, className: "inline h-6 w-6 align-text-bottom mr-0.5" }, `e-${id}-${m.index}`));
+                }
+            }
+            last = emojiRegex.lastIndex;
+        }
+        if (last < text.length)
+            out.push(...renderTextWithTimestamps(text.substring(last), tsCallIndex++));
+        return react_1.default.Children.toArray(out);
+    }
+    function renderTextWithTimestamps(s, callIndex = 0) {
+        const out = [];
+        const tsRegex = /<t:(\d+)(?::([tTfFR]))?>/g;
+        let last = 0;
+        let m;
+        function renderTextWithCommands(str, keyBase) {
+            const parts = [];
+            const cmdRegex = /<\/([A-Za-z0-9_-]+):(\d+)>/g;
+            let l = 0;
+            let mm;
+            let idx = 0;
+            while ((mm = cmdRegex.exec(str)) !== null) {
+                if (mm.index > l) {
+                    parts.push((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, markdown_1.parseMarkdown)(str.substring(l, mm.index), resolvedUsers, resolvedRoles, resolvedChannels, channelGuildId) }, `cmd-txt-${keyBase}-${l}`));
+                }
+                const name = mm[1];
+                parts.push((0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center rounded px-2 py-0.5 text-sm font-medium mr-1", style: { backgroundColor: "#1d193f", color: "#9697ec" }, children: `/${name}` }, `cmd-pill-${keyBase}-${idx}`));
+                l = cmdRegex.lastIndex;
+                idx++;
+            }
+            if (l < str.length)
+                parts.push((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, markdown_1.parseMarkdown)(str.substring(l), resolvedUsers, resolvedRoles, resolvedChannels, channelGuildId) }, `cmd-txt-tail-${keyBase}`));
+            return parts;
+        }
+        function TimestampToken({ sec, display, full, k }) {
+            const [visible, setVisible] = react_1.default.useState(false);
+            const [pos, setPos] = react_1.default.useState(null);
+            const wrapRef = react_1.default.useRef(null);
+            const tipRef = react_1.default.useRef(null);
+            const onEnter = () => {
+                setVisible(true);
+                requestAnimationFrame(() => {
+                    const wrap = wrapRef.current;
+                    const tip = tipRef.current;
+                    if (!wrap || !tip)
+                        return;
+                    const wRect = wrap.getBoundingClientRect();
+                    const tRect = tip.getBoundingClientRect();
+                    const centerX = wRect.left + wRect.width / 2;
+                    const left = Math.min(Math.max(8, centerX - tRect.width / 2), window.innerWidth - tRect.width - 8);
+                    const top = Math.max(8, wRect.top - tRect.height - 8);
+                    setPos({ left, top });
+                });
+            };
+            const onLeave = () => setVisible(false);
+            return ((0, jsx_runtime_1.jsxs)("span", { ref: wrapRef, onMouseEnter: onEnter, onMouseLeave: onLeave, className: "inline-block", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm bg-[#242427] p-1 cursor-default border border-[#242427] rounded-md", children: display }), (0, jsx_runtime_1.jsx)("div", { ref: tipRef, className: "timestamp-tooltip", style: {
+                            position: "fixed",
+                            left: pos ? `${pos.left}px` : "50%",
+                            top: pos ? `${pos.top}px` : "-9999px",
+                            transform: pos ? "none" : "translateX(-50%)",
+                            opacity: visible ? 1 : 0,
+                            pointerEvents: "none",
+                            transition: "opacity 150ms",
+                            zIndex: 99999,
+                            background: "#242427",
+                            color: "#fff",
+                            fontSize: "14px",
+                            fontWeight: 600,
+                            padding: "8px 12px",
+                            borderRadius: 8,
+                            boxShadow: "0 8px 24px rgba(0,0,0,0.8)",
+                            whiteSpace: "nowrap"
+                        }, children: full })] }, k));
+        }
+        while ((m = tsRegex.exec(s)) !== null) {
+            if (m.index > last) {
+                const substring = s.substring(last, m.index);
+                out.push((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: renderTextWithCommands(substring, `${callIndex}-${last}-${m.index}`) }, `ts-pre-${id}-${callIndex}-${last}-${m.index}`));
+            }
+            const sec = Number(m[1]);
+            const fmt = m[2];
+            const date = new Date(sec * 1000);
+            let display = "";
+            if (fmt === "R") {
+                display = (0, messageHelpers_1.timeAgo)(date);
+            }
+            else {
+                display = (0, date_1.formatDate)(date);
+            }
+            const full = (0, date_1.formatDate)(date);
+            out.push((0, jsx_runtime_1.jsx)(TimestampToken, { sec: sec, display: display, full: full, k: `ts-${id}-${callIndex}-${sec}-${m.index}` }, `ts-${id}-${callIndex}-${sec}-${m.index}`));
+            last = tsRegex.lastIndex;
+        }
+        if (last < s.length) {
+            const substring = s.substring(last);
+            out.push((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: renderTextWithCommands(substring, `${callIndex}-tail-${last}`) }, `ts-tail-${id}-${callIndex}-${last}`));
+        }
+        return react_1.default.Children.toArray(out);
+    }
+    const isPollEnd = messageType === 46 && embeds && embeds.length > 0 && embeds[0]?.fields;
+    const pollEndContent = isPollEnd
+        ? (() => {
+            const fields = embeds[0].fields;
+            const pollQuestionField = fields.find((f) => f.name === "poll_question_text");
+            const totalVotesField = fields.find((f) => f.name === "total_votes");
+            if (!pollQuestionField || !totalVotesField)
+                return null;
+            const pollQuestion = pollQuestionField.value;
+            const totalVotes = parseInt(totalVotesField.value, 10) || 0;
+            const answerFields = fields.filter((f) => f.name !== "poll_question_text" && f.name !== "total_votes");
+            const voteCounts = answerFields.map((f) => parseInt(f.value, 10) || 0);
+            const maxVotes = Math.max(...voteCounts, 0);
+            const highestPct = totalVotes > 0 ? Math.round((maxVotes / totalVotes) * 100) : 0;
+            const tiedOptions = answerFields.filter((f) => parseInt(f.value, 10) === maxVotes).length;
+            let resultText = "The results were tied";
+            if (tiedOptions === 1 && maxVotes > 0) {
+                resultText = `${highestPct}%`;
+            }
+            const isTied = tiedOptions > 1;
+            return { pollQuestion, totalVotes, resultText, highestPct, isTied };
+        })()
+        : null;
+    const pollReferenceId = replyTo?.id || replyTo?.messageId || replyTo?.messageIdString || replyTo?.reference || undefined;
+    const scrollToId = (targetId) => {
+        if (!targetId)
+            return;
+        const idStr = String(targetId);
+        let el = document.getElementById(idStr);
+        if (!el)
+            el = document.querySelector(`[data-message-id="${idStr}"]`);
+        if (el)
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
+    };
+    const _messageTree = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isPollEnd && pollEndContent ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 py-1 relative transition-colors duration-300 w-full mb-2", children: [(0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", viewBox: "0 0 24 24", className: "flex-shrink-0 mt-2", children: (0, jsx_runtime_1.jsx)("path", { fill: "#B5BAC1", d: "M2 5c0-1.1.9-2 2-2h16a2 2 0 1 1 0 4H4a2 2 0 0 1-2-2ZM2 12c0-1.1.9-2 2-2h6a2 2 0 1 1 0 4H4a2 2 0 0 1-2-2ZM4 17a2 2 0 1 0 0 4h12a2 2 0 1 0 0-4H4Z" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0  ml-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-sm text-[#B5BAC1] mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-semibold", style: { color: author.color ?? "#FFFFFF" }, children: author.username }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#B5BAC1]", children: "'s poll " }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "text-white font-semibold hover:underline", onClick: (ev) => {
+                                        ev.preventDefault();
+                                        scrollToId(pollReferenceId);
+                                    }, children: pollEndContent.pollQuestion }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#B5BAC1]", children: " has closed. " }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[#72767D]", children: timeAgoDisplay })] }), (0, jsx_runtime_1.jsx)("div", { className: "bg-[#131416] rounded-lg p-4 max-w-md", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-left", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-[#DBDEE1] font-semibold", children: "The results were tied" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-[#72767D] font-semibold", children: pollEndContent.resultText }), pollEndContent.isTied ? ((0, jsx_runtime_1.jsxs)("div", { className: "text-2xl text-[#DBDEE1] font-extrabold mt-1", children: [pollEndContent.highestPct, "%"] })) : null] }), (0, jsx_runtime_1.jsx)("button", { className: "px-4 py-2 rounded text-sm bg-[#404249] text-white hover:bg-[#4a4d54] transition-colors flex-shrink-0 whitespace-nowrap", onClick: (ev) => {
+                                            ev.preventDefault();
+                                            scrollToId(pollReferenceId);
+                                        }, children: "View Poll" })] }) })] })] })) : messageType === 7 ? ((0, jsx_runtime_1.jsx)("article", { id: id, "data-message-id": id, className: "py-0.5", children: (0, jsx_runtime_1.jsx)(UserJoinMessage_1.default, { username: author.username }) })) : messageType === 6 ? ((0, jsx_runtime_1.jsx)("article", { id: id, "data-message-id": id, className: "py-0.5", children: (0, jsx_runtime_1.jsx)(ChannelPinnedMessage_1.default, { message: props, referencedMessage: referencedMessage, onOpenPinnedMessages: onPinIconClick || (() => { }), onNavigateToMessage: props.onNavigateToMessage }) })) : ((0, jsx_runtime_1.jsxs)("article", { id: id, "data-message-id": id, className: `flex gap-3 ${compact ? "py-0.5 mt-0" : "py-0.5 mt-4"} relative transition-colors duration-300 w-full ${interaction?.name ? "pr-4" : ""}`, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: [(0, jsx_runtime_1.jsx)("div", { className: "w-10 shrink-0 flex items-start justify-start mt-0.5 relative", children: compact ? ((0, jsx_runtime_1.jsx)("div", { className: "relative inline-block w-full text-right pr-1", children: (0, jsx_runtime_1.jsx)("span", { className: `text-xs text-[#949BA4] transition-opacity ${hover ? "opacity-100" : "opacity-0"}`, "aria-hidden": true, children: timestamp ? shortTime : "" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(replyTo || interaction?.name) && ((0, jsx_runtime_1.jsx)("div", { className: "absolute left-[20px] top-[5px] w-7 h-[10px] border-l-2 border-t-2 border-[#4f545c] rounded-tl-[8px]" })), (0, jsx_runtime_1.jsx)("img", { src: author.avatar || BOT_AVATAR, alt: "avatar", className: `w-10 h-10 rounded-full object-cover mt-1 ${replyTo || interaction?.name ? "mt-5" : ""}` })] })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [replyTo && ((0, jsx_runtime_1.jsx)(Reply_1.default, { replyTo: replyTo, onReplyClick: handleReplyClick, defaultAvatar: BOT_AVATAR, resolvedUsers: resolvedUsers, resolvedRoles: resolvedRoles, resolvedChannels: resolvedChannels })), compact ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "text-base text-[#DBDEE1] leading-[1.375rem] min-h-[1.375rem]", children: [content ? renderContent(content) : null, editedAt ? (0, jsx_runtime_1.jsx)("span", { className: "ml-1 text-xs text-[#72767D]", children: "(edited)" }) : null] }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!compact && interaction?.name && renderCommandLine(interaction, author, resolvedUsers, BOT_AVATAR), (0, jsx_runtime_1.jsxs)("header", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "text-base font-semibold flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { style: { color: author.color ?? "#FFFFFF" }, children: author.username }), author.guildTag && author.guildTag.name ? ((0, jsx_runtime_1.jsxs)("span", { className: "ml-0.5 text-xs text-[#B9BBBE] bg-[#2F3136] px-1 py-0.5 rounded flex items-center gap-1", children: [author.guildTag.iconUrl ? ((0, jsx_runtime_1.jsx)("img", { src: author.guildTag.iconUrl, alt: author.guildTag.name, className: "w-3 h-3 rounded-full object-cover" })) : null, (0, jsx_runtime_1.jsx)("span", { children: author.guildTag.name })] })) : null, author.bot ? ((0, jsx_runtime_1.jsxs)("span", { className: "ml-0.5 text-xs text-white bg-[#5865F2] rounded flex items-center botTag", children: [author.verified ? (0, jsx_runtime_1.jsx)(VerifiedIcon_1.default, {}) : null, (0, jsx_runtime_1.jsx)("span", { className: "leading-none", children: "APP" })] })) : null] }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-[#949BA4] cursor-default flex items-center gap-1 whitespace-nowrap", title: relativeTimestamp, children: timestamp ? (0, jsx_runtime_1.jsx)("span", { className: "rem_82f0793afa59e5dc-botTag botTag ml-0.5", children: tagDate }) : "" }), editedAt ? (0, jsx_runtime_1.jsx)("span", { className: "ml-1 text-xs text-[#72767D]", children: "(edited)" }) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-0.5 text-base text-[#DBDEE1] leading-tight", children: content ? renderContent(content) : null })] })), forwardedFrom && forwardedMessage ? ((0, jsx_runtime_1.jsx)(ForwardedMessage_1.default, { message: forwardedMessage, brokenImages: brokenImages, onImageError: handleImageError, renderContent: renderContent, defaultAvatar: BOT_AVATAR })) : null, stickers && stickers.length ? ((0, jsx_runtime_1.jsx)("div", { className: "mt-2", children: stickers.map((st, i) => ((0, jsx_runtime_1.jsx)(StickerRenderer, { st: st }, `st-${i}`))) })) : null, attachments && attachments.length ? ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 flex flex-col gap-2", children: attachments.map((a, i) => {
+                                const url = (a && (a.url || (typeof a === "string" ? a : undefined))) || "";
+                                let filename = a && a.filename;
+                                if (!filename)
+                                    filename = (0, messageHelpers_1.extractFilenameFromUrl)(url) || "file";
+                                const filesize = (0, messageHelpers_1.formatFileSize)(a && a.size, a && a.size_human);
+                                const imageLike = (0, messageHelpers_1.isImageUrl)(url);
+                                const audioLike = (0, messageHelpers_1.isAudioUrl)(url);
+                                const videoLike = (0, messageHelpers_1.isVideoUrl)(url);
+                                const isBroken = brokenImages.has(url || "");
+                                if (imageLike && !isBroken) {
+                                    return ((0, jsx_runtime_1.jsx)("div", { className: "mb-2 max-w-[520px]", children: (0, jsx_runtime_1.jsx)("img", { src: url, alt: filename, className: `rounded w-full h-auto ${isBroken ? "image-error" : ""}`, onError: () => handleImageError(url || "") }) }, `att-${i}`));
+                                }
+                                if (audioLike) {
+                                    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(AudioPlayer_1.default, { url: url, filename: filename, filesize: filesize }) }, `att-${i}`));
+                                }
+                                if (videoLike) {
+                                    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(VideoPlayer_1.default, { url: url, filename: filename, filesize: filesize }) }, `att-${i}`));
+                                }
+                                const kind = (0, messageHelpers_1.getAttachmentKind)(filename, url);
+                                const Icon = getAttachmentIcon(kind);
+                                return ((0, jsx_runtime_1.jsx)("div", { className: "group relative inline-block max-w-[432px]", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 px-4 py-3 bg-[#1e1f22] hover:bg-[#23252b] border border-[#111214] rounded-lg transition-colors", children: [(0, jsx_runtime_1.jsx)(Icon, { className: "h-10 w-8 flex-shrink-0" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("a", { href: url, download: true, className: "text-[15px] font-medium text-[#00a8fc] truncate hover:underline block", children: filename }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-[#b5bac1] mt-1", children: filesize })] }), (0, jsx_runtime_1.jsx)("a", { href: url, download: true, className: "hover:bg-[#2c2f33] p-2 rounded transition-colors flex-shrink-0", title: "Download", children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { fill: "#b5bac1", d: "M12 2a1 1 0 0 1 1 1v10.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42l3.3 3.3V3a1 1 0 0 1 1-1ZM3 20a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2H3Z" }) }) })] }) }, `att-${i}`));
+                            }) })) : null, filteredEmbeds && filteredEmbeds.length ? ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 space-y-2", children: filteredEmbeds.map((e, i) => ((0, jsx_runtime_1.jsx)(Embed_1.default, { ...(e || {}), resolvedUsers: resolvedUsers, resolvedRoles: resolvedRoles, resolvedChannels: resolvedChannels, interaction: interaction }, i))) })) : null, poll && (poll.question || (Array.isArray(poll.options) && poll.options.length > 0))
+                            ? (() => {
+                                const isClosed = poll.closed || (poll.endsAt && new Date(poll.endsAt) < new Date());
+                                return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-3 bg-[#131416] rounded-lg p-4 max-w-md", children: [poll.question ? (0, jsx_runtime_1.jsx)("div", { className: "text-base font-semibold text-white mb-3", children: poll.question }) : null, (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2", children: (() => {
+                                                const total = poll.totalVotes ??
+                                                    (Array.isArray(poll.options) ? poll.options.reduce((s, o) => s + (o.count ?? 0), 0) : 0);
+                                                const maxCount = Array.isArray(poll.options)
+                                                    ? Math.max(...poll.options.map((o) => o.count ?? 0), 0)
+                                                    : 0;
+                                                return Array.isArray(poll.options)
+                                                    ? poll.options.map((opt, oi) => {
+                                                        const count = opt.count ?? 0;
+                                                        const pct = total > 0 ? Math.round((count / total) * 100) : 0;
+                                                        const hasVotes = count > 0;
+                                                        const isWinner = isClosed && count === maxCount && total > 0;
+                                                        const barColor = isClosed
+                                                            ? "rgba(46, 204, 113, 0.2)"
+                                                            : isWinner
+                                                                ? "rgba(46, 204, 113, 0.18)"
+                                                                : "rgba(88, 101, 242, 0.15)";
+                                                        const borderColor = isClosed ? "#2ecc71" : isWinner ? "#2ecc71" : "#5865F2";
+                                                        return ((0, jsx_runtime_1.jsxs)("div", { className: `relative bg-[#1E1F22] rounded-lg p-3 border-2 ${hasVotes ? "" : "border-transparent"} overflow-hidden`, style: {
+                                                                borderColor: hasVotes ? borderColor : undefined
+                                                            }, children: [hasVotes && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                                        position: "absolute",
+                                                                        left: 0,
+                                                                        top: 0,
+                                                                        bottom: 0,
+                                                                        width: `${pct}%`,
+                                                                        backgroundColor: barColor
+                                                                    } })), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-base text-white font-medium", children: opt.label }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-sm text-[#B5BAC1]", children: [count, " vote", count !== 1 ? "s" : ""] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm font-semibold text-white", children: [pct, "%"] })] })] })] }, `poll-${oi}`));
+                                                    })
+                                                    : null;
+                                            })() }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex items-center justify-between text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-white font-semibold", children: [poll.totalVotes || 0, " vote", (poll.totalVotes || 0) !== 1 ? "s" : ""] }), isClosed ? ((0, jsx_runtime_1.jsx)("div", { className: "text-[#B5BAC1]", children: "Poll closed" })) : poll.endsAt ? ((0, jsx_runtime_1.jsx)("div", { className: "text-[#B5BAC1]", children: (() => {
+                                                        const end = new Date(poll.endsAt);
+                                                        const now = new Date();
+                                                        const diff = Math.floor((end.getTime() - now.getTime()) / 1000);
+                                                        const hours = Math.floor(diff / 3600);
+                                                        const mins = Math.floor((diff % 3600) / 60);
+                                                        return `${hours}h ${mins}m left`;
+                                                    })() })) : null] })] }));
+                            })()
+                            : null, props.buttons && props.buttons.length ? ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 flex flex-wrap gap-2", children: props.buttons.map((b, i) => {
+                                const styleId = Number(b.style || 1);
+                                let classes = "px-3 py-1 rounded text-sm transition-colors inline-flex items-center gap-2 justify-start";
+                                let isLinkStyle = false;
+                                switch (styleId) {
+                                    case 1: // Primary
+                                        classes += " bg-[#6652ec] hover:bg-[#5846d1] text-white";
+                                        break;
+                                    case 2: // Secondary
+                                        classes += " bg-[#18181b] hover:bg-[#0f0f10] text-white";
+                                        break;
+                                    case 3: // Success
+                                        classes += " bg-[#57F287] hover:bg-[#45c767] text-black";
+                                        break;
+                                    case 4: // Danger
+                                        classes += " bg-[#ED4245] hover:bg-[#C03537] text-white";
+                                        break;
+                                    case 5: // Link
+                                        classes += " bg-[#18181b] hover:bg-[#0f0f10] text-white";
+                                        isLinkStyle = true;
+                                        break;
+                                    default:
+                                        classes += " bg-[#2F3136] text-white";
+                                }
+                                const renderEmoji = () => {
+                                    if (b.emojiUrl)
+                                        return (0, jsx_runtime_1.jsx)("img", { src: b.emojiUrl, alt: "emoji", className: "inline w-4 h-4 mr-1 align-text-bottom flex-shrink-0" });
+                                    if (!b.emoji)
+                                        return null;
+                                    if (typeof b.emoji === "string")
+                                        return (0, jsx_runtime_1.jsx)("span", { className: "mr-1", children: b.emoji });
+                                    const em = b.emoji;
+                                    if (em.id) {
+                                        const animated = !!em.animated;
+                                        const src = (0, cdnHelpers_1.buildEmojiCdnUrl)(String(em.id), animated, 96) || "";
+                                        if (src) {
+                                            return ((0, jsx_runtime_1.jsx)("img", { src: src, alt: em.name || "emoji", className: "inline w-4 h-4 mr-1 align-text-bottom flex-shrink-0" }));
+                                        }
+                                    }
+                                    return (0, jsx_runtime_1.jsx)("span", { className: "mr-1", children: em.name || "" });
+                                };
+                                const contentNodes = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderEmoji(), (0, jsx_runtime_1.jsx)("span", { className: "flex-1 truncate text-left", children: b.label }), isLinkStyle ? (0, jsx_runtime_1.jsx)(ExternalLinkIcon_1.default, {}) : null] }));
+                                if (isLinkStyle && b.url) {
+                                    return ((0, jsx_runtime_1.jsx)("a", { href: b.url, target: "_blank", rel: "noopener noreferrer", className: classes, children: contentNodes }, `btn-${i}`));
+                                }
+                                return ((0, jsx_runtime_1.jsx)("button", { className: classes, onClick: (ev) => {
+                                        ev.preventDefault();
+                                        if (b.url)
+                                            window.open(b.url, "_blank");
+                                        else if (b.customId)
+                                            console.log("button clicked", b.customId);
+                                    }, type: "button", children: contentNodes }, `btn-${i}`));
+                            }) })) : null, props.selects && props.selects.length ? ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 flex flex-col gap-2", children: props.selects.map((s, si) => ((0, jsx_runtime_1.jsx)("div", { className: "flex w-auto max-w-[432px] my-2 min-w-0", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 rounded-md px-3 py-2", style: {
+                                        backgroundColor: "#0f1112",
+                                        border: "1px solid #1e2124"
+                                    }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-sm text-[#E6E6E6] cursor-default", children: [(0, jsx_runtime_1.jsx)("div", { className: "truncate", children: s.placeholder || "Select" }), (0, jsx_runtime_1.jsx)(ChevronDownIcon_1.default, { className: "ml-2 text-[#9aa0a6]" })] }), Array.isArray(s.options) && s.options.length ? ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 bg-[#0e0f10] border border-[#1b1c1d] rounded p-1 text-sm text-[#9aa0a6]", children: s.options.map((opt, oi) => {
+                                                const renderOptEmoji = () => {
+                                                    if (!opt.emoji)
+                                                        return null;
+                                                    if (typeof opt.emoji === "string")
+                                                        return (0, jsx_runtime_1.jsx)("span", { className: "ml-2", children: opt.emoji });
+                                                    const e = opt.emoji;
+                                                    if (e.id) {
+                                                        const animated = !!e.animated;
+                                                        const src = (0, cdnHelpers_1.buildEmojiCdnUrl)(String(e.id), animated, 96) || "";
+                                                        if (src) {
+                                                            return (0, jsx_runtime_1.jsx)("img", { src: src, alt: e.name || "emoji", className: "ml-2 inline w-4 h-4" });
+                                                        }
+                                                    }
+                                                    if (opt.emoji.name)
+                                                        return (0, jsx_runtime_1.jsx)("span", { className: "ml-2", children: opt.emoji.name });
+                                                    return null;
+                                                };
+                                                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 hover:bg-[#121314] rounded", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-medium text-white", children: opt.label }), opt.description ? (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-[#9aa0a6]", children: opt.description }) : null] }), renderOptEmoji()] }, `opt-${si}-${oi}`));
+                                            }) })) : null] }) }, `select-${si}`))) })) : null, reactions && reactions.length ? ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 flex gap-1", children: reactions.map((r, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "px-2 py-1 bg-[#1E1F22] border border-[#404249] rounded-full text-sm flex items-center gap-1 hover:bg-[#2C2F33] cursor-pointer", children: [r.emojiUrl ? (0, jsx_runtime_1.jsx)("img", { src: r.emojiUrl, alt: r.emoji || "emoji", className: "w-5 h-5 inline" }) : (0, jsx_runtime_1.jsx)("span", { children: r.emoji }), r.count ? (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[#949BA4]", children: r.count }) : null] }, i))) })) : null] })] })) }));
+    const _fixed = ensureKeys(_messageTree, `message-${id}`);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: react_1.default.Children.toArray(_fixed) });
+}

package/dist/src/web/discord-components/PinnedMessagesModal.d.ts

@@ -0,0 +1,6 @@
+import type { MessageProps } from "../types/message";
+export default function PinnedMessagesModal({ pinnedMessages, onClose, onMessageClick }: {
+    pinnedMessages: MessageProps[];
+    onClose: () => void;
+    onMessageClick: (messageId: string) => void;
+}): import("react/jsx-runtime").JSX.Element;