diff --git a/app/public/messages.js b/app/public/messages.js index 09ed575..154e5ed 100644 --- a/app/public/messages.js +++ b/app/public/messages.js @@ -13,11 +13,11 @@ function create_streamer(chat_id, hook_element) { STATE.stream_element = hook_element.parentElement; STATE.observer = new IntersectionObserver( - () => { + (entries) => { load_messages(); }, { - root: STATE.stream_element, + root: document.body, rootMargin: "0px", scrollMargin: "0px", threshold: 1.0, @@ -52,8 +52,6 @@ function load_messages() { .getAttribute("data-first-message-time"), ); - // STATE.stream_element.scrollTo(0, STATE.stream_element.scrollHeight); - if (document.getElementById(`msgs_quit_${STATE.id}`)) { STATE.observer.disconnect(); console.log("quit"); @@ -64,6 +62,10 @@ function load_messages() { ), ); + STATE.stream_element + .querySelector("[ui_ident=data_marker]") + .remove(); + const element = document.createElement("div"); element.setAttribute("ui_ident", "data_marker"); STATE.stream_element.append(element); @@ -80,10 +82,21 @@ function render_message(id) { STATE.is_loading = false; STATE.stream_element.innerHTML = `${res}${STATE.stream_element.innerHTML}`; mark_message_read(); - STATE.stream_element.scrollTo(0, STATE.stream_element.scrollHeight); + scroll_bottom(); + + if (document.getElementById("delivered_read_status")) { + document.getElementById("delivered_read_status").remove(); // clear read receipt box + } }); } +function scroll_bottom() { + STATE.stream_element.parentElement.scrollTo( + 0, + STATE.stream_element.parentElement.scrollHeight, + ); +} + function sock_con() { const socket = new WebSocket( `//${window.location.origin.split("//")[1]}/api/v1/chats/${STATE.chat_id}/_connect`, @@ -109,7 +122,7 @@ function sock_con() { } else if (msg.method === "ReadReceipt") { setTimeout(() => { read_receipt(); - }, 1500); + }, 150); } }); } @@ -164,7 +177,7 @@ function read_receipt() { fetch(`/chats/_templates/chat/${STATE.chat_id}/read_receipt`) .then((res) => res.text()) .then((res) => { - STATE.stream_element.innerHTML = `${res}${STATE.stream_element.innerHTML}`; + document.getElementById("read_receipt_zone").innerHTML = res; }); } diff --git a/app/templates_src/chat.lisp b/app/templates_src/chat.lisp index b0fbe48..791405f 100644 --- a/app/templates_src/chat.lisp +++ b/app/templates_src/chat.lisp @@ -23,14 +23,18 @@ ("class" "flex flex_col card_nest reverse") ("style" "flex: 1 0 auto") (div - ("class" "card flex flex_rev_col gap_2") + ("class" "flex flex_col") ("style" "flex: 1 0 auto; max-height: 80dvh; overflow: auto") - ("id" "messages_stream") - (text "{% if messages|length == 0 -%}") - (i ("class" "flex gap_ch items_center fade") (text "{{ icon \"star\" }} This is the start of the chat!")) - (text "{%- endif %}") + (div + ("class" "card flex flex_rev_col gap_2") + ("style" "flex: 1 0 auto") + ("id" "messages_stream") + (text "{% if messages|length == 0 -%}") + (i ("class" "flex gap_ch items_center fade") (text "{{ icon \"star\" }} This is the start of the chat!")) + (text "{%- endif %}") - (div ("ui_ident" "data_marker"))) + (div ("ui_ident" "data_marker"))) + (div ("id" "read_receipt_zone") ("class" "card") ("style" "min-height: 32.5px; position: sticky; bottom: 0"))) (form ("class" "card flex flex_row items_center gap_2") ("onsubmit" "create_message(event)") @@ -49,5 +53,9 @@ (text "create_streamer(\"{{ chat.id }}\", document.querySelector(\"[ui_ident=data_marker]\")); sock_con(); mark_message_read(); - read_receipt();")) + read_receipt(); + + setTimeout(() => { + scroll_bottom(); + }, 500);")) (text "{% endblock %}") diff --git a/app/templates_src/read_receipt.lisp b/app/templates_src/read_receipt.lisp index 106931e..281141d 100644 --- a/app/templates_src/read_receipt.lisp +++ b/app/templates_src/read_receipt.lisp @@ -11,7 +11,7 @@ ; delivered and read by at least two people (text "{{ icon \"check-check\" }}") (text "{% for uid in chat.last_message_read_by -%}") - (text "{{ components::avatar(id=uid) }}") + (a ("href" "/@{{ uid }}?redirect=true") (text "{{ components::avatar(id=uid) }}")) (text "{%- endfor %}") (text "{%- endif %}")) (text "{%- endif %}") diff --git a/src/routes/api/chats.rs b/src/routes/api/chats.rs index b131b46..170832b 100644 --- a/src/routes/api/chats.rs +++ b/src/routes/api/chats.rs @@ -28,6 +28,8 @@ pub struct CreateChat { pub members: Vec, } +pub const GC_MAXIMUM_MEMBERS: usize = 20; + pub async fn create_request( jar: CookieJar, Extension(data): Extension, @@ -41,7 +43,7 @@ pub async fn create_request( req.members.dedup(); if (req.members.len() > 2 && req.style == ChatStyle::Direct) - | (req.members.len() > 10 && req.style != ChatStyle::Direct) + | (req.members.len() > GC_MAXIMUM_MEMBERS && req.style != ChatStyle::Direct) { return Json(Error::DataTooLong("members list".to_string()).into()); } else if req.members.len() < 1 { @@ -197,8 +199,8 @@ pub async fn add_member_request( return Json(Error::NotAllowed.into()); } - if chat.style != ChatStyle::Direct && chat.members.len() > 10 { - // can only have a maximum of 10 members in one chat + if chat.style != ChatStyle::Direct && chat.members.len() > GC_MAXIMUM_MEMBERS { + // can only have a maximum of GC_MAXIMUM_MEMBERS members in one chat return Json(Error::DataTooLong("members list".to_string()).into()); }