devplacepy/devplacepy/static/js/MessagesLayout.js

// retoor <retoor@molodetz.nl>

import { MessagesSocket } from "./MessagesSocket.js";
import { contentRenderer } from "./ContentRenderer.js";

const TYPING_THROTTLE_MS = 1500;
const TYPING_HIDE_MS = 4000;
const AUTO_SCROLL_MARGIN_PX = 100;
const STABILIZE_MAX_FRAMES = 300;

export class MessagesLayout {
    constructor() {
        this.layout = document.querySelector(".messages-layout");
        if (!this.layout) {
            return;
        }
        this.thread = document.querySelector(".messages-thread");
        this.form = document.querySelector(".messages-input-area");
        this.input = this.form ? this.form.querySelector('textarea[name="content"]') : null;
        this.upload = this.form ? this.form.querySelector("dp-upload") : null;
        this.sendBtn = this.form ? this.form.querySelector(".messages-send-btn") : null;
        this._uploading = false;
        this._pendingSends = new Set();
        this.typingEl = document.getElementById("typing-indicator");

        this.selfUid = this.layout.dataset.selfUid || "";
        this.otherUid = this.layout.dataset.otherUid || "";

        this._lastTypingSent = 0;
        this._typingHideTimer = null;
        this._socketReady = false;
        this._userAtBottom = true;
        this._stabilizeFrames = 0;
        this._stabilizePending = false;

        // Expose for diagnostics
        window.__messagesLayout = this;

        this.scrollThreadToEnd();
        if (this.input) {
            this.input.focus({ preventScroll: true });
        }

        this.connect();
        this.bindForm();
        this.bindTyping();
        this.bindViewport();
        this.bindAutoScroll();
        this._startScrollWatcher();
        this.markRead();
    }

    _startScrollWatcher() {
        if (!this.thread) return;

        const onAnyChange = () => {
            if (!this._userAtBottom) return;
            if (this._stabilizePending) return;
            this._stabilizePending = true;
            requestAnimationFrame(() => {
                this._stabilizePending = false;
                this._stabilizeScroll();
            });
        };

        this._scrollWatcher = new MutationObserver(onAnyChange);
        this._scrollWatcher.observe(this.thread, {
            childList: true,
            subtree: true,
        });

        this.thread.addEventListener("load", (e) => {
            if (e.target.tagName === "IMG" && this._userAtBottom) {
                onAnyChange();
            }
        }, true);

        // Kick initial stabilization
        onAnyChange();
    }

    _stabilizeScroll() {
        if (!this.thread) {
            this._stabilizeFrames = 0;
            return;
        }
        if (!this._userAtBottom) {
            this._stabilizeFrames = 0;
            return;
        }
        if (this._stabilizeFrames >= STABILIZE_MAX_FRAMES) {
            this._stabilizeFrames = 0;
            return;
        }
        this._stabilizeFrames++;
        this.thread.scrollTop = this.thread.scrollHeight;
        const atBottom = this.thread.scrollHeight
            - this.thread.scrollTop
            - this.thread.clientHeight < 10;
        if (!atBottom) {
            this._stabilizePending = true;
            requestAnimationFrame(() => {
                this._stabilizePending = false;
                this._stabilizeScroll();
            });
        } else {
            this._stabilizeFrames = 0;
        }
    }

    bindAutoScroll() {
        if (!this.thread) return;
        this.thread.addEventListener("scroll", () => {
            if (this._stabilizePending) return;
            const atBottom = this.thread.scrollHeight
                - this.thread.scrollTop
                - this.thread.clientHeight < AUTO_SCROLL_MARGIN_PX;
            this._userAtBottom = atBottom;
            if (atBottom) {
                this._stabilizeScroll();
            }
        }, { passive: true });
    }

    bindViewport() {
        const page = document.querySelector(".page-messages");
        if (!page || !this.input || !this.form) return;

        const viewport = window.visualViewport;

        const ensureInputVisible = () => {
            const vh = viewport ? viewport.height : window.innerHeight;
            const formRect = this.form.getBoundingClientRect();
            const currentInset = parseInt(page.style.getPropertyValue("--kb-inset")) || 0;
            const delta = formRect.bottom - vh;
            const newInset = Math.max(0, currentInset + delta);

            if (newInset !== currentInset) {
                page.style.setProperty("--kb-inset", `${Math.round(newInset)}px`);
                this._userAtBottom = true;
                this.scrollThreadToEnd();
            }
        };

        if (viewport) {
            let insetTimer = null;
            const onViewportChange = () => {
                cancelAnimationFrame(insetTimer);
                insetTimer = requestAnimationFrame(ensureInputVisible);
            };
            viewport.addEventListener("resize", onViewportChange);
            viewport.addEventListener("scroll", onViewportChange);
        }

        const ro = new ResizeObserver(() => ensureInputVisible());
        ro.observe(page);
        if (this.layout) ro.observe(this.layout);

        if (this.form) {
            const io = new IntersectionObserver((entries) => {
                for (const entry of entries) {
                    if (!entry.isIntersecting) ensureInputVisible();
                }
            }, { root: null, threshold: [0, 0.5, 1] });
            io.observe(this.form);
            this._viewportIO = io;
        }

        this.input.addEventListener("keydown", (event) => {
            if (event.key === "Enter" && !event.shiftKey) {
                event.preventDefault();
                this.form.requestSubmit();
            }
        });

        this.input.addEventListener("input", () => {
            this.input.style.height = "auto";
            this.input.style.height = Math.min(this.input.scrollHeight, 160) + "px";
        });

        this.input.addEventListener("focus", () => {
            this._userAtBottom = true;
            const doScroll = () => {
                this.scrollThreadToEnd();
                if (window.innerWidth < 768) {
                    const retry = (delay) => setTimeout(() => {
                        ensureInputVisible();
                        this.scrollThreadToEnd();
                    }, delay);
                    retry(100);
                    retry(350);
                    retry(600);
                }
            };
            requestAnimationFrame(doScroll);
        });

        this.input.addEventListener("blur", () => {
            page.style.setProperty("--kb-inset", "0px");
        });

        ensureInputVisible();
    }

    connect() {
        this.socket = new MessagesSocket({
            onReady: () => this.onReady(),
            onMessage: (frame) => this.onFrame(frame),
            onClose: () => { this._socketReady = false; },
        });
        this.socket.connect();
    }

    onReady() {
        this._socketReady = true;
        if (this.otherUid) {
            this.markRead();
        }
    }

    onFrame(frame) {
        switch (frame.type) {
            case "message":
                this.handleIncoming(frame);
                break;
            case "typing":
                if (frame.from_uid === this.otherUid) this.showTyping();
                break;
            case "read":
                if (frame.by_uid === this.otherUid) this.markReceipts();
                break;
            default:
                break;
        }
    }

    bindForm() {
        if (!this.form || !this.input) return;
        this.form.addEventListener("submit", (event) => {
            if (!this._socketReady || !this.socket.isOpen()) {
                return;
            }
            event.preventDefault();
            this.sendViaSocket();
        });
        if (this.upload) {
            this.upload.addEventListener("dp-upload:busy", (event) => {
                this._uploading = !!(event.detail && event.detail.busy);
                this.refreshSendButton();
            });
        }
    }

    refreshSendButton() {
        if (!this.sendBtn) return;
        const busy = this._uploading || this._pendingSends.size > 0;
        this.sendBtn.disabled = busy;
        this.sendBtn.classList.toggle("is-sending", busy);
    }

    sendViaSocket() {
        const content = (this.input.value || "").trim();
        const attachmentUids = this.collectAttachments();
        if (!content && attachmentUids.length === 0) return;
        const clientId = "c" + Date.now() + Math.random().toString(36).slice(2, 8);
        this.appendOptimistic(content, clientId, attachmentUids.length);
        const ok = this.socket.send({
            type: "send",
            receiver_uid: this.otherUid,
            content,
            attachment_uids: attachmentUids,
            client_id: clientId,
        });
        if (!ok) {
            this.form.submit();
            return;
        }
        this._pendingSends.add(clientId);
        this.refreshSendButton();
        window.setTimeout(() => this.clearPendingSend(clientId), 8000);
        this.input.value = "";
        if (this.upload && typeof this.upload.clear === "function") {
            this.upload.clear();
        }
        this.input.focus({ preventScroll: true });
    }

    clearPendingSend(clientId) {
        if (this._pendingSends.delete(clientId)) {
            this.refreshSendButton();
        }
    }

    collectAttachments() {
        const hidden = this.form.querySelector('input[name="attachment_uids"]');
        if (!hidden || !hidden.value) return [];
        return hidden.value.split(",").map((v) => v.trim()).filter(Boolean);
    }

    bindTyping() {
        if (!this.input) return;
        this.input.addEventListener("input", () => {
            if (!this._socketReady || !this.otherUid) return;
            const now = Date.now();
            if (now - this._lastTypingSent < TYPING_THROTTLE_MS) return;
            this._lastTypingSent = now;
            this.socket.send({ type: "typing", receiver_uid: this.otherUid });
        });
    }
    
    appendOptimistic(content, clientId, attachmentCount) {
        // Results in double message. Should be fixed in future..
        /*
        const bubble = this.buildBubble({
            content,
            mine: true,
            clientId,
            time: "now",
            iso: new Date().toISOString(),
            attachmentCount,
        });
        bubble.classList.add("pending");*/
        //this.insertBubble(bubble);
    }

    handleIncoming(frame) {
        if (frame.uid && this.thread &&
            this.thread.querySelector(`.message-bubble[data-msg-uid="${frame.uid}"]`)) {
            if (frame.client_id) this.clearPendingSend(frame.client_id);
            return;
        }
        if (frame.sender_uid === this.selfUid && frame.client_id) {
            this.clearPendingSend(frame.client_id);
            const pending = this.thread.querySelector(`.message-bubble[data-client-id="${frame.client_id}"]`);
            if (pending) {
                pending.classList.remove("pending");
                pending.dataset.msgUid = frame.uid;
                const oldBody = pending.querySelector(".rendered-content");
                if (oldBody && frame.content !== undefined) {
                    const content = document.createElement("dp-content");
                    content.setAttribute("no-copy", "");
                    if (frame.sender_role === "Admin") content.setAttribute("data-author-admin", "");
                    content.textContent = frame.content || "";
                    oldBody.replaceWith(content);
                }
                const time = pending.querySelector(".message-time");
                if (time && frame.created_at) {
                    time.setAttribute("datetime", frame.created_at);
                    time.dataset.dt = "";
                    time.dataset.dtMode = "ago";
                    if (window.app && window.app.localTime) window.app.localTime.apply(time);
                    else time.textContent = frame.time_ago;
                } else if (time) {
                    time.textContent = frame.time_ago;
                }
                const placeholder = pending.querySelector(".attachment-pending");
                if (placeholder) placeholder.remove();
                const gallery = this.renderAttachments(frame.attachments);
                if (gallery) pending.insertBefore(gallery, time || null);
                this.bumpConversation(frame, true);
                return;
            }
        }

        const partnerUid = frame.sender_uid === this.selfUid ? frame.receiver_uid : frame.sender_uid;
        const inThisThread = this.otherUid && partnerUid === this.otherUid;

        if (inThisThread) {
            const mine = frame.sender_uid === this.selfUid;
            const bubble = this.buildBubble({
                content: frame.content,
                mine,
                time: frame.time_ago,
                iso: frame.created_at,
                uid: frame.uid,
                senderRole: frame.sender_role,
                attachments: frame.attachments,
            });
            this.insertBubble(bubble);
            if (!mine && this._socketReady) {
                this.socket.send({ type: "read", with_uid: this.otherUid });
            }
        }
        this.bumpConversation(frame, frame.sender_uid === this.selfUid);
    }

    buildBubble({ content, mine, time, iso, uid, clientId, senderRole, attachments, attachmentCount }) {
        const bubble = document.createElement("div");
        bubble.className = "message-bubble " + (mine ? "mine" : "theirs");
        if (uid) bubble.dataset.msgUid = uid;
        if (clientId) bubble.dataset.clientId = clientId;

        const el = document.createElement("dp-content");
        el.setAttribute("no-copy", "");
        if (senderRole === "Admin") el.setAttribute("data-author-admin", "");
        el.textContent = content || "";
        bubble.appendChild(el);

        const gallery = this.renderAttachments(attachments);
        if (gallery) {
            bubble.appendChild(gallery);
        } else if (attachmentCount > 0) {
            const placeholder = document.createElement("div");
            placeholder.className = "attachment-pending";
            placeholder.textContent = attachmentCount === 1
                ? "Uploading attachment..."
                : `Uploading ${attachmentCount} attachments...`;
            bubble.appendChild(placeholder);
        }

        const timeEl = document.createElement(iso ? "time" : "span");
        timeEl.className = "message-time";
        if (iso) {
            timeEl.setAttribute("datetime", iso);
            timeEl.dataset.dt = "";
            timeEl.dataset.dtMode = "ago";
            if (window.app && window.app.localTime) window.app.localTime.apply(timeEl);
            else timeEl.textContent = time || "";
        } else {
            timeEl.textContent = time || "";
        }
        bubble.appendChild(timeEl);

        if (mine) {
            const receipt = document.createElement("span");
            receipt.className = "message-receipt";
            receipt.hidden = true;
            receipt.innerHTML = "&#x2713;&#x2713;";
            bubble.appendChild(receipt);
        }

        return bubble;
    }

    renderAttachments(attachments) {
        if (!attachments || !attachments.length) return null;
        const gallery = document.createElement("div");
        gallery.className = "attachment-gallery";
        for (const att of attachments) {
            const item = document.createElement("div");
            item.className = "attachment-gallery-item";
            if (att.is_image) {
                const img = document.createElement("img");
                img.src = att.thumbnail_url || att.url;
                img.alt = att.original_filename || "";
                img.loading = "lazy";
                img.className = "gallery-thumb";
                img.dataset.lightbox = "";
                img.dataset.full = att.url;
                if (att.mime_type) img.dataset.mime = att.mime_type;
                item.appendChild(img);
            } else if (att.is_video) {
                const video = document.createElement("video");
                video.src = att.url;
                video.controls = true;
                video.preload = "metadata";
                video.className = "gallery-video";
                item.appendChild(video);
            } else {
                const link = document.createElement("a");
                link.href = att.url;
                link.target = "_blank";
                link.rel = "noopener";
                link.className = "non-image";
                link.download = att.original_filename || "file";
                link.textContent = att.original_filename || "file";
                item.appendChild(link);
            }
            gallery.appendChild(item);
        }
        return gallery;
    }

    insertBubble(bubble) {
        if (!this.thread) return;
        if (this.typingEl && this.typingEl.parentElement === this.thread) {
            this.thread.insertBefore(bubble, this.typingEl);
        } else {
            this.thread.appendChild(bubble);
        }
        this.scrollThreadToEnd();
    }

    markReceipts() {
        this.thread.querySelectorAll(".message-bubble.mine .message-receipt").forEach((el) => {
            el.hidden = false;
        });
    }

    markRead() {
        if (this._socketReady && this.otherUid) {
            this.socket.send({ type: "read", with_uid: this.otherUid });
        }
    }

    showTyping() {
        if (!this.typingEl) return;
        this.typingEl.hidden = false;
        this.scrollThreadToEnd();
        clearTimeout(this._typingHideTimer);
        this._typingHideTimer = setTimeout(() => {
            this.typingEl.hidden = true;
        }, TYPING_HIDE_MS);
    }

    bumpConversation(frame, mine) {
        const partnerUid = mine ? frame.receiver_uid : frame.sender_uid;
        const item = document.querySelector(`.conversation-item[data-conv-uid="${partnerUid}"]`);
        if (!item) return;
        const preview = item.querySelector(".conversation-preview");
        if (preview) preview.textContent = contentRenderer.preview(frame.content, 60);
        const dot = item.querySelector(".conversation-unread-dot");
        if (dot) {
            dot.hidden = mine || partnerUid === this.otherUid;
        }
        const list = item.parentElement;
        if (list && list.firstElementChild !== item) {
            list.insertBefore(item, list.firstElementChild);
        }
    }

    scrollThreadToEnd() {
        if (!this.thread) return;
        if (!this._userAtBottom) return;
        this.thread.scrollTop = this.thread.scrollHeight;
    }
}