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

fix: make sure chat entry is working correctly through some cleanup

Browse source
This commit is contained in:
Andy Burke 2025-10-09 12:50:23 -07:00
parent ac64473749
commit 46090d944a
2 changed files with 56 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

28
public/tabs/chat/chat.css
View file

@ -1,10 +1,10 @@
#chat #topic-chat-container { #chat #chat-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#chat #topic-chat-content { #chat #chat-content {
overflow-y: scroll; overflow-y: scroll;
position: absolute; position: absolute;
top: 0; top: 0;
@ -14,12 +14,12 @@
padding: 1.5rem 1.5rem 0.75rem 1.5rem; padding: 1.5rem 1.5rem 0.75rem 1.5rem;
} }
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
#chat #topic-chat-content { #chat #chat-content {
padding: 0.75rem; padding: 0.75rem;
} }
} }
#chat #topic-chat-entry-container { #chat #chat-entry-container {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -28,7 +28,7 @@
padding: 1rem; padding: 1rem;
} }
#chat #topic-chat-entry-container form { #chat #chat-entry-container form {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -39,13 +39,13 @@
padding: 0.75rem; padding: 0.75rem;
} }
#chat #topic-chat-entry-container form input[type="file"] { #chat #chat-entry-container form input[type="file"] {
opacity: 0; opacity: 0;
display: none; display: none;
} }
#chat #topic-chat-entry-container form button, #chat #chat-entry-container form button,
#chat #topic-chat-entry-container form label { #chat #chat-entry-container form label {
position: relative; position: relative;
top: inherit; top: inherit;
font-size: inherit; font-size: inherit;
@ -59,7 +59,7 @@
border: 1px solid rgba(128, 128, 128, 0.2); border: 1px solid rgba(128, 128, 128, 0.2);
} }
#chat #topic-chat-entry-container form textarea { #chat #chat-entry-container form textarea {
flex-grow: 1; flex-grow: 1;
resize: none; resize: none;
} }
@ -284,7 +284,7 @@
} }
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
#chat #topic-chat-container { #chat #chat-container {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -292,13 +292,13 @@
bottom: 0; bottom: 0;
} }
#chat #topic-chat-container #topic-chat-entry-container, #chat #chat-container #chat-entry-container,
#chat #topic-chat-container #topic-chat-entry-container form { #chat #chat-container #chat-entry-container form {
padding: 0.25rem; padding: 0.25rem;
} }
#chat #topic-chat-container #topic-chat-entry-container form button, #chat #chat-container #chat-entry-container form button,
#chat #topic-chat-container #topic-chat-entry-container form label { #chat #chat-container #chat-entry-container form label {
margin: 0 0.5rem; margin: 0 0.5rem;
} }

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

@ -63,14 +63,18 @@
existing_element.replaceWith(template.content.firstChild); existing_element.replaceWith(template.content.firstChild);
} else { } else {
// TODO: threading // TODO: threading
document document.getElementById("chat-content")?.insertAdjacentHTML(position, html_content);
.getElementById("topic-chat-content")
?.insertAdjacentHTML(position, html_content);
} }
} }
async function handle_chat_events(events) { async function handle_chat_events(events) {
const topic_chat_content = document.getElementById("topic-chat-content"); if (!Array.isArray(events)) {
debugger;
console.warn("got unexpected value for handle_chat_events `events` argument.");
return;
}
const topic_chat_content = document.getElementById("chat-content");
const sorted = events.sort((lhs, rhs) => lhs.id.localeCompare(rhs.id)); const sorted = events.sort((lhs, rhs) => lhs.id.localeCompare(rhs.id));
for await (const event of sorted) { for await (const event of sorted) {
@ -98,7 +102,7 @@
// first pass outline // first pass outline
let topic_polling_request_abort_controller = null; let topic_polling_request_abort_controller = null;
async function poll_for_new_chat_events() { async function poll_for_new_chat_events() {
const topic_chat_content = document.getElementById("topic-chat-content"); const topic_chat_content = document.getElementById("chat-content");
const topic_id = document.body.dataset.topic; const topic_id = document.body.dataset.topic;
const last_message_id = topic_chat_content.dataset.last_message_id; const last_message_id = topic_chat_content.dataset.last_message_id;
@ -129,7 +133,7 @@
const topic_id = event?.detail?.topic_id ?? document.body.dataset.topic; const topic_id = event?.detail?.topic_id ?? document.body.dataset.topic;
if (!topic_id) return; if (!topic_id) return;
const topic_chat_content = document.getElementById("topic-chat-content"); const topic_chat_content = document.getElementById("chat-content");
topic_chat_content.innerHTML = ""; topic_chat_content.innerHTML = "";
const user = document.body.dataset.user ? JSON.parse(document.body.dataset.user) : null; const user = document.body.dataset.user ? JSON.parse(document.body.dataset.user) : null;
@ -185,13 +189,13 @@
<script src="/js/external/mimetypes.js" type="text/javascript"></script> <script src="/js/external/mimetypes.js" type="text/javascript"></script>
<script src="/js/external/punycode.js" type="text/javascript"></script> <script src="/js/external/punycode.js" type="text/javascript"></script>
<div id="topic-chat-container"> <div id="chat-container">
<div id="topic-chat-content"></div> <div id="chat-content"></div>
<div id="topic-chat-entry-container"> <div id="chat-entry-container">
<form <form
id="topic-chat-entry" id="chat-entry"
data-smart="true" data-smart="true"
data-requires-permission="topics.posts.create" data-requires-permission="topics.chat.write"
method="POST" method="POST"
class="post-creation-form collapsible" class="post-creation-form collapsible"
style=" style="
@ -199,9 +203,32 @@
width: 100%; width: 100%;
transition: all 0.5s; transition: all 0.5s;
" "
on_reply="async (event) => { await render_chat_event(event); document.getElementById(event.id)?.classList.remove('sending'); document.getElementById( 'chat-input' )?.focus(); }" on_reply="async (event) => { await render_chat_event(event); document.getElementById(event.id)?.classList.remove('sending'); document.getElementById( 'chat-input' ).value = ''; document.getElementById( 'chat-input' ).focus(); }"
on_parsed="async (event) => { await render_chat_event(event); document.getElementById(event.id)?.classList.add('sending'); }" on_parsed="async (event) => { await render_chat_event(event); document.getElementById(event.id)?.classList.add('sending'); }"
> >
<script>
{
const form = document.currentScript.closest("form");
document.addEventListener("DOMContentLoaded", () => {
const chat_input = form.querySelector(
'textarea[name="data.content"]',
);
chat_input.addEventListener("keypress", (event) => {
if (event.key === "Enter" && !event.shiftKey) {
form.requestSubmit();
}
});
});
document.addEventListener(
"topic_changed",
({ detail: { topic_id } }) => {
form.action = topic_id ? `/api/topics/${topic_id}/events` : "";
},
);
}
</script>
<input type="hidden" name="type" value="chat" /> <input type="hidden" name="type" value="chat" />
<input <input
@ -251,36 +278,16 @@
</label> </label>
<textarea <textarea
id="topic-chat-input" id="chat-input"
class="topic-chat-input" class="chat-input"
rows="1" rows="1"
name="data.content" name="data.content"
reset-on-submit reset-on-submit
></textarea> ></textarea>
<button id="topic-chat-send" class="primary" aria-label="Send a message"> <button id="chat-send" class="primary" aria-label="Send a message">
<i class="icon send"></i> <i class="icon send"></i>
</button> </button>
<script>
{
const form = document.currentScript.closest("form");
const chat_input = form.querySelector('textarea[name="data.content"]');
document.addEventListener(
"topic_changed",
({ detail: { topic_id } }) => {
form.action = topic_id ? `/api/topics/${topic_id}/events` : "";
},
);
chat_input.addEventListener("keypress", (event) => {
if (event.key === "Enter" && !event.shiftKey) {
form.requestSubmit();
}
});
}
</script>
</form> </form>
</div> </div>
</div> </div>