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

refactor: talk => chat

Browse source
This commit is contained in:
Andy Burke 2025-09-05 11:03:53 -07:00
parent b6b4fefa34
commit 525568d368
8 changed files with 1675 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

226
public/tabs/chat/chat.html Normal file
View file

@ -0,0 +1,226 @@
<div id="chat" class="tab">
<input
type="radio"
name="top-level-tabs"
id="chat-tab-input"
class="tab-switch"
data-hash="/chat"
/>
<label for="chat-tab-input" class="tab-label"
><div class="icon chat"></div>
<div class="label">Chat</div>
</label>
<div class="tab-content">
<style>
<!-- #include file="./chat.css" -->
</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 class="sidebar resizable">
<input type="checkbox" id="sidebar-toggle" />
<label id="sidebar-toggle-icon" for="sidebar-toggle">
<div class="icon right"></div>
</label>
<div id="room-creation-container" data-requires-permission="rooms.create">
<button
id="toggle-room-creation-form-button"
onclick="((event) => {
event.preventDefault();
const room_create_form = document.getElementById( 'room-create' );
room_create_form.style[ 'height' ] = room_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
})(event)"
>
<div class="icon plus"></div>
</button>
<form
id="room-create"
data-smart="true"
action="/api/rooms"
method="POST"
style="
margin-top: 1rem;
width: 100%;
overflow: hidden;
height: 0;
overflow: hidden;
transition: all 0.5s;
"
>
<input
id="new-room-name-input"
type="text"
name="name"
value=""
placeholder="new room"
/>
<!-- <button class="primary" type="submit">
<div class="icon plus"></div>
</button> -->
<input type="submit" hidden />
<script>
{
const form = document.currentScript.closest("form");
const room_create_form = document.getElementById("room-create");
const new_room_name_input =
document.getElementById("new-room-name-input");
form.on_reply = (new_room) => {
const room_list = document.getElementById("room-list");
room_list.insertAdjacentHTML(
"beforeend",
`<li id="room-selector-${new_room.id}" class="room"><a href="#/room/${new_room.id}">${new_room.name}</a></li>`,
);
new_room_name_input.value = "";
window.location.hash = `/chat/room/${new_room.id}`;
room_create_form.style["height"] = "0";
};
}
</script>
</form>
</div>
<div>
<span class="title">chat rooms</span>
</div>
<ul id="room-list" class="room-list"></ul>
</div>
<div id="room-chat-container">
<div id="room-chat-content"></div>
<div id="room-chat-entry-container">
<form id="room-chat-entry" action="" data-smart="true" data-method="POST">
<input
id="file-upload-and-share-input"
aria-label="Upload and share file"
type="file"
name="file-upload-and-share"
multiple
/>
<label for="file-upload-and-share-input">
<div class="icon attachment"></div>
</label>
<textarea
id="room-chat-input"
class="room-chat-input"
rows="1"
name="data.message"
></textarea>
<button id="room-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 = document.querySelector(
'input[name="file-upload-and-share"]',
);
const chat_input = document.getElementById("room-chat-input");
const room_chat_container =
document.getElementById("room-chat-container");
const room_chat_content = document.getElementById("room-chat-content");
let messages_in_flight = {};
chat_input.addEventListener("keypress", (event) => {
if (event.key === "Enter" && !event.shiftKey) {
form.requestSubmit();
}
});
form.on_submit = async (event) => {
const user = JSON.parse(document.body.dataset.user);
const room_id = room_chat_container.dataset.room_id;
if (!room_id) {
alert("Failed to get room_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.action = `/api/rooms/${room_id}/events`;
};
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.message =
(typeof json.data.message === "string" &&
json.data.message.trim().length
? json.data.message.trim() + "\n"
: "") + form.uploaded_urls.join("\n");
}
const user = JSON.parse(document.body.dataset.user);
render_text_event(room_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_room_events([sent_message]);
chat_input.value = "";
chat_input.focus();
};
}
</script>
</form>
</div>
</div>
</div>
</div>