phoneof/static/js/components/chat.js

const runChat = async () => {
  const frenId =
    new URLSearchParams(document.location.search).get("fren_id") ??
    document.getElementById("fren_id").value;
  const html = await fetch(`/chat/messages?fren_id=${frenId}`).then((r) =>
    r.text(),
  );

  const { scrollTop, scrollHeight, clientTop } = document.getElementById(
    "chat-container",
  ) ?? { scrollTop: 0, scrollHeight: 0, clientTop: 0};
  const scrollTopMax = scrollHeight - clientTop;
  const isAtEdge = scrollTop > (0.92 * scrollTopMax) || scrollTop === 0;
  document.getElementById("messages").innerHTML = html;
  await new Promise((res) => setTimeout(res, 200)); // wait for html to emplace.
  const emplacedScrollTopMax = document.getElementById("chat-container").scrollHeight - document.getElementById("chat-container").clientTop;
  if (isAtEdge) {
    document.getElementById("chat-container").scrollTop = scrollTopMax;
  } else {
    // save the position.
    document.getElementById("chat-container").scrollTop = scrollTop;
  }
};

setTimeout(() => {
  if (document.location.pathname.startsWith("/chat")) {
    runChat().then(() => setInterval(runChat, 2_500));
  }
}, 200);

const form = document.getElementById("chat-form");
form.addEventListener('submit', (event) => {
  event.preventDefault();

  const message = document.getElementById("message-content").value;
  const fren_id = document.getElementById("fren-id").value;
  const params = new URLSearchParams();
  params.append("fren_id", fren_id);
  params.append("message", message);
  fetch("/chat", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    body: params,
  }).then(runChat);
});