rspace-online/modules/rmaps/components/map-chat-panel.ts

/**
 * <map-chat-panel> — Automerge-backed persistent chat for rMaps rooms.
 * Subscribes to MapsLocalFirstClient changes and renders a scrollable message list + input.
 */

import type { MapsLocalFirstClient } from "../local-first-client";
import type { MapChatMessage } from "../schemas";

class MapChatPanel extends HTMLElement {
	client: MapsLocalFirstClient | null = null;
	participantId = "";
	participantName = "";
	participantEmoji = "";

	private _unsub: (() => void) | null = null;
	private _messages: MapChatMessage[] = [];

	connectedCallback() {
		this.render();
		if (this.client) {
			this._unsub = this.client.onChange((doc) => {
				this._messages = Object.values(doc.messages || {}).sort((a, b) => a.createdAt - b.createdAt);
				this.renderMessages();
			});
			// Initial load
			const doc = this.client.getDoc();
			if (doc) {
				this._messages = Object.values(doc.messages || {}).sort((a, b) => a.createdAt - b.createdAt);
				this.renderMessages();
			}
		}
	}

	disconnectedCallback() {
		this._unsub?.();
		this._unsub = null;
	}

	private esc(s: string): string {
		const d = document.createElement("div");
		d.textContent = s || "";
		return d.innerHTML;
	}

	private relativeTime(ts: number): string {
		const s = Math.floor((Date.now() - ts) / 1000);
		if (s < 60) return "now";
		const m = Math.floor(s / 60);
		if (m < 60) return `${m}m`;
		const h = Math.floor(m / 60);
		if (h < 24) return `${h}h`;
		return `${Math.floor(h / 24)}d`;
	}

	private render() {
		this.innerHTML = `
			<style>
				.chat-panel { display: flex; flex-direction: column; height: 100%; }
				.chat-messages {
					flex: 1; overflow-y: auto; padding: 8px 0;
					scrollbar-width: thin; scrollbar-color: var(--rs-border) transparent;
				}
				.chat-msg {
					display: flex; gap: 8px; padding: 4px 0;
					animation: chatFadeIn 0.2s ease;
				}
				@keyframes chatFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
				.chat-msg-emoji { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
				.chat-msg-body { flex: 1; min-width: 0; }
				.chat-msg-header {
					display: flex; gap: 6px; align-items: baseline;
					font-size: 11px; margin-bottom: 1px;
				}
				.chat-msg-name { font-weight: 600; color: var(--rs-text-primary); }
				.chat-msg-time { color: var(--rs-text-muted); font-size: 10px; }
				.chat-msg-text {
					font-size: 13px; color: var(--rs-text-secondary);
					line-height: 1.4; word-break: break-word;
				}
				.chat-empty {
					flex: 1; display: flex; align-items: center; justify-content: center;
					color: var(--rs-text-muted); font-size: 12px; text-align: center; padding: 20px;
				}
				.chat-input-row {
					display: flex; gap: 6px; padding-top: 8px;
					border-top: 1px solid var(--rs-border);
				}
				.chat-input {
					flex: 1; border: 1px solid var(--rs-border); border-radius: 8px;
					padding: 8px 10px; background: var(--rs-input-bg, var(--rs-bg-surface));
					color: var(--rs-text-primary); font-size: 13px; outline: none;
					font-family: inherit;
				}
				.chat-input:focus { border-color: #6366f1; }
				.chat-input::placeholder { color: var(--rs-text-muted); }
				.chat-send-btn {
					padding: 8px 12px; border-radius: 8px; border: none;
					background: #4f46e5; color: #fff; font-weight: 600;
					cursor: pointer; font-size: 13px; white-space: nowrap;
				}
				.chat-send-btn:hover { background: #6366f1; }
				.chat-send-btn:disabled { opacity: 0.5; cursor: default; }
				.chat-gap {
					text-align: center; font-size: 10px; color: var(--rs-text-muted);
					padding: 6px 0; margin: 4px 0;
				}
			</style>
			<div class="chat-panel">
				<div class="chat-messages" id="chat-msgs"></div>
				<div class="chat-input-row">
					<input class="chat-input" id="chat-input" type="text" placeholder="Message..." maxlength="500" autocomplete="off">
					<button class="chat-send-btn" id="chat-send">Send</button>
				</div>
			</div>
		`;

		const input = this.querySelector("#chat-input") as HTMLInputElement;
		const sendBtn = this.querySelector("#chat-send") as HTMLButtonElement;

		const send = () => {
			const text = input.value.trim();
			if (!text || !this.client) return;
			const msg: MapChatMessage = {
				id: crypto.randomUUID(),
				authorId: this.participantId,
				authorName: this.participantName,
				authorEmoji: this.participantEmoji,
				text,
				createdAt: Date.now(),
			};
			this.client.addMessage(msg);
			input.value = "";
			input.focus();
		};

		sendBtn.addEventListener("click", send);
		input.addEventListener("keydown", (e) => {
			if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); }
		});
	}

	private renderMessages() {
		const container = this.querySelector("#chat-msgs");
		if (!container) return;

		if (this._messages.length === 0) {
			container.innerHTML = '<div class="chat-empty">No messages yet.<br>Start the conversation!</div>';
			return;
		}

		let html = "";
		let lastTs = 0;

		for (const msg of this._messages) {
			// Time gap separator (>5 min)
			if (lastTs && msg.createdAt - lastTs > 5 * 60 * 1000) {
				const d = new Date(msg.createdAt);
				const timeStr = d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
				html += `<div class="chat-gap">${timeStr}</div>`;
			}
			lastTs = msg.createdAt;

			html += `
				<div class="chat-msg">
					<span class="chat-msg-emoji">${this.esc(msg.authorEmoji)}</span>
					<div class="chat-msg-body">
						<div class="chat-msg-header">
							<span class="chat-msg-name">${this.esc(msg.authorName)}</span>
							<span class="chat-msg-time">${this.relativeTime(msg.createdAt)}</span>
						</div>
						<div class="chat-msg-text">${this.esc(msg.text)}</div>
					</div>
				</div>
			`;
		}

		container.innerHTML = html;

		// Auto-scroll to bottom
		container.scrollTop = container.scrollHeight;

		// Store last-viewed timestamp for unread counting
		if (this._messages.length > 0) {
			const lastMsg = this._messages[this._messages.length - 1];
			localStorage.setItem(`rmaps_chat_seen_${this.getAttribute("room") || ""}`, String(lastMsg.createdAt));
		}
	}
}

customElements.define("map-chat-panel", MapChatPanel);
export { MapChatPanel };