path: root/packages/meshbay-hub/src/meshbay_hub/static/chat-app.js

import {
  html, useState, useEffect, useLayoutEffect, useCallback, useRef,
} from './vendor/htm-preact.js';
import { t, getLocale } from './i18n.js';
import { Icon } from './icon.js';
import { formatSize, CHUNK_SIZE, pipelinedDownload } from './file-utils.js';

/**
 * Message text with its links made clickable.
 *
 * Only http and https, and built as elements rather than markup: a message is
 * something another member wrote, so it must never become HTML. `javascript:`
 * and `data:` are not matched at all, and the anchors carry noopener so the new
 * tab cannot reach back into this one.
 */
const URL_RE = /\bhttps?:\/\/[^\s<>"']+/gi;

function linkify(text) {
  const out = [];
  let last = 0;
  for (const m of String(text).matchAll(URL_RE)) {
    if (m.index > last) out.push(text.slice(last, m.index));
    // Trailing punctuation is almost never part of the address.
    let url = m[0];
    let tail = '';
    while (/[.,;:!?)\]]$/.test(url)) { tail = url.slice(-1) + tail; url = url.slice(0, -1); }
    out.push(html`<a href=${url} target="_blank" rel="noopener noreferrer"
      class="chat-link">${url}</a>`);
    if (tail) out.push(tail);
    last = m.index + m[0].length;
  }
  if (last < text.length) out.push(text.slice(last));
  return out;
}

function formatTime(ts) {
  const d = new Date(ts * 1000);
  const now = new Date();
  // getLocale() rather than the browser default: the user may have picked a
  // language here that differs from the one their OS reports.
  const time = d.toLocaleTimeString(getLocale(), { hour: '2-digit', minute: '2-digit' });
  if (d.toDateString() === now.toDateString()) return time;
  return d.toLocaleDateString(getLocale(), { month: 'short', day: 'numeric' }) + ' ' + time;
}

function _parsePayload(raw) {
  if (typeof raw === 'string' && raw.startsWith('{')) {
    try { return JSON.parse(raw); } catch { /* not JSON */ }
  }
  return null;
}

// How much history a group opens with, and how much each "older" click adds.
const CHAT_PAGE = 100;
const CHAT_OLDER_PAGE = 50;

// Breathing room under the panel, and the floor below which shrinking it stops
// helping — past that the page may scroll after all, which beats a chat two
// lines tall.
const CHAT_BOTTOM_GAP = 16;
const CHAT_MIN_HEIGHT = 240;

function _sameDay(a, b) {
  const da = new Date(a * 1000), db = new Date(b * 1000);
  return da.getFullYear() === db.getFullYear()
    && da.getMonth() === db.getMonth()
    && da.getDate() === db.getDate();
}

/** "Today" / "Yesterday" / a written date, in the reader's language. */
function _dayLabel(ts) {
  const d = new Date(ts * 1000);
  const now = new Date();
  if (_sameDay(ts, now.getTime() / 1000)) return t('chat.today');
  const yesterday = new Date(now);
  yesterday.setDate(now.getDate() - 1);
  if (_sameDay(ts, yesterday.getTime() / 1000)) return t('chat.yesterday');
  return d.toLocaleDateString(getLocale(), {
    weekday: 'long', day: 'numeric', month: 'long',
    year: d.getFullYear() === now.getFullYear() ? undefined : 'numeric',
  });
}

function ChatImage({ filename, entries, transportRef, gekRef }) {
  const [blobUrl, setBlobUrl] = useState(null);
  const [loading, setLoading] = useState(true);
  const loadedRef = useRef(false);

  useEffect(() => {
    if (loadedRef.current) return;
    let cancelled = false;
    const load = async () => {
      const transport = transportRef.current;
      if (!transport || !transport.connected) { setLoading(true); return; }
      const entry = entries.find(e => e.name === filename);
      if (!entry) { setLoading(true); return; }
      try {
        const totalChunks = Math.ceil(entry.size / CHUNK_SIZE);
        const chunks = await pipelinedDownload(transport, gekRef.current, entry.id, totalChunks);
        if (cancelled) return;
        const ext = filename.split('.').pop().toLowerCase();
        const mime = ext === 'png' ? 'image/png' : ext === 'gif' ? 'image/gif'
          : ext === 'webp' ? 'image/webp' : ext === 'svg' ? 'image/svg+xml' : 'image/jpeg';
        const blob = new Blob(chunks, { type: mime });
        loadedRef.current = true;
        setBlobUrl(URL.createObjectURL(blob));
      } catch { /* ignore */ }
      if (!cancelled) setLoading(false);
    };
    load();
    return () => { cancelled = true; };
  }, [filename, entries.length]);

  useEffect(() => {
    return () => { if (blobUrl) URL.revokeObjectURL(blobUrl); };
  }, [blobUrl]);

  if (loading) return html`<div class="chat-att-thumb"><span class="spinner"></span></div>`;
  if (!blobUrl) return html`<div class="chat-att-img">${'\u{1F5BC}'} ${filename}</div>`;
  return html`<img class="chat-att-thumb" src=${blobUrl} alt=${filename} />`;
}

function ChatPanel({ transportRef, username, entries, gekRef, onRefreshIndex,
                    onPreview, mayUpload = true, onActivity }) {
  const [messages, setMessages] = useState([]);
  const [hasMore, setHasMore] = useState(false);
  const [loadingOlder, setLoadingOlder] = useState(false);
  const [atBottom, setAtBottom] = useState(true);
  const [unreadFrom, setUnreadFrom] = useState(null);
  const [input, setInput] = useState('');
  const [sending, setSending] = useState(false);
  const [attaching, setAttaching] = useState(false);
  const listRef = useRef(null);
  const panelRef = useRef(null);
  const inputRef = useRef(null);
  const loadedRef = useRef(false);
  // Set just before older messages are prepended; read once, after the DOM has
  // them but before the browser paints.
  const anchorRef = useRef(null);
  const atBottomRef = useRef(true);

  useEffect(() => {
    const transport = transportRef.current;
    if (!transport || !transport.connected) return;

    if (!loadedRef.current) {
      loadedRef.current = true;
      // The newest page. This used to be fetchChatHistory(0, 200), which paged
      // forwards from the very first message ever sent, so a busy group opened
      // on its oldest screen and the recent conversation was unreachable.
      transport.fetchChatHistory({ limit: CHAT_PAGE })
        .then(({ messages: msgs, hasMore: more }) => {
          setMessages(msgs);
          setHasMore(more);
        })
        .catch(() => {});
    }

    transport.onChat = (msg) => {
      // A live message has no row id until it is re-read from the node, so it
      // gets a local one. Keys have to be stable and unique or prepending a
      // page makes Preact reuse the wrong bubbles. Computed once and reused
      // below: the unread marker points at a message by id, so generating a
      // second one there would point it at nothing.
      const id = msg.id
        || `live-${Date.now()}-${Math.random().toString(36).slice(2)}`;
      setMessages(prev => [...prev, {
        id,
        sender_id: msg.sender_id,
        sender_name: msg.sender_name || '',
        payload: msg.payload,
        timestamp: msg.timestamp || Date.now() / 1000,
        thread_id: msg.thread_id,
      }]);
      // Somebody wrote while you were reading further up: mark where you were
      // rather than yanking the view down.
      if (!atBottomRef.current) setUnreadFrom(prev => prev ?? id);
    };

    return () => { transport.onChat = null; };
  }, [transportRef.current?.connected]);

  const loadOlder = useCallback(async () => {
    const transport = transportRef.current;
    if (!transport || !transport.connected || loadingOlder || !messages.length) return;
    setLoadingOlder(true);
    const list = listRef.current;
    // Keeping the reading position means restoring the distance from the
    // *bottom*, not scrollTop: everything above the viewport just grew.
    anchorRef.current = list ? list.scrollHeight - list.scrollTop : null;
    try {
      const { messages: older, hasMore: more } =
        await transport.fetchChatHistory({ before: messages[0].id, limit: CHAT_OLDER_PAGE });
      setMessages(prev => [...older, ...prev]);
      setHasMore(more);
    } catch {
      anchorRef.current = null;
    } finally {
      setLoadingOlder(false);
    }
  }, [messages, loadingOlder]);

  useLayoutEffect(() => {
    const list = listRef.current;
    if (!list) return;
    if (anchorRef.current !== null) {
      list.scrollTop = list.scrollHeight - anchorRef.current;
      anchorRef.current = null;
      return;
    }
    // Only follow the conversation if the reader was already at the bottom.
    // Scrolling unconditionally fought every attempt to read back through it.
    //
    // scrollTop rather than bottomRef.scrollIntoView: the sentinel has no
    // height, so aligning it to the bottom of the viewport leaves the list's
    // own padding below it and the bar stops just short of the end.
    if (atBottomRef.current) list.scrollTop = list.scrollHeight;
  }, [messages]);

  // The panel was `calc(100vh - 220px)`: a guess at how much sits above it. On a
  // phone the group header — title, description, edit link, delete button, tabs
  // — is closer to 430px, so the panel ran past the fold and the composer ended
  // up off screen with the whole page scrolling to reach it.
  //
  // Measured instead, from the panel's own position in the document, so the
  // header can be any height. `visualViewport` rather than innerHeight where it
  // exists: on Android the on-screen keyboard shrinks the visual viewport
  // without changing innerHeight, and the composer would go back under it.
  useLayoutEffect(() => {
    const el = panelRef.current;
    if (!el) return;
    const fit = () => {
      const vh = window.visualViewport?.height || window.innerHeight;
      // Document-relative, so a page that happens to be scrolled does not skew
      // the result — the answer must be the same either way.
      const top = el.getBoundingClientRect().top + window.scrollY;
      el.style.height = `${Math.max(CHAT_MIN_HEIGHT, vh - top - CHAT_BOTTOM_GAP)}px`;
      // What sits *below* the panel is not knowable from up here — today it is
      // `.main`'s 24px bottom padding against this 16px gap, which left the
      // document 8px taller than the window and a scrollbar on the chat tab at
      // every window size. Rather than encode 24 somewhere and have the next
      // change to the page break it again, the leftover is measured and taken
      // off. Self-correcting: anything added under the panel is absorbed the
      // same way.
      const over = document.documentElement.scrollHeight - vh;
      if (over > 0) {
        el.style.height =
          `${Math.max(CHAT_MIN_HEIGHT, el.getBoundingClientRect().height - over)}px`;
      }
    };
    fit();
    window.addEventListener('resize', fit);
    window.addEventListener('orientationchange', fit);
    window.visualViewport?.addEventListener('resize', fit);
    return () => {
      window.removeEventListener('resize', fit);
      window.removeEventListener('orientationchange', fit);
      window.visualViewport?.removeEventListener('resize', fit);
    };
  }, []);

  const onScroll = useCallback((e) => {
    const el = e.target;
    const bottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
    atBottomRef.current = bottom;
    setAtBottom(bottom);
    if (bottom) setUnreadFrom(null);
  }, []);

  const jumpToBottom = useCallback(() => {
    atBottomRef.current = true;
    setAtBottom(true);
    setUnreadFrom(null);
    const list = listRef.current;
    if (list) list.scrollTo({ top: list.scrollHeight, behavior: 'smooth' });
  }, []);

  const sendMessage = useCallback(async () => {
    const text = input.trim();
    if (!text) return;
    const transport = transportRef.current;
    if (!transport || !transport.connected) return;

    setSending(true);
    setInput('');
    try {
      await transport.sendChat(text, 0, null, username);
      setMessages(prev => [...prev, {
        id: `own-${Date.now()}-${Math.random().toString(36).slice(2)}`,
        sender_id: username,
        sender_name: username,
        payload: text,
        timestamp: Date.now() / 1000,
        thread_id: null,
      }]);
      jumpToBottom();
      if (onActivity) onActivity();
    } catch {
      setInput(text);
    } finally {
      setSending(false);
      setTimeout(() => { if (inputRef.current) inputRef.current.focus(); });
    }
  }, [input, username, jumpToBottom]);

  const attachFile = useCallback(async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    e.target.value = '';
    const transport = transportRef.current;
    if (!transport || !transport.connected) return;
    setAttaching(true);
    try {
      // Two people sending IMG_1234.jpg both succeed; the node picks a free name
      // and the message has to point at the one it chose.
      const ack = await transport.uploadFile(file);
      const storedAs = (ack && ack.stored_as) || file.name;
      await new Promise(r => setTimeout(r, 2500));
      if (onRefreshIndex) await onRefreshIndex();
      const ext = file.name.split('.').pop().toLowerCase();
      const ftype = ['jpg','jpeg','png','gif','webp','svg'].includes(ext) ? 'image'
        : ['mp4','webm','mkv','mov','avi'].includes(ext) ? 'video' : 'file';
      const structured = JSON.stringify({
        text: '', attachment: { filename: storedAs, size: file.size, type: ftype },
      });
      await transport.sendChat(structured, 0, null, username);
      setMessages(prev => [...prev, {
        id: `own-${Date.now()}-${Math.random().toString(36).slice(2)}`,
        sender_id: username, sender_name: username,
        payload: structured, timestamp: Date.now() / 1000, thread_id: null,
      }]);
      jumpToBottom();
    } catch (err) {
      alert(err.message);
    } finally {
      setAttaching(false);
    }
  }, [username, onRefreshIndex, jumpToBottom]);

  const onKeyDown = useCallback((e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  }, [sendMessage]);

  return html`
    <div class="chat-panel" ref=${panelRef}>
      <div class="chat-messages" ref=${listRef} onScroll=${onScroll}>
        ${hasMore && html`
          <div class="chat-older-row">
            <button class="chat-older-btn" onClick=${loadOlder} disabled=${loadingOlder}>
              ${loadingOlder
                ? html`<span class="spinner"></span>`
                : html`<${Icon} name="chevron" cls="chat-older-icon" />`}
              ${' '}${t('chat.load_older', { n: CHAT_OLDER_PAGE })}
            </button>
          </div>
        `}
        ${!hasMore && messages.length > 0 && html`
          <div class="chat-start">${t('chat.start_of_history')}</div>
        `}
        ${messages.length === 0 && html`
          <div class="chat-empty">${t('chat.empty')}</div>
        `}
        ${messages.map((m, i) => {
          const isOwn = m.sender_name === username || m.sender_id === username;
          const displayName = m.sender_name || '?';
          const prev = messages[i - 1];
          const showSender = !isOwn && (i === 0 ||
            (prev.sender_name || prev.sender_id) !== (m.sender_name || m.sender_id));
          // A conversation read over several days is unreadable without them.
          const daySep = i === 0 || !_sameDay(prev.timestamp, m.timestamp)
            ? _dayLabel(m.timestamp) : null;
          const parsed = _parsePayload(m.payload);
          const att = parsed && parsed.attachment;
          return html`
            ${daySep && html`
              <div class="chat-day" key=${'d' + m.id}><span>${daySep}</span></div>
            `}
            ${unreadFrom && unreadFrom === m.id && html`
              <div class="chat-unread" key=${'u' + m.id}><span>${t('chat.unread')}</span></div>
            `}
            <div key=${m.id} class="chat-msg ${isOwn ? 'chat-msg-own' : ''}
                 ${showSender || daySep ? '' : 'chat-msg-tight'}">
              ${showSender && html`
                <div class="chat-sender">${displayName}</div>
              `}
              <div class="chat-bubble ${isOwn ? 'chat-bubble-own' : ''}">
                ${att ? html`
                  <div class="chat-attachment" style="cursor:pointer" onClick=${() => {
                    if (!onPreview) return;
                    const entry = entries.find(e => e.name === att.filename);
                    if (entry) onPreview(entry);
                  }}>
                    ${att.type === 'image'
                      ? html`<${ChatImage} filename=${att.filename} entries=${entries}
                              transportRef=${transportRef} gekRef=${gekRef} />`
                      : att.type === 'video'
                        ? html`<div class="chat-att-file">${'\u{1F3AC}'} ${att.filename}</div>`
                        : html`<div class="chat-att-file">${'\u{1F4CE}'} ${att.filename}</div>`
                    }
                    <div class="chat-att-size">${formatSize(att.size)}</div>
                  </div>
                ` : html`
                  <span class="chat-text">
                    ${linkify(parsed && typeof parsed.text === 'string'
                      ? parsed.text : m.payload)}
                  </span>
                `}
                <span class="chat-time">${formatTime(m.timestamp)}</span>
              </div>
            </div>
          `;
        })}
      </div>
      ${!atBottom && messages.length > 0 && html`
        <button class="chat-jump ${unreadFrom ? 'unread' : ''}" onClick=${jumpToBottom}>
          <${Icon} name="chevron" cls="chat-jump-icon" />
          ${' '}${unreadFrom ? t('chat.jump_new') : t('chat.jump_latest')}
        </button>
      `}
      <div class="chat-input-row">
        ${mayUpload && html`
        <label class="chat-attach" title="${t('chat.attach')}">
          ${attaching ? html`<span class="spinner"></span>`
                      : html`<${Icon} name="clip" />`}
          <input type="file" style="display:none" onChange=${attachFile} disabled=${attaching} />
        </label>
        `}
        <textarea class="chat-input" rows="1" ref=${inputRef}
          placeholder="${t('chat.placeholder')}"
          value=${input}
          onInput=${e => setInput(e.target.value)}
          onKeyDown=${onKeyDown}
          disabled=${sending} />
        <button class="chat-send" onClick=${sendMessage}
          disabled=${sending || !input.trim()}>
          ${t('chat.send')}
        </button>
      </div>
    </div>
  `;
}

// ── Video Player (MSE streaming) ────────────────────────────────────────


export { ChatPanel };