feature: chat is working?

deno.json

@@ -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": {

models/event.ts

@@ -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: {

public/api/rooms/:room_id/events/index.ts

@@ -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, {

public/api/rooms/index.ts

@@ -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({
+	const rooms = (await ROOMS.all({
-		limit
+		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

public/api/users/index.ts

@@ -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, PRECHECK_TABLE, require_user } from '../../../utils/prechecks.ts';
-import { get_session, get_user, 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)

public/api/users/me/index.ts

@@ -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();

public/base.css

@@ -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;

public/index.html

@@ -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>

public/tabs/talk.html

@@ -17,29 +17,55 @@
 				grid-template-columns: auto 1fr;
 			}
 
-			#talk .sidebar {
+			.room-list {
-				position: relative;
+				margin: 1rem 0;
-				min-width: 100px;
+				list-style-type: none;
-				padding-top: 1.5rem;
 			}
 
-			#talk .room {
+			.room-list > li.room a:before {
-				padding: 1rem;
+				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}">
+								render_text_event(message_event, user),
-									<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`, {
@@ -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 () => {
+							editable.addEventListener("focusout", async () => {
-								const name =
+								const name = editable.textContent ?? editable.innerText;
-									new_room_element.textContent ?? new_room_element.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>