andyburke/autonomous.contact
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feature: forum replies

Browse source 
feature: blurbs
This commit is contained in:
Andy Burke 2025-09-21 18:29:37 -07:00
parent ab63d4ba8d
commit 591fd38088
14 changed files with 651 additions and 290 deletions
Download patch file Download diff file Expand all files Collapse all files

4
public/api/topics/:topic_id/events/index.ts
View file

@ -181,6 +181,10 @@ export async function POST(req: Request, meta: Record<string, any>): Promise<Res
});
}
console.dir({
event
});
await events.create(event);
return Response.json(event, {

3
public/api/users/index.ts
View file

@ -14,6 +14,9 @@ const DEFAULT_USER_PERMISSIONS: string[] = [
'self.read',
'self.write',
'topics.read',
'topics.blurbs.create',
'topics.blurbs.read',
'topics.blurbs.write',
'topics.chat.write',
'topics.chat.read',
'topics.posts.create',

5
public/base.css
View file

@ -217,7 +217,7 @@ input[collapse-toggle] {
label:has(input[collapse-toggle]) {
display: block;
max-width: 8rem;
max-width: fit-content;
cursor: pointer;
border: 1px solid var(--text);
border-radius: var(--border-radius);
@ -307,6 +307,9 @@ body[data-perms*="self.write"] [data-requires-permission="self.write"],
body[data-perms*="topics.create"] [data-requires-permission="topics.create"],
body[data-perms*="topics.read"] [data-requires-permission="topics.read"],
body[data-perms*="topics.write"] [data-requires-permission="topics.write"],
body[data-perms*="topics.blurbs.create"] [data-requires-permission="topics.blurbs.create"],
body[data-perms*="topics.blurbs.read"] [data-requires-permission="topics.blurbs.read"],
body[data-perms*="topics.blurbs.write"] [data-requires-permission="topics.blurbs.write"],
body[data-perms*="topics.chat.create"] [data-requires-permission="topics.chat.create"],
body[data-perms*="topics.chat.read"] [data-requires-permission="topics.chat.read"],
body[data-perms*="topics.chat.write"] [data-requires-permission="topics.chat.write"],

10
public/js/smartforms.js
View file

@ -22,10 +22,6 @@ function smarten_forms() {
const form_data = new FormData(form);
for (const [key, value] of form_data.entries()) {
if (key.length === 0) {
continue;
}
const input = form.querySelector(`[name="${key}"]`);
if (input.type === "file") {
@ -73,6 +69,10 @@ function smarten_forms() {
}
}
if (key.length === 0) {
continue;
}
const generator = input.getAttribute("generator");
const generated_value =
typeof generator === "string" && generator.length
@ -153,7 +153,7 @@ function smarten_forms() {
await on_reply(response_body);
}
const inputs_for_reset = form.querySelectorAll("input[reset-on-submit]");
const inputs_for_reset = form.querySelectorAll("[reset-on-submit]");
for (const input of inputs_for_reset) {
const reset_value = input.getAttribute("reset-on-submit");
input.value = reset_value ?? "";

2
public/tabs/blurbs/README.md
View file

@ -1,3 +1,3 @@
# Blurbs
Blurbs are going to be short (128? 256? character thoughts)
Blurbs are short thoughts - 256 characters max.

307
public/tabs/blurbs/blurbs.html
View file

@ -1,4 +1,139 @@
<div id="blurb" class="tab">
<style>
.blurbs-container {
padding: 1rem;
}
.blurb-container {
position: relative;
display: grid;
grid-template-rows: auto auto auto auto 1fr;
grid-template-columns: auto auto 1fr;
grid-template-areas:
"expander preview info"
"expander preview subject"
". . content"
". . newblurb"
". . replies";
max-height: 6rem;
padding: 1rem;
border: 1px solid var(--border-subtle);
overflow-y: hidden;
transition: all ease-in-out 0.33s;
margin-bottom: 2rem;
}
.blurb-container:has(> div > label > input[name="expanded"]:checked) {
max-height: unset;
}
.expand-toggle-container input[name="expanded"] {
display: none;
visibility: hidden;
opacity: 0;
}
.blurb-container:has(> div > label > input[name="expanded"]) .icon.minus,
.blurb-container:has(> div > label > input[name="expanded"]:checked) .icon.plus {
display: block;
opacity: 1;
visibility: visible;
}
.blurb-container:has(> div > label > input[name="expanded"]) .icon.plus,
.blurb-container:has(> div > label > input[name="expanded"]:checked) .icon.minus {
display: none;
opacity: 0;
visibility: hidden;
}
.blurb-container .expand-toggle-container {
grid-area: expander;
margin-right: 0.5rem;
}
.blurb-container .expand-toggle-container label {
display: flex;
align-items: center;
width: 22px;
height: 22px;
}
.blurb-container .media-preview-container {
grid-area: preview;
width: 6rem;
height: 4rem;
margin-right: 1rem;
}
.blurb-container .media-preview-container img {
max-width: 100%;
max-height: 100%;
}
.blurb-container .info-container {
grid-area: info;
display: flex;
}
.blurb-container .info-container .avatar-container {
display: block;
margin: 0.5rem;
width: 3rem;
height: 3rem;
border-radius: 16%;
overflow: hidden;
}
.blurb-container .info-container .avatar-container img {
width: 100%;
}
.blurb-container .info-container .username-container {
display: block;
margin: 0 0.5rem;
font-weight: bold;
}
.blurb-container .info-container .datetime-container {
display: block;
margin: 0 0.5rem;
}
.blurb-container .info-container .datetime-container .long {
font-size: x-small;
text-transform: uppercase;
visibility: hidden;
display: none;
}
.blurb-container .info-container .datetime-container .short {
font-size: xx-small;
}
.blurb-container .subject-container {
grid-area: subject;
padding-left: 5rem;
margin-top: -2.5rem;
font-size: larger;
font-weight: bold;
}
.blurb-container .content-container {
grid-area: content;
padding-left: 5rem;
margin-top: 2rem;
}
.blurb-container .new-blurb-container {
grid-area: newblurb;
}
.blurb-container .replies-container {
grid-area: replies;
}
</style>
<div id="blurbs" class="tab">
<input
type="radio"
name="top-level-tabs"
@ -6,11 +141,173 @@
class="tab-switch"
data-view="blurb"
/>
<label for="blurb-tab-input" class="tab-label mockup"
<label for="blurb-tab-input" class="tab-label"
><div class="icon blurb"></div>
<div class="label">Blurbs</div></label
>
<div class="tab-content">
<div class="label">Blurbs</div>
</label>
<div class="tab-content blurbs-container">
<!-- #include file="./README.md" -->
<div id="blurbs" class="container">
<div id="blurbs-list"></div>
<script>
const blurbs_list = document.getElementById("blurbs-list");
async function render_blurb(blurb) {
const creator = await USERS.get(blurb.creator_id);
const existing_element =
document.getElementById(blurb.id) ??
document.getElementById(blurb.meta?.temp_id ?? "");
const blurb_datetime = datetime_to_local(blurb.timestamps.created);
const html_content = `<div class="blurb-container" data-creator_id="${creator.id}" data-blurb_id="${blurb.id}">
<div class="expand-toggle-container">
<label>
<input type="checkbox" name="expanded"/><i class="icon plus"></i><i class="icon minus"></i>
</label>
</div>
<div class="media-preview-container">
<img src="/images/placeholders/${String(blurb_datetime.ms % 10).padStart(2, "0")}.svg" />
</div>
<div class="info-container">
<div class="avatar-container">
<img src="${creator.meta?.avatar ?? "/images/default_avatar.gif"}" alt="user avatar" />
</div>
<div class="username-container">
<span class="username">${creator.username}</span>
</div>
<div class="datetime-container">
<span class="long">${blurb_datetime.long}</span>
<span class="short">${blurb_datetime.short}</span>
</div>
</div>
<div class="content-container">${blurb.data.blurb}</div>
<!-- #include file="./new_blurb.html" -->
<div class="replies-container"></div>
</div>`;
if (existing_element) {
const template = document.createElement("template");
template.innerHTML = html_content;
existing_element.replaceWith(template.content.firstChild);
existing_element.classList.remove("sending");
} else {
const target_container =
document.querySelector(
`.blurb-container[data-blurb_id='${blurb.parent_id}'] > .replies-container`,
) ?? blurbs_list;
target_container.insertAdjacentHTML("beforeend", html_content);
}
}
async function append_blurbs(blurbs) {
let last_blurb_id = blurbs_list.dataset.last_blurb_id ?? "";
for await (const blurb of blurbs) {
// if the last blurb is undefined, it becomes this event, otherwise, if this event's id is newer,
// it becomes the latest blurb
last_blurb_id =
blurb.id > last_blurb_id && blurb.id.indexOf("TEMP") !== 0
? blurb.id
: last_blurb_id;
// if the last blurb has been updated, update the content's dataset to reflect that
if (last_blurb_id !== blurbs_list.dataset.last_blurb_id) {
blurbs_list.dataset.last_blurb_id = last_blurb_id;
}
await render_blurb(blurb);
}
const new_blurb_forms = document.querySelectorAll(".blurb-creation-form");
for (const new_blurb_form of new_blurb_forms) {
new_blurb_form.action =
"/api/topics/" + document.body.dataset?.topic + "/events";
}
blurbs_list.scrollTop = 0;
}
// TODO: we need some abortcontroller handling here or something
// similar for when we change topics, this is the most basic
// first pass outline
let blurb_polling_abort_controller = null;
async function poll_for_new_blurbs() {
const blurbs_list = document.getElementById("blurbs-list");
const topic_id = document.body.dataset.topic;
const last_blurb_id = blurbs_list.dataset.last_blurb_id;
if (!topic_id) {
return;
}
const message_polling_url = `/api/topics/${topic_id}/events?type=blurb&limit=100&sort=newest&wait=true${last_blurb_id ? `&after_id=${last_blurb_id}` : ""}`;
blurb_polling_abort_controller =
blurb_polling_abort_controller || new AbortController();
api.fetch(message_polling_url, {
signal: blurb_polling_abort_controller.signal,
})
.then(async (new_events_response) => {
const new_events = (await new_events_response.json()) ?? [];
await append_blurbs(new_events.reverse());
poll_for_new_blurbs(topic_id);
})
.catch((error) => {
// TODO: poll again? back off?
console.error(error);
});
}
async function load_active_topic_for_blurbs() {
const topic_id = document.body.dataset.topic;
if (!topic_id) return;
const user = document.body.dataset.user
? JSON.parse(document.body.dataset.user)
: null;
if (!user) return;
const blurbs_list = document.getElementById("blurbs-list");
if (blurb_polling_abort_controller) {
blurb_polling_abort_controller.abort();
blurb_polling_abort_controller = null;
delete blurbs_list.dataset.last_blurb_id;
}
const topic_response = await api.fetch(`/api/topics/${topic_id}`);
if (!topic_response.ok) {
const error = await topic_response.json();
alert(error.message ?? JSON.stringify(error));
return;
}
const topic = await topic_response.json();
blurbs_list.innerHTML = "";
const events_response = await api.fetch(
`/api/topics/${topic_id}/events?type=blurb&limit=100&sort=newest`,
);
if (!events_response.ok) {
const error = await events_response.json();
alert(error.message ?? JSON.stringify(error));
return;
}
const events = await events_response.json();
await append_blurbs(events.reverse());
poll_for_new_blurbs();
}
document.addEventListener("topic_changed", load_active_topic_for_blurbs);
document.addEventListener("user_logged_in", load_active_topic_for_blurbs);
</script>
</div>
<!-- #include file="./new_blurb.html" -->
</div>
</div>

80
public/tabs/blurbs/new_blurb.html Normal file
View file

@ -0,0 +1,80 @@
<div class="new-blurb-container" data-requires-permission="topics.blurbs.create">
<label>
<input type="checkbox" collapse-toggle />
<i class="icon plus" style="display: inline-block; margin-right: 0.5rem"></i>
<span>New Blurb</span>
</label>
<form
data-smart="true"
method="POST"
class="blurb-creation-form collapsible"
style="
margin-top: 1rem
width: 100%;
transition: all 0.5s;
"
on_reply="async (blurb) => { await append_blurbs([blurb]); }"
on_parsed="async (blurb) => { await render_blurb(blurb); document.getElementById(blurb.id)?.classList.add('sending'); }"
>
<input type="hidden" name="type" value="blurb" />
<input
type="hidden"
name="id"
generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
reset-on-submit
/>
<input
type="hidden"
name="meta.temp_id"
generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
reset-on-submit
/>
<input
type="hidden"
name="creator_id"
generator="() => { return JSON.parse( document.body.dataset.user ?? '{}' ).id; }"
/>
<input
type="hidden"
name="timestamps.created"
generator="(_input, form) => form.__submitted_at.toISOString()"
reset-on-submit
/>
<input
type="hidden"
name="timestamps.updated"
generator="(_input, form) => form.__submitted_at.toISOString()"
reset-on-submit
/>
<input
type="hidden"
name="parent_id"
generator="(_input, form) => { debugger; const parent_blurb = form.closest( '.blurb-container' ); return parent_blurb?.dataset?.blurb_id; }"
/>
<label>
<input
aria-label="Upload and share file"
type="file"
multiple
data-smartforms-save-to-home="true"
name="data.media"
reset-on-submit
/>
<div class="icon attachment"></div>
</label>
<textarea
type="text"
name="data.blurb"
value=""
maxlength="256"
placeholder=" ... "
reset-on-submit
></textarea>
<input type="submit" value="Blurb" />
</form>
</div>

342
public/tabs/chat/chat.html
View file

@ -1,3 +1,176 @@
<script>
const time_tick_tock_timeout = 60 * 1000; // 1 minute
let last_event_datetime_value = 0;
let time_tick_tock_class = "time-tock";
let last_creator_id = null;
let user_tick_tock_class = "user-tock";
async function render_chat_event(event) {
const creator = await USERS.get(event.creator_id);
const existing_element =
document.getElementById(event.id) ??
(event.meta?.temp_id ? document.getElementById(event.meta?.temp_id ?? "") : undefined);
const event_datetime = datetime_to_local(event.timestamps.created);
if (event_datetime.value - last_event_datetime_value > time_tick_tock_timeout) {
time_tick_tock_class = time_tick_tock_class === "time-tick" ? "time-tock" : "time-tick";
}
last_event_datetime_value = event_datetime.value;
if (last_creator_id !== creator.id) {
user_tick_tock_class = user_tick_tock_class === "user-tick" ? "user-tock" : "user-tick";
last_creator_id = creator.id;
}
const html_content = `<div id="${event.id}" class="message-container ${user_tick_tock_class} ${time_tick_tock_class}" data-creator_id="${creator.id}">
<div class="message-actions-container">
<input
type="checkbox"
id="show_message_actions-${event.id}"
class="message-actions-display-toggle"
/>
<label class="message-actions-display-toggle-label" for="show_message_actions-${event.id}">
<div class="icon more-borderless"></div>
</label>
<button class="message-action mockup" data-action="react"><i class="icon circle"></i><span class="action-name">React</span></button>
<button class="message-action" data-action="reply" onclick="document.getElementById( 'parent-id' ).value = '${event.id}';"><i class="icon reply"></i><span class="action-name">Reply</span></button>
<button class="message-action mockup" data-action="forward_copy"><i class="icon forward-copy"></i><span class="action-name">Copy Link</span></button>
<button class="message-action mockup" data-action="delete"><i class="icon trash"></i><span class="action-name">Delete</span></button>
</div>
<div class="info-container">
<div class="avatar-container">
<img src="${creator.meta?.avatar ?? "/images/default_avatar.gif"}" alt="user avatar" />
</div>
<div class="username-container">
<span class="username">${creator.username ?? "unknown"}</span>
</div>
<div class="datetime-container">
<span class="long">${event_datetime.long}</span>
<span class="short">${event_datetime.short}</span>
</div>
</div>
<div class="message-content-container">${htmlify(event.data.content)}</div>
<div class="message-media-container">${htmlify(event.data.media?.join("\n") ?? "")}</div>
</div>`;
if (existing_element) {
const template = document.createElement("template");
template.innerHTML = html_content;
existing_element.replaceWith(template.content.firstChild);
} else {
// TODO: threading
document
.getElementById("topic-chat-content")
?.insertAdjacentHTML("beforeend", html_content);
}
}
async function append_chat_events(events) {
const topic_chat_content = document.getElementById("topic-chat-content");
let last_message_id = topic_chat_content.dataset.last_message_id ?? "";
for await (const event of events) {
// if the last message is undefined, it becomes this event, otherwise, if this event's id is newer,
// it becomes the latest message
last_message_id =
event.id > last_message_id && event.id.indexOf("TEMP") !== 0
? event.id
: last_message_id;
// if the last message has been updated, update the content's dataset to reflect that
if (last_message_id !== topic_chat_content.dataset.last_message_id) {
topic_chat_content.dataset.last_message_id = last_message_id;
}
await render_chat_event(event);
}
setTimeout(() => {
topic_chat_content.scrollTop = topic_chat_content.scrollHeight;
console.dir({
scrollHeight: topic_chat_content.scrollHeight,
scrollTop: topic_chat_content.scrollTop,
});
}, 50);
}
// TODO: we need some abortcontroller handling here or something
// similar for when we change topics, this is the most basic
// first pass outline
let topic_polling_request_abort_controller = null;
async function poll_for_new_chat_events() {
const topic_chat_content = document.getElementById("topic-chat-content");
const topic_id = document.body.dataset.topic;
const last_message_id = topic_chat_content.dataset.last_message_id;
if (!topic_id) {
return;
}
const message_polling_url = `/api/topics/${topic_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
topic_polling_request_abort_controller =
topic_polling_request_abort_controller || new AbortController();
api.fetch(message_polling_url, {
signal: topic_polling_request_abort_controller.signal,
})
.then(async (new_events_response) => {
const new_events = ((await new_events_response.json()) ?? []).reverse();
await append_chat_events(new_events);
poll_for_new_chat_events(topic_id);
})
.catch((error) => {
// TODO: poll again? back off?
console.error(error);
});
}
async function load_active_topic_for_chat() {
const topic_id = document.body.dataset.topic;
if (!topic_id) return;
const user = document.body.dataset.user ? JSON.parse(document.body.dataset.user) : null;
if (!user) return;
const topic_chat_content = document.getElementById("topic-chat-content");
if (topic_polling_request_abort_controller) {
topic_polling_request_abort_controller.abort();
topic_polling_request_abort_controller = null;
delete topic_chat_content.dataset.last_message_id;
}
const topic_response = await api.fetch(`/api/topics/${topic_id}`);
if (!topic_response.ok) {
const error = await topic_response.json();
alert(error.message ?? JSON.stringify(error));
return;
}
const topic = await topic_response.json();
topic_chat_content.innerHTML = "";
const events_response = await api.fetch(
`/api/topics/${topic_id}/events?type=chat&limit=100&sort=newest`,
);
if (!events_response.ok) {
const error = await events_response.json();
alert(error.message ?? JSON.stringify(error));
return;
}
const events = (await events_response.json()).reverse();
await append_chat_events(events);
poll_for_new_chat_events();
}
document.addEventListener("topic_changed", load_active_topic_for_chat);
document.addEventListener("user_logged_in", load_active_topic_for_chat);
</script>
<div id="chat" class="tab">
<input
type="radio"
@ -16,43 +189,88 @@
</style>
<script src="/js/external/mimetypes.js" type="text/javascript"></script>
<script src="/js/external/punycode.js" type="text/javascript"></script>
<script src="/tabs/chat/chat.js" type="text/javascript"></script>
<div id="topic-chat-container">
<div id="topic-chat-content"></div>
<div id="topic-chat-entry-container">
<form id="topic-chat-entry" action="" data-smart="true" data-method="POST">
<input id="parent-id" type="hidden" name="parent_id" value="" />
<form
id="topic-chat-entry"
data-smart="true"
data-requires-permission="topics.posts.create"
method="POST"
class="post-creation-form collapsible"
style="
margin-top: 1rem
width: 100%;
transition: all 0.5s;
"
on_reply="async (event) => { await append_chat_events([event]); document.getElementById( 'chat-input' )?.focus(); }"
on_parsed="async (event) => { await render_chat_event(event); document.getElementById(event.id)?.classList.add('sending'); }"
>
<input type="hidden" name="type" value="chat" />
<input
id="file-upload-and-share-input"
aria-label="Upload and share file"
type="file"
multiple
type="hidden"
name="id"
generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
reset-on-submit
/>
<label for="file-upload-and-share-input">
<input
type="hidden"
name="meta.temp_id"
generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
reset-on-submit
/>
<input
type="hidden"
name="creator_id"
generator="() => { return JSON.parse( document.body.dataset.user ?? '{}' ).id; }"
/>
<input
type="hidden"
name="timestamps.created"
generator="(_input, form) => form.__submitted_at.toISOString()"
reset-on-submit
/>
<input
type="hidden"
name="timestamps.updated"
generator="(_input, form) => form.__submitted_at.toISOString()"
reset-on-submit
/>
<input type="hidden" name="parent_id" reset-on-submit />
<label>
<input
aria-label="Upload and share file"
type="file"
multiple
data-smartforms-save-to-home="true"
name="data.media"
reset-on-submit
/>
<div class="icon attachment"></div>
</label>
<textarea
id="topic-chat-input"
class="topic-chat-input"
rows="1"
name="data.content"
reset-on-submit
></textarea>
<button id="topic-chat-send" class="primary" aria-label="Send a message">
<i class="icon send"></i>
</button>
<script>
{
const form = document.currentScript.closest("form");
const file_input = form.querySelector('input[type="file"]');
const chat_input = form.querySelector('textarea[name="data.content"]');
const parent_id_input = form.querySelector('input[name="parent_id"]');
const topic_chat_container =
document.getElementById("topic-chat-container");
const topic_chat_content =
document.getElementById("topic-chat-content");
let messages_in_flight = {};
document.addEventListener(
"topic_changed",
@ -66,96 +284,6 @@
form.requestSubmit();
}
});
form.on_submit = async (event) => {
const user = JSON.parse(document.body.dataset.user);
const topic_id = document.body.dataset.topic;
if (!topic_id) {
alert("Failed to get topic_id!");
return false;
}
form.uploaded_urls = [];
form.errors = [];
for await (const file of file_input.files) {
const body = new FormData();
body.append("file", file, encodeURIComponent(file.name));
const file_path = `/files/users/${user.id}/${encodeURIComponent(file.name)}`;
const file_upload_response = await api.fetch(file_path, {
method: "PUT",
body,
});
if (!file_upload_response.ok) {
const error = await file_upload_response.json();
form.errors.push(error?.error?.message ?? "Unknown error.");
continue;
}
const file_url = `${window.location.protocol}//${window.location.host}${file_path}`;
form.uploaded_urls.push(file_url);
}
if (form.errors.length) {
const errors = form.errors.join("\n\n");
alert(errors);
return false;
}
const message = chat_input.value.trim();
if (form.uploaded_urls.length === 0 && message.length === 0) {
return false;
}
};
form.on_parsed = (json) => {
const now = new Date().toISOString();
const temp_id = `TEMP-${now}`;
json.id = temp_id;
json.type = "chat";
json.meta = {
temp_id,
};
json.timestamps = {
created: now,
updated: now,
};
if (form.uploaded_urls.length) {
json.data = json.data ?? {};
json.data.content =
(typeof json.data.content === "string" &&
json.data.content.trim().length
? json.data.content.trim() + "\n"
: "") + form.uploaded_urls.join("\n");
}
const user = JSON.parse(document.body.dataset.user);
render_text_event(topic_chat_content, json, user);
document
.getElementById(`chat-${temp_id}`)
?.classList.add("sending");
};
form.on_error = (error) => {
// TODO: mark the temporary message element with the failed class?
alert(error);
chat_input.focus();
};
form.on_reply = (sent_message) => {
document
.getElementById(`chat-${sent_message.meta?.temp_id ?? ""}`)
?.classList.remove("sending");
append_topic_events([sent_message]);
parent_id_input.value = "";
chat_input.value = "";
chat_input.focus();
};
}
</script>
</form>

163
public/tabs/chat/chat.js
View file

@ -1,163 +0,0 @@
const time_tick_tock_timeout = 60 * 1000; // 1 minute
let last_event_datetime_value = 0;
let time_tick_tock_class = "time-tock";
let last_creator_id = null;
let user_tick_tock_class = "user-tock";
function render_chat_message(topic_chat_content, event, creator, existing_element) {
const event_datetime = datetime_to_local(event.timestamps.created);
if (event_datetime.value - last_event_datetime_value > time_tick_tock_timeout) {
time_tick_tock_class = time_tick_tock_class === "time-tick" ? "time-tock" : "time-tick";
}
last_event_datetime_value = event_datetime.value;
if (last_creator_id !== creator.id) {
user_tick_tock_class = user_tick_tock_class === "user-tick" ? "user-tock" : "user-tick";
last_creator_id = creator.id;
}
const message_id = event.id.substring(0, 49);
const html_content = `<div id="chat-${message_id}" class="message-container ${user_tick_tock_class} ${time_tick_tock_class}" data-creator_id="${creator.id}">
<div class="message-actions-container">
<input
type="checkbox"
id="show_message_actions-${message_id}"
class="message-actions-display-toggle"
/>
<label class="message-actions-display-toggle-label" for="show_message_actions-${message_id}">
<div class="icon more-borderless"></div>
</label>
<button class="message-action mockup" data-action="react"><i class="icon circle"></i><span class="action-name">React</span></button>
<button class="message-action" data-action="reply" onclick="document.getElementById( 'parent-id' ).value = '${message_id}';"><i class="icon reply"></i><span class="action-name">Reply</span></button>
<button class="message-action mockup" data-action="forward_copy"><i class="icon forward-copy"></i><span class="action-name">Copy Link</span></button>
<button class="message-action mockup" data-action="delete"><i class="icon trash"></i><span class="action-name">Delete</span></button>
</div>
<div class="info-container">
<div class="avatar-container">
<img src="${creator.meta?.avatar ?? "/images/default_avatar.gif"}" alt="user avatar" />
</div>
<div class="username-container">
<span class="username">${creator.username ?? "unknown"}</span>
</div>
<div class="datetime-container">
<span class="long">${event_datetime.long}</span>
<span class="short">${event_datetime.short}</span>
</div>
</div>
<div class="message-content-container">${htmlify(event.data.content)}</div>
</div>`;
if (existing_element) {
const template = document.createElement("template");
template.innerHTML = html_content;
existing_element.replaceWith(template.content.firstChild);
} else {
topic_chat_content.insertAdjacentHTML("beforeend", html_content);
}
}
async function append_chat_events(events) {
const topic_chat_content = document.getElementById("topic-chat-content");
let last_message_id = topic_chat_content.dataset.last_message_id ?? "";
for (const event of events) {
// if the last message is undefined, it becomes this event, otherwise, if this event's id is newer,
// it becomes the latest message
last_message_id =
event.id > last_message_id && event.id.indexOf("TEMP") !== 0
? event.id
: last_message_id;
// if the last message has been updated, update the content's dataset to reflect that
if (last_message_id !== topic_chat_content.dataset.last_message_id) {
topic_chat_content.dataset.last_message_id = last_message_id;
}
const creator = await USERS.get(event.creator_id);
const existing_element =
document.getElementById(`chat-${event.id.substring(0, 49)}`) ??
(event.meta?.temp_id
? document.getElementById(`chat-${event.meta.temp_id}`)
: undefined);
render_chat_message(topic_chat_content, event, creator, existing_element);
}
topic_chat_content.scrollTop = topic_chat_content.scrollHeight;
}
// TODO: we need some abortcontroller handling here or something
// similar for when we change topics, this is the most basic
// first pass outline
let topic_polling_request_abort_controller = null;
async function poll_for_new_chat_events() {
const topic_chat_content = document.getElementById("topic-chat-content");
const topic_id = document.body.dataset.topic;
const last_message_id = topic_chat_content.dataset.last_message_id;
if (!topic_id) {
return;
}
const message_polling_url = `/api/topics/${topic_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
topic_polling_request_abort_controller =
topic_polling_request_abort_controller || new AbortController();
api.fetch(message_polling_url, {
signal: topic_polling_request_abort_controller.signal,
})
.then(async (new_events_response) => {
const new_events = ((await new_events_response.json()) ?? []).reverse();
await append_chat_events(new_events.toReversed());
poll_for_new_chat_events(topic_id);
})
.catch((error) => {
// TODO: poll again? back off?
console.error(error);
});
}
async function load_active_topic_for_chat() {
const topic_id = document.body.dataset.topic;
if (!topic_id) return;
const user = document.body.dataset.user ? JSON.parse(document.body.dataset.user) : null;
if (!user) return;
const topic_chat_content = document.getElementById("topic-chat-content");
if (topic_polling_request_abort_controller) {
topic_polling_request_abort_controller.abort();
topic_polling_request_abort_controller = null;
delete topic_chat_content.dataset.last_message_id;
}
const topic_response = await api.fetch(`/api/topics/${topic_id}`);
if (!topic_response.ok) {
const error = await topic_response.json();
alert(error.message ?? JSON.stringify(error));
return;
}
const topic = await topic_response.json();
topic_chat_content.innerHTML = "";
const events_response = await api.fetch(
`/api/topics/${topic_id}/events?type=chat&limit=100&sort=newest`,
);
if (!events_response.ok) {
const error = await events_response.json();
alert(error.message ?? JSON.stringify(error));
return;
}
const events = (await events_response.json()).reverse();
await append_chat_events(events);
poll_for_new_chat_events();
}
document.addEventListener("topic_changed", load_active_topic_for_chat);
document.addEventListener("user_logged_in", load_active_topic_for_chat);

2
public/tabs/forum/README.md
View file

@ -1,3 +1,3 @@
# Forum
Forums are for more thoughtful and long form discussion.
This is the place for thoughtful and long form discussion.

2
public/tabs/forum/forum.html
View file

@ -146,6 +146,8 @@
<div class="label">Forum</div></label
>
<div class="tab-content forum-container">
<!-- #include file="./README.md" -->
<div id="forum-posts" class="container">
<div id="forum-posts-list"></div>
<script>

11
public/tabs/forum/new_post.html
View file

@ -14,8 +14,8 @@
width: 100%;
transition: all 0.5s;
"
on_reply="(post) => { append_posts([post]); }"
on_parsed="(post) => { render_post(post); document.getElementById('post-' + post.id)?.classList.add('sending'); }"
on_reply="async (post) => { await append_posts([post]); }"
on_parsed="async (post) => { await render_post(post); document.getElementById('post-' + post.id)?.classList.add('sending'); }"
>
<input type="hidden" name="type" value="post" />
@ -32,6 +32,12 @@
reset-on-submit
/>
<input
type="hidden"
name="creator_id"
generator="() => { return JSON.parse( document.body.dataset.user ?? '{}' ).id; }"
/>
<input
type="hidden"
name="timestamps.created"
@ -66,6 +72,7 @@
type="file"
multiple
data-smartforms-save-to-home="true"
name="data.media"
reset-on-submit
/>
<div class="icon attachment"></div>