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

feature: the beginnings of chat working

Browse source
This commit is contained in:
Andy Burke 2025-07-01 15:37:35 -07:00
parent 85024c6e62
commit 649ff432bb
24 changed files with 1555 additions and 918 deletions
Download patch file Download diff file Expand all files Collapse all files

14
public/tabs/calendar.html Normal file
View file

@ -0,0 +1,14 @@
<div id="calendar" class="tab">
<input
type="radio"
name="top-level-tabs"
id="calendar-tab-input"
class="tab-switch"
data-hash="/calendar"
/>
<label for="calendar-tab-input" class="tab-label"
><div class="icon calendar"></div>
<div class="label">Calendar</div></label
>
<div class="tab-content">This is the calendar tab.</div>
</div>

14
public/tabs/exchange.html Normal file
View file

@ -0,0 +1,14 @@
<div id="exchange" class="tab">
<input
type="radio"
name="top-level-tabs"
id="exchange-tab-input"
class="tab-switch"
data-hash="/exchange"
/>
<label for="exchange-tab-input" class="tab-label"
><div class="icon exchange"></div>
<div class="label">Exchange</div></label
>
<div class="tab-content">This is the exchange tab.</div>
</div>

15
public/tabs/home.html Normal file
View file

@ -0,0 +1,15 @@
<div id="home" class="tab">
<input
type="radio"
name="top-level-tabs"
id="home-tab-input"
checked="checked"
class="tab-switch"
data-hash="/"
/>
<label for="home-tab-input" class="tab-label">
<div class="icon home"></div>
<div class="label">Home</div>
</label>
<div class="tab-content">This is the home tab.</div>
</div>

14
public/tabs/resources.html Normal file
View file

@ -0,0 +1,14 @@
<div id="resources" class="tab">
<input
type="radio"
name="top-level-tabs"
id="resources-tab-input"
class="tab-switch"
data-hash="/resources"
/>
<label for="resources-tab-input" class="tab-label"
><div class="icon resources"></div>
<div class="label">Resources</div></label
>
<div class="tab-content">This is the resources tab.</div>
</div>

131
public/tabs/tabs.html Normal file
View file

@ -0,0 +1,131 @@
<script>
window.addEventListener("locationchange", () => {
const hash = window.location.hash?.slice(1);
if (hash) {
const target_tab = document.querySelector(`[data-hash="${hash}"]`);
if (target_tab) {
target_tab.click();
}
}
});
document.addEventListener("DOMContentLoaded", () => {
const tab_switchers = document.querySelectorAll(".tab-switch");
for (const tab_switch of tab_switchers) {
tab_switch.addEventListener("input", (event) => {
const tab_selector = event.target;
const hash = tab_selector.dataset.hash;
if (hash) {
window.location.hash = hash;
}
});
}
});
</script>
<style>
.tabs-container {
position: relative;
height: 100%;
}
.tabs {
position: relative;
height: 100%;
width: 100%;
}
.tabs::before,
.tabs::after {
content: "";
display: table;
}
.tabs::after {
clear: both;
}
.tab {
float: left;
}
.tab-switch {
display: none;
}
.tab-label {
position: relative;
width: 8rem;
height: 5rem;
cursor: pointer;
transition: all 0.25s;
display: flex;
align-items: center;
justify-content: end;
flex-direction: column;
}
.tab-label .label {
margin: 0.75rem 0;
}
.tab-content {
position: absolute;
z-index: 1;
top: 5rem;
left: 0;
right: 0;
bottom: 0;
padding: 1rem 1rem 0 1rem;
opacity: 0;
transition: all 0.35s;
border-top: 1px solid var(--border-subtle);
margin-top: 1px;
}
.tab-switch,
.tab-switch + .tab-label {
transition: none;
}
.tab-switch:checked + .tab-label {
margin-top: 1px;
border-bottom: 1px solid var(--border-highlight);
z-index: 1;
}
.tab-switch:checked + label + .tab-content {
z-index: 2;
opacity: 1;
}
@media screen and (max-width: 800px) {
.tab-label {
width: 4rem;
}
.tab-label .label {
font-size: small;
}
}
@media screen and (max-width: 480px) {
.tab-label {
width: 2.75rem;
}
.tab-label .label {
font-size: x-small;
}
}
</style>
<div class="tabs">
<!-- #include file="./home.html" -->
<!-- #include file="./talk.html" -->
<!-- #include file="./exchange.html" -->
<!-- #include file="./work.html" -->
<!-- #include file="./resources.html" -->
<!-- #include file="./calendar.html" -->
<!-- #include file="./user.html" -->
</div>

381
public/tabs/talk.html Normal file
View file

@ -0,0 +1,381 @@
<div id="talk" class="tab">
<input
type="radio"
name="top-level-tabs"
id="talk-tab-input"
class="tab-switch"
data-hash="/talk"
/>
<label for="talk-tab-input" class="tab-label"
><div class="icon talk"></div>
<div class="label">Talk</div>
</label>
<div class="tab-content">
<style>
#talk .tab-content {
display: grid;
grid-template-columns: auto 1fr;
}
#talk .sidebar {
position: relative;
min-width: 100px;
padding-top: 1.5rem;
}
#talk .room {
padding: 1rem;
}
#talk #room-create {
position: absolute;
top: 1rem;
right: 0.5rem;
}
#talk .room-selector a {
display: block;
width: 100%;
text-decoration: none;
line-height: 1.5rem;
}
#talk #room-chat-container {
position: relative;
}
#talk #room-chat-content {
padding-bottom: 5rem;
}
#talk #room-chat-entry-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 5rem;
padding: 1rem;
}
#talk #room-chat-entry-container form {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: row;
padding: 0.75rem;
}
#talk #room-chat-entry-container form button {
width: inherit;
padding: inherit;
}
#talk #room-chat-entry-container form textarea {
flex-grow: 1;
background: inherit;
color: inherit;
}
#talk .message-container {
display: flex;
flex-direction: row;
transition: all 0.33s;
}
#talk .message-container.sending {
opacity: 0.75;
}
#talk .message-container .info-container {
width: 8rem;
}
#talk .message-container .info-container .avatar-container {
display: block;
margin: 0 auto;
width: 3rem;
height: 3rem;
border-radius: 16%;
overflow: hidden;
}
#talk .message-container .info-container .avatar-container img {
width: 100%;
}
#talk .message-container .info-container .datetime-container,
#talk .message-container .info-container .username-container {
text-align: center;
}
#talk .message-container .info-container .datetime-container .long {
visibility: hidden;
display: none;
}
#talk .message-container .info-container .datetime-container .short {
font-weight: bold;
font-size: x-small;
}
</style>
<div class="sidebar resizable">
<div id="room-create" class="clickable" data-requires-permission="rooms.create">
<div class="icon plus"></div>
<script>
async function get_new_room_element() {
const existing_new_room_element = document.getElementById("new-room");
if (existing_new_room_element) {
return existing_new_room_element;
}
const room_list = document.getElementById("room-list");
room_list.insertAdjacentHTML(
"beforeend",
`<li id="new-room" class="room-selector" contenteditable="true">New Room</li>`,
);
await new Promise((resolve) => setTimeout(resolve, 1));
const new_room_element = document.getElementById("new-room");
return new_room_element;
}
async function load_room(room_id) {
const room_response = await api.fetch(`/rooms/${room_id}`);
if (!room_response.ok) {
const error = await room_response.json();
alert(error.message ?? JSON.stringify(error));
return;
}
const room = await room_response.json();
const events_response = await api.fetch(`/rooms/${room_id}/events`);
if (!events_response.ok) {
const error = await room_response.json();
alert(error.message ?? JSON.stringify(error));
return;
}
}
// TODO: one place to handle switching rooms
// TODO: load events when we switch rooms and clear and update the chat
// TODO: try to select immediate siblings from the same user and hide avatars
window.addEventListener("locationchange", function () {
const hash = window.location.hash;
const room_id =
hash.indexOf("#/talk/room/") === 0 ? hash.substring(12) : "";
const room_chat_container = document.getElementById("room-chat-container");
room_chat_container.dataset.room_id = room_id;
});
document.addEventListener("DOMContentLoaded", async () => {
const rooms_response = await api.fetch("/rooms");
if (rooms_response.ok) {
const room_list = document.getElementById("room-list");
room_list.innerHTML = "";
const rooms = await rooms_response.json();
for (const room of rooms) {
room_list.insertAdjacentHTML(
"beforeend",
`<li id="room-${room.id}" class="room-selector"><a href="#/talk/room/${room.id}">${room.name}</a></li>`,
);
}
}
const chat_input = document.getElementById("room-chat-input");
async function on_send_message(event) {
event.preventDefault();
chat_input.disabled = true;
const message = chat_input.value.trim();
if (!message) {
chat_input.disabled = false;
return;
}
const room_chat_container =
document.getElementById("room-chat-container");
const room_chat_content = document.getElementById("room-chat-content");
const room_id = room_chat_container.dataset.room_id;
if (!room_id) {
alert("Failed to get room_id!");
chat_input.disabled = false;
return;
}
const now = new Date().toISOString();
const message_event = {
type: "text",
data: {
message,
},
timestamps: {
created: now,
updated: now,
},
};
const temp_message_id = `TEMP-${now}`;
const now_datetime = datetime_to_local(
message_event.timestamps.created,
);
const user = JSON.parse(document.body.dataset.user);
room_chat_content.insertAdjacentHTML(
"beforeend",
`<div id="${temp_message_id}" class="message-container sending from-user-${user.id}">
<div class="info-container">
<div class="avatar-container">
<img src="${user.meta?.avatar ?? "/images/default_avatar.gif"}" alt="user avatar" />
</div>
<div class="username-container">
<span class="username">${user.username ?? "unknown"}</span>
</div>
<div class="datetime-container">
<span class="long">${now_datetime.long}</span>
<span class="short">${now_datetime.short}</span>
</div>
</div>
<div class="message-content-container">${message_event.data.message}</div>
</div>`,
);
const event_response = await api.fetch(`/rooms/${room_id}/events`, {
method: "POST",
json: message_event,
});
if (!event_response.ok) {
alert("FAIL");
chat_input.disabled = false;
return;
}
const authoritative_message_event = await event_response.json();
const temp_message = document.getElementById(temp_message_id);
temp_message.id = authoritative_message_event.id;
temp_message.classList.remove("sending");
const local_datetime = datetime_to_local(
authoritative_message_event.timestamps.created,
);
const long_time = temp_message.querySelector(
".datetime-container .long",
);
const short_time = temp_message.querySelector(
".datetime-container .short",
);
long_time.innerHTML = local_datetime.long;
short_time.innerHTML = local_datetime.short;
chat_input.value = "";
chat_input.disabled = false;
}
const send_button = document.getElementById("room-chat-send");
send_button.addEventListener("click", on_send_message);
chat_input.addEventListener("keypress", (event) => {
if (event.key === "Enter" && !event.shiftKey) {
on_send_message(event);
}
});
const room_create_button = document.getElementById("room-create");
room_create_button.addEventListener("click", async (event) => {
event.preventDefault();
const new_room_element = await get_new_room_element();
new_room_element.focus();
if (document.body.createTextRange) {
const range = document.body.createTextRange();
range.moveToElementText(new_room_element);
range.select();
} else if (window.getSelection) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(new_room_element);
selection.removeAllRanges();
selection.addRange(range);
}
new_room_element.addEventListener("keypress", (event) => {
if (event.keyCode !== 13) {
return;
}
event.preventDefault();
new_room_element.blur();
});
new_room_element.addEventListener("focusout", async () => {
const name =
new_room_element.textContent ?? new_room_element.innerText;
const new_room_response = await api.fetch("/rooms", {
method: "POST",
json: {
name,
},
});
if (!new_room_response.ok) {
const error = await new_room_response.json();
console.dir({ error });
alert(error.message ?? "unknown error!");
return;
}
const new_room = await new_room_response.json();
new_room_element.remove();
const room_list = document.getElementById("room-list");
room_list.insertAdjacentHTML(
"beforeend",
`<li id="room-${new_room.id}" class="room-selector"><a href="#/room/${new_room.id}">${new_room.name}</a></li>`,
);
const room_selectors = document.querySelectorAll(".room-selector");
for (const room_selector of room_selectors) {
room_selector.classList.remove("active");
}
const new_room_selector = document.getElementById(
`room-${new_room.id}`,
);
new_room_selector.classList.add("active");
window.location.hash = `/talk/room/${new_room.id}`;
});
});
});
</script>
</div>
<ul id="room-list"></ul>
</div>
<div id="room-chat-container">
<div id="room-chat-content"></div>
<div id="room-chat-entry-container">
<form action="">
<button aria-label="Attach file">
<i class="icon attachment"></i>
</button>
<textarea id="room-chat-input" class="room-chat-input" rows="1"></textarea>
<button id="room-chat-send" class="primary" aria-label="Send a message">
<i class="icon send"></i>
</button>
</form>
</div>
</div>
</div>
</div>

57
public/tabs/user.html Normal file
View file

@ -0,0 +1,57 @@
<script>
new MutationObserver((mutations, observer) => {
mutations.forEach((mutation) => {
const user_json = document.body.dataset.user;
const user = user_json
? JSON.parse(user_json)
: {
username: "",
meta: {
avatar: "/images/default_avatar.gif",
},
};
const avatars = document.querySelectorAll("[data-bind-user_meta_avatar]");
for (const avatar of avatars) {
const bound_to = avatar.dataset["bind-user_meta_avatar"] ?? "innerHTML";
avatar[bound_to] = user.meta?.avatar ?? "/images/default_avatar.gif";
}
const usernames = document.querySelectorAll("[data-bind-user_username]");
for (const username of usernames) {
const bound_to = username.dataset["bind-user_username"] ?? "innerHTML";
username[bound_to] = user.username;
}
});
}).observe(document.body, {
attributes: true,
attributeFilter: ["data-user"],
});
</script>
<div id="user" class="tab">
<input
type="radio"
name="top-level-tabs"
id="user-tab-input"
class="tab-switch"
data-hash="/profile"
/>
<label for="user-tab-input" class="tab-label"
><div class="icon user"></div>
<div class="label">Profile</div></label
>
<div class="tab-content">
<div class="avatar-container">
<img
id="user-avatar"
src="/images/default_avatar.gif"
alt="User Avatar"
data-bind-user_meta_avatar="src"
/>
</div>
<div class="username-container">
<span class="username" data-bind-user_username></span>
</div>
</div>
</div>

14
public/tabs/work.html Normal file
View file

@ -0,0 +1,14 @@
<div id="work" class="tab">
<input
type="radio"
name="top-level-tabs"
id="work-tab-input"
class="tab-switch"
data-hash="/work"
/>
<label for="work-tab-input" class="tab-label"
><div class="icon work"></div>
<div class="label">Work</div>
</label>
<div class="tab-content">This is the work tab.</div>
</div>