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

feature: chat is working?

Browse source
This commit is contained in:
Andy Burke 2025-07-04 12:15:06 -07:00
parent b700251278
commit 200b89954b
9 changed files with 189 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

2
deno.json
View file

@ -7,7 +7,7 @@
"tasks": {
"lint": "deno lint",
"fmt": "deno fmt",
"serve": "FSDB_ROOT=$PWD/.fsdb deno --allow-env --allow-read --allow-write --allow-net jsr:@andyburke/serverus --root ./public",
"serve": "FSDB_ROOT=$PWD/.fsdb TRACE_ERROR_RESPONSES=true SERVERUS_TYPESCRIPT_IMPORT_LOGGING=true deno --allow-env --allow-read --allow-write --allow-net jsr:@andyburke/serverus --root ./public",
"test": "DENO_ENV=test FSDB_ROOT=$PWD/tests/data/$(date --iso-8601=seconds) SERVERUS_ROOT=$PWD/public deno test --allow-env --allow-read --allow-write --allow-net --trace-leaks --fail-fast tests/"
},
"test": {

2
models/event.ts
View file

@ -40,7 +40,7 @@ const ROOM_EVENTS: Record<string, ROOM_EVENT_CACHE_ENTRY> = {};
export function get_events_collection_for_room(room_id: string): FSDB_COLLECTION<EVENT> {
ROOM_EVENTS[room_id] = ROOM_EVENTS[room_id] ?? {
collection: new FSDB_COLLECTION<EVENT>({
name: `rooms/${room_id.substring(0, 14)}/${room_id.substring(0, 36)}/${room_id}/events`,
name: `rooms/${room_id.slice(0, 14)}/${room_id.slice(0, 34)}/${room_id}/events`,
id_field: 'id',
organize: by_lurid,
indexers: {

18
public/api/rooms/:room_id/events/index.ts
View file

@ -56,7 +56,7 @@ export async function GET(request: Request, meta: Record<string, any>): Promise<
limit: Math.min(parseInt(meta.query?.limit ?? '10'), 1_000),
sort,
filter: (entry: WALK_ENTRY<EVENT>) => {
const event_id = path.basename(entry.path).replace(/\.json$/i, '');
const [event_id, event_type] = path.basename(entry.path).replace(/\.json$/i, '').split(':');
if (meta.query.after_id && event_id <= meta.query.after_id) {
return false;
@ -66,6 +66,10 @@ export async function GET(request: Request, meta: Record<string, any>): Promise<
return false;
}
if (meta.query.type && event_type !== meta.query.type) {
return false;
}
return true;
}
};
@ -78,7 +82,7 @@ export async function GET(request: Request, meta: Record<string, any>): Promise<
// long-polling support
if (results.length === 0 && meta.query.wait) {
return new Promise((resolve) => {
return new Promise((resolve, reject) => {
function on_create(create_event: any) {
results.push(create_event.item);
clearTimeout(timeout);
@ -101,6 +105,13 @@ export async function GET(request: Request, meta: Record<string, any>): Promise<
request.signal.addEventListener('abort', () => {
events.off('create', on_create);
});
Deno.addSignalListener('SIGINT', () => {
events.off('create', on_create);
return resolve(Response.json(results, {
status: 200,
headers
}));
});
});
}
@ -142,7 +153,6 @@ export async function POST(req: Request, meta: Record<string, any>): Promise<Res
const event: EVENT = {
type: 'unknown',
...body,
id: lurid(),
creator_id: meta.user.id,
timestamps: {
created: now,
@ -150,6 +160,8 @@ export async function POST(req: Request, meta: Record<string, any>): Promise<Res
}
};
event.id = `${lurid()}:${event.type}`;
await events.create(event);
return Response.json(event, {

12
public/api/rooms/index.ts
View file

@ -4,6 +4,7 @@ import { get_session, get_user, require_user } from '../../../utils/prechecks.ts
import * as CANNED_RESPONSES from '../../../utils/canned_responses.ts';
import { PRECHECK_TABLE } from '../../../utils/prechecks.ts';
import { ROOM, ROOMS } from '../../../models/room.ts';
import { WALK_ENTRY } from 'jsr:@andyburke/fsdb';
export const PRECHECKS: PRECHECK_TABLE = {};
@ -17,9 +18,14 @@ PRECHECKS.GET = [get_session, get_user, require_user, (_req: Request, meta: Reco
}];
export async function GET(_req: Request, meta: Record<string, any>): Promise<Response> {
const limit = Math.min(parseInt(meta.query.limit ?? '100'), 100);
const rooms = await ROOMS.all({
limit
});
const rooms = (await ROOMS.all({
limit,
filter: (entry: WALK_ENTRY<ROOM>) => {
// we push our event collections into the rooms, and fsdb
// doesn't yet filter that out in its all() logic
return entry.path.indexOf('/events/') === -1;
}
})).map((item) => item.load());
return Response.json(rooms, {
status: 200

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

@ -6,8 +6,7 @@ import lurid from 'jsr:@andyburke/lurid';
import { encodeBase64 } from 'jsr:@std/encoding';
import parse_body from '../../../utils/bodyparser.ts';
import { create_new_session, SESSION_RESULT } from '../auth/index.ts';
import { PRECHECKS } from './me/index.ts';
import { get_session, get_user, require_user } from '../../../utils/prechecks.ts';
import { get_session, get_user, PRECHECK_TABLE, require_user } from '../../../utils/prechecks.ts';
import * as CANNED_RESPONSES from '../../../utils/canned_responses.ts';
// TODO: figure out a better solution for doling out permissions
@ -17,6 +16,8 @@ const DEFAULT_USER_PERMISSIONS: string[] = [
'rooms.read'
];
export const PRECHECKS: PRECHECK_TABLE = {};
// GET /api/users - get users
// query parameters:
// partial_id: the partial id subset you would like to match (remember, lurids are lexigraphically sorted)

2
public/api/users/me/index.ts
View file

@ -1,12 +1,12 @@
import * as CANNED_RESPONSES from '../../../../utils/canned_responses.ts';
import { get_session, get_user, PRECHECK_TABLE, require_user } from '../../../../utils/prechecks.ts';
export const PERMISSIONS: Record<string, (req: Request, meta: Record<string, any>) => Promise<boolean>> = {};
export const PRECHECKS: PRECHECK_TABLE = {};
// GET /api/users/me - Get the current user
PRECHECKS.GET = [get_session, get_user, require_user, (_req: Request, meta: Record<string, any>): Response | undefined => {
const can_read_self = meta.user.permissions.includes('self.read');
console.dir({ meta, can_read_self });
if (!can_read_self) {
return CANNED_RESPONSES.permission_denied();

6
public/base.css
View file

@ -41,12 +41,6 @@ dd {
margin-block-end: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
list-style: none;
}
/* Set core body defaults */
body {
min-height: 100vh;

2
public/index.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Social UX</title>
<title>autonomous.contact</title>
<link rel="stylesheet" href="./base.css"></link>
<script src="./js/datetimeutils.js" type="text/javascript"></script>
<script src="./js/locationchange.js" type="text/javascript"></script>

211
public/tabs/talk.html
View file

@ -17,29 +17,55 @@
grid-template-columns: auto 1fr;
}
#talk .sidebar {
position: relative;
min-width: 100px;
padding-top: 1.5rem;
.room-list {
margin: 1rem 0;
list-style-type: none;
}
#talk .room {
padding: 1rem;
.room-list > li.room a:before {
position: absolute;
left: -1.75rem;
top: 0;
font-weight: bold;
font-size: x-large;
content: "#";
color: var(--text);
}
.room-list > li.room a {
position: relative;
display: block;
width: 100%;
min-height: 1.5rem;
line-height: 1.5rem;
font-weight: bold;
font-size: large;
margin-left: 1.75rem;
text-decoration: none;
}
.room-list > li.room.active a {
color: var(--accent);
}
#talk .sidebar {
position: relative;
min-width: 10rem;
}
#talk .sidebar .title {
text-transform: uppercase;
font-size: small;
font-weight: bold;
line-height: 2rem;
}
#talk #room-create {
position: absolute;
top: 1rem;
top: 0.5rem;
right: 0.5rem;
}
#talk .room-selector a {
display: block;
width: 100%;
text-decoration: none;
line-height: 1.5rem;
}
#talk #room-chat-container {
position: relative;
}
@ -122,6 +148,27 @@
font-size: x-small;
}
</style>
<script>
function render_text_event(event, creator) {
const event_datetime = datetime_to_local(event.timestamps.created);
return `<div id="${event.id}" class="message-container sending from-user-${creator.id}">
<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">${event.data.message}</div>
</div>`;
}
</script>
<div class="sidebar resizable">
<div id="room-create" class="clickable" data-requires-permission="rooms.create">
<div class="icon plus"></div>
@ -135,7 +182,7 @@
const room_list = document.getElementById("room-list");
room_list.insertAdjacentHTML(
"beforeend",
`<li id="new-room" class="room-selector" contenteditable="true">New Room</li>`,
`<li id="new-room" class="room"><a href="" contenteditable="true">new room</a></li>`,
);
await new Promise((resolve) => setTimeout(resolve, 1));
@ -143,7 +190,55 @@
return new_room_element;
}
async function append_room_events(events) {
const room_chat_content = document.getElementById("room-chat-content");
const users = {};
for (const event of events) {
users[event.creator_id] =
users[event.creator_id] ??
(await api.fetch(`/users/${event.creator_id}`));
room_chat_content.insertAdjacentHTML(
"beforeend",
render_text_event(event, users[event.creator_id]),
);
}
console.dir({
users,
events,
room_chat_content,
});
}
let room_polling_request_abort_controller = null;
async function poll_for_new_events() {
const room_chat_content = document.getElementById("room-chat-content");
const room_id = room_chat_content.dataset.room_id;
const last_message_id = room_chat_content.dataset.last_message_id;
const message_polling_url = `/rooms/${room_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
api.fetch(message_polling_url, {
signal: room_polling_request_abort_controller.signal,
})
.then((new_events) => {
const room;
append_room_events(new_events);
poll_for_new_events(room_id);
})
.catch((error) => {
// TODO: poll again? back off?
console.error(error);
});
}
async function load_room(room_id) {
if (room_polling_request_abort_controller) {
room_polling_request_abort_controller.abort();
room_polling_request_abort_controller = null;
last_message_id = null;
}
const room_response = await api.fetch(`/rooms/${room_id}`);
if (!room_response.ok) {
const error = await room_response.json();
@ -152,26 +247,48 @@
}
const room = await room_response.json();
const room_chat_content = document.getElementById("room-chat-content");
const events_response = await api.fetch(`/rooms/${room_id}/events`);
room_chat_content.innerHTML = "";
const events_response = await api.fetch(
`/rooms/${room_id}/events?type=chat&limit=100&sort=newest`,
);
if (!events_response.ok) {
const error = await room_response.json();
alert(error.message ?? JSON.stringify(error));
return;
}
const events = (await events_response.json()).reverse();
append_room_events(events);
last_message_id = events.length ? events[events.length - 1].id : null;
room_polling_request_abort_controller = new AbortController();
poll_for_new_events(room_id);
}
// 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 () {
function check_for_room_in_url() {
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;
});
const room_selectors = document.querySelectorAll("li.room");
for (const room_selector of room_selectors) {
room_selector.classList.remove("active");
}
const room_selector = document.getElementById(`room-selector-${room_id}`);
room_selector.classList.add("active");
load_room(room_id);
}
window.addEventListener("locationchange", check_for_room_in_url);
document.addEventListener("DOMContentLoaded", async () => {
const rooms_response = await api.fetch("/rooms");
@ -182,7 +299,7 @@
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>`,
`<li id="room-selector-${room.id}" class="room"><a href="#/talk/room/${room.id}">${room.name}</a></li>`,
);
}
}
@ -214,7 +331,8 @@
const now = new Date().toISOString();
const message_event = {
type: "text",
id: `TEMP-${now}`,
type: "chat",
data: {
message,
},
@ -224,30 +342,11 @@
},
};
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>`,
render_text_event(message_event, user),
);
const event_response = await api.fetch(`/rooms/${room_id}/events`, {
@ -263,7 +362,7 @@
const authoritative_message_event = await event_response.json();
const temp_message = document.getElementById(temp_message_id);
const temp_message = document.getElementById(message_event.id);
temp_message.id = authoritative_message_event.id;
temp_message.classList.remove("sending");
@ -296,31 +395,32 @@
event.preventDefault();
const new_room_element = await get_new_room_element();
new_room_element.focus();
const editable = new_room_element.querySelector("[contenteditable]");
editable.focus();
if (document.body.createTextRange) {
const range = document.body.createTextRange();
range.moveToElementText(new_room_element);
range.moveToElementText(editable);
range.select();
} else if (window.getSelection) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(new_room_element);
range.selectNodeContents(editable);
selection.removeAllRanges();
selection.addRange(range);
}
new_room_element.addEventListener("keypress", (event) => {
editable.addEventListener("keypress", (event) => {
if (event.keyCode !== 13) {
return;
}
event.preventDefault();
new_room_element.blur();
editable.blur();
});
new_room_element.addEventListener("focusout", async () => {
const name =
new_room_element.textContent ?? new_room_element.innerText;
editable.addEventListener("focusout", async () => {
const name = editable.textContent ?? editable.innerText;
const new_room_response = await api.fetch("/rooms", {
method: "POST",
@ -343,26 +443,31 @@
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>`,
`<li id="room-selector-${new_room.id}" class="room"><a href="#/room/${new_room.id}">${new_room.name}</a></li>`,
);
const room_selectors = document.querySelectorAll(".room-selector");
const room_selectors = document.querySelectorAll("li.room");
for (const room_selector of room_selectors) {
room_selector.classList.remove("active");
}
const new_room_selector = document.getElementById(
`room-${new_room.id}`,
`room-selector-${new_room.id}`,
);
new_room_selector.classList.add("active");
window.location.hash = `/talk/room/${new_room.id}`;
});
});
check_for_room_in_url();
});
</script>
</div>
<ul id="room-list"></ul>
<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>